diff --git a/client/stillbox/src/app/calls/calls.component.ts b/client/stillbox/src/app/calls/calls.component.ts index ab7ac9b..f6432c1 100644 --- a/client/stillbox/src/app/calls/calls.component.ts +++ b/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, { + add: this.selection.selected.map((s) => s.id), + }) + .subscribe({ + next: () => { + this.selection.clear(); + }, + error: (err) => { + alert(err); + }, + }); + }); + } } diff --git a/client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.html b/client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.html new file mode 100644 index 0000000..a5c2b54 --- /dev/null +++ b/client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.html @@ -0,0 +1,23 @@ +

Select Incident

+ + + + +
+ + @let incidents = incs$ | async; + @for (inc of incidents; track inc) { + {{ inc.name }} + } + +
+
+ + + + diff --git a/client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.scss b/client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.scss new file mode 100644 index 0000000..9174840 --- /dev/null +++ b/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; +} diff --git a/client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.spec.ts b/client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.spec.ts new file mode 100644 index 0000000..f11865b --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SelectIncidentDialogComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(SelectIncidentDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.ts b/client/stillbox/src/app/incidents/select-incident-dialog/select-incident-dialog.component.ts new file mode 100644 index 0000000..ecab136 --- /dev/null +++ b/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); + allIncs$!: Observable; + incs$!: Observable; + findStr = new BehaviorSubject(''); + sel!: string; + constructor(private incSvc: IncidentsService) {} + + ngOnInit() { + this.incs$ = this.findStr.pipe( + debounceTime(300), + distinctUntilChanged(), + switchMap((sub) => + this.incSvc.getIncidents({ filter: sub }), + ), + map((incidents) => incidents.incidents), + ); + } + + search(term: string) { + this.findStr.next(term); + } + + cancel() { + this.dialogRef.close(null); + } + + save() { + this.dialogRef.close(this.sel); + } +}