#1182-changed the filter icon

udmif/web/src/app/devices/devices.component.html

@@ -5,7 +5,15 @@
   [handleFilterChange]="filterData"
 ></app-search-filter>
 <div class="table-controls">
-  <span>{{ totalCount }} Devices</span>
+  <span>{{ totalFilteredCount | i18nPlural: { '=0': 'No Devices', '=1': '# Device', other: '# Devices' } }}</span>
+  <span class="grow"></span>
+  <mat-icon
+    *ngIf="filter"
+    class="filter-icon"
+    [matBadge]="filterCount"
+    matTooltip="{{ filterCount | i18nPlural: { '=1': '# filter applied', other: '# filters applied' } }}"
+    >filter_list</mat-icon
+  >
   <mat-paginator
     [length]="totalFilteredCount"
     [pageSize]="pageSize"

udmif/web/src/app/devices/devices.component.scss

@@ -1,15 +1,15 @@
+@use '../../styles/variables' as *;
+
 .table-controls {
   display: flex;
   align-items: center;
-  justify-content: space-between;
 
-  .mat-paginator {
-    display: inline-block;
-    background: transparent;
+  .grow {
+    flex: 1;
   }
 
-  .mat-paginator-container {
-    padding-right: 0;
+  .filter-icon {
+    color: $icon-default;
   }
 }
 

udmif/web/src/app/devices/devices.component.ts

@@ -31,8 +31,9 @@ export class DevicesComponent implements OnInit, OnDestroy {
   currentPage: number = 0;
   pageSize: number = 10;
   pageSizeOptions: number[] = [10, 25, 50, 100];
-  sortOptions: SortOptions | undefined;
-  filter: string | undefined;
+  sortOptions?: SortOptions;
+  filter?: string;
+  filterCount: number = 0;
   searchFields: Record<string, string> = {
     name: 'getDeviceNames',
     make: 'getDeviceMakes',
@@ -77,7 +78,8 @@ export class DevicesComponent implements OnInit, OnDestroy {
 
   filterData = (filters: SearchFilterItem[]): void => {
     // arrow to hold onto this
-    this.filter = filters.length ? JSON.stringify(filters) : undefined; // don't send filter field if no filter
+    this.filterCount = filters.length;
+    this.filter = this.filterCount ? JSON.stringify(filters) : undefined; // don't send filter field if no filter
 
     this._refetch();
   };

udmif/web/src/app/devices/devices.module.ts

@@ -8,6 +8,9 @@ import { MatSortModule } from '@angular/material/sort';
 import { SearchFilterModule } from '../search-filter/search-filter.module';
 import { MatButtonModule } from '@angular/material/button';
 import { PipesModule } from '../common/pipes/pipes.module';
+import { MatIconModule } from '@angular/material/icon';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [DevicesComponent],
@@ -20,6 +23,9 @@ import { PipesModule } from '../common/pipes/pipes.module';
     SearchFilterModule,
     MatButtonModule,
     PipesModule,
+    MatIconModule,
+    MatBadgeModule,
+    MatTooltipModule,
   ],
 })
 export class DevicesModule {}

udmif/web/src/app/search-filter/search-filter.component.html

@@ -16,7 +16,7 @@
       (matChipInputTokenEnd)="add($event)"
     />
   </mat-chip-list>
-  <mat-icon matSuffix class="filter-icon">filter_list</mat-icon>
+  <mat-icon matSuffix class="filter-icon">filter_alt</mat-icon>
   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" autoActiveFirstOption>
     <mat-option *ngFor="let item of filteredItems | async" [value]="item.value">
       {{ item.label }}

udmif/web/src/styles/styles.scss

@@ -29,6 +29,16 @@ a {
 }
 
 // Pagination overrides.
+.mat-paginator {
+  background: transparent;
+
+  .mat-paginator-container {
+    padding: 0 0 0 $spacing * 2;
+  }
+  .mat-paginator-range-label {
+    margin: 0 $spacing;
+  }
+}
 .mat-paginator,
 .mat-paginator-page-size .mat-select-trigger {
   font-size: inherit;