diff --git a/client/stillbox/src/app/incidents/incident/incident-editor-dialog.component.html b/client/stillbox/src/app/incidents/incident/incident-editor-dialog.component.html new file mode 100644 index 0000000..5ff7a2f --- /dev/null +++ b/client/stillbox/src/app/incidents/incident/incident-editor-dialog.component.html @@ -0,0 +1,55 @@ +

Edit Incident

+ +
+ @let inc = inc$ | async; + @if (inc) { +
+
+ + Name + + + + Start + + + + End + + + + Description + + +
+
+ } @else { +
+ +
+ } +
+
+ + + + diff --git a/client/stillbox/src/app/incidents/incident/incident.component.html b/client/stillbox/src/app/incidents/incident/incident.component.html index 78c2992..b7b7d36 100644 --- a/client/stillbox/src/app/incidents/incident/incident.component.html +++ b/client/stillbox/src/app/incidents/incident/incident.component.html @@ -1,6 +1,9 @@ @let inc = inc$ | async; -

{{ inc?.name }}

+
+

{{ inc?.name }}

+ edit +
Start
diff --git a/client/stillbox/src/app/incidents/incident/incident.component.scss b/client/stillbox/src/app/incidents/incident/incident.component.scss index 9c7d43f..b3e6716 100644 --- a/client/stillbox/src/app/incidents/incident/incident.component.scss +++ b/client/stillbox/src/app/incidents/incident/incident.component.scss @@ -8,16 +8,14 @@ margin-right: auto; } -.inc-heading, -.inc-description { +.inc-heading { display: flex; - flex-flow: row wrap; - flex: 1 1; + margin-bottom: 20px; } -.inc-heading, -.inc-description { - margin-bottom: 30px; +.cardHdr { + display: flex; + flex-flow: row wrap; } .field { @@ -30,3 +28,29 @@ .field-label::after { content: ":"; } + +.cardHdr h1 { + flex: 1 1; +} + +.cardHdr a { + flex: 0 0; + justify-content: flex-end; + align-content: center; + cursor: pointer; +} + +form mat-form-field { + width: 60rem; + flex: 0 0; + display: flex; +} + +.incRecord { + display: flex; + flex-flow: column nowrap; + justify-content: center; + margin-top: 20px; + margin-left: auto; + margin-right: auto; +} diff --git a/client/stillbox/src/app/incidents/incident/incident.component.ts b/client/stillbox/src/app/incidents/incident/incident.component.ts index 8893e4c..f97ba64 100644 --- a/client/stillbox/src/app/incidents/incident/incident.component.ts +++ b/client/stillbox/src/app/incidents/incident/incident.component.ts @@ -1,23 +1,7 @@ import { Component, computed, inject, ViewChild } from '@angular/core'; -import { toSignal } from '@angular/core/rxjs-interop'; -import { debounceTime } from 'rxjs/operators'; -import { - Talkgroup, - TalkgroupUpdate, - IconMap, - iconMapping, -} from '../../talkgroup'; -import { COMMA, ENTER } from '@angular/cdk/keycodes'; -import { TalkgroupService } from '../../talkgroups/talkgroups.service'; -import { - MatAutocomplete, - MatAutocompleteModule, - MatAutocompleteSelectedEvent, - MatAutocompleteActivatedEvent, -} from '@angular/material/autocomplete'; +import { map, tap } from 'rxjs/operators'; import { CommonModule, DatePipe } from '@angular/common'; -import { BehaviorSubject, catchError, of, Subscription } from 'rxjs'; -import { shareReplay } from 'rxjs/operators'; +import { Subject, Subscription } from 'rxjs'; import { Observable } from 'rxjs'; import { ReactiveFormsModule, @@ -25,7 +9,7 @@ import { FormControl, FormsModule, } from '@angular/forms'; -import { Router, ActivatedRoute } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatCheckboxModule } from '@angular/material/checkbox'; @@ -34,6 +18,63 @@ import { IncidentsService } from '../incidents.service'; import { IncidentRecord } from '../../incidents'; import { MatCardModule } from '@angular/material/card'; import { FmtDatePipe } from '../incidents.component'; +import { + MAT_DIALOG_DATA, + MatDialog, + MatDialogActions, + MatDialogContent, + MatDialogRef, + MatDialogTitle, +} from '@angular/material/dialog'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatButtonModule } from '@angular/material/button'; + +@Component({ + selector: 'app-incident-editor', + imports: [ + MatIconModule, + MatFormFieldModule, + ReactiveFormsModule, + FormsModule, + MatInputModule, + MatCheckboxModule, + CommonModule, + MatProgressSpinnerModule, + MatDialogTitle, + MatDialogActions, + MatDialogContent, + MatButtonModule, + ], + templateUrl: './incident-editor-dialog.component.html', + styleUrl: './incident.component.scss', +}) +export class IncidentEditDialogComponent { + dialogRef = inject(MatDialogRef); + incID = inject(MAT_DIALOG_DATA); + inc$!: Observable; + form = new FormGroup({ + name: new FormControl(''), + start: new FormControl(), + end: new FormControl(), + description: new FormControl(''), + }); + + constructor(private incSvc: IncidentsService) {} + + ngOnInit() { + this.inc$ = this.incSvc.getIncident(this.incID).pipe( + tap((inc) => { + this.form.patchValue(inc); + }), + ); + } + + save() {} + + cancel() { + this.dialogRef.close(); + } +} @Component({ selector: 'app-incident', @@ -52,8 +93,11 @@ import { FmtDatePipe } from '../incidents.component'; styleUrl: './incident.component.scss', }) export class IncidentComponent { + incPrime = new Subject(); inc$!: Observable; subscriptions: Subscription = new Subscription(); + dialog = inject(MatDialog); + incID!: string; constructor( private route: ActivatedRoute, @@ -63,8 +107,21 @@ export class IncidentComponent { saveIncName(ev: Event) {} ngOnInit() { - const incID = this.route.snapshot.paramMap.get('id')!; - this.inc$ = this.incSvc.getIncident(incID); + this.incID = this.route.snapshot.paramMap.get('id')!; + this.inc$ = this.incPrime.pipe(map((inc) => inc)); + this.incSvc.getIncident(this.incID).subscribe(this.incPrime); + } + + editIncident(incID: string) { + const dialogRef = this.dialog.open(IncidentEditDialogComponent, { + data: incID, + }); + + dialogRef.afterClosed().subscribe((res) => { + if (res !== undefined) { + this.incPrime.next(res); + } + }); } ngOnDestroy() { diff --git a/client/stillbox/src/styles.scss b/client/stillbox/src/styles.scss index bb21ba1..7d6fd0b 100644 --- a/client/stillbox/src/styles.scss +++ b/client/stillbox/src/styles.scss @@ -222,7 +222,8 @@ body { width: 100px; } -input { +input, +textarea { caret-color: var(--color-dark-fg) !important; }