Add to existing incident

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

@@ -47,6 +47,7 @@ import {
   IncidentsService,
 } from '../incidents/incidents.service';
 import { IncidentRecord } from '../incidents';
+import { SelectIncidentDialogComponent } from '../incidents/select-incident-dialog/select-incident-dialog.component';
 
 @Pipe({
   name: 'grabDate',
@@ -382,5 +383,24 @@ export class CallsComponent {
     });
   }
 
-  addToExistingInc(ev: Event) {}
+  addToExistingInc(ev: Event) {
+    const dialogRef = this.dialog.open(SelectIncidentDialogComponent);
+    dialogRef.afterClosed().subscribe((res: string) => {
+      if (!res) {
+        return;
+      }
+      this.incSvc
+        .addRemoveCalls(res, <CallIncidentParams>{
+          add: this.selection.selected.map((s) => s.id),
+        })
+        .subscribe({
+          next: () => {
+            this.selection.clear();
+          },
+          error: (err) => {
+            alert(err);
+          },
+        });
+    });
+  }
 }

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

@@ -0,0 +1,23 @@
+<h2 mat-dialog-title>Select Incident</h2>
+<mat-dialog-content>
+  <mat-form-field>
+    <input
+      #searchBox
+      matInput
+      name="search"
+      (input)="search(searchBox.value)"
+    />
+  </mat-form-field>
+  <div class="selList">
+    <mat-selection-list #incs [(ngModel)]="sel" multiple="false">
+      @let incidents = incs$ | async;
+      @for (inc of incidents; track inc) {
+        <mat-list-option [value]="inc.id">{{ inc.name }}</mat-list-option>
+      }
+    </mat-selection-list>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button type="button" (click)="cancel()">Cancel</button>
+  <button mat-button (click)="save()" cdkFocusInitial>Select</button>
+</mat-dialog-actions>

client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.scss

@@ -0,0 +1,5 @@
+.selList {
+  overflow: scroll;
+  width: 480px;
+  min-height: 200px;
+}

client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.spec.ts

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

client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.ts

@@ -0,0 +1,68 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, inject, ViewChild } from '@angular/core';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule, MatSelectionList } from '@angular/material/list';
+import {
+  IncidentsListParams,
+  IncidentsPaginated,
+  IncidentsService,
+} from '../incidents.service';
+import {
+  BehaviorSubject,
+  combineLatest,
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  merge,
+  Observable,
+  switchMap,
+} from 'rxjs';
+import { IncidentRecord } from '../../incidents';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-select-incident-dialog',
+  imports: [
+    MatListModule,
+    MatInputModule,
+    AsyncPipe,
+    MatDialogModule,
+    MatButtonModule,
+    FormsModule,
+  ],
+  templateUrl: './select-incident-dialog.component.html',
+  styleUrl: './select-incident-dialog.component.scss',
+})
+export class SelectIncidentDialogComponent {
+  dialogRef = inject(MatDialogRef<SelectIncidentDialogComponent>);
+  allIncs$!: Observable<IncidentRecord[]>;
+  incs$!: Observable<IncidentRecord[]>;
+  findStr = new BehaviorSubject<string>('');
+  sel!: string;
+  constructor(private incSvc: IncidentsService) {}
+
+  ngOnInit() {
+    this.incs$ = this.findStr.pipe(
+      debounceTime(300),
+      distinctUntilChanged(),
+      switchMap((sub) =>
+        this.incSvc.getIncidents(<IncidentsListParams>{ filter: sub }),
+      ),
+      map((incidents) => incidents.incidents),
+    );
+  }
+
+  search(term: string) {
+    this.findStr.next(term);
+  }
+
+  cancel() {
+    this.dialogRef.close(null);
+  }
+
+  save() {
+    this.dialogRef.close(this.sel);
+  }
+}