From 3c9a9b9fc0987806fb3a2b16a60d1bde1e2871af Mon Sep 17 00:00:00 2001
From: bnymncoskuner <bnymncoskuner@gmail.com>
Date: Mon, 11 Jan 2021 19:26:56 +0300
Subject: [PATCH 1/2] feat: add page alert service and use it in theme-basic

---
 .../application-layout.component.html         |  4 ++-
 .../theme-basic/src/lib/components/index.ts   |  1 +
 .../page-alert-container.component.html       | 22 ++++++++++++
 .../page-alert-container.component.ts         | 11 ++++++
 .../theme-basic/src/lib/theme-basic.module.ts |  3 ++
 .../theme-shared/src/lib/services/index.ts    |  1 +
 .../src/lib/services/page-alert.service.ts    | 34 +++++++++++++++++++
 7 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html
 create mode 100644 npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/services/page-alert.service.ts

diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
index eb68dc7df0..7892d43a00 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
+++ b/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>
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/index.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/index.ts
index 6c4de6cf21..3a379e812b 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/index.ts
+++ b/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';
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html
new file mode 100644
index 0000000000..6f2c62bf11
--- /dev/null
+++ b/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>
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts
new file mode 100644
index 0000000000..9dc1966337
--- /dev/null
+++ b/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) {}
+}
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts b/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts
index 70adcf764e..388a8cf5a2 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts
+++ b/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,
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/index.ts
index 29a2ca9668..1b39fcc0f0 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/index.ts
+++ b/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';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/page-alert.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/page-alert.service.ts
new file mode 100644
index 0000000000..4fed66263b
--- /dev/null
+++ b/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 type 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);
+  }
+}

From 76bc3978fc50853a91afe99f53dcf47e9a0ce349 Mon Sep 17 00:00:00 2001
From: bnymncoskuner <bnymncoskuner@gmail.com>
Date: Tue, 12 Jan 2021 10:14:06 +0300
Subject: [PATCH 2/2] fix: convert type to interface because of lint err

---
 .../theme-shared/src/lib/services/page-alert.service.ts       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/page-alert.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/page-alert.service.ts
index 4fed66263b..c66d02c004 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/page-alert.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/page-alert.service.ts
@@ -1,14 +1,14 @@
 import { Injectable } from '@angular/core';
 import { InternalStore } from '@abp/ng.core';
 
-export type PageAlert = {
+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 {