mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[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:
committed by
Eugenio Romano
parent
5887fa1052
commit
1c25b50b1a
@@ -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",
|
||||
|
@@ -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: [
|
||||
{
|
||||
|
@@ -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],
|
||||
|
@@ -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' },
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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"
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
||||
|
Reference in New Issue
Block a user