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;
}