Dialog WIP

client/stillbox/src/app/app.routes.ts

@@ -43,14 +43,6 @@ export const routes: Routes = [
           ),
         data: { title: 'Export Talkgroups' },
       },
-      {
-        path: 'talkgroups/:sys/:tg',
-        loadComponent: () =>
-          import(
-            './talkgroups/talkgroup-record/talkgroup-record.component'
-          ).then((m) => m.TalkgroupRecordComponent),
-        data: { title: 'Edit Talkgroup' },
-      },
       {
         path: 'calls',
         loadComponent: () =>

client/stillbox/src/app/talkgroups/talkgroup-record/talkgroup-record.component.html

@@ -1,5 +1,7 @@
+<h2 mat-dialog-title>Edit {{tgid.sys}}:{{tgid.tg}}</h2>
+<mat-dialog-content>
 <div class="tgRecord">
-  <form *ngIf="tg" [formGroup]="form" (ngSubmit)="submit()">
+  <form *ngIf="tg" [formGroup]="form" (ngSubmit)="save()">
     <div>
       <mat-form-field>
         <mat-label>Name</mat-label>
@@ -99,6 +101,10 @@
     <div class="alert">
       <alert-rule-builder [rules]="tg.alert_config" />
     </div>
-    <button class="sbButton" type="submit">Save</button>
   </form>
 </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button class="sbButton" type="button" (click)="cancel()">Cancel</button>
+    <button class="sbButton" [mat-dialog-close]="save()" cdk-focus-initial>Save</button>
+</mat-dialog-actions>

client/stillbox/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts

@@ -6,6 +6,7 @@ import {
   TalkgroupUpdate,
   IconMap,
   iconMapping,
+  TGID,
 } from '../../talkgroup';
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { TalkgroupService } from '../talkgroups.service';
@@ -26,12 +27,20 @@ import {
   FormControl,
   FormsModule,
 } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
 
 @Component({
   selector: 'talkgroup-record',
@@ -46,11 +55,17 @@ import { MatIconModule } from '@angular/material/icon';
     MatChipsModule,
     MatIconModule,
     MatAutocompleteModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
   ],
   templateUrl: './talkgroup-record.component.html',
   styleUrl: './talkgroup-record.component.scss',
 })
 export class TalkgroupRecordComponent {
+  dialogRef = inject(MatDialogRef<TalkgroupRecordComponent>);
+  tgid = inject<TGID>(MAT_DIALOG_DATA);
   tg!: Talkgroup;
   iconMapping: IconMap = iconMapping;
   tgService: TalkgroupService = inject(TalkgroupService);
@@ -83,8 +98,6 @@ export class TalkgroupRecordComponent {
   subscriptions = new Subscription();
 
   constructor(
-    private route: ActivatedRoute,
-    private router: Router,
   ) {
     this._allTags = this.tgService.allTags().pipe(shareReplay());
   }
@@ -138,12 +151,9 @@ export class TalkgroupRecordComponent {
   }
 
   ngOnInit() {
-    const sysId = this.route.snapshot.paramMap.get('sys');
-    const tgId = this.route.snapshot.paramMap.get('tg');
-
     this.subscriptions.add(
       this.tgService
-        .getTalkgroup(Number(sysId), Number(tgId))
+        .getTalkgroup(Number(this.tgid.sys), Number(this.tgid.tg))
         .subscribe((data: Talkgroup) => {
           this.tg = data;
           this.form.controls['name'].setValue(this.tg.name);
@@ -168,7 +178,7 @@ export class TalkgroupRecordComponent {
     this.subscriptions.unsubscribe();
   }
 
-  submit() {
+  save() {
     let tgu: TalkgroupUpdate = <TalkgroupUpdate>{
       system_id: this.tg.system_id,
       tgid: this.tg.tgid,
@@ -208,15 +218,19 @@ export class TalkgroupRecordComponent {
         });
       }
     }
-    this.tgService
+    this.subscriptions.add(this.tgService
       .putTalkgroup(tgu)
       .pipe(
         catchError(() => {
           return of(null);
         }),
       )
-      .subscribe((event) => {
-        this.router.navigate(['/talkgroups/']);
-      });
+      .subscribe((newTG) => {
+        this.dialogRef.close(newTG);
+      }));
+  }
+
+  cancel() {
+   this.dialogRef.close();
   }
 }

client/stillbox/src/app/talkgroups/talkgroup-table/talkgroup-table.component.html

@@ -64,8 +64,8 @@
     </ng-container>
     <ng-container matColumnDef="edit">
       <th mat-header-cell *matHeaderCellDef>Edit</th>
-      <td mat-cell *matCellDef="let tg">
-        <a routerLink="/talkgroups/{{ tg.system?.id }}/{{ tg.tgid }}"
+      <td mat-cell *matCellDef="let tg; let i = index">
+        <a (click)="editTG(i, tg.system?.id, tg.tgid)"
           ><mat-icon>edit</mat-icon>
         </a>
       </td>

client/stillbox/src/app/talkgroups/talkgroup-table/talkgroup-table.component.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { TalkgroupService, TalkgroupsPaginated } from '../talkgroups.service';
-import { Talkgroup, iconMapping } from '../../talkgroup';
+import { TGID, Talkgroup, iconMapping } from '../../talkgroup';
 import { ActivatedRoute } from '@angular/router';
 import { RouterModule, RouterLink } from '@angular/router';
 import { CommonModule } from '@angular/common';
@@ -27,6 +27,16 @@ import { MatChipsModule } from '@angular/material/chips';
 import { SelectionModel } from '@angular/cdk/collections';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { Observable, Subscription } from 'rxjs';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { TalkgroupRecordComponent } from '../talkgroup-record/talkgroup-record.component';
 
 @Pipe({
   standalone: true,
@@ -59,7 +69,6 @@ export class SanitizeHtmlPipe implements PipeTransform {
   selector: 'talkgroup-table',
   imports: [
     RouterModule,
-    RouterLink,
     MatIconModule,
     CommonModule,
     IconifyPipe,
@@ -104,6 +113,7 @@ export class TalkgroupTableComponent {
   @Input() resetPage!: Observable<void>;
   @ViewChild('paginator') paginator!: MatPaginator;
   suppress = false;
+  dialog = inject(MatDialog);
 
   constructor(private route: ActivatedRoute) {}
 
@@ -156,4 +166,18 @@ export class TalkgroupTableComponent {
       ? this.selection.clear()
       : this.dataSource.data.forEach((row) => this.selection.select(row));
   }
+
+  editTG(idx: number, sys: number, tg: number) {
+    const tgid = <TGID>{sys: sys, tg: tg};
+    const dialogRef = this.dialog.open(TalkgroupRecordComponent, {
+      data: tgid,
+    });
+
+    dialogRef.afterClosed().subscribe((res) => 
+    {
+      if (res !== undefined) {
+        this.dataSource.data[idx] = res;
+      }
+    });
+  }
 }