Filter source UI

client/stillbox/src/app/calls/calls.component.html

@@ -49,6 +49,25 @@
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
+    <mat-form-field class="filterBox" subscriptSizing="dynamic">
+      <mat-label>Source Filter</mat-label>
+      <input
+        matInput
+        name="sourceFilter"
+        type="text"
+        autocomplete="off"
+        formControlName="sourceFilter"
+      />
+      <button
+        class="clearBtn"
+        *ngIf="form.controls['sourceFilter'].value"
+        matSuffix
+        mat-icon-button
+        (click)="form.controls['sourceFilter'].setValue('')"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
     <mat-form-field class="tagSelect" subscriptSizing="dynamic">
       <mat-label>Any Tags</mat-label>
       <mat-select
@@ -163,14 +182,26 @@
         <a
           href="javascript:void(0)"
           class="tgFilter"
-          (click)="searchFilter(tgAlpha)"
+          (click)="searchTGFilter(tgAlpha)"
           >{{ tgAlpha }}</a
         >
       </td>
     </ng-container>
     <ng-container matColumnDef="talker">
       <th mat-header-cell *matHeaderCellDef>Source</th>
-      <td mat-cell *matCellDef="let call" [innerHTML]="call | talker"></td>
+      <td mat-cell *matCellDef="let call">
+        @let tlkAlias = call | talker;
+        @if (tlkAlias) {
+          <a
+            href="javascript:void(0)"
+            class="srcFilter"
+            (click)="searchSrcFilter(tlkAlias)"
+            >{{ tlkAlias }}</a
+          >
+        } @else {
+          &mdash;
+        }
+      </td>
     </ng-container>
     <ng-container matColumnDef="duration">
       <th mat-header-cell *matHeaderCellDef class="durationHdr">Duration</th>

client/stillbox/src/app/calls/calls.component.scss

@@ -86,7 +86,7 @@ form {
 }
 
 .filterBox {
-  flex: 1 1 300px;
+  flex: 1 1 200px;
 }
 
 .durationFilter {
@@ -94,13 +94,14 @@ form {
 }
 
 .tagSelect {
-  flex: 1 1 250px;
+  flex: 1 1 220px;
 }
 
 .in-incident {
   background-color: rgb(59, 0, 59);
 }
 
-a.tgFilter:hover {
+a.tgFilter:hover,
+a.srcFilter:hover {
   text-decoration: underline;
 }

client/stillbox/src/app/calls/calls.component.ts

@@ -112,6 +112,7 @@ export class CallsComponent {
     start: new FormControl(this.lTime(new Date())),
     end: new FormControl(null),
     filter: new FormControl(''),
+    sourceFilter: new FormControl(''),
     duration: new FormControl(0),
     tagsAny: new FormControl<string[]>([]),
     tagsNot: new FormControl<string[]>([]),
@@ -139,12 +140,18 @@ export class CallsComponent {
     return numSelected === numRows;
   }
 
-  searchFilter(filt: string | null) {
+  searchTGFilter(filt: string | null) {
     if (filt) {
       this.form.controls['filter'].setValue(filt);
     }
   }
 
+  searchSrcFilter(filt: string | null) {
+    if (filt) {
+      this.form.controls['sourceFilter'].setValue(filt);
+    }
+  }
+
   buildParams(p: PageEvent, serverPage: number): CallsListParams {
     const par: CallsListParams = {
       start: new Date(this.form.controls['start'].value!),
@@ -167,6 +174,10 @@ export class CallsComponent {
         this.form.controls['filter'].value != ''
           ? this.form.controls['filter'].value
           : null,
+      sourceFilter:
+        this.form.controls['sourceFilter'].value != ''
+          ? this.form.controls['sourceFilter'].value
+          : null,
       atLeastSeconds:
         this.form.controls['duration'].value != null &&
         this.form.controls['duration'].value > 0

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

@@ -33,12 +33,12 @@ export class DatePipe implements PipeTransform {
   pure: true,
 })
 export class TalkerPipe implements PipeTransform {
-  transform(call: CallRecord, args?: any): string {
+  transform(call: CallRecord, args?: any): string | null {
     if (call.talkerAlias != null) {
       return call.talkerAlias;
     }
 
-    return '—';
+    return null;
   }
 }
 
@@ -175,6 +175,7 @@ export interface CallsListParams {
   page: number;
   perPage: number;
   tgFilter: string | null;
+  sourceFilter: string | null;
   atLeastSeconds: number | null;
 }
 

client/stillbox/src/app/incidents/incident/incident.component.html

@@ -102,6 +102,18 @@
         {{ call | talkgroup: "alpha" | async }}
       </td>
     </ng-container>
+ <ng-container matColumnDef="talker">
+      <th mat-header-cell *matHeaderCellDef>Source</th>
+      <td mat-cell *matCellDef="let call">
+        @let tlkAlias = call | talker;
+        @if (tlkAlias) {
+            {{ tlkAlias }}
+        } @else {
+          &mdash;
+        }
+      </td>
+    </ng-container>
+
     <ng-container matColumnDef="duration">
       <th mat-header-cell *matHeaderCellDef class="durationHdr">Duration</th>
       <td mat-cell *matCellDef="let call" class="duration">

client/stillbox/src/app/incidents/incident/incident.component.ts

@@ -35,6 +35,7 @@ import {
   TimePipe,
   DatePipe,
   DownloadURLPipe,
+  TalkerPipe,
 } from '../../calls/calls.service';
 import { CallPlayerComponent } from '../../calls/player/call-player/call-player.component';
 import { FmtDatePipe } from '../incidents.component';
@@ -141,6 +142,7 @@ export class IncidentEditDialogComponent {
     MatIconModule,
     MatCardModule,
     FixedPointPipe,
+    TalkerPipe,
     TimePipe,
     DatePipe,
     TalkgroupPipe,
@@ -169,6 +171,7 @@ export class IncidentComponent {
     'system',
     'group',
     'talkgroup',
+    'talker',
     'duration',
   ];
   callsResult = new MatTableDataSource<IncidentCall>();