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
+    })
+  }
+}