[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-31 17:38:48 +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/core/context-menu/context-menu.directive.ts
+++ b/lib/core/context-menu/context-menu.directive.ts
@@ -21,15 +21,15 @@ import { Directive, HostListener, Input } from '@angular/core';
 import { ContextMenuOverlayService } from './context-menu-overlay.service';

@Directive({
-    selector: '[context-menu]'
+    selector: '[adf-context-menu], [context-menu]'
 })
 export class ContextMenuDirective {
    /** Items for the menu. */
-    @Input('context-menu')
+    @Input('adf-context-menu')
    links: any[];

    /** Is the menu enabled? */
-    @Input('context-menu-enabled')
+    @Input('adf-context-menu-enabled')
    enabled: boolean = false;

    constructor(private contextMenuService: ContextMenuOverlayService) {}
--- a/lib/core/context-menu/context-menu.spec.ts
+++ b/lib/core/context-menu/context-menu.spec.ts
@@ -24,7 +24,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@Component({
    selector: 'adf-test-component',
    template: `
-        <div id="target" [context-menu]="actions" [context-menu-enabled]="true"></div>
+        <div id="target" [adf-context-menu]="actions" [adf-context-menu-enabled]="true"></div>
    `
 })
 class TestComponent {
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@@ -89,8 +89,8 @@
                     tabindex="0"
                     (click)="onRowClick(row, $event)"
                     (keydown.enter)="onEnterKeyPressed(row, $event)"
-                     [context-menu]="getContextMenuActions(row, col)"
-                     [context-menu-enabled]="contextMenu">
+                     [adf-context-menu]="getContextMenuActions(row, col)"
+                     [adf-context-menu-enabled]="contextMenu">
                    <div *ngIf="!col.template" class="adf-cell-container">
                        <ng-container [ngSwitch]="col.type">
                            <div *ngSwitchCase="'image'" class="adf-cell-value">
--- a/lib/core/datatable/datatable.module.ts
+++ b/lib/core/datatable/datatable.module.ts
@@ -37,7 +37,9 @@ import { LocationCellComponent } from './components/datatable/location-cell.comp
 import { LoadingContentTemplateDirective } from './directives/loading-template.directive';
 import { NoContentTemplateDirective } from './directives/no-content-template.directive';
 import { NoPermissionTemplateDirective } from './directives/no-permission-template.directive';
-import { EmptyCustomContentDirective } from './directives/empty-custom-content.directive';
+import { CustomEmptyContentTemplateDirective } from './directives/custom-empty-content-template.directive';
+import { CustomLoadingContentTemplateDirective } from './directives/custom-loading-template.directive';
+import { CustomNoPermissionTemplateDirective } from './directives/custom-no-permission-template.directive';

@NgModule({
    imports: [
@@ -62,7 +64,9 @@ import { EmptyCustomContentDirective } from './directives/empty-custom-content.d
        NoContentTemplateDirective,
        NoPermissionTemplateDirective,
        LoadingContentTemplateDirective,
-        EmptyCustomContentDirective
+        CustomEmptyContentTemplateDirective,
+        CustomLoadingContentTemplateDirective,
+        CustomNoPermissionTemplateDirective
    ],
    exports: [
        DataTableComponent,
@@ -77,7 +81,9 @@ import { EmptyCustomContentDirective } from './directives/empty-custom-content.d
        NoContentTemplateDirective,
        NoPermissionTemplateDirective,
        LoadingContentTemplateDirective,
-        EmptyCustomContentDirective
+        CustomEmptyContentTemplateDirective,
+        CustomLoadingContentTemplateDirective,
+        CustomNoPermissionTemplateDirective
    ]
 })
 export class DataTableModule {}
--- a/lib/core/datatable/directives/custom-empty-content-template.directive.ts
+++ b/lib/core/datatable/directives/custom-empty-content-template.directive.ts
@@ -0,0 +1,29 @@
+/*!
+ * @license
+ * Copyright 2016 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 { Directive } from '@angular/core';
+
+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0.
+ * The empty-folder-content selector will be deprecated as it has been replace by
+ * adf-custom-empty-content-template.
+ */
+@Directive({
+    selector: 'adf-custom-empty-content-template, empty-folder-content'
+})
+
+export class CustomEmptyContentTemplateDirective {}
--- a/lib/core/datatable/directives/custom-loading-template.directive.ts
+++ b/lib/core/datatable/directives/custom-loading-template.directive.ts
@@ -18,7 +18,6 @@
 import { Directive } from '@angular/core';

@Directive({
-    selector: 'adf-empty-custom-content'
+    selector: 'adf-custom-loading-content-template'
 })
-
-export class EmptyCustomContentDirective {}
+export class CustomLoadingContentTemplateDirective {}
--- a/lib/core/datatable/directives/custom-no-permission-template.directive.ts
+++ b/lib/core/datatable/directives/custom-no-permission-template.directive.ts
@@ -0,0 +1,28 @@
+/*!
+ * @license
+ * Copyright 2016 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 { Directive } from '@angular/core';
+
+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0.
+ * The no-permission-content selector will be deprecated as it has been replace by
+ * adf-custom-no-permission-template.
+ */
+@Directive({
+    selector: 'adf-custom-no-permission-template, no-permission-content'
+})
+export class CustomNoPermissionTemplateDirective {}
--- a/lib/core/datatable/directives/loading-template.directive.ts
+++ b/lib/core/datatable/directives/loading-template.directive.ts
@@ -18,8 +18,11 @@
 import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
 import { DataTableComponent } from '../components/datatable/datatable.component';

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

--- a/lib/core/datatable/directives/no-content-template.directive.ts
+++ b/lib/core/datatable/directives/no-content-template.directive.ts
@@ -18,8 +18,11 @@
 import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
 import { DataTableComponent } from '../components/datatable/datatable.component';

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

--- a/lib/core/datatable/directives/no-permission-template.directive.ts
+++ b/lib/core/datatable/directives/no-permission-template.directive.ts
@@ -18,8 +18,11 @@
 import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
 import { DataTableComponent } from '../components/datatable/datatable.component';

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

--- a/lib/core/datatable/public-api.ts
+++ b/lib/core/datatable/public-api.ts
@@ -40,6 +40,8 @@ export * from './data/data-table.schema';
 export * from './directives/loading-template.directive';
 export * from './directives/no-content-template.directive';
 export * from './directives/no-permission-template.directive';
-export * from './directives/empty-custom-content.directive';
+export * from './directives/custom-empty-content-template.directive';
+export * from './directives/custom-loading-template.directive';
+export * from './directives/custom-no-permission-template.directive';

 export * from './datatable.module';
--- a/lib/core/directives/node-download.directive.ts
+++ b/lib/core/directives/node-download.directive.ts
@@ -21,8 +21,11 @@ import { AlfrescoApiService } from '../services/alfresco-api.service';
 import { DownloadZipDialogComponent } from '../dialogs/download-zip.dialog';
 import { NodeEntry } from '@alfresco/js-api';

+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0
+ */
@Directive({
-    selector: '[adfNodeDownload]'
+    selector: '[adf-node-download], [adfNodeDownload]'
 })
 export class NodeDownloadDirective {

--- a/lib/core/form/components/form-custom-button.directive.ts
+++ b/lib/core/form/components/form-custom-button.directive.ts
@@ -17,4 +17,7 @@

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

-@Directive({ selector: '[form-custom-button]' }) export class StartFormCustomButtonDirective {}
+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0
+ */
+@Directive({ selector: '[adf-form-custom-button], [form-custom-button]' }) export class StartFormCustomButtonDirective {}
--- a/lib/core/form/components/start-form.component.html
+++ b/lib/core/form/components/start-form.component.html
@@ -18,7 +18,7 @@
        </mat-card-content>
        <mat-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()"
                          #outcomesContainer>
-            <ng-content select="[form-custom-button]"></ng-content>
+            <ng-content select="[adf-form-custom-button]"></ng-content>
            <button *ngFor="let outcome of form.outcomes"
                    mat-button
                    [attr.data-automation-id]="'adf-form-' + outcome.name  | lowercase"
--- a/lib/core/form/components/widgets/text/text-mask.component.ts
+++ b/lib/core/form/components/widgets/text/text-mask.component.ts
@@ -35,8 +35,11 @@ export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    multi: true
 };

+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0
+ */
@Directive({
-    selector: '[textMask]',
+    selector: '[adf-text-mask], [textMask]',
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
 })
 export class InputMaskDirective implements OnChanges, ControlValueAccessor {
--- a/lib/core/info-drawer/info-drawer-layout.component.ts
+++ b/lib/core/info-drawer/info-drawer-layout.component.ts
@@ -26,6 +26,9 @@ import { Component, Directive, ViewEncapsulation } from '@angular/core';
 })
 export class InfoDrawerLayoutComponent {}

-@Directive({ selector: '[info-drawer-title]' }) export class InfoDrawerTitleDirective {}
-@Directive({ selector: '[info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
-@Directive({ selector: '[info-drawer-content]' }) export class InfoDrawerContentDirective {}
+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0
+ */
+@Directive({ selector: '[adf-info-drawer-title], [info-drawer-title]' }) export class InfoDrawerTitleDirective {}
+@Directive({ selector: '[adf-info-drawer-buttons], [info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
+@Directive({ selector: '[adf-info-drawer-content], [info-drawer-content]' }) export class InfoDrawerContentDirective {}
--- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.html
+++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.html
@@ -1,16 +1,16 @@
 <div class="adf-sidebar-action-menu">
    <button *ngIf="isExpanded()" mat-raised-button class="adf-sidebar-action-menu-button" data-automation-id="create-button" [matMenuTriggerFor]="adfSidebarMenu">
        <span *ngIf="title" class="adf-sidebar-action-menu-text">{{ title }}</span>
-        <ng-content select="[sidebar-menu-title-icon]"></ng-content>
+        <ng-content select="[adf-sidebar-menu-title-icon]"></ng-content>
    </button>

    <div *ngIf="!isExpanded()" class="adf-sidebar-action-menu-icon" [matMenuTriggerFor]="adfSidebarMenu">
-        <ng-content select="[sidebar-menu-expand-icon]"></ng-content>
+        <ng-content select="[adf-sidebar-menu-expand-icon]"></ng-content>
    </div>

    <mat-menu #adfSidebarMenu="matMenu" class="adf-sidebar-action-menu-panel" [overlapTrigger]="false" yPosition="below">
        <div class="adf-sidebar-action-menu-options" [style.width.px]="width">
-            <ng-content select="[sidebar-menu-options]"></ng-content>
+            <ng-content select="[adf-sidebar-menu-options]"></ng-content>
        </div>
    </mat-menu>
 </div>
--- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts
+++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts
@@ -58,11 +58,11 @@ describe('SidebarActionMenuComponent', () => {
@Component({
    template: `
    <adf-sidebar-action-menu [expanded]="expanded" [title]="title">
-    <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
-    <div sidebar-menu-expand-icon>
+    <mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+    <div adf-sidebar-menu-expand-icon>
        <mat-icon>queue</mat-icon>
    </div>
-    <div sidebar-menu-options>
+    <div adf-sidebar-menu-options>
        <button mat-menu-item>
            <mat-icon>assignment</mat-icon>
            <span>Option1</span>
@@ -122,7 +122,7 @@ describe('Custom SidebarActionMenuComponent', () => {
        expect(title.textContent).toBe('FakeTitle');
    });

-    it('should render the sidebar-menu-options', () => {
+    it('should render the adf-sidebar-menu-options', () => {
        fixture.detectChanges();
        const actionButton = fixture.nativeElement.querySelector('.adf-sidebar-action-menu-button');
        const options = fixture.nativeElement.querySelectorAll('.adf-sidebar-action-menu-options');
--- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts
+++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts
@@ -45,6 +45,9 @@ export class SidebarActionMenuComponent {
    }
 }

-@Directive({ selector: '[sidebar-menu-options]' }) export class SidebarMenuDirective {}
-@Directive({ selector: '[sidebar-menu-title-icon]' }) export class SidebarMenuTitleIconDirective { }
-@Directive({ selector: '[sidebar-menu-expand-icon]' }) export class SidebarMenuExpandIconDirective { }
+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0
+ */
+@Directive({ selector: '[adf-sidebar-menu-options], [sidebar-menu-options]' }) export class SidebarMenuDirective {}
+@Directive({ selector: '[adf-sidebar-menu-title-icon], [sidebar-menu-title-icon]' }) export class SidebarMenuTitleIconDirective { }
+@Directive({ selector: '[adf-sidebar-menu-expand-icon], [sidebar-menu-expand-icon]' }) export class SidebarMenuExpandIconDirective { }
--- a/lib/core/login/components/login-dialog-panel.component.html
+++ b/lib/core/login/components/login-dialog-panel.component.html
@@ -5,7 +5,7 @@
               [showLoginActions]="false"
               [backgroundImageUrl]="''"
               (success)="onLoginSuccess($event)">
-        <login-header><ng-template></ng-template></login-header>
-        <login-footer><ng-template></ng-template></login-footer>
+        <adf-login-header><ng-template></ng-template></adf-login-header>
+        <adf-login-footer><ng-template></ng-template></adf-login-footer>
    </adf-login>
 </div>
--- a/lib/core/login/directives/login-footer.directive.ts
+++ b/lib/core/login/directives/login-footer.directive.ts
@@ -23,8 +23,11 @@ import {
 } from '@angular/core';
 import { LoginComponent } from '../components/login.component';

+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0
+ */
@Directive({
-    selector: 'login-footer'
+    selector: 'adf-login-footer, login-footer'
 })
 export class LoginFooterDirective implements AfterContentInit {

--- a/lib/core/login/directives/login-header.directive.ts
+++ b/lib/core/login/directives/login-header.directive.ts
@@ -23,8 +23,11 @@ import {
 } from '@angular/core';
 import { LoginComponent } from '../components/login.component';

+/**
+ * Directive selectors without adf- prefix will be deprecated on 3.0.0
+ */
@Directive({
-    selector: 'login-header'
+    selector: 'adf-login-header, login-header'
 })
 export class LoginHeaderDirective implements AfterContentInit {