New incident

client/stillbox/src/app/calls/calls.component.html

@@ -90,8 +90,12 @@
         <mat-icon>playlist_add</mat-icon>
       </button>
       <mat-menu #callMenu="matMenu">
-        <button mat-menu-item>Add to new incident...</button>
+        <button mat-menu-item (click)="addToNewInc($event)">
-        <button mat-menu-item>Add to existing incident...</button>
+          Add to new incident
+        </button>
+        <button mat-menu-item (click)="addToExistingInc($event)">
+          Add to existing incident
+        </button>
       </mat-menu>
     </div>
   </form>

client/stillbox/src/app/calls/calls.component.ts

@@ -1,4 +1,10 @@
-import { Component, Pipe, PipeTransform, ViewChild } from '@angular/core';
+import {
+  Component,
+  inject,
+  Pipe,
+  PipeTransform,
+  ViewChild,
+} from '@angular/core';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTableModule } from '@angular/material/table';
@@ -31,6 +37,16 @@ import { ToolbarContextService } from '../navigation/toolbar-context.service';
 import { MatSelectModule } from '@angular/material/select';
 import { CallPlayerComponent } from './player/call-player/call-player.component';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatDialog } from '@angular/material/dialog';
+import {
+  EditDialogData,
+  IncidentEditDialogComponent,
+} from '../incidents/incident/incident.component';
+import {
+  CallIncidentParams,
+  IncidentsService,
+} from '../incidents/incidents.service';
+import { IncidentRecord } from '../incidents';
 
 @Pipe({
   name: 'grabDate',
@@ -151,6 +167,7 @@ export class CallsComponent {
   callsResult = new BehaviorSubject(new Array<CallRecord>(0));
   @ViewChild('paginator') paginator!: MatPaginator;
   count = 0;
+  dialog = inject(MatDialog);
   page = 0;
   perPage = 25;
   pageSizeOptions = [25, 50, 75, 100, 200];
@@ -193,6 +210,7 @@ export class CallsComponent {
     private prefsSvc: PrefsService,
     public tcSvc: ToolbarContextService,
     public tgSvc: TalkgroupService,
+    public incSvc: IncidentsService,
   ) {
     this.tcSvc.showFilterButton();
   }
@@ -340,4 +358,29 @@ export class CallsComponent {
     this.form.controls['start'].setValue(this.lTime(new Date()));
     this.form.controls['duration'].setValue(0);
   }
+
+  addToNewInc(ev: Event) {
+    const dialogRef = this.dialog.open(IncidentEditDialogComponent, {
+      data: <EditDialogData>{
+        incID: '',
+        new: true,
+      },
+    });
+    dialogRef.afterClosed().subscribe((res: IncidentRecord) => {
+      this.incSvc
+        .addRemoveCalls(res.id, <CallIncidentParams>{
+          add: this.selection.selected.map((s) => s.id),
+        })
+        .subscribe({
+          next: () => {
+            this.selection.clear();
+          },
+          error: (err) => {
+            alert(err);
+          },
+        });
+    });
+  }
+
+  addToExistingInc(ev: Event) {}
 }

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

@@ -1,11 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { tap } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
-import {
+import { BehaviorSubject, merge, Subscription } from 'rxjs';
-  BehaviorSubject,
-  merge,
-  Subscription,
-} from 'rxjs';
 import { Observable } from 'rxjs';
 import {
   ReactiveFormsModule,
@@ -88,33 +84,40 @@ export class IncidentEditDialogComponent {
           this.form.patchValue(inc);
         }),
       );
+    } else {
+      this.inc$ = new BehaviorSubject(<IncidentRecord>{});
     }
   }
 
   save() {
-    this.incSvc
+    let resObs: Observable<IncidentRecord>;
-      .updateIncident(this.data.incID, <IncidentRecord>{
+    let ir: IncidentRecord = <IncidentRecord>{
-        name: this.form.controls['name'].dirty
+      name: this.form.controls['name'].dirty
-          ? this.form.controls['name'].value
+        ? this.form.controls['name'].value
-          : null,
+        : null,
-        startTime: this.form.controls['start'].dirty
+      startTime: this.form.controls['start'].dirty
-          ? this.form.controls['start'].value
+        ? this.form.controls['start'].value
-          : null,
+        : null,
-        endTime: this.form.controls['end'].dirty
+      endTime: this.form.controls['end'].dirty
-          ? this.form.controls['end'].value
+        ? this.form.controls['end'].value
-          : null,
+        : null,
-        description: this.form.controls['description'].dirty
+      description: this.form.controls['description'].dirty
-          ? this.form.controls['description'].value
+        ? this.form.controls['description'].value
-          : null,
+        : null,
-      })
+    };
-      .subscribe({
+    if (this.data.new) {
-        next: (ok) => {
+      resObs = this.incSvc.createIncident(ir);
-          this.dialogRef.close(ok);
+    } else {
-        },
+      resObs = this.incSvc.updateIncident(this.data.incID, ir);
-        error: (er) => {
+    }
-          alert(er);
+    resObs.subscribe({
-        },
+      next: (ok) => {
-      });
+        this.dialogRef.close(ok);
+      },
+      error: (er) => {
+        alert(er);
+      },
+    });
   }
 
   cancel() {