Delete incident

client/stillbox/src/app/incidents/incident/incident.component.html

@@ -2,7 +2,17 @@
 <mat-card class="incident" appearance="outlined">
   <div class="cardHdr">
     <h1>{{ inc?.name }}</h1>
-    <a (click)="editIncident(incID)"><mat-icon>edit</mat-icon></a>
+    <button mat-icon-button (click)="editIncident(incID)">
+      <mat-icon>edit</mat-icon>
+    </button>
+    <button mat-icon-button [matMenuTriggerFor]="moreMenu">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #moreMenu="matMenu">
+      <button class="deleteItem" mat-menu-item (click)="deleteIncident(incID)">
+        Delete
+      </button>
+    </mat-menu>
   </div>
   <div class="inc-heading">
     <div class="field field-start field-label">Start</div>

client/stillbox/src/app/incidents/incident/incident.component.scss

@@ -21,6 +21,7 @@
 .cardHdr {
   display: flex;
   flex-flow: row wrap;
+  margin-bottom: 24px;
 }
 
 .field {
@@ -37,6 +38,7 @@
 
 .cardHdr h1 {
   flex: 1 1;
+  margin: 0;
 }
 
 .cardHdr a {

client/stillbox/src/app/incidents/incident/incident.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject } from '@angular/core';
 import { tap } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
+import { CommonModule, Location } from '@angular/common';
 import { BehaviorSubject, merge, Subscription } from 'rxjs';
 import { Observable } from 'rxjs';
 import {
@@ -38,6 +38,7 @@ import {
 } from '../../calls/calls.component';
 import { CallPlayerComponent } from '../../calls/player/call-player/call-player.component';
 import { FmtDatePipe } from '../incidents.component';
+import { MatMenuModule } from '@angular/material/menu';
 
 export interface EditDialogData {
   incID: string;
@@ -144,6 +145,7 @@ export class IncidentEditDialogComponent {
     CallPlayerComponent,
     FmtDatePipe,
     MatTableModule,
+    MatMenuModule,
   ],
   templateUrl: './incident.component.html',
   styleUrl: './incident.component.scss',
@@ -171,6 +173,7 @@ export class IncidentComponent {
   constructor(
     private route: ActivatedRoute,
     private incSvc: IncidentsService,
+    private location: Location,
   ) {}
 
   saveIncName(ev: Event) {}
@@ -197,6 +200,19 @@ export class IncidentComponent {
     dialogRef.afterClosed().subscribe(this.incPrime);
   }
 
+  deleteIncident(incID: string) {
+    if (confirm('Are you sure you want to delete this incident?')) {
+      this.incSvc.deleteIncident(incID).subscribe({
+        next: () => {
+          this.location.back();
+        },
+        error: (err) => {
+          alert(err);
+        },
+      });
+    }
+  }
+
   ngOnDestroy() {
     this.subscriptions.unsubscribe();
   }

client/stillbox/src/styles.scss

@@ -6,6 +6,7 @@
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
+@include mat.core();
 @include mat.elevation-classes();
 @include mat.app-background();
 
@@ -237,3 +238,8 @@ textarea {
   margin-bottom: 40px;
   justify-content: center;
 }
+
+.mat-mdc-menu-item.deleteItem {
+  color: white;
+  background-color: red;
+}