Merge pull request #5167 from ArtemDzhereleiko/imp/event-table-panel/add-reset-button

[3.3.1] Event filter - add button clear filter

ui-ngx/src/app/app.component.ts

@@ -68,6 +68,13 @@ export class AppComponent implements OnInit {
       )
     );
 
+    this.matIconRegistry.addSvgIconLiteral(
+      'filter-variant-remove',
+      this.domSanitizer.bypassSecurityTrustHtml(
+        '<svg viewBox="0 0 24 24"><path d="M21 8H3V6h18v2m-7.19 8H10v2h3.09c.12-.72.37-1.39.72-2M18 11H6v2h12v-2m3.12 4.46L19 17.59l-2.12-2.13-1.41 1.42L17.59 19l-2.12 2.12 1.41 1.42L19 20.41l2.12 2.13 1.42-1.42L20.41 19l2.13-2.12-1.42-1.42z"/></svg>'
+      )
+    );
+
     this.matIconRegistry.addSvgIconLiteral(
       'google-logo',
       this.domSanitizer.bypassSecurityTrustHtml(

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -85,7 +85,8 @@
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event)">
-              <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+              <mat-icon *ngIf="actionDescriptor.isMdiIcon" [svgIcon]="actionDescriptor.icon"></mat-icon>
+              <mat-icon *ngIf="!actionDescriptor.isMdiIcon">{{actionDescriptor.icon}}</mat-icon>
             </button>
             <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"

ui-ngx/src/app/modules/home/components/event/event-table-config.ts

@@ -120,6 +120,15 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
     this.updateFilterColumns();
 
     this.headerActionDescriptors.push({
+      name: this.translate.instant('event.clear-filter'),
+      icon: 'filter-variant-remove',
+      isMdiIcon: true,
+      isEnabled: () => !isEqual(this.filterParams, {}),
+      onAction: ($event) => {
+        this.clearFiter($event);
+      }
+    },
+    {
       name: this.translate.instant('event.events-filter'),
       icon: 'filter_list',
       isEnabled: () => true,
@@ -316,6 +325,16 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
     }
   }
 
+  private clearFiter($event) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+
+    this.filterParams = {};
+    this.table.paginator.pageIndex = 0;
+    this.table.updateData();
+  }
+
   private editEventFilter($event: MouseEvent) {
     if ($event) {
       $event.stopPropagation();

ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts

@@ -73,6 +73,7 @@ export interface GroupActionDescriptor<T extends BaseData<HasId>> {
 export interface HeaderActionDescriptor {
   name: string;
   icon: string;
+  isMdiIcon?: boolean;
   isEnabled: () => boolean;
   onAction: ($event: MouseEvent) => void;
 }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1822,7 +1822,8 @@
         "all-events": "All",
         "has-error": "Has error",
         "entity-id": "Entity Id",
-        "entity-type": "Entity type"
+        "entity-type": "Entity type",
+        "clear-filter": "Clear Filter"
     },
     "extension": {
         "extensions": "Extensions",