feat: Added notifications outbox to admin panel

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

@@ -1,4 +1,3 @@
-<!-- TODO: Remake the notifications module -->
 <form [formGroup]="form" (ngSubmit)="submit()">
     <div formGroupName="recp">
         <mat-radio-group formControlName="type">

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

@@ -1,20 +1,31 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { AdminCommService } from '../admin-comm.service';
 import { Notification } from 'src/app/types/notification';
 import { Group } from 'src/app/types/group';
 import { LocalStorageService } from 'src/app/services/local-storage.service';
+import { ToolbarService } from '../toolbar/toolbar.service';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-notifications',
   templateUrl: './notifications.component.html',
   styleUrls: ['./notifications.component.scss']
 })
-export class NotificationsComponent implements OnInit {
+export class NotificationsComponent implements OnInit, OnDestroy {
 
   groups!: Group[]
 
-  constructor (private readonly acs: AdminCommService, readonly ls: LocalStorageService) { }
+  constructor (private readonly acs: AdminCommService, readonly ls: LocalStorageService, private toolbar: ToolbarService, private router: Router, private route: ActivatedRoute ) {
+    this.toolbar.comp = this
+    this.toolbar.menu = [
+      { title: "Wysłane", fn: "outbox", icon: "outbox" }
+    ]
+  }
+  
+  outbox() {
+    this.router.navigate(["outbox"], { relativeTo: this.route })
+  }
 
   ngOnInit(): void {
     this.acs.notif.getGroups().subscribe((v) => {
@@ -22,6 +33,15 @@ export class NotificationsComponent implements OnInit {
     })
   }
 
+  ngOnDestroy(): void {
+    this.toolbar.comp = undefined
+    this.toolbar.menu = undefined
+  }
+
+  public inbox() {
+    
+  }
+
   success?: { sent: number; possible: number; };
 
   form = new FormGroup<NotificationForm>({

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

@@ -0,0 +1,28 @@
+<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>
+    }
+</div>

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

@@ -0,0 +1,10 @@
+.cardContainer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1ch;
+    margin: 1ch;
+}
+
+mat-card-title {
+    font-size: 24pt;
+}

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

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

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

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { AdminCommService } from '../../admin-comm.service';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ToolbarService } from '../../toolbar/toolbar.service';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-outbox',
+  templateUrl: './outbox.component.html',
+  styleUrl: './outbox.component.scss'
+})
+export class OutboxComponent implements OnInit {
+
+  messages!: any[]
+
+  constructor (private readonly acs: AdminCommService, private toolbar: ToolbarService, private router: Router, private route: ActivatedRoute ) {
+    this.toolbar.comp = this
+    this.toolbar.menu = [
+      { title: "Powiadomienia", fn: "goBack", icon: "arrow_back" }
+    ]
+  }
+
+  goBack() {
+    this.router.navigate(['../'], {relativeTo: this.route})
+  }
+
+  ngOnInit(): void {
+    this.acs.notif.outbox.getSent().subscribe((v) => {
+      this.messages = v.map(i => {
+        return {
+          ...i, 
+          sentDate: moment(i.sentDate)
+        }
+      })
+    })
+  }
+
+}