WIP: incident record

description is never being marked as dirty, needs fix

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

@@ -83,6 +83,13 @@
       <button class="sbButton" (click)="refresh()">
         <mat-icon>refresh</mat-icon>
       </button>
+      <button [ngClass]="{ sbButton: true, hidden: !selection.hasValue() }" [matMenuTriggerFor]="callMenu">
+        <mat-icon>playlist_add</mat-icon>
+      </button>
+      <mat-menu #callMenu="matMenu">
+       <button mat-menu-item>Add to new incident...</button> 
+       <button mat-menu-item>Add to existing incident...</button> 
+      </mat-menu>
     </div>
   </form>
 </div>

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

@@ -30,6 +30,7 @@ import { debounceTime } from 'rxjs/operators';
 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';
 
 @Pipe({
   name: 'grabDate',
@@ -141,6 +142,7 @@ const reqPageSize = 200;
     MatProgressSpinnerModule,
     MatSelectModule,
     CallPlayerComponent,
+    MatMenuModule,
   ],
   templateUrl: './calls.component.html',
   styleUrl: './calls.component.scss',

client/stillbox/src/app/incidents/incident/incident-editor-dialog.component.html

@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>Edit Incident</h2>
+<h2 mat-dialog-title>{{ title }}</h2>
 <mat-dialog-content>
   <div class="incRecord">
     @let inc = inc$ | async;

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

@@ -40,6 +40,11 @@ import {
 import { CallPlayerComponent } from '../../calls/player/call-player/call-player.component';
 import { FmtDatePipe } from '../incidents.component';
 
+export interface EditDialogData {
+  incID: string;
+  new: boolean;
+}
+
 @Component({
   selector: 'app-incident-editor',
   imports: [
@@ -61,7 +66,8 @@ import { FmtDatePipe } from '../incidents.component';
 })
 export class IncidentEditDialogComponent {
   dialogRef = inject(MatDialogRef<IncidentEditDialogComponent>);
-  incID = inject<string>(MAT_DIALOG_DATA);
+  data = inject<EditDialogData>(MAT_DIALOG_DATA);
+  title = this.data.new ? 'New Incident' : 'Edit Incident';
   inc$!: Observable<IncidentRecord>;
   form = new FormGroup({
     name: new FormControl(''),
@@ -73,14 +79,36 @@ export class IncidentEditDialogComponent {
   constructor(private incSvc: IncidentsService) {}
 
   ngOnInit() {
-    this.inc$ = this.incSvc.getIncident(this.incID).pipe(
+    if (!this.data.new) {
+      this.inc$ = this.incSvc.getIncident(this.data.incID).pipe(
         tap((inc) => {
-        this.form.patchValue(inc);
+         this.form.patchValue(inc, {
+          onlySelf: false,
+          emitEvent: false,
+         }
+         );
+         this.form.markAsPristine();
         }),
       );
    }
+  }
 
-  save() {}
+  save() {
+    console.log(this.form.value);
+    this.incSvc.updateIncident(this.data.incID, <IncidentRecord>{
+      name: this.form.controls['name'].dirty ? this.form.controls['name'].value : null,
+      startTime: this.form.controls['start'].dirty ? this.form.controls['start'].value : null,
+      endTime: this.form.controls['end'].dirty ? this.form.controls['end'].value : null,
+      description: this.form.controls['description'].dirty ? this.form.controls['description'].value : null,
+    }).subscribe({
+      next: (ok) => {
+        this.dialogRef.close(ok);
+      },
+      error: (er) => {
+        alert(er);
+      },
+    });
+  }
 
   cancel() {
     this.dialogRef.close();
@@ -145,7 +173,6 @@ export class IncidentComponent {
       .pipe(
         tap((inc) => {
           if (inc.calls) {
-            console.log(inc.calls);
             this.callsResult.data = inc.calls;
           }
         }),
@@ -155,7 +182,10 @@ export class IncidentComponent {
 
   editIncident(incID: string) {
     const dialogRef = this.dialog.open(IncidentEditDialogComponent, {
-      data: incID,
+      data: <EditDialogData>{
+        incID: incID,
+        new: false,
+      },
     });
 
     dialogRef.afterClosed().subscribe((res) => {