[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": {

lib/core/assets/images/ft_ic_filter.svg

@@ -0,0 +1,6 @@
+<svg id="Component_268_6" data-name="Component 268 – 6" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <rect id="Rectangle_4868" data-name="Rectangle 4868" width="18" height="18" fill="none"/>
+  <g id="_1.-Icons_1.-system_ic-filter" data-name="1.-Icons/1.-system/ic-filter" transform="translate(-1 -1)" opacity="0.87">
+    <path id="Combined-Shape" d="M10.722,13.893a.793.793,0,0,1,.788.7l.005.092v.568h1.48a.793.793,0,0,1,.092,1.58l-.092.005h-1.48v.431a.793.793,0,0,1-1.58.092l-.005-.092V14.686A.793.793,0,0,1,10.722,13.893Zm-2.379,1.36a.793.793,0,0,1,.092,1.58l-.092.005H7.55a.793.793,0,0,1-.092-1.58l.092-.005Zm.793-7.478a.793.793,0,0,1,.788.7l.005.092v.568h5.444a.793.793,0,0,1,.092,1.58l-.092.005H9.929v.431a.793.793,0,0,1-1.58.092l-.005-.092V8.568A.793.793,0,0,1,9.136,7.775ZM5.964,9.136a.793.793,0,0,1,.092,1.58l-.092.005H4.379a.793.793,0,0,1-.092-1.58l.092-.005ZM13.1,2a.793.793,0,0,1,.788.7l.005.092V3.36h3.066a.793.793,0,0,1,.092,1.58l-.092.005H13.893v.431a.793.793,0,0,1-1.58.092l-.005-.092V2.793A.793.793,0,0,1,13.1,2ZM9.929,3.36a.793.793,0,0,1,.092,1.58l-.092.005H2.793A.793.793,0,0,1,2.7,3.366l.092-.005Z" fill-rule="evenodd"/>
+  </g>
+</svg>

lib/core/datatable/components/datatable/datatable.component.scss

@@ -424,7 +424,7 @@
                 }
             }
             &--fileSize .adf-datatable-cell-value {
-                padding: 0;
+                padding: 0 10px 0 0;
             }
         }
 

lib/core/services/thumbnail.service.ts

@@ -157,7 +157,8 @@ export class ThumbnailService {
         'disable/folder': './assets/images/ft_ic_folder_disable.svg',
         'selected': './assets/images/ft_ic_selected.svg',
         'dynamic-feed': './assets/images/dynamic_feed-24px.svg',
-        'ic-process': './assets/images/ic-process.svg'
+        'ic-process': './assets/images/ic-process.svg',
+        'filter': './assets/images/ft_ic_filter.svg'
     };
 
     constructor(protected apiService: AlfrescoApiService, matIconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {