Talkgroup in dialog

client/stillbox/src/app/talkgroup.ts

@@ -89,6 +89,13 @@ export class Talkgroup {
   iconMap(icon: string): string {
     return iconMapping[icon]!;
   }
+
+  tgTuple(): TGID {
+    return <TGID>{
+      sys: this.system_id,
+      tg: this.tgid,
+    };
+  }
 }
 
 export interface TalkgroupUI extends Talkgroup {

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

@@ -1,7 +1,9 @@
-<h2 mat-dialog-title>Edit {{tgid.sys}}:{{tgid.tg}}</h2>
+<h2 mat-dialog-title>Edit {{ tgid.sys }}:{{ tgid.tg }}</h2>
 <mat-dialog-content>
-<div class="tgRecord">
-  <form *ngIf="tg" [formGroup]="form" (ngSubmit)="save()">
+  <div class="tgRecord">
+    @let tg = tg$ | async;
+    @if (tg) {
+      <form id="tgForm" [formGroup]="form" (ngSubmit)="save()">
         <div>
           <mat-form-field>
             <mat-label>Name</mat-label>
@@ -42,7 +44,12 @@
           </mat-form-field>
           <mat-form-field>
             <mat-label>Weight</mat-label
-        ><input matInput name="weight" type="text" formControlName="weight" />
+            ><input
+              matInput
+              name="weight"
+              type="text"
+              formControlName="weight"
+            />
           </mat-form-field>
         </div>
         <div>
@@ -96,15 +103,22 @@
           </mat-form-field>
         </div>
         <div class="alert">
-      <mat-checkbox name="alert" formControlName="alert">Alert</mat-checkbox>
+          <mat-checkbox name="alert" formControlName="alert"
+            >Alert</mat-checkbox
+          >
         </div>
         <div class="alert">
           <alert-rule-builder [rules]="tg.alert_config" />
         </div>
       </form>
-</div>
+    } @else {
+      <div class="spinner">
+        <mat-spinner></mat-spinner>
+      </div>
+    }
+  </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>
+  <button mat-button type="button" (click)="cancel()">Cancel</button>
+  <button mat-button form="tgForm" type="submit" cdkFocusInitial>Save</button>
 </mat-dialog-actions>

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

@@ -5,7 +5,8 @@ form div {
   flex-flow: row nowrap;
 }
 
-mat-form-field, .alert {
+mat-form-field,
+.alert {
   width: 30rem;
   margin-right: 5px;
   margin-left: 5px;

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

@@ -1,6 +1,6 @@
 import { Component, computed, inject, ViewChild } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, tap } from 'rxjs/operators';
 import {
   Talkgroup,
   TalkgroupUpdate,
@@ -34,13 +34,14 @@ 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';
+import { BrowserModule } from '@angular/platform-browser';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'talkgroup-record',
@@ -58,7 +59,8 @@ import {
     MatDialogTitle,
     MatDialogContent,
     MatDialogActions,
-    MatDialogClose,
+    MatProgressSpinnerModule,
+    MatButtonModule,
   ],
   templateUrl: './talkgroup-record.component.html',
   styleUrl: './talkgroup-record.component.scss',
@@ -66,6 +68,7 @@ import {
 export class TalkgroupRecordComponent {
   dialogRef = inject(MatDialogRef<TalkgroupRecordComponent>);
   tgid = inject<TGID>(MAT_DIALOG_DATA);
+  tg$!: Observable<Talkgroup>;
   tg!: Talkgroup;
   iconMapping: IconMap = iconMapping;
   tgService: TalkgroupService = inject(TalkgroupService);
@@ -97,8 +100,7 @@ export class TalkgroupRecordComponent {
   active: string | null = null;
   subscriptions = new Subscription();
 
-  constructor(
-  ) {
+  constructor() {
     this._allTags = this.tgService.allTags().pipe(shareReplay());
   }
 
@@ -151,6 +153,16 @@ export class TalkgroupRecordComponent {
   }
 
   ngOnInit() {
+    this.tg$ = this.tgService
+      .getTalkgroup(Number(this.tgid.sys), Number(this.tgid.tg))
+      .pipe(
+        tap((tg) => {
+          this.form.patchValue(tg);
+          this.form.controls['tagInput'].setValue('');
+          this.form.controls['tagsControl'].setValue(this.tg?.tags ?? []);
+        }),
+      );
+    /*
     this.subscriptions.add(
       this.tgService
         .getTalkgroup(Number(this.tgid.sys), Number(this.tgid.tg))
@@ -166,7 +178,7 @@ export class TalkgroupRecordComponent {
           this.form.controls['tagInput'].setValue('');
           this.form.controls['tagsControl'].setValue(this.tg?.tags ?? []);
         }),
-    );
+    ); */
     this.subscriptions.add(
       this._allTags.subscribe((event) => {
         this.allTags = event;
@@ -180,9 +192,8 @@ export class TalkgroupRecordComponent {
 
   save() {
     let tgu: TalkgroupUpdate = <TalkgroupUpdate>{
-      system_id: this.tg.system_id,
-      tgid: this.tg.tgid,
-      id: this.tg.id,
+      system_id: this.tgid.sys,
+      tgid: this.tgid.tg,
     };
     if (this.form.controls['name'].dirty) {
       tgu.name = this.form.controls['name'].value;
@@ -218,7 +229,8 @@ export class TalkgroupRecordComponent {
         });
       }
     }
-    this.subscriptions.add(this.tgService
+    this.subscriptions.add(
+      this.tgService
         .putTalkgroup(tgu)
         .pipe(
           catchError(() => {
@@ -227,7 +239,8 @@ export class TalkgroupRecordComponent {
         )
         .subscribe((newTG) => {
           this.dialogRef.close(newTG);
-      }));
+        }),
+    );
   }
 
   cancel() {

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

@@ -168,15 +168,15 @@ export class TalkgroupTableComponent {
   }
 
   editTG(idx: number, sys: number, tg: number) {
-    const tgid = <TGID>{sys: sys, tg: tg};
+    const tgid = <TGID>{ sys: sys, tg: tg };
     const dialogRef = this.dialog.open(TalkgroupRecordComponent, {
       data: tgid,
     });
 
-    dialogRef.afterClosed().subscribe((res) => 
-    {
+    dialogRef.afterClosed().subscribe((res) => {
       if (res !== undefined) {
         this.dataSource.data[idx] = res;
+        this.dataSource.data = this.dataSource.data;
       }
     });
   }

client/stillbox/src/app/talkgroups/talkgroups.service.ts

@@ -64,7 +64,7 @@ export class TalkgroupService {
   putTalkgroup(tu: TalkgroupUpdate): Observable<Talkgroup> {
     let tgid = this.tgKey(tu.system_id, tu.tgid);
 
-    this.http
+    return this.http
       .put<Talkgroup>(`/api/talkgroup/${tu.system_id}/${tu.tgid}`, tu)
       .pipe(
         switchMap((tg) => {
@@ -78,8 +78,6 @@ export class TalkgroupService {
           return tObs;
         }),
       );
-
-    return this._getTalkgroup.get(tgid)!;
   }
 
   putTalkgroups(