[ADF-1344] New Custom Loading Content Directive for Datatable Component (#4156)

* [ADF-1344] New Custom Loading Content Directive for Datatable Component * [ADF-1344] Add unit tests for directives on Document List * [ADF-1344] Add directive prefix to context-menu directive * [ADF-1344] Old directive selectors have been put back * [ADF-1344] Add old selector for empty-content directive
2025-07-24 17:32:15 +00:00 · 2019-01-25 12:15:28 +00:00
parent 5887fa1052
commit 1c25b50b1a
115 changed files with 604 additions and 489 deletions
--- a/lib/process-services/app-list/apps-list.component.html
+++ b/lib/process-services/app-list/apps-list.component.html
@@ -43,7 +43,7 @@

 <ng-template #empty>
    <div class="adf-app-list-empty" *ngIf="isEmpty()">
-        <ng-content select="adf-empty-custom-content" *ngIf="hasEmptyCustomContentTemplate; else defaultEmptyTemplate" class="adf-custom-empty-template"></ng-content>
+        <ng-content select="adf-custom-empty-content" *ngIf="hasEmptyCustomContentTemplate; else defaultEmptyTemplate" class="adf-custom-empty-template"></ng-content>

        <ng-template #defaultEmptyTemplate>
            <adf-empty-content
--- a/lib/process-services/app-list/apps-list.component.spec.ts
+++ b/lib/process-services/app-list/apps-list.component.spec.ts
@@ -243,9 +243,9 @@ describe('AppsListComponent', () => {
@Component({
    template: `
    <adf-apps>
-        <adf-empty-custom-content>
+        <adf-custom-empty-content>
            <p id="custom-id">No Apps</p>
-        </adf-empty-custom-content>
+        </adf-custom-empty-content>
    </adf-apps>
       `
 })
--- a/lib/process-services/app-list/apps-list.component.ts
+++ b/lib/process-services/app-list/apps-list.component.ts
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { AppsProcessService, TranslationService, EmptyCustomContentDirective } from '@alfresco/adf-core';
+import { AppsProcessService, TranslationService, CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
 import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild } from '@angular/core';
 import { Observable, Observer, of } from 'rxjs';
 import { AppDefinitionRepresentationModel } from '../task-list';
@@ -37,8 +37,8 @@ export class AppsListComponent implements OnInit, AfterContentInit {
    public static DEFAULT_TASKS_APP_ICON: string = 'glyphicon-asterisk';
    public static DEFAULT_TASKS_APP_MATERIAL_ICON: string = 'favorite_border';

-    @ContentChild(EmptyCustomContentDirective)
-    emptyCustomContent: EmptyCustomContentDirective;
+    @ContentChild(CustomEmptyContentTemplateDirective)
+    emptyCustomContent: CustomEmptyContentTemplateDirective;

    /** (**required**) Defines the layout of the apps. There are two possible
     * values, "GRID" and "LIST".
--- a/lib/process-services/attachment/process-attachment-list.component.html
+++ b/lib/process-services/attachment/process-attachment-list.component.html
@@ -5,7 +5,7 @@
                (showRowActionsMenu)="onShowRowActionsMenu($event)"
                (executeRowAction)="onExecuteRowAction($event)">

-                <no-content-template>
+                <adf-no-content-template>
                    <ng-template>
                        <ng-content *ngIf="hasCustomTemplate; else defaulEmptyList" class="adf-custom-empty-template"></ng-content>
                        <ng-template #defaulEmptyList>
@@ -16,7 +16,7 @@
                            </adf-empty-list>
                        </ng-template>
                    </ng-template>
-                </no-content-template>
+                </adf-no-content-template>

    <data-columns>
        <data-column key="icon" type="image" srTitle="ADF_PROCESS_LIST.PROPERTIES.THUMBNAIL" [sortable]="false"></data-column>
@@ -24,12 +24,12 @@
        <data-column key="created" type="date" format="shortDate" title="{{'ADF_PROCESS_LIST.PROPERTIES.CREATED' | translate}}"></data-column>
    </data-columns>

-    <loading-content-template>
+    <adf-loading-content-template>
        <ng-template>
            <!--Add your custom loading template here-->
            <mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'">
            </mat-progress-spinner>
        </ng-template>
-    </loading-content-template>
+    </adf-loading-content-template>

 </adf-datatable>
--- a/lib/process-services/attachment/task-attachment-list.component.html
+++ b/lib/process-services/attachment/task-attachment-list.component.html
@@ -4,7 +4,7 @@
               (rowDblClick)="openContent($event)"
               (showRowActionsMenu)="onShowRowActionsMenu($event)"
               (executeRowAction)="onExecuteRowAction($event)">
-            <no-content-template>
+            <adf-no-content-template>
                <ng-template>
                    <ng-content *ngIf="hasCustomTemplate; else defaulEmptyList" class="adf-custom-empty-template"></ng-content>
                    <ng-template #defaulEmptyList>
@@ -15,18 +15,18 @@
                        </adf-empty-list>
                    </ng-template>
                </ng-template>
-            </no-content-template>
+            </adf-no-content-template>

            <data-columns>
                <data-column key="icon" type="image" srTitle="ADF_TASK_LIST.PROPERTIES.THUMBNAIL" [sortable]="false"></data-column>
                <data-column key="name" type="text" title="ADF_TASK_LIST.PROPERTIES.NAME" class="adf-full-width adf-ellipsis-cell" [sortable]="true"></data-column>
                <data-column key="created" type="date" format="shortDate" title="ADF_TASK_LIST.PROPERTIES.CREATED"></data-column>
            </data-columns>
-            <loading-content-template>
+            <adf-loading-content-template>
                <ng-template>
                <!--Add your custom loading template here-->
                    <mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'">
                    </mat-progress-spinner>
                </ng-template>
-            </loading-content-template>
+            </adf-loading-content-template>
 </adf-datatable>
--- a/lib/process-services/people/components/people-search/people-search.component.html
+++ b/lib/process-services/people/components/people-search/people-search.component.html
@@ -1,5 +1,5 @@
 <div class="adf-search-text-header">
-    <ng-content select="[people-search-title]"></ng-content>
+    <ng-content select="[adf-people-search-title]"></ng-content>
 </div>

 <adf-people-search-field [performSearch]="performSearch" (rowClick)="onRowClick($event)"></adf-people-search-field>
@@ -9,6 +9,6 @@
        {{'ADF_TASK_LIST.PEOPLE.DIALOG_CLOSE' | translate }}
    </button>
    <button mat-button type="button" id="add-people" (click)="involveUserAndClose()">
-        <ng-content select="[people-search-action-label]"></ng-content>
+        <ng-content select="[adf-people-search-action-label]"></ng-content>
    </button>
 </div>
--- a/lib/process-services/people/components/people/people.component.html
+++ b/lib/process-services/people/components/people/people.component.html
@@ -18,8 +18,8 @@
                    (success)="involveUser($event)"
                    (closeSearch)="onCloseSearch()"
                    [results]="peopleSearch$">
-                    <ng-container people-search-title>{{ 'ADF_TASK_LIST.DETAILS.LABELS.ADD_PEOPLE' | translate }}</ng-container>
-                    <ng-container people-search-action-label>{{ 'ADF_TASK_LIST.PEOPLE.ADD_USER' | translate }}</ng-container>
+                    <ng-container adf-people-search-title>{{ 'ADF_TASK_LIST.DETAILS.LABELS.ADD_PEOPLE' | translate }}</ng-container>
+                    <ng-container adf-people-search-action-label>{{ 'ADF_TASK_LIST.PEOPLE.ADD_USER' | translate }}</ng-container>
                </adf-people-search>
            </div>
            <div class="adf-assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">
--- a/lib/process-services/people/directives/people-search-action-label.directive.ts
+++ b/lib/process-services/people/directives/people-search-action-label.directive.ts
@@ -17,5 +17,8 @@

 import { Directive } from '@angular/core';

-@Directive({ selector: 'people-search-action-label' })
+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0
+ */
+@Directive({ selector: 'adf-people-search-action-label, people-search-action-label' })
 export class PeopleSearchActionLabelDirective { }
--- a/lib/process-services/people/directives/people-search-title.directive.ts
+++ b/lib/process-services/people/directives/people-search-title.directive.ts
@@ -17,5 +17,8 @@

 import { Directive } from '@angular/core';

-@Directive({ selector: 'people-search-title' })
+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0
+ */
+@Directive({ selector: 'adf-people-search-title, people-search-title' })
 export class PeopleSearchTitleDirective { }
--- a/lib/process-services/process-list/components/process-list.component.html
+++ b/lib/process-services/process-list/components/process-list.component.html
@@ -1,31 +1,33 @@
 <adf-datatable #dataTable
-        [data]="data"
-        [rows]="rows"
-        [columns]="columns"
-        [sorting]="sorting"
-        [loading]="isLoading"
-        [selectionMode]="selectionMode"
-        [multiselect]="multiselect"
-        (rowClick)="onRowClick($event)"
-        (row-keyup)="onRowKeyUp($event)">
-        <loading-content-template>
-            <ng-template>
-                <!--Add your custom loading template here-->
-                <mat-progress-spinner
-                    class="adf-process-list-loading-margin"
-                    [color]="'primary'"
-                    [mode]="'indeterminate'">
-                </mat-progress-spinner>
-            </ng-template>
-        </loading-content-template>
-        <no-content-template>
-            <ng-template>
-                    <adf-empty-content *ngIf="!emptyCustomContent"
+    [data]="data"
+    [rows]="rows"
+    [columns]="columns"
+    [sorting]="sorting"
+    [loading]="isLoading"
+    [selectionMode]="selectionMode"
+    [multiselect]="multiselect"
+    (rowClick)="onRowClick($event)"
+    (row-keyup)="onRowKeyUp($event)">
+    <adf-loading-content-template>
+        <ng-template>
+            <!--Add your custom loading template here-->
+            <mat-progress-spinner
+                *ngIf="!customLoadingContent"
+                class="adf-process-list-loading-margin"
+                [color]="'primary'"
+                [mode]="'indeterminate'">
+            </mat-progress-spinner>
+            <ng-content select="adf-custom-loading-content-template"></ng-content>
+        </ng-template>
+    </adf-loading-content-template>
+    <adf-no-content-template>
+        <ng-template>
+                <adf-empty-content *ngIf="!customEmptyContent"
                    icon="assessment"
                    [title]="(requestNode ? 'ADF_PROCESS_LIST.LIST.TITLE' : 'ADF_PROCESS_LIST.FILTERS.MESSAGES.NONE') | translate "
                    [subtitle]="'ADF_PROCESS_LIST.LIST.SUBTITLE'| translate">
-                    </adf-empty-content>
-                <ng-content select="adf-empty-custom-content"></ng-content>
-            </ng-template>
-        </no-content-template>
-    </adf-datatable>
+                </adf-empty-content>
+            <ng-content select="adf-custom-empty-content-template"></ng-content>
+        </ng-template>
+    </adf-no-content-template>
+</adf-datatable>
--- a/lib/process-services/process-list/components/process-list.component.spec.ts
+++ b/lib/process-services/process-list/components/process-list.component.spec.ts
@@ -455,9 +455,9 @@ describe('CustomProcessListComponent', () => {
@Component({
    template: `
    <adf-process-instance-list [appId]="1">
-        <adf-empty-custom-content>
+        <adf-custom-empty-content-template>
            <p id="custom-id"> No Process Instance</p>
-        </adf-empty-custom-content>
+        </adf-custom-empty-content-template>
    </adf-process-instance-list>
       `
 })
--- a/lib/process-services/process-list/components/process-list.component.ts
+++ b/lib/process-services/process-list/components/process-list.component.ts
@@ -19,7 +19,8 @@ import {
    DataTableSchema,
    DataRowEvent,
    DataTableAdapter,
-    EmptyCustomContentDirective
+    CustomEmptyContentTemplateDirective,
+    CustomLoadingContentTemplateDirective
 } from '@alfresco/adf-core';
 import {
    AppConfigService,
@@ -56,7 +57,11 @@ export class ProcessInstanceListComponent extends DataTableSchema  implements On
    static PRESET_KEY = 'adf-process-list.presets';
    public FORMAT_DATE: string = 'll';

-    @ContentChild(EmptyCustomContentDirective) emptyCustomContent: EmptyCustomContentDirective;
+    @ContentChild(CustomEmptyContentTemplateDirective)
+    customEmptyContent: CustomEmptyContentTemplateDirective;
+
+    @ContentChild(CustomLoadingContentTemplateDirective)
+    customLoadingContent: CustomLoadingContentTemplateDirective;

    /** The id of the app. */
    @Input()
--- a/lib/process-services/process-list/components/start-process.component.html
+++ b/lib/process-services/process-list/components/start-process.component.html
@@ -53,7 +53,7 @@
            (outcomeClick)="onOutcomeClick($event)"
            [showRefreshButton]="false">
            <button
-                form-custom-button
+                adf-form-custom-button
                mat-button
                (click)="cancelStartProcess()"
                id="cancel_process">
--- a/lib/process-services/task-list/components/no-task-detail-template.directive.ts
+++ b/lib/process-services/task-list/components/no-task-detail-template.directive.ts
@@ -23,8 +23,11 @@ import {
 } from '@angular/core';
 import { TaskDetailsComponent } from './task-details.component';

+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0
+ */
@Directive({
-    selector: 'no-task-details-template'
+    selector: 'adf-no-task-details-template, no-task-details-template'
 })
 export class NoTaskDetailsTemplateDirective implements AfterContentInit {

--- a/lib/process-services/task-list/components/task-details.component.html
+++ b/lib/process-services/task-list/components/task-details.component.html
@@ -88,9 +88,9 @@
                            (success)="assignTaskToUser($event)"
                            (closeSearch)="onCloseSearch()"
                            [results]="peopleSearch">
-                            <ng-container people-search-title>{{ 'ADF_TASK_LIST.DETAILS.LABELS.ADD_ASSIGNEE' | translate }}
+                            <ng-container adf-people-search-title>{{ 'ADF_TASK_LIST.DETAILS.LABELS.ADD_ASSIGNEE' | translate }}
                            </ng-container>
-                            <ng-container people-search-action-label>{{ 'ADF_TASK_LIST.PEOPLE.ADD_ASSIGNEE' | translate }}
+                            <ng-container adf-people-search-action-label>{{ 'ADF_TASK_LIST.PEOPLE.ADD_ASSIGNEE' | translate }}
                            </ng-container>
                        </adf-people-search>
                    </div>
--- a/lib/process-services/task-list/components/task-list.component.html
+++ b/lib/process-services/task-list/components/task-list.component.html
@@ -12,25 +12,27 @@
            (row-unselect)="onRowUnselect($event)"
            (rowClick)="onRowClick($event)"
            (row-keyup)="onRowKeyUp($event)">
-            <loading-content-template>
+            <adf-loading-content-template>
                <ng-template>
                    <!--Add your custom loading template here-->
                    <mat-progress-spinner
-                    class="adf-task-list-loading-margin"
-                    [color]="'primary'"
-                    [mode]="'indeterminate'">
+                        *ngIf="!customLoadingContent"
+                        class="adf-task-list-loading-margin"
+                        [color]="'primary'"
+                        [mode]="'indeterminate'">
                    </mat-progress-spinner>
+                    <ng-content select="adf-custom-loading-content-template"></ng-content>
                </ng-template>
-            </loading-content-template>
-            <no-content-template>
+            </adf-loading-content-template>
+            <adf-no-content-template>
                <ng-template>
-                    <adf-empty-content *ngIf="!emptyCustomContent"
+                    <adf-empty-content *ngIf="!customEmptyContent"
                        icon="assignment"
                        [title]="'ADF_TASK_LIST.LIST.MESSAGES.TITLE' | translate"
                        [subtitle]="'ADF_TASK_LIST.LIST.MESSAGES.SUBTITLE' | translate">
                    </adf-empty-content>
-                    <ng-content select="adf-empty-custom-content"></ng-content>
+                    <ng-content select="adf-custom-empty-content-template"></ng-content>
                </ng-template>
-            </no-content-template>
+            </adf-no-content-template>
        </adf-datatable>
 </ng-container>
--- a/lib/process-services/task-list/components/task-list.component.spec.ts
+++ b/lib/process-services/task-list/components/task-list.component.spec.ts
@@ -569,9 +569,9 @@ describe('CustomTaskListComponent', () => {
@Component({
    template: `
    <adf-tasklist [appId]="1">
-        <adf-empty-custom-content>
+        <adf-custom-empty-content-template>
            <p id="custom-id">CUSTOM EMPTY</p>
-        </adf-empty-custom-content>
+        </adf-custom-empty-content-template>
    </adf-tasklist>
       `
 })
--- a/lib/process-services/task-list/components/task-list.component.ts
+++ b/lib/process-services/task-list/components/task-list.component.ts
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { DataRowEvent, DataTableAdapter, DataTableSchema, EmptyCustomContentDirective } from '@alfresco/adf-core';
+import { DataRowEvent, DataTableAdapter, DataTableSchema, CustomEmptyContentTemplateDirective, CustomLoadingContentTemplateDirective } from '@alfresco/adf-core';
 import {
    AppConfigService, PaginationComponent, PaginatedComponent,
    UserPreferencesService, UserPreferenceValues, PaginationModel } from '@alfresco/adf-core';
@@ -40,7 +40,11 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
    static PRESET_KEY = 'adf-task-list.presets';
    public FORMAT_DATE: string = 'll';

-    @ContentChild(EmptyCustomContentDirective) emptyCustomContent: EmptyCustomContentDirective;
+    @ContentChild(CustomEmptyContentTemplateDirective)
+    customEmptyContent: CustomEmptyContentTemplateDirective;
+
+    @ContentChild(CustomLoadingContentTemplateDirective)
+    customLoadingContent: CustomLoadingContentTemplateDirective;

    requestNode: TaskQueryRequestRepresentationModel;