inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [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
Download Patch File Download Diff File Expand all files Collapse all files

76
lib/content-services/document-list/components/document-list.component.html
View File

@@ -23,45 +23,43 @@
(row-unselect)="onNodeUnselect($event.detail)"
[class.adf-datatable-gallery-thumbnails]="data.thumbnails">
<div *ngIf="!isEmptyTemplateDefined()">
<no-content-template>
<ng-template>
<adf-empty-list>
<div class="adf-empty-list_template adf-empty-folder">
<div class="adf-empty-folder-this-space-is-empty">{{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}}</div>
<div fxHide.lt-md="true" class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
<div fxHide.lt-md="true" class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
<img class="adf-empty-folder-image" [src]="emptyFolderImageUrl">
</div>
<!-- <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}} </div> -->
</adf-empty-list>
</ng-template>
</no-content-template>
</div>
<div *ngIf="!isNoPermissionTemplateDefined()">
<no-permission-template>
<ng-template>
<div class="adf-no-permission__template">
<mat-icon>ic_error</mat-icon>
<p class="adf-no-permission__template--text">{{ 'ADF-DOCUMENT-LIST.NO_PERMISSION' | translate }}</p>
<adf-no-content-template>
<ng-template>
<adf-empty-list *ngIf="!customNoContentTemplate">
<div class="adf-empty-list_template adf-empty-folder">
<div class="adf-empty-folder-this-space-is-empty">{{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}}</div>
<div fxHide.lt-md="true" class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
<div fxHide.lt-md="true" class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
<img class="adf-empty-folder-image" [src]="emptyFolderImageUrl">
</div>
</ng-template>
</no-permission-template>
</div>
<!-- <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}} </div> -->
</adf-empty-list>
<ng-content select="adf-custom-empty-content-template"></ng-content>
</ng-template>
</adf-no-content-template>
<adf-no-permission-template>
<ng-template>
<div class="adf-no-permission__template" *ngIf="!customNoPermissionsTemplate">
<mat-icon>ic_error</mat-icon>
<p class="adf-no-permission__template--text">{{ 'ADF-DOCUMENT-LIST.NO_PERMISSION' | translate }}</p>
</div>
<ng-content select="adf-custom-no-permission-template"></ng-content>
</ng-template>
</adf-no-permission-template>
<adf-loading-content-template>
<ng-template>
<div class="adf-document-list-loading-container" *ngIf="!customLoadingContent">
<mat-progress-spinner
id="adf-document-list-loading"
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</mat-progress-spinner>
</div>
<ng-content select="adf-custom-loading-content-template"></ng-content>
</ng-template>
</adf-loading-content-template>
<div>
<loading-content-template>
<ng-template>
<div class="adf-document-list-loading-container">
<mat-progress-spinner
id="adf-document-list-loading"
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</mat-progress-spinner>
</div>
</ng-template>
</loading-content-template>
</div>
</adf-datatable>

41
lib/content-services/document-list/components/document-list.component.spec.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange, TemplateRef, QueryList } from '@angular/core';
import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange, QueryList } from '@angular/core';
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { AlfrescoApiService, DataColumnListComponent, DataColumnComponent } from '@alfresco/adf-core';
import { DataColumn, DataTableComponent } from '@alfresco/adf-core';
@@ -39,6 +39,7 @@ import { DocumentListComponent } from './document-list.component';
import { setupTestBed } from '@alfresco/adf-core';
import { ContentTestingModule } from '../../testing/content.testing.module';
import { NodeEntry } from '@alfresco/js-api';
import { By } from '@angular/platform-browser';
describe('DocumentList', () => {
@@ -846,42 +847,26 @@ describe('DocumentList', () => {
expect(documentList.navigationMode).toBe(DocumentListComponent.SINGLE_CLICK_NAVIGATION);
});
it('should require dataTable to check empty template', () => {
documentList.dataTable = null;
expect(documentList.isEmptyTemplateDefined()).toBeFalsy();
});
it('should check [empty folder] template ', () => {
documentList.emptyFolderTemplate = <TemplateRef<any>> {};
it('should display [empty folder] template ', () => {
fixture.detectChanges();
documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.dataTable).toBeDefined();
expect(documentList.isEmptyTemplateDefined()).toBeTruthy();
documentList.emptyFolderTemplate = null;
expect(documentList.isEmptyTemplateDefined()).toBeFalsy();
expect(fixture.debugElement.query(By.css('adf-empty-list'))).not.toBeNull();
});
it('should require dataTable to check no permission template', () => {
documentList.dataTable = null;
expect(documentList.isNoPermissionTemplateDefined()).toBe(false);
it('should display no permission template when the user has no permission', () => {
documentList.noPermission = true;
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('.adf-no-permission__template'))).not.toBeNull();
});
it('should return true if custom permission template is provided', () => {
documentList.noPermissionTemplate = <TemplateRef<any>> {};
documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.isNoPermissionTemplateDefined()).toBe(true);
});
it('should return false if no custom permission template is provided', () => {
documentList.noPermissionTemplate = null;
documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.isNoPermissionTemplateDefined()).toBe(false);
it('should display loading template when data is loading', () => {
documentList.loading = true;
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('mat-progress-spinner'))).not.toBeNull();
});
it('should empty folder NOT show the pagination', () => {
documentList.emptyFolderTemplate = <TemplateRef<any>> {};
documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.isEmpty()).toBeTruthy();

33
lib/content-services/document-list/components/document-list.component.ts
View File

@@ -19,13 +19,13 @@
import {
AfterContentInit, Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, NgZone,
OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation
OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation
} from '@angular/core';
import {
ContentService, DataCellEvent, DataColumn, DataRowActionEvent, DataSorting, DataTableComponent,
DisplayMode, ObjectDataColumn, PaginatedComponent, AppConfigService, DataColumnListComponent,
UserPreferencesService, PaginationModel, ThumbnailService
UserPreferencesService, PaginationModel, ThumbnailService, CustomLoadingContentTemplateDirective, CustomNoPermissionTemplateDirective, CustomEmptyContentTemplateDirective
} from '@alfresco/adf-core';
import { Node, NodeEntry, NodePaging } from '@alfresco/js-api';
@@ -60,6 +60,15 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
@ContentChild(DataColumnListComponent)
columnList: DataColumnListComponent;
@ContentChild(CustomLoadingContentTemplateDirective)
customLoadingContent: CustomLoadingContentTemplateDirective;
@ContentChild(CustomNoPermissionTemplateDirective)
customNoPermissionsTemplate: CustomNoPermissionTemplateDirective;
@ContentChild(CustomEmptyContentTemplateDirective)
customNoContentTemplate: CustomEmptyContentTemplateDirective;
/** Include additional information about the node in the server request. For example: association, isLink, isLocked and others. */
@Input()
includeFields: string[];
@@ -212,8 +221,6 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
dataTable: DataTableComponent;
actions: ContentActionModel[] = [];
emptyFolderTemplate: TemplateRef<any>;
noPermissionTemplate: TemplateRef<any>;
contextActionHandler: Subject<any> = new Subject();
data: ShareDataTableAdapter;
noPermission: boolean = false;
@@ -283,24 +290,6 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
return this._pagination;
}
isEmptyTemplateDefined(): boolean {
if (this.dataTable) {
if (this.emptyFolderTemplate) {
return true;
}
}
return false;
}
isNoPermissionTemplateDefined(): boolean {
if (this.dataTable) {
if (this.noPermissionTemplate) {
return true;
}
}
return false;
}
isMobile(): boolean {
return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

53
lib/content-services/document-list/components/empty-folder/empty-folder-content.directive.spec.ts
View File

@@ -1,53 +0,0 @@
/*!
* @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 { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { DataTableComponent, setupTestBed } from '@alfresco/adf-core';
import { DocumentListComponent } from './../document-list.component';
import { EmptyFolderContentDirective } from './empty-folder-content.directive';
import { ContentTestingModule } from '../../../testing/content.testing.module';
describe('EmptyFolderContent', () => {
let emptyFolderContent: EmptyFolderContentDirective;
let documentList: DocumentListComponent;
setupTestBed({
imports: [ContentTestingModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
});
beforeEach(() => {
documentList = (TestBed.createComponent(DocumentListComponent).componentInstance as DocumentListComponent);
documentList.dataTable = new DataTableComponent(null, null);
emptyFolderContent = new EmptyFolderContentDirective(documentList);
});
it('is defined', () => {
expect(emptyFolderContent).toBeDefined();
});
it('set template', () => {
emptyFolderContent.template = '<example>';
emptyFolderContent.ngAfterContentInit();
expect(emptyFolderContent.template).toBe(documentList.emptyFolderTemplate);
expect(emptyFolderContent.template).toBe(documentList.dataTable.noContentTemplate);
});
});

36
lib/content-services/document-list/components/empty-folder/empty-folder-content.directive.ts
View File

@@ -1,36 +0,0 @@
/*!
* @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 { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
import { DocumentListComponent } from './../document-list.component';
@Directive({
selector: 'empty-folder-content'
})
export class EmptyFolderContentDirective implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
constructor(private documentList: DocumentListComponent) {
}
ngAfterContentInit() {
this.documentList.emptyFolderTemplate = this.template;
this.documentList.dataTable.noContentTemplate = this.template;
}
}

51
lib/content-services/document-list/components/no-permission/no-permission-content.directive.spec.ts
View File

@@ -1,51 +0,0 @@
/*!
* @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 { TestBed } from '@angular/core/testing';
import { DataTableComponent, setupTestBed } from '@alfresco/adf-core';
import { DocumentListComponent } from './../document-list.component';
import { NoPermissionContentDirective } from './no-permission-content.directive';
import { ContentTestingModule } from '../../../testing/content.testing.module';
describe('NoPermissionContentDirective', () => {
let noPermissionContent: NoPermissionContentDirective;
let documentList: DocumentListComponent;
setupTestBed({
imports: [ContentTestingModule]
});
beforeEach(() => {
documentList = (TestBed.createComponent(DocumentListComponent).componentInstance as DocumentListComponent);
documentList.dataTable = new DataTableComponent(null, null);
noPermissionContent = new NoPermissionContentDirective(documentList);
});
it('should be defined', () => {
expect(noPermissionContent).toBeDefined();
});
it('should set template', () => {
noPermissionContent.template = '<example>';
noPermissionContent.ngAfterContentInit();
expect(noPermissionContent.template).toBe(documentList.noPermissionTemplate);
expect(noPermissionContent.template).toBe(documentList.dataTable.noPermissionTemplate);
});
});

36
lib/content-services/document-list/components/no-permission/no-permission-content.directive.ts
View File

@@ -1,36 +0,0 @@
/*!
* @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 { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
import { DocumentListComponent } from './../document-list.component';
@Directive({
selector: 'no-permission-content'
})
export class NoPermissionContentDirective implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
constructor(private documentList: DocumentListComponent) {
}
ngAfterContentInit() {
this.documentList.noPermissionTemplate = this.template;
this.documentList.dataTable.noPermissionTemplate = this.template;
}
}

10
lib/content-services/document-list/document-list.module.ts
View File

@@ -29,8 +29,6 @@ import { ContentColumnListComponent } from './components/content-column/content-
import { ContentColumnComponent } from './components/content-column/content-column.component';
import { DocumentListComponent } from './components/document-list.component';
import { EmptyFolderContentDirective } from './components/empty-folder/empty-folder-content.directive';
import { NoPermissionContentDirective } from './components/no-permission/no-permission-content.directive';
import { TrashcanNameColumnComponent } from './components/trashcan-name-column/trashcan-name-column.component';
import { LibraryStatusColumnComponent } from './components/library-status-column/library-status-column.component';
import { LibraryRoleColumnComponent } from './components/library-role-column/library-role-column.component';
@@ -55,9 +53,7 @@ import { NameColumnComponent } from './components/name-column/name-column.compon
NameColumnComponent,
ContentColumnListComponent,
ContentActionComponent,
ContentActionListComponent,
EmptyFolderContentDirective,
NoPermissionContentDirective
ContentActionListComponent
],
exports: [
DocumentListComponent,
@@ -69,9 +65,7 @@ import { NameColumnComponent } from './components/name-column/name-column.compon
NameColumnComponent,
ContentColumnListComponent,
ContentActionComponent,
ContentActionListComponent,
EmptyFolderContentDirective,
NoPermissionContentDirective
ContentActionListComponent
],
entryComponents: [
TrashcanNameColumnComponent,

2
lib/content-services/document-list/public-api.ts
View File

@@ -21,8 +21,6 @@ export * from './components/content-column/content-column.component';
export * from './components/content-column/content-column-list.component';
export * from './components/content-action/content-action.component';
export * from './components/content-action/content-action-list.component';
export * from './components/empty-folder/empty-folder-content.directive';
export * from './components/no-permission/no-permission-content.directive';
export * from './components/library-name-column/library-name-column.component';
export * from './components/library-role-column/library-role-column.component';
export * from './components/library-status-column/library-status-column.component';