feat: Added notification dialog on frontend

src/app/admin-view/notifications/outbox/message/message.component.html

@@ -0,0 +1,31 @@
+<mat-card>
+    <mat-card-header>
+        <mat-card-title-group>
+            <mat-card-title>
+                {{item.title}}
+            </mat-card-title>
+            <mat-card-subtitle>{{item.sentDate.format('[Wysłano] dddd DD MMMM YYYYr. o HH:mm')}}</mat-card-subtitle>
+        </mat-card-title-group>
+    </mat-card-header>
+    <mat-card-content>
+        <p *ngIf="body">
+            {{body}}
+        </p>
+        <hr>
+        <ul>
+            @for (user of rcpts; track $index) {
+            <li>
+                <span *ngIf="user.room">{{user.room}}: </span>{{user.fname}} {{user.surname}} <span
+                    style="color: gray">({{user.uname}})</span>
+            </li>
+            }
+        </ul>
+    </mat-card-content>
+    <mat-card-footer>
+        <mat-card-actions>
+            <button mat-stroked-button (click)="getMessage()" *ngIf="!body">Wczytaj treść</button>
+            <button mat-stroked-button (click)="getRcpts()" *ngIf="!rcpts">Wczytaj odbiorców</button>
+            <mat-spinner diameter="32" color="accent" *ngIf="loading"></mat-spinner>
+        </mat-card-actions>
+    </mat-card-footer>
+</mat-card>

src/app/admin-view/notifications/outbox/message/message.component.scss

@@ -0,0 +1,3 @@
+mat-card-title {
+    font-size: 24pt;
+}

src/app/admin-view/notifications/outbox/message/message.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessageComponent } from './message.component';
+
+describe('MessageComponent', () => {
+  let component: MessageComponent;
+  let fixture: ComponentFixture<MessageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MessageComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(MessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin-view/notifications/outbox/message/message.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input } from '@angular/core';
+import { AdminCommService } from 'src/app/admin-view/admin-comm.service';
+
+@Component({
+  selector: 'app-message',
+  templateUrl: './message.component.html',
+  styleUrl: './message.component.scss'
+})
+export class MessageComponent {
+  @Input() item!: {_id: string, sentDate: moment.Moment, title: string}
+  body?: string
+  rcpts?: {_id: string, uname: string, room?: string, fname?: string, surname?: string}[]
+  loading: boolean = false
+  constructor (readonly acu: AdminCommService) {}
+
+  getMessage() {
+    this.loading = true
+    this.acu.notif.outbox.getBody(this.item._id).subscribe(v => {
+      this.body = v
+      this.loading = false
+    })
+  }
+
+  getRcpts() {
+    this.loading = true
+    this.acu.notif.outbox.getRcpts(this.item._id).subscribe(v => {
+      this.rcpts = v
+      this.loading = false
+    })
+  }
+}

src/app/admin-view/notifications/outbox/outbox.component.html

@@ -1,28 +1,6 @@
 <p>Wysłane wiadomości:</p>
 <div class="cardContainer">
     @for (item of messages; track $index) {
-        <mat-card>
-            <mat-card-header>
-                <mat-card-title-group>
-                    <mat-card-title>
-                        {{item.message.title}}
-                    </mat-card-title>
-                    <mat-card-subtitle>{{item.sentDate.format('[Wysłano] dddd DD MMMM YYYYr. o HH:mm')}}</mat-card-subtitle>
-                </mat-card-title-group>
-            </mat-card-header>
-            <mat-card-content>
-                <p>
-                    {{item.message.body}}
-                </p>
-                <hr>
-                <ul>
-                    @for (user of item.rcpt; track $index) {
-                        <li>
-                            <span *ngIf="user.room">{{user.room}}: </span>{{user.fname}} {{user.surname}} <span style="color: gray" >({{user.uname}})</span>
-                        </li>
-                    }
-                </ul>
-            </mat-card-content>
-        </mat-card>
+        <app-message [item]="item"></app-message>
     }
 </div>

src/app/admin-view/notifications/outbox/outbox.component.scss

@@ -3,8 +3,4 @@
     flex-wrap: wrap;
     gap: 1ch;
     margin: 1ch;
-}
-
-mat-card-title {
-    font-size: 24pt;
 }

src/app/admin-view/notifications/outbox/outbox.component.ts

@@ -11,7 +11,11 @@ import * as moment from 'moment';
 })
 export class OutboxComponent implements OnInit {
 
-  messages!: any[]
+  messages!: {
+    _id: string;
+    sentDate: moment.Moment;
+    title: string;
+  }[]
 
   constructor (private readonly acs: AdminCommService, private toolbar: ToolbarService, private router: Router, private route: ActivatedRoute ) {
     this.toolbar.comp = this