[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
This commit is contained in:
davidcanonieto
2019-01-25 12:15:28 +00:00
committed by Eugenio Romano
parent 5887fa1052
commit 1c25b50b1a
115 changed files with 604 additions and 489 deletions

View File

@@ -69,6 +69,7 @@
"CUSTOM_SOURCES": "Custom Sources",
"DATATABLE": "Datatable",
"DATATABLE_LAZY": "Datatable (Lazy)",
"DOCUMENT_LIST": "Document List",
"FORM": "Form",
"FORM_LIST": "Form List",
"FORM_LOADING": "Form Loading",

View File

@@ -75,6 +75,7 @@ import { CloudBreadcrumbsComponent } from './components/app-layout/cloud/cloud-b
import { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-cloud-demo.component';
import { CloudFiltersDemoComponent } from './components/app-layout/cloud/cloud-filters-demo.component';
import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
import { DocumentListDemoComponent } from './components/document-list/document-list-demo.component';
@NgModule({
imports: [
@@ -133,7 +134,8 @@ import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/st
StartTaskCloudDemoComponent,
StartProcessCloudDemoComponent,
CloudBreadcrumbsComponent,
CloudFiltersDemoComponent
CloudFiltersDemoComponent,
DocumentListDemoComponent
],
providers: [
{

View File

@@ -46,6 +46,7 @@ import { AppsCloudDemoComponent } from './components/app-layout/cloud/apps-cloud
import { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-cloud-demo.component';
import { StartTaskCloudDemoComponent } from './components/app-layout/cloud/start-task-cloud-demo.component';
import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
import { DocumentListDemoComponent } from './components/document-list/document-list-demo.component';
export const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
@@ -334,6 +335,10 @@ export const appRoutes: Routes = [
path: 'datatable-lazy',
loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule'
},
{
path: 'document-list',
component: DocumentListDemoComponent
},
{
path: 'task-list',
canActivate: [AuthGuardBpm],

View File

@@ -47,6 +47,7 @@ export class AppLayoutComponent implements OnInit {
{ href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
{ href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
{ href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },
{ href: '/document-list', icon: 'list_alt', title: 'APP_LAYOUT.DOCUMENT_LIST' },
{ href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
{ href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
{ href: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' },

View File

@@ -9,14 +9,14 @@
<ng-template>
<adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-options>
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
</button>
</div>
<div sidebar-menu-options>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>

View File

@@ -0,0 +1,36 @@
<h1>Document List Demo Page</h1>
<h3>Default Loading Template</h3>
<adf-document-list currentFolderId="-my-" #defaultDocumentList>
</adf-document-list>
<h3>Custom Loading Template</h3>
<adf-document-list currentFolderId="-my-" #customLoadingDocumentList>
<adf-custom-loading-content-template>
This is a custom loading template
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</adf-custom-loading-content-template>
</adf-document-list>
<h3>Default No Permission Template</h3>
<adf-document-list currentFolderId="-my-" #defaultNoPermissionDocumentList>
</adf-document-list>
<h3>Custom No Permission Template</h3>
<adf-document-list currentFolderId="-my-" #customNoPermissionDocumentList>
<adf-custom-no-permission-template>
This is a custom no permission template<mat-icon>pan_tool</mat-icon> You shall not see the content
</adf-custom-no-permission-template>
</adf-document-list>
<h3>Default Empty Content Template</h3>
<adf-document-list #defaultEmptyDocumentList>
</adf-document-list>
<h3>Custom Empty Content Template</h3>
<adf-document-list #customEmptyDocumentList>
<adf-custom-empty-content-template>
<div>This is a custom no content template</div>
<mat-icon>cancel_presentation</mat-icon>
</adf-custom-empty-content-template>
</adf-document-list>

View File

@@ -0,0 +1,57 @@
/*!
* @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 { Component, ViewChild, AfterViewChecked } from '@angular/core';
import { DocumentListComponent } from '@alfresco/adf-content-services';
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({
selector: 'app-document-list',
templateUrl: './document-list-demo.component.html'
})
export class DocumentListDemoComponent implements AfterViewChecked {
@ViewChild('defaultDocumentList')
defaultDocumentListComponent: DocumentListComponent;
@ViewChild('customLoadingDocumentList')
customLoadingDocumentList: DocumentListComponent;
@ViewChild('customNoPermissionDocumentList')
customNoPermissionDocumentList: DocumentListComponent;
@ViewChild('defaultNoPermissionDocumentList')
defaultNoPermissionDocumentList: DocumentListComponent;
@ViewChild('customEmptyDocumentList')
customEmptyDocumentList: DocumentListComponent;
@ViewChild('defaultEmptyDocumentList')
defaultEmptyDocumentList: DocumentListComponent;
constructor() {
}
ngAfterViewChecked(): void {
this.defaultDocumentListComponent.dataTable.loading = true;
this.customLoadingDocumentList.dataTable.loading = true;
this.customEmptyDocumentList.dataTable.data = new ObjectDataTableAdapter();
this.defaultEmptyDocumentList.dataTable.data = new ObjectDataTableAdapter();
this.customNoPermissionDocumentList.dataTable.noPermission = true;
this.defaultNoPermissionDocumentList.dataTable.noPermission = true;
}
}

View File

@@ -16,14 +16,12 @@
[maxItems]="5"
(preview)="showFile($event)"
selectionMode="null">
<empty-folder-content>
<ng-template>
<div class="adf-empty-list__block">
<mat-icon>history</mat-icon>
<p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
</div>
</ng-template>
</empty-folder-content>
<adf-custom-empty-content-template>
<div class="adf-empty-list__block">
<mat-icon>history</mat-icon>
<p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
</div>
</adf-custom-empty-content-template>
</adf-document-list>
</mat-expansion-panel>
</mat-accordion>
@@ -227,18 +225,18 @@
(folderChange)="onFolderChange($event)"
(permissionError)="handlePermissionError($event)"
(name-click)="documentList.onNodeDblClick($event.detail?.node)">
<no-permission-content *ngIf="enableCustomPermissionMessage">
<adf-custom-no-permission-template *ngIf="enableCustomPermissionMessage">
<ng-template>
<h1>You don't have permissions</h1>
</ng-template>
</no-permission-content>
<empty-folder-content *ngIf="disableDragArea">
</adf-custom-no-permission-template>
<adf-custom-empty-content-template *ngIf="disableDragArea">
<ng-template>
<div class="adf-empty_template">
<div class="adf-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
</div>
</ng-template>
</empty-folder-content>
</adf-custom-empty-content-template>
<data-columns>
<data-column
key="$thumbnail"

View File

@@ -8,7 +8,7 @@
<adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-options>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-task" (click)="navigateStartTask()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
@@ -120,7 +120,7 @@
<adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-options>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-process"
(click)="navigateStartProcess()">
<mat-icon>assessment</mat-icon>

View File

@@ -38,16 +38,14 @@
[contextMenuActions]="true"
[contentActions]="false">
<empty-folder-content>
<ng-template>
<adf-empty-content
icon="delete"
[title]="'TRASHCAN.EMPTY_STATE.TITLE'">
<p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
<p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
</adf-empty-content>
</ng-template>
</empty-folder-content>
<adf-custom-empty-content-template>
<adf-empty-content
icon="delete"
[title]="'TRASHCAN.EMPTY_STATE.TITLE'">
<p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
<p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
</adf-empty-content>
</adf-custom-empty-content-template>
<data-columns>