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

[3.3.1] Event filter - add button clear filter

@@ -69,6 +69,13 @@ export class AppComponent implements OnInit {
     );
     );
 
 
     this.matIconRegistry.addSvgIconLiteral(
     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',
       'google-logo',
       this.domSanitizer.bypassSecurityTrustHtml(
       this.domSanitizer.bypassSecurityTrustHtml(
         '<svg viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/><path fill="none" d="M0 0h48v48H0z"/></svg>'
         '<svg viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/><path fill="none" d="M0 0h48v48H0z"/></svg>'

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

@@ -120,6 +120,15 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
     this.updateFilterColumns();
     this.updateFilterColumns();
 
 
     this.headerActionDescriptors.push({
     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'),
       name: this.translate.instant('event.events-filter'),
       icon: 'filter_list',
       icon: 'filter_list',
       isEnabled: () => true,
       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) {
   private editEventFilter($event: MouseEvent) {
     if ($event) {
     if ($event) {
       $event.stopPropagation();
       $event.stopPropagation();

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

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