chore(demo): improve documentation page /notification

taiga-family · Oct 2, 2023 · 89ab26e · 89ab26e
1 parent c01019d
commit 89ab26e
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 14 deletions.
diff --git a/apps/demo/src/app/pages/home/home-page.component.html b/apps/demo/src/app/pages/home/home-page.component.html
@@ -251,7 +251,11 @@ <h2>View Transition</h2>
     />
 </a>
 
-<a class="link" [routerLink]="['/', link.Notification]">
+<a
+    class="link"
+    [routerLink]="['/', link.Notification]"
+    [class.not-supported]="!notificationSupport"
+>
     <div>
         <h2>Notification</h2>
         A library for declarative use of

diff --git a/apps/demo/src/app/pages/home/home-page.component.ts b/apps/demo/src/app/pages/home/home-page.component.ts
@@ -1,12 +1,13 @@
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {DemoPath} from '@demo/constants';
 import {WEB_AUDIO_SUPPORT} from '@ng-web-apis/audio';
 import {GEOLOCATION_SUPPORT} from '@ng-web-apis/geolocation';
 import {INTERSECTION_OBSERVER_SUPPORT} from '@ng-web-apis/intersection-observer';
 import {MIDI_SUPPORT} from '@ng-web-apis/midi';
+import {NOTIFICATION_SUPPORT} from '@ng-web-apis/notification';
 import {PAYMENT_REQUEST_SUPPORT} from '@ng-web-apis/payment-request';
 import {PERMISSIONS_SUPPORT} from '@ng-web-apis/permissions';
 import {RESIZE_OBSERVER_SUPPORT} from '@ng-web-apis/resize-observer';
-import {DemoPath} from '@demo/constants';
 
 @Component({
     selector: `home-page`,
@@ -25,5 +26,6 @@ export class HomePageComponent {
         @Inject(MIDI_SUPPORT) readonly midiSupport: boolean,
         @Inject(WEB_AUDIO_SUPPORT) readonly audioSupport: boolean,
         @Inject(PERMISSIONS_SUPPORT) readonly permissionsSupport: boolean,
+        @Inject(NOTIFICATION_SUPPORT) readonly notificationSupport: boolean,
     ) {}
 }
diff --git a/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.html b/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.html
@@ -1 +1,17 @@
-<button tuiButton (click)="requestPermission()">Request permission</button>
+<ng-container [ngSwitch]="notificationPermissionState$ | async">
+    <tui-badge
+        *ngSwitchCase="'granted'"
+        status="success"
+        value="Permission is granted"
+    ></tui-badge>
+
+    <tui-badge
+        *ngSwitchCase="'denied'"
+        status="error"
+        value="Permission is denied"
+    ></tui-badge>
+
+    <button *ngSwitchDefault tuiButton (click)="requestPermission()">
+        Request permission
+    </button>
+</ng-container>
diff --git a/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.ts b/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.ts
@@ -1,16 +1,23 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {NotificationService} from '@ng-web-apis/notification';
+import {PermissionsService} from '@ng-web-apis/permissions';
 
 @Component({
     selector: 'notification-page-example-1',
     templateUrl: './index.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NotificationPageExample1 {
-    constructor(private readonly notificationAPIService: NotificationService) {}
+    readonly notificationPermissionState$ =
+        this.permissionsService.state('notifications');
+
+    constructor(
+        private readonly notificationService: NotificationService,
+        private readonly permissionsService: PermissionsService,
+    ) {}
 
     requestPermission(): void {
-        this.notificationAPIService.requestPermission().subscribe({
+        this.notificationService.requestPermission().subscribe({
             next: permission =>
                 console.info(
                     'Permission status:',

diff --git a/apps/demo/src/app/pages/notification/examples/02-create-notification/index.ts b/apps/demo/src/app/pages/notification/examples/02-create-notification/index.ts
@@ -8,15 +8,15 @@ import {filter, switchMap} from 'rxjs/operators';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NotificationPageExample2 {
-    constructor(private readonly notificationAPIService: NotificationService) {}
+    constructor(private readonly notificationService: NotificationService) {}
 
     sendNotification(): void {
-        this.notificationAPIService
+        this.notificationService
             .requestPermission()
             .pipe(
                 filter(permission => permission === 'granted'),
                 switchMap(() =>
-                    this.notificationAPIService.open('Web APIs for Angular', {
+                    this.notificationService.open('Web APIs for Angular', {
                         body: 'High quality lightweight wrappers for native Web APIs for idiomatic use with Angular',
                         icon: 'assets/images/web-api.svg',
                     }),

diff --git a/apps/demo/src/app/pages/notification/examples/03-close-notification/index.ts b/apps/demo/src/app/pages/notification/examples/03-close-notification/index.ts
@@ -9,15 +9,15 @@ import {filter, switchMap, takeUntil} from 'rxjs/operators';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NotificationPageExample3 {
-    constructor(private readonly notificationAPIService: NotificationService) {}
+    constructor(private readonly notificationService: NotificationService) {}
 
     sendNotification(): void {
-        this.notificationAPIService
+        this.notificationService
             .requestPermission()
             .pipe(
                 filter(permission => permission === 'granted'),
                 switchMap(() =>
-                    this.notificationAPIService.open('Close me, please!', {
+                    this.notificationService.open('Close me, please!', {
                         requireInteraction: true,
                     }),
                 ),

diff --git a/apps/demo/src/app/pages/notification/examples/04-listen-notification-events/index.ts b/apps/demo/src/app/pages/notification/examples/04-listen-notification-events/index.ts
@@ -9,15 +9,15 @@ import {filter, switchMap} from 'rxjs/operators';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NotificationPageExample4 {
-    constructor(private readonly notificationAPIService: NotificationService) {}
+    constructor(private readonly notificationService: NotificationService) {}
 
     sendNotification(): void {
-        this.notificationAPIService
+        this.notificationService
             .requestPermission()
             .pipe(
                 filter(permission => permission === 'granted'),
                 switchMap(() =>
-                    this.notificationAPIService.open(`Click me, please`, {
+                    this.notificationService.open(`Click me, please`, {
                         body: `Then open console and investigate property "target"`,
                         requireInteraction: true,
                         data: `Randomly generate number: ${Math.random().toFixed(2)}`,

diff --git a/apps/demo/src/app/pages/notification/notification-page.module.ts b/apps/demo/src/app/pages/notification/notification-page.module.ts
@@ -1,7 +1,9 @@
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiButtonModule, TuiNotificationModule} from '@taiga-ui/core';
+import {TuiBadgeModule} from '@taiga-ui/kit';
 import {NotificationPageExample1} from './examples/01-getting-permission';
 import {NotificationPageExample2} from './examples/02-create-notification';
 import {NotificationPageExample3} from './examples/03-close-notification';
@@ -10,7 +12,9 @@ import {NotificationPageComponent} from './notification-page.component';
 
 @NgModule({
     imports: [
+        CommonModule,
         TuiAddonDocModule,
+        TuiBadgeModule,
         TuiButtonModule,
         TuiNotificationModule,
         RouterModule.forChild([{path: '', component: NotificationPageComponent}]),