From 97c758fa4f56bbfccbc1f967d91911ec76231fc1 Mon Sep 17 00:00:00 2001
From: ewandor <ewandor@dorfsvald.net>
Date: Sun, 12 Feb 2023 14:26:56 +0100
Subject: [PATCH] Adding flashmessages module

---
 front/app/src/app/app.component.html          |  2 +-
 front/app/src/app/app.module.ts               |  7 +++++--
 .../flashmessages/flashmessages.component.css |  7 +++++++
 .../flashmessages.component.html              |  5 +++++
 .../flashmessages/flashmessages.component.ts  | 11 ++++++++++
 .../flashmessages/flashmessages.service.ts    | 20 +++++++++++++++++++
 6 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 front/app/src/app/layout/flashmessages/flashmessages.component.css
 create mode 100644 front/app/src/app/layout/flashmessages/flashmessages.component.html
 create mode 100644 front/app/src/app/layout/flashmessages/flashmessages.component.ts
 create mode 100644 front/app/src/app/layout/flashmessages/flashmessages.service.ts

diff --git a/front/app/src/app/app.component.html b/front/app/src/app/app.component.html
index 1cc19ffa..85c4857e 100644
--- a/front/app/src/app/app.component.html
+++ b/front/app/src/app/app.component.html
@@ -7,9 +7,9 @@
         <sidenav></sidenav>
       </div>
       <div class="col py-3">
+        <flashmessages></flashmessages>
         <router-outlet></router-outlet>
       </div>
     </div>
   </div>
 </main>
-
diff --git a/front/app/src/app/app.module.ts b/front/app/src/app/app.module.ts
index ba4cc180..b1fae44e 100644
--- a/front/app/src/app/app.module.ts
+++ b/front/app/src/app/app.module.ts
@@ -7,11 +7,14 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 import { SidenavComponent } from "./layout/sidenav/sidenav.component";
+import { FlashmessagesComponent } from "./layout/flashmessages/flashmessages.component";
+import { FlashmessagesService } from "./layout/flashmessages/flashmessages.service";
 
 @NgModule({
   declarations: [
     AppComponent,
-    SidenavComponent
+    SidenavComponent,
+    FlashmessagesComponent
   ],
   imports: [
     BrowserModule,
@@ -19,7 +22,7 @@ import { SidenavComponent } from "./layout/sidenav/sidenav.component";
     NgbModule,
     NgxBootstrapIconsModule.pick(allIcons),
   ],
-  providers: [],
+  providers: [FlashmessagesService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/front/app/src/app/layout/flashmessages/flashmessages.component.css b/front/app/src/app/layout/flashmessages/flashmessages.component.css
new file mode 100644
index 00000000..66a3f8d5
--- /dev/null
+++ b/front/app/src/app/layout/flashmessages/flashmessages.component.css
@@ -0,0 +1,7 @@
+:host {
+  position: fixed;
+  top: 0;
+  right: 0;
+  margin: 0.5em;
+  z-index: 1200;
+}
\ No newline at end of file
diff --git a/front/app/src/app/layout/flashmessages/flashmessages.component.html b/front/app/src/app/layout/flashmessages/flashmessages.component.html
new file mode 100644
index 00000000..a2f7f2f7
--- /dev/null
+++ b/front/app/src/app/layout/flashmessages/flashmessages.component.html
@@ -0,0 +1,5 @@
+<ngb-toast
+  *ngFor="let flashmessage of flashmessagesService.toasts"
+  [header]="flashmessage.header" [autohide]="true" [delay]="flashmessage.delay || 5000"
+  (hiddden)="flashmessagesService.remove(flashmessage)"
+>{{flashmessage.body}}</ngb-toast>
diff --git a/front/app/src/app/layout/flashmessages/flashmessages.component.ts b/front/app/src/app/layout/flashmessages/flashmessages.component.ts
new file mode 100644
index 00000000..866c195b
--- /dev/null
+++ b/front/app/src/app/layout/flashmessages/flashmessages.component.ts
@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+import { FlashmessagesService } from "./flashmessages.service";
+
+@Component({
+    selector: "flashmessages",
+    templateUrl: "./flashmessages.component.html",
+    styleUrls: ["./flashmessages.component.css"]
+})
+export class FlashmessagesComponent {
+    constructor(public flashmessagesService: FlashmessagesService) {}
+}
diff --git a/front/app/src/app/layout/flashmessages/flashmessages.service.ts b/front/app/src/app/layout/flashmessages/flashmessages.service.ts
new file mode 100644
index 00000000..59d50c42
--- /dev/null
+++ b/front/app/src/app/layout/flashmessages/flashmessages.service.ts
@@ -0,0 +1,20 @@
+import {Injectable} from "@angular/core";
+
+export interface Flashmessage {
+  header: string;
+  body: string;
+  delay?: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class FlashmessagesService {
+  toasts: Flashmessage[] = [];
+
+  show(header: string, body: string) {
+    this.toasts.push({ header, body });
+  }
+
+  remove(toast: Flashmessage) {
+    this.toasts = this.toasts.filter(t => t != toast);
+  }
+}
\ No newline at end of file