Merge pull request #7146 from abpframework/feat/6874

feat: add page alert service and use it in theme-basic

npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html

@@ -1,7 +1,7 @@
 <nav
   class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm flex-column flex-md-row mb-4"
   id="main-navbar"
-  style="min-height: 4rem;"
+  style="min-height: 4rem"
 >
   <div class="container">
     <abp-logo *abpReplaceableTemplate="{ componentKey: logoComponentKey }"></abp-logo>
@@ -44,5 +44,7 @@
 
 <!-- [@slideFromBottom]="outlet.isActivated && outlet.activatedRoute?.routeConfig?.path" TODO: throws ExpressionChangedAfterItHasBeenCheck when animation is active. It should be fixed -->
 <div class="container">
+  <abp-page-alert-container></abp-page-alert-container>
+
   <router-outlet #outlet="outlet"></router-outlet>
 </div>

npm/ng-packs/packages/theme-basic/src/lib/components/index.ts

@@ -7,3 +7,4 @@ export * from './nav-items/languages.component';
 export * from './nav-items/nav-items.component';
 export * from './routes/routes.component';
 export * from './validation-error/validation-error.component';
+export * from './page-alert-container/page-alert-container.component';

npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html

@@ -0,0 +1,22 @@
+<ng-container *ngFor="let alert of service.alerts$ | async; let i = index">
+  <div
+    class="alert alert-{{ alert.type }} fade show"
+    [ngClass]="{ 'alert-dismissible fade show': alert.dismissible }"
+    role="alert"
+  >
+    <h4 class="alert-heading" *ngIf="alert.title">
+      {{ alert.title | abpLocalization: alert.titleLocalizationParams }}
+    </h4>
+    {{ alert.message | abpLocalization: alert.messageLocalizationParams }}
+    <button
+      *ngIf="alert.dismissible"
+      type="button"
+      class="close"
+      data-dismiss="alert"
+      aria-label="Close"
+      (click)="service.remove(i)"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+</ng-container>

npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts

@@ -0,0 +1,11 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { PageAlertService } from '@abp/ng.theme.shared';
+
+@Component({
+  selector: 'abp-page-alert-container',
+  templateUrl: './page-alert-container.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class PageAlertContainerComponent {
+  constructor(public service: PageAlertService) {}
+}

npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts

@@ -19,6 +19,7 @@ import { RoutesComponent } from './components/routes/routes.component';
 import { ValidationErrorComponent } from './components/validation-error/validation-error.component';
 import { BASIC_THEME_NAV_ITEM_PROVIDERS } from './providers/nav-item.provider';
 import { BASIC_THEME_STYLES_PROVIDERS } from './providers/styles.provider';
+import { PageAlertContainerComponent } from './components/page-alert-container/page-alert-container.component';
 
 export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
 
@@ -31,6 +32,7 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt
     RoutesComponent,
     CurrentUserComponent,
     LanguagesComponent,
+    PageAlertContainerComponent,
   ],
   exports: [
     ...LAYOUTS,
@@ -40,6 +42,7 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt
     RoutesComponent,
     CurrentUserComponent,
     LanguagesComponent,
+    PageAlertContainerComponent,
   ],
   imports: [
     CoreModule,

npm/ng-packs/packages/theme-shared/src/lib/services/index.ts

@@ -2,3 +2,4 @@ export * from './confirmation.service';
 export * from './modal.service';
 export * from './toaster.service';
 export * from './nav-items.service';
+export * from './page-alert.service';

npm/ng-packs/packages/theme-shared/src/lib/services/page-alert.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { InternalStore } from '@abp/ng.core';
+
+export interface PageAlert {
+  type: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+  message: string;
+  dismissible?: boolean;
+  title?: string;
+  messageLocalizationParams?: string[];
+  titleLocalizationParams?: string[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class PageAlertService {
+  private alerts = new InternalStore<PageAlert[]>([]);
+
+  alerts$ = this.alerts.sliceState(state => state);
+
+  constructor() {}
+
+  show(alert: PageAlert) {
+    const newAlert: PageAlert = {
+      ...alert,
+      dismissible: alert.dismissible ?? true,
+    };
+    this.alerts.set([newAlert, ...this.alerts.state]);
+  }
+
+  remove(index: number) {
+    const alerts = [...this.alerts.state];
+    alerts.splice(index, 1);
+    this.alerts.set(alerts);
+  }
+}