[ACA-3407] New component : Filter Menu created and implemented inside the Document List (#5748)

* [ACA-3407] New component : Filter Menu, implemented inside the Document List

* [ACA-3407] Refactor click method

* [ACA-3407] Update Filter Icon style

* [ACA-3407] Add filter icon and update tooltip with column name

lib/content-services/src/lib/document-list/components/document-list.component.html

@@ -25,7 +25,7 @@
     [class.adf-datatable-gallery-thumbnails]="data.thumbnails">
 
     <ng-template let-col>
-        <!-- [ACA-3206] TODO : Implement search/filter widget HERE -->
+        <adf-filter-menu class="adf-filter-menu" [col]="col"></adf-filter-menu>
     </ng-template>
 
     <adf-no-content-template>

lib/content-services/src/lib/document-list/components/document-list.component.scss

@@ -207,4 +207,11 @@
             }
         }
     }
+
+    .adf-filter-button {
+        mat-icon {
+            height: 18px;
+            width: 18px;
+        }
+    }
 }

lib/content-services/src/lib/document-list/components/filter-menu/filter-menu.component.html

@@ -0,0 +1,16 @@
+<button mat-icon-button [matMenuTriggerFor]="filter"
+    (click)="onMenuButtonClick($event)"
+    class="adf-filter-button"
+    matTooltip="{{ 'ADF-DOCUMENT-LIST.FILTER_MENU.FILTER_BY' | translate:{category: col.title} }}">
+    <adf-icon value="adf:filter" color="primary"></adf-icon>
+</button>
+
+<mat-menu #filter="matMenu">
+    <div>{{col.title}}</div>
+    <mat-dialog-actions>
+        <button mat-button>{{ 'ADF-DOCUMENT-LIST.FILTER_MENU.CLEAR' | translate | uppercase }}
+        </button>
+        <button mat-button>{{ 'ADF-DOCUMENT-LIST.FILTER_MENU.APPLY' | translate | uppercase }}
+        </button>
+    </mat-dialog-actions>
+</mat-menu>

lib/content-services/src/lib/document-list/components/filter-menu/filter-menu.component.ts

@@ -0,0 +1,33 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input } from '@angular/core';
+import { DataColumn } from '@alfresco/adf-core';
+
+@Component({
+    selector: 'adf-filter-menu',
+    templateUrl: './filter-menu.component.html'
+})
+export class FilterMenuComponent {
+
+    @Input()
+    col: DataColumn;
+
+    onMenuButtonClick(event: Event) {
+        event.stopPropagation();
+    }
+}

lib/content-services/src/lib/document-list/document-list.module.ts

@@ -32,6 +32,7 @@ import { LibraryStatusColumnComponent } from './components/library-status-column
 import { LibraryRoleColumnComponent } from './components/library-role-column/library-role-column.component';
 import { LibraryNameColumnComponent } from './components/library-name-column/library-name-column.component';
 import { NameColumnComponent } from './components/name-column/name-column.component';
+import { FilterMenuComponent } from './components/filter-menu/filter-menu.component';
 
 @NgModule({
     imports: [
@@ -50,7 +51,8 @@ import { NameColumnComponent } from './components/name-column/name-column.compon
         LibraryNameColumnComponent,
         NameColumnComponent,
         ContentActionComponent,
-        ContentActionListComponent
+        ContentActionListComponent,
+        FilterMenuComponent
     ],
     exports: [
         DocumentListComponent,

lib/content-services/src/lib/i18n/en.json

@@ -62,6 +62,11 @@
       "VIEW": "View",
       "REMOVE": "Remove",
       "DOWNLOAD": "Download"
+    },
+    "FILTER_MENU" : {
+      "FILTER_BY": "Filter by {{ category }}",
+      "CLEAR": "Clear",
+      "APPLY": "Apply"
     }
   },
   "ALFRESCO_DOCUMENT_LIST": {