[ACA-4361] permission layout modified (#6937)

* * reusable data table column moved

* [ACA-4361] permission layout modified

* * build fixed

* fix build

* * import fixed

* * null safety operation

* * fixed comments

* * fix lint

* * wait for reload list

* * remove sleep

* * add sleep

* * fix comments

* * fix comments

* * floating promises fix

* * remove wait

lib/core/data-column/data-column-header.component.ts

@@ -0,0 +1,39 @@
+/*!
+ * @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.
+ */
+
+/* tslint:disable:component-selector no-input-rename  */
+
+import { Component, ContentChild, TemplateRef } from '@angular/core';
+import { DataColumnComponent } from './data-column.component';
+
+@Component({
+    selector: 'adf-data-column-header',
+    template: ''
+})
+export class DateColumnHeaderComponent {
+
+    @ContentChild(TemplateRef)
+    public template: TemplateRef<any>;
+
+    constructor(private columnComponent: DataColumnComponent) {}
+
+    ngAfterContentInit() {
+        if (this.columnComponent) {
+            this.columnComponent.header = this.template;
+        }
+    }
+}

lib/core/data-column/data-column.component.ts

@@ -82,6 +82,9 @@ export class DataColumnComponent implements OnInit {
     @Input()
     sortingKey: string;
 
+    /** Data column header template */
+    header?: TemplateRef<any>;
+
     ngOnInit() {
         if (!this.srTitle && this.key === '$thumbnail') {
             this.srTitle = 'Thumbnail';

lib/core/data-column/data-column.module.ts

@@ -20,6 +20,7 @@ import { NgModule } from '@angular/core';
 
 import { DataColumnListComponent } from './data-column-list.component';
 import { DataColumnComponent } from './data-column.component';
+import { DateColumnHeaderComponent } from './data-column-header.component';
 
 @NgModule({
     imports: [
@@ -27,11 +28,13 @@ import { DataColumnComponent } from './data-column.component';
     ],
     declarations: [
         DataColumnComponent,
-        DataColumnListComponent
+        DataColumnListComponent,
+        DateColumnHeaderComponent
     ],
     exports: [
         DataColumnComponent,
-        DataColumnListComponent
+        DataColumnListComponent,
+        DateColumnHeaderComponent
     ]
 })
 export class DataColumnModule {}

lib/core/data-column/public-api.ts

@@ -17,5 +17,6 @@
 
 export * from './data-column-list.component';
 export * from './data-column.component';
+export * from './data-column-header.component';
 
 export * from './data-column.module';

lib/core/datatable/components/datatable/datatable.component.html

@@ -33,9 +33,12 @@
                  [attr.tabindex]="isHeaderVisible() ? 0 : null"
                  [attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
                  adf-drop-zone dropTarget="header" [dropColumn]="col">
-                <span *ngIf="col.title" class="adf-datatable-cell-value">{{ col.title | translate}}</span>
-                <span *ngIf="col.title && col.sortable" class="adf-sr-only" aria-live="polite">{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}</span>
-                <ng-template *ngIf="allowFiltering" [ngTemplateOutlet]="headerFilterTemplate" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
+                <ng-container *ngIf="!col.header">
+                    <span *ngIf="col.title" class="adf-datatable-cell-value">{{ col.title | translate}}</span>
+                    <span *ngIf="col.title && col.sortable" class="adf-sr-only" aria-live="polite">{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}</span>
+                    <ng-template *ngIf="allowFiltering" [ngTemplateOutlet]="headerFilterTemplate" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
+                </ng-container>
+                <ng-template *ngIf="col.header" [ngTemplateOutlet]="col.header" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
             </div>
             <!-- Actions (right) -->
             <div *ngIf="actions && actionsPosition === 'right'" class="adf-actions-column adf-datatable-cell-header adf-datatable__actions-cell">

lib/core/datatable/data/data-column.model.ts

@@ -43,4 +43,5 @@ export interface DataColumn {
     editable?: boolean;
     focus?: boolean;
     sortingKey?: string;
+    header?: TemplateRef<any>;
 }

lib/core/datatable/data/object-datacolumn.model.ts

@@ -32,6 +32,7 @@ export class ObjectDataColumn implements DataColumn {
     copyContent?: boolean;
     focus?: boolean;
     sortingKey?: string;
+    header?: TemplateRef<any>;
 
     constructor(input: any) {
         this.key = input.key;
@@ -45,5 +46,6 @@ export class ObjectDataColumn implements DataColumn {
         this.copyContent = input.copyContent;
         this.focus = input.focus;
         this.sortingKey = input.sortingKey;
+        this.header = input.template;
     }
 }