[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
+1
View File
@@ -69,6 +69,7 @@
"CUSTOM_SOURCES": "Custom Sources", "CUSTOM_SOURCES": "Custom Sources",
"DATATABLE": "Datatable", "DATATABLE": "Datatable",
"DATATABLE_LAZY": "Datatable (Lazy)", "DATATABLE_LAZY": "Datatable (Lazy)",
"DOCUMENT_LIST": "Document List",
"FORM": "Form", "FORM": "Form",
"FORM_LIST": "Form List", "FORM_LIST": "Form List",
"FORM_LOADING": "Form Loading", "FORM_LOADING": "Form Loading",
+3 -1
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 { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-cloud-demo.component';
import { CloudFiltersDemoComponent } from './components/app-layout/cloud/cloud-filters-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 { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
import { DocumentListDemoComponent } from './components/document-list/document-list-demo.component';
@NgModule({ @NgModule({
imports: [ imports: [
@@ -133,7 +134,8 @@ import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/st
StartTaskCloudDemoComponent, StartTaskCloudDemoComponent,
StartProcessCloudDemoComponent, StartProcessCloudDemoComponent,
CloudBreadcrumbsComponent, CloudBreadcrumbsComponent,
CloudFiltersDemoComponent CloudFiltersDemoComponent,
DocumentListDemoComponent
], ],
providers: [ providers: [
{ {
+5
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 { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-cloud-demo.component';
import { StartTaskCloudDemoComponent } from './components/app-layout/cloud/start-task-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 { 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 = [ export const appRoutes: Routes = [
{ path: 'login', component: LoginComponent }, { path: 'login', component: LoginComponent },
@@ -334,6 +335,10 @@ export const appRoutes: Routes = [
path: 'datatable-lazy', path: 'datatable-lazy',
loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule' loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule'
}, },
{
path: 'document-list',
component: DocumentListDemoComponent
},
{ {
path: 'task-list', path: 'task-list',
canActivate: [AuthGuardBpm], canActivate: [AuthGuardBpm],
@@ -47,6 +47,7 @@ export class AppLayoutComponent implements OnInit {
{ href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' }, { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
{ href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' }, { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
{ href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' }, { 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', icon: 'poll', title: 'APP_LAYOUT.FORM' },
{ href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' }, { href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
{ href: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' }, { href: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' },
@@ -9,14 +9,14 @@
<ng-template> <ng-template>
<adf-sidebar-action-menu [expanded]="true" [width]="205" <adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}"> title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon> <mat-icon adf-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)="onStartTask()"> <button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
<mat-icon>assessment</mat-icon> <mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span> <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
</button> </button>
</div> </div>
<div sidebar-menu-options> <div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()"> <button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
<mat-icon>assessment</mat-icon> <mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span> <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" [maxItems]="5"
(preview)="showFile($event)" (preview)="showFile($event)"
selectionMode="null"> selectionMode="null">
<empty-folder-content> <adf-custom-empty-content-template>
<ng-template> <div class="adf-empty-list__block">
<div class="adf-empty-list__block"> <mat-icon>history</mat-icon>
<mat-icon>history</mat-icon> <p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
<p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p> </div>
</div> </adf-custom-empty-content-template>
</ng-template>
</empty-folder-content>
</adf-document-list> </adf-document-list>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
@@ -227,18 +225,18 @@
(folderChange)="onFolderChange($event)" (folderChange)="onFolderChange($event)"
(permissionError)="handlePermissionError($event)" (permissionError)="handlePermissionError($event)"
(name-click)="documentList.onNodeDblClick($event.detail?.node)"> (name-click)="documentList.onNodeDblClick($event.detail?.node)">
<no-permission-content *ngIf="enableCustomPermissionMessage"> <adf-custom-no-permission-template *ngIf="enableCustomPermissionMessage">
<ng-template> <ng-template>
<h1>You don't have permissions</h1> <h1>You don't have permissions</h1>
</ng-template> </ng-template>
</no-permission-content> </adf-custom-no-permission-template>
<empty-folder-content *ngIf="disableDragArea"> <adf-custom-empty-content-template *ngIf="disableDragArea">
<ng-template> <ng-template>
<div class="adf-empty_template"> <div class="adf-empty_template">
<div class="adf-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div> <div class="adf-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
</div> </div>
</ng-template> </ng-template>
</empty-folder-content> </adf-custom-empty-content-template>
<data-columns> <data-columns>
<data-column <data-column
key="$thumbnail" key="$thumbnail"
@@ -8,7 +8,7 @@
<adf-sidebar-action-menu [expanded]="true" [width]="205" <adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}"> title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon> <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()"> <button mat-menu-item data-automation-id="btn-start-task" (click)="navigateStartTask()">
<mat-icon>assessment</mat-icon> <mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span> <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
@@ -120,7 +120,7 @@
<adf-sidebar-action-menu [expanded]="true" [width]="205" <adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}"> title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon> <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" <button mat-menu-item data-automation-id="btn-start-process"
(click)="navigateStartProcess()"> (click)="navigateStartProcess()">
<mat-icon>assessment</mat-icon> <mat-icon>assessment</mat-icon>
@@ -38,16 +38,14 @@
[contextMenuActions]="true" [contextMenuActions]="true"
[contentActions]="false"> [contentActions]="false">
<empty-folder-content> <adf-custom-empty-content-template>
<ng-template> <adf-empty-content
<adf-empty-content icon="delete"
icon="delete" [title]="'TRASHCAN.EMPTY_STATE.TITLE'">
[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.FIRST_TEXT' | translate }}</p> <p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
<p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p> </adf-empty-content>
</adf-empty-content> </adf-custom-empty-content-template>
</ng-template>
</empty-folder-content>
<data-columns> <data-columns>
@@ -37,6 +37,7 @@ Displays the documents from a repository.
- [Custom image resolver](#custom-image-resolver) - [Custom image resolver](#custom-image-resolver)
- [Custom 'empty folder' template](#custom-empty-folder-template) - [Custom 'empty folder' template](#custom-empty-folder-template)
- [Custom 'permission denied' template](#custom-permission-denied-template) - [Custom 'permission denied' template](#custom-permission-denied-template)
- [Custom 'loading' template](#custom-loading-template)
- [See also](#see-also) - [See also](#see-also)
## Basic Usage ## Basic Usage
@@ -827,11 +828,9 @@ However, you can change this by defining your own custom HTML template:
```html ```html
<adf-document-list ...> <adf-document-list ...>
<empty-folder-content> <adf-custom-empty-content-template>
<ng-template> <h1>Sorry, no content here</h1>
<h1>Sorry, no content here</h1> </adf-custom-empty-content-template>
</ng-template>
</empty-folder-content>
</adf-document-list> </adf-document-list>
``` ```
@@ -850,11 +849,9 @@ You can change this by defining your own custom HTML template:
```html ```html
<adf-document-list ...> <adf-document-list ...>
<no-permission-content> <adf-custom-no-permission-template>
<ng-template> <h1>You don't have permissions</h1>
<h1>You don't have permissions</h1> </adf-custom-no-permission-template>
</ng-template>
</no-permission-content>
</adf-document-list> </adf-document-list>
``` ```
@@ -862,6 +859,27 @@ This will give the following output:
![Custom no permission](../docassets/images/no-permission-custom.png) ![Custom no permission](../docassets/images/no-permission-custom.png)
### Custom 'loading' template
By default, the Document List shows the following content when the content is loading:
![Default loading](../docassets/images/default-loading.png)
You can change this by defining your own custom HTML template:
```html
<adf-document-list ...>
<adf-custom-loading-content-template>
Loading Content
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</adf-custom-loading-content-template>
</adf-document-list>
```
This will give the following output:
![Custom loading](../docassets/images/custom-loading.png)
## See also ## See also
- [Datatable component](../core/datatable.component.md) - [Datatable component](../core/datatable.component.md)
@@ -12,7 +12,7 @@ Provides drag-and-drop features for an element such as a `div`.
## Basic Usage ## Basic Usage
```html ```html
<div [file-draggable]="true" id="DragAndDropBorder" class="drag-and-drop-border" <div [adf-file-draggable]="true" id="DragAndDropBorder" class="drag-and-drop-border"
(filesDropped)="onFilesDropped($event)" (filesDropped)="onFilesDropped($event)"
(folderEntityDropped)="onFolderEntityDropped($event)" (folderEntityDropped)="onFolderEntityDropped($event)"
dropzone="" webkitdropzone="*" #dragAndDropArea> dropzone="" webkitdropzone="*" #dragAndDropArea>
+1 -1
View File
@@ -12,7 +12,7 @@ Adds a context menu to a component.
## Basic Usage ## Basic Usage
```html ```html
<my-component [context-menu]="menuItems"></my-component> <my-component [adf-context-menu]="menuItems"></my-component>
<adf-context-menu-holder></context-menu-holder> <adf-context-menu-holder></context-menu-holder>
``` ```
+7 -7
View File
@@ -250,17 +250,17 @@ export class DataTableDemo {
You can add [Data column component](data-column.component.md) instances to define columns for the You can add [Data column component](data-column.component.md) instances to define columns for the
table as described in the usage examples and the [Customizing columns](#customizing-columns) section. table as described in the usage examples and the [Customizing columns](#customizing-columns) section.
You can also supply a `<no-content-template>` or an You can also supply a `<adf-no-content-template>` or an
[Empty list component](empty-list.component.md) sub-component to show when the table is empty: [Empty list component](empty-list.component.md) sub-component to show when the table is empty:
```html ```html
<adf-datatable ...> <adf-datatable ...>
<no-content-template> <adf-no-content-template>
<!--Add your custom empty template here--> <!--Add your custom empty template here-->
<ng-template> <ng-template>
<h1>Sorry, no content</h1> <h1>Sorry, no content</h1>
</ng-template> </ng-template>
</no-content-template> </adf-no-content-template>
</adf-datatable> </adf-datatable>
``` ```
@@ -275,12 +275,12 @@ You can also supply a `<no-content-template>` or an
</adf-datatable> </adf-datatable>
``` ```
Another useful transclusion is the `<loading-content-template>`, which is shown Another useful transclusion is the `<adf-loading-content-template>`, which is shown
while the data for the table is loading: while the data for the table is loading:
```html ```html
<adf-datatable ...> <adf-datatable ...>
<loading-content-template> <adf-loading-content-template>
<ng-template> <ng-template>
<!--Add your custom loading template here--> <!--Add your custom loading template here-->
<mat-progress-spinner <mat-progress-spinner
@@ -289,7 +289,7 @@ while the data for the table is loading:
[mode]="'indeterminate'"> [mode]="'indeterminate'">
</mat-progress-spinner> </mat-progress-spinner>
</ng-template> </ng-template>
</loading-content-template> </adf-loading-content-template>
</adf-datatable> </adf-datatable>
``` ```
@@ -299,7 +299,7 @@ while the data for the table is loading:
} }
``` ```
Note that you can use both the `<no-content-template>` and the `<loading-content-template>` Note that you can use both the `<adf-no-content-template>` and the `<adf-loading-content-template>`
together in the same datatable. together in the same datatable.
## Class members ## Class members
+2 -2
View File
@@ -41,8 +41,8 @@ You can replace the content of the header and footer of the [Login component](..
```html ```html
<adf-login ...> <adf-login ...>
<login-header><ng-template>My custom HTML for the header</ng-template></login-header> <adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
<login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer> <adf-login-footer><ng-template>My custom HTML for the footer</ng-template></adf-login-footer>
</adf-login>` </adf-login>`
``` ```
+6 -6
View File
@@ -19,17 +19,17 @@ Displays a sidebar-action menu information panel.
There are three regions where you can add your own content in `<div>` elements with There are three regions where you can add your own content in `<div>` elements with
the following names: the following names:
- sidebar-menu-title-icon - adf-sidebar-menu-title-icon
- sidebar-menu-options - adf-sidebar-menu-options
- sidebar-menu-expand-icon - adf-sidebar-menu-expand-icon
```html ```html
<adf-sidebar-action-menu> <adf-sidebar-action-menu>
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon> <mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-expand-icon> <div adf-sidebar-menu-expand-icon>
<mat-icon>queue</mat-icon> <mat-icon>queue</mat-icon>
</div> </div>
<div sidebar-menu-options> <div adf-sidebar-menu-options>
<button mat-menu-item> <button mat-menu-item>
<mat-icon>assignment</mat-icon> <mat-icon>assignment</mat-icon>
<span>Button Name</span> <span>Button Name</span>
Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

@@ -20,14 +20,14 @@ Shows all deployed cloud application instances.
### [Transclusions](../user-guide/transclusion.md) ### [Transclusions](../user-guide/transclusion.md)
You can show custom content when there are no apps available by supplying an You can show custom content when there are no apps available by supplying an
`<adf-empty-custom-content>` section: `<adf-custom-empty-content>` section:
```html ```html
<adf-cloud-app-list <adf-cloud-app-list
[layoutType]="'GRID'"> [layoutType]="'GRID'">
<adf-empty-custom-content> <adf-custom-empty-content>
No Apps present No Apps present
</adf-empty-custom-content> </adf-custom-empty-content>
</adf-cloud-app-list> </adf-cloud-app-list>
``` ```
@@ -33,14 +33,14 @@ Renders a list containing all the process instances matched by the parameters sp
### [Transclusions](../user-guide/transclusion.md) ### [Transclusions](../user-guide/transclusion.md)
Any content inside an `<adf-empty-custom-content>` sub-component will be shown Any content inside an `<adf-custom-empty-content>` sub-component will be shown
when the process list is empty: when the process list is empty:
```html ```html
<adf-cloud-process-list> <adf-cloud-process-list>
<adf-empty-custom-content> <adf-custom-empty-content>
Your Content Your Content
</adf-empty-custom-content> </adf-custom-empty-content>
<adf-cloud-process-list> <adf-cloud-process-list>
``` ```
@@ -34,14 +34,14 @@ Renders a list containing all the tasks matched by the parameters specified.
### [Transclusions](../user-guide/transclusion.md) ### [Transclusions](../user-guide/transclusion.md)
Any content inside an `<adf-empty-custom-content>` sub-component will be shown Any content inside an `<adf-custom-empty-content>` sub-component will be shown
when the task list is empty: when the task list is empty:
```html ```html
<adf-cloud-task-list> <adf-cloud-task-list>
<adf-empty-custom-content> <adf-custom-empty-content>
Your Content Your Content
</adf-empty-custom-content> </adf-custom-empty-content>
<adf-cloud-task-list> <adf-cloud-task-list>
``` ```
+3 -3
View File
@@ -22,14 +22,14 @@ Shows all available apps.
### [Transclusions](../user-guide/transclusion.md) ### [Transclusions](../user-guide/transclusion.md)
You can show custom content when there are no apps available by supplying an You can show custom content when there are no apps available by supplying an
`<adf-empty-custom-content>` section: `<adf-custom-empty-content>` section:
```html ```html
<adf-apps <adf-apps
[layoutType]="'GRID'"> [layoutType]="'GRID'">
<adf-empty-custom-content> <adf-custom-empty-content>
No Apps present No Apps present
</adf-empty-custom-content> </adf-custom-empty-content>
</adf-apps> </adf-apps>
``` ```
@@ -34,14 +34,14 @@ Renders a list containing all the process instances matched by the parameters sp
### [Transclusions](../user-guide/transclusion.md) ### [Transclusions](../user-guide/transclusion.md)
Any content inside an `<adf-empty-custom-content>` sub-component will be shown Any content inside an `<adf-custom-empty-content>` sub-component will be shown
when the process list is empty: when the process list is empty:
```html ```html
<adf-process-instance-list> <adf-process-instance-list>
<adf-empty-custom-content> <adf-custom-empty-content>
Your Content Your Content
</adf-empty-custom-content> </adf-custom-empty-content>
<adf-process-instance-list> <adf-process-instance-list>
``` ```
@@ -64,12 +64,12 @@ example:
```html ```html
<adf-task-details [taskId]="taskId"> <adf-task-details [taskId]="taskId">
<no-task-details-template> <adf-no-task-details-template>
<ng-template> <ng-template>
<h1>Sorry, no tasks here</h1> <h1>Sorry, no tasks here</h1>
<img src="example.jpg"> <img src="example.jpg">
</ng-template> </ng-template>
</no-task-details-template> </adf-no-task-details-template>
</adf-task-details> </adf-task-details>
``` ```
+3 -3
View File
@@ -36,14 +36,14 @@ Renders a list containing all the tasks matched by the parameters specified.
### [Transclusions](../user-guide/transclusion.md) ### [Transclusions](../user-guide/transclusion.md)
Any content inside an `<adf-empty-custom-content>` sub-component will be shown Any content inside an `<adf-custom-empty-content>` sub-component will be shown
when the task list is empty: when the task list is empty:
```html ```html
<adf-tasklist> <adf-tasklist>
<adf-empty-custom-content> <adf-custom-empty-content>
Your Content Your Content
</adf-empty-custom-content> </adf-custom-empty-content>
<adf-tasklist> <adf-tasklist>
``` ```
+1 -1
View File
@@ -30,7 +30,7 @@ Open the [`login.component`](../core/login.component.md)`.html` file and change
```html ```html
<adf-login ...> <adf-login ...>
<login-header><ng-template>My custom HTML for the header</ng-template></login-header> <adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
</adf-login> </adf-login>
``` ```
+5 -5
View File
@@ -138,7 +138,7 @@ project have a
[Transclusions](../user-guide/transclusion.md) [Transclusions](../user-guide/transclusion.md)
section in the doc page with all the relevant details. section in the doc page with all the relevant details.
The `<adf-login/>` component supports two targets: `login-header` and `login-footer`. The `<adf-login/>` component supports two targets: `adf-login-header` and `adf-login-footer`.
Let's add a simple Hello World message in the footer. Open the template `src/app/login/login.component.html` and add a new tag _inside_ the `<adf-login/>` HTML tag: Let's add a simple Hello World message in the footer. Open the template `src/app/login/login.component.html` and add a new tag _inside_ the `<adf-login/>` HTML tag:
@@ -149,17 +149,17 @@ Let's add a simple Hello World message in the footer. Open the template `src/app
(executeSubmit)="myExecuteSubmitMethod($event)" (executeSubmit)="myExecuteSubmitMethod($event)"
copyrightText="© 2017 Alfresco Software, Inc. All Rights Reserved." copyrightText="© 2017 Alfresco Software, Inc. All Rights Reserved."
successRoute="/documentlist"> successRoute="/documentlist">
<login-footer> <adf-login-footer>
<ng-template> <ng-template>
Hello World! Hello World!
</ng-template> </ng-template>
</login-footer> </adf-login-footer>
</adf-login> </adf-login>
``` ```
Be careful that you place the `<login-footer/>` tag _inside_ the `<adf-login/>` tag. Be careful that you place the `<adf-login-footer/>` tag _inside_ the `<adf-login/>` tag.
Inside the `<login-footer/>` or `<login-header/>` tags we can put anything we want, as long as we wrap it inside an `<ng-template/>` tag. We can also source in custom or 3rd party components. Inside the `<adf-login-footer/>` or `<adf-login-header/>` tags we can put anything we want, as long as we wrap it inside an `<ng-template/>` tag. We can also source in custom or 3rd party components.
### Bonus objective: Add a custom logo and background to the login screen ### Bonus objective: Add a custom logo and background to the login screen
+1 -1
View File
@@ -34,7 +34,7 @@ content of the body:
```html ```html
<adf-login ...> <adf-login ...>
<login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer> <adf-login-footer><ng-template>My custom HTML for the footer</ng-template></adf-login-footer>
</adf-login> </adf-login>
``` ```
@@ -69,11 +69,10 @@
(ready)="onFolderLoaded($event)" (ready)="onFolderLoaded($event)"
(node-dblclick)="onNodeDoubleClick($event)" (node-dblclick)="onNodeDoubleClick($event)"
data-automation-id="content-node-selector-document-list"> data-automation-id="content-node-selector-document-list">
<empty-folder-content>
<ng-template> <adf-custom-empty-content-template>
<div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div> <div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div>
</ng-template> </adf-custom-empty-content-template>
</empty-folder-content>
<data-columns> <data-columns>
<data-column key="$thumbnail" type="image"></data-column> <data-column key="$thumbnail" type="image"></data-column>
@@ -23,45 +23,43 @@
(row-unselect)="onNodeUnselect($event.detail)" (row-unselect)="onNodeUnselect($event.detail)"
[class.adf-datatable-gallery-thumbnails]="data.thumbnails"> [class.adf-datatable-gallery-thumbnails]="data.thumbnails">
<div *ngIf="!isEmptyTemplateDefined()"> <adf-no-content-template>
<no-content-template> <ng-template>
<ng-template> <adf-empty-list *ngIf="!customNoContentTemplate">
<adf-empty-list> <div class="adf-empty-list_template adf-empty-folder">
<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 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-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>
<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">
<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>
</div> </div>
</ng-template> <!-- <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}} </div> -->
</no-permission-template> </adf-empty-list>
</div> <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> </adf-datatable>
@@ -15,7 +15,7 @@
* limitations under the License. * 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 { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { AlfrescoApiService, DataColumnListComponent, DataColumnComponent } from '@alfresco/adf-core'; import { AlfrescoApiService, DataColumnListComponent, DataColumnComponent } from '@alfresco/adf-core';
import { DataColumn, DataTableComponent } 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 { setupTestBed } from '@alfresco/adf-core';
import { ContentTestingModule } from '../../testing/content.testing.module'; import { ContentTestingModule } from '../../testing/content.testing.module';
import { NodeEntry } from '@alfresco/js-api'; import { NodeEntry } from '@alfresco/js-api';
import { By } from '@angular/platform-browser';
describe('DocumentList', () => { describe('DocumentList', () => {
@@ -846,42 +847,26 @@ describe('DocumentList', () => {
expect(documentList.navigationMode).toBe(DocumentListComponent.SINGLE_CLICK_NAVIGATION); expect(documentList.navigationMode).toBe(DocumentListComponent.SINGLE_CLICK_NAVIGATION);
}); });
it('should require dataTable to check empty template', () => { it('should display [empty folder] template ', () => {
documentList.dataTable = null; fixture.detectChanges();
expect(documentList.isEmptyTemplateDefined()).toBeFalsy();
});
it('should check [empty folder] template ', () => {
documentList.emptyFolderTemplate = <TemplateRef<any>> {};
documentList.dataTable = new DataTableComponent(null, null); documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.dataTable).toBeDefined(); expect(documentList.dataTable).toBeDefined();
expect(documentList.isEmptyTemplateDefined()).toBeTruthy(); expect(fixture.debugElement.query(By.css('adf-empty-list'))).not.toBeNull();
documentList.emptyFolderTemplate = null;
expect(documentList.isEmptyTemplateDefined()).toBeFalsy();
}); });
it('should require dataTable to check no permission template', () => { it('should display no permission template when the user has no permission', () => {
documentList.dataTable = null; documentList.noPermission = true;
expect(documentList.isNoPermissionTemplateDefined()).toBe(false); fixture.detectChanges();
expect(fixture.debugElement.query(By.css('.adf-no-permission__template'))).not.toBeNull();
}); });
it('should return true if custom permission template is provided', () => { it('should display loading template when data is loading', () => {
documentList.noPermissionTemplate = <TemplateRef<any>> {}; documentList.loading = true;
documentList.dataTable = new DataTableComponent(null, null); fixture.detectChanges();
expect(fixture.debugElement.query(By.css('mat-progress-spinner'))).not.toBeNull();
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 empty folder NOT show the pagination', () => { it('should empty folder NOT show the pagination', () => {
documentList.emptyFolderTemplate = <TemplateRef<any>> {};
documentList.dataTable = new DataTableComponent(null, null); documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.isEmpty()).toBeTruthy(); expect(documentList.isEmpty()).toBeTruthy();
@@ -19,13 +19,13 @@
import { import {
AfterContentInit, Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, NgZone, 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'; } from '@angular/core';
import { import {
ContentService, DataCellEvent, DataColumn, DataRowActionEvent, DataSorting, DataTableComponent, ContentService, DataCellEvent, DataColumn, DataRowActionEvent, DataSorting, DataTableComponent,
DisplayMode, ObjectDataColumn, PaginatedComponent, AppConfigService, DataColumnListComponent, DisplayMode, ObjectDataColumn, PaginatedComponent, AppConfigService, DataColumnListComponent,
UserPreferencesService, PaginationModel, ThumbnailService UserPreferencesService, PaginationModel, ThumbnailService, CustomLoadingContentTemplateDirective, CustomNoPermissionTemplateDirective, CustomEmptyContentTemplateDirective
} from '@alfresco/adf-core'; } from '@alfresco/adf-core';
import { Node, NodeEntry, NodePaging } from '@alfresco/js-api'; import { Node, NodeEntry, NodePaging } from '@alfresco/js-api';
@@ -60,6 +60,15 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
@ContentChild(DataColumnListComponent) @ContentChild(DataColumnListComponent)
columnList: 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. */ /** Include additional information about the node in the server request. For example: association, isLink, isLocked and others. */
@Input() @Input()
includeFields: string[]; includeFields: string[];
@@ -212,8 +221,6 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
dataTable: DataTableComponent; dataTable: DataTableComponent;
actions: ContentActionModel[] = []; actions: ContentActionModel[] = [];
emptyFolderTemplate: TemplateRef<any>;
noPermissionTemplate: TemplateRef<any>;
contextActionHandler: Subject<any> = new Subject(); contextActionHandler: Subject<any> = new Subject();
data: ShareDataTableAdapter; data: ShareDataTableAdapter;
noPermission: boolean = false; noPermission: boolean = false;
@@ -283,24 +290,6 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
return this._pagination; 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 { isMobile(): boolean {
return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
} }
@@ -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);
});
});
@@ -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);
});
});
@@ -29,8 +29,6 @@ import { ContentColumnListComponent } from './components/content-column/content-
import { ContentColumnComponent } from './components/content-column/content-column.component'; import { ContentColumnComponent } from './components/content-column/content-column.component';
import { DocumentListComponent } from './components/document-list.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 { TrashcanNameColumnComponent } from './components/trashcan-name-column/trashcan-name-column.component';
import { LibraryStatusColumnComponent } from './components/library-status-column/library-status-column.component'; import { LibraryStatusColumnComponent } from './components/library-status-column/library-status-column.component';
import { LibraryRoleColumnComponent } from './components/library-role-column/library-role-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, NameColumnComponent,
ContentColumnListComponent, ContentColumnListComponent,
ContentActionComponent, ContentActionComponent,
ContentActionListComponent, ContentActionListComponent
EmptyFolderContentDirective,
NoPermissionContentDirective
], ],
exports: [ exports: [
DocumentListComponent, DocumentListComponent,
@@ -69,9 +65,7 @@ import { NameColumnComponent } from './components/name-column/name-column.compon
NameColumnComponent, NameColumnComponent,
ContentColumnListComponent, ContentColumnListComponent,
ContentActionComponent, ContentActionComponent,
ContentActionListComponent, ContentActionListComponent
EmptyFolderContentDirective,
NoPermissionContentDirective
], ],
entryComponents: [ entryComponents: [
TrashcanNameColumnComponent, TrashcanNameColumnComponent,
@@ -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-column/content-column-list.component';
export * from './components/content-action/content-action.component'; export * from './components/content-action/content-action.component';
export * from './components/content-action/content-action-list.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-name-column/library-name-column.component';
export * from './components/library-role-column/library-role-column.component'; export * from './components/library-role-column/library-role-column.component';
export * from './components/library-status-column/library-status-column.component'; export * from './components/library-status-column/library-status-column.component';
@@ -41,7 +41,11 @@ export const SEARCH_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
multi: true multi: true
}; };
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ @Directive({
// tslint:disable-next-line:directive-selector
selector: `input[searchAutocomplete], textarea[searchAutocomplete]`, selector: `input[searchAutocomplete], textarea[searchAutocomplete]`,
host: { host: {
'role': 'combobox', 'role': 'combobox',
@@ -2,14 +2,14 @@ adf-upload-drag-area {
overflow: hidden; overflow: hidden;
} }
.upload-border { .adf-upload-border {
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.file-draggable__input-focus { .adf-file-draggable__input-focus {
color: #2196F3; color: #2196f3;
border: 1px dashed #2196F3; border: 1px dashed #2196f3;
} }
@@ -1,4 +1,4 @@
<div [file-draggable]="isDroppable()" class="upload-border" <div [adf-file-draggable]="isDroppable()" class="adf-upload-border"
(filesDropped)="onFilesDropped($event)" (filesDropped)="onFilesDropped($event)"
(folderEntityDropped)="onFolderEntityDropped($event)" (folderEntityDropped)="onFolderEntityDropped($event)"
(upload-files)="onUploadFiles($event)" (upload-files)="onUploadFiles($event)"
@@ -20,15 +20,18 @@
import { FileUtils } from '@alfresco/adf-core'; import { FileUtils } from '@alfresco/adf-core';
import { Directive, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core'; import { Directive, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ @Directive({
selector: '[file-draggable]' selector: '[adf-file-draggable], [file-draggable]'
}) })
export class FileDraggableDirective implements OnInit, OnDestroy { export class FileDraggableDirective implements OnInit, OnDestroy {
files: File []; files: File [];
/** Enables/disables drag-and-drop functionality. */ /** Enables/disables drag-and-drop functionality. */
@Input('file-draggable') @Input('adf-file-draggable')
enabled: boolean = true; enabled: boolean = true;
/** Emitted when one or more files are dragged and dropped onto the draggable element. */ /** Emitted when one or more files are dragged and dropped onto the draggable element. */
@@ -39,7 +42,7 @@ export class FileDraggableDirective implements OnInit, OnDestroy {
@Output() @Output()
folderEntityDropped: EventEmitter<any> = new EventEmitter(); folderEntityDropped: EventEmitter<any> = new EventEmitter();
private cssClassName: string = 'file-draggable__input-focus'; private cssClassName: string = 'adf-file-draggable__input-focus';
private element: HTMLElement; private element: HTMLElement;
constructor(el: ElementRef, private ngZone: NgZone) { constructor(el: ElementRef, private ngZone: NgZone) {
@@ -21,15 +21,15 @@ import { Directive, HostListener, Input } from '@angular/core';
import { ContextMenuOverlayService } from './context-menu-overlay.service'; import { ContextMenuOverlayService } from './context-menu-overlay.service';
@Directive({ @Directive({
selector: '[context-menu]' selector: '[adf-context-menu], [context-menu]'
}) })
export class ContextMenuDirective { export class ContextMenuDirective {
/** Items for the menu. */ /** Items for the menu. */
@Input('context-menu') @Input('adf-context-menu')
links: any[]; links: any[];
/** Is the menu enabled? */ /** Is the menu enabled? */
@Input('context-menu-enabled') @Input('adf-context-menu-enabled')
enabled: boolean = false; enabled: boolean = false;
constructor(private contextMenuService: ContextMenuOverlayService) {} constructor(private contextMenuService: ContextMenuOverlayService) {}
+1 -1
View File
@@ -24,7 +24,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@Component({ @Component({
selector: 'adf-test-component', selector: 'adf-test-component',
template: ` 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 { class TestComponent {
@@ -89,8 +89,8 @@
tabindex="0" tabindex="0"
(click)="onRowClick(row, $event)" (click)="onRowClick(row, $event)"
(keydown.enter)="onEnterKeyPressed(row, $event)" (keydown.enter)="onEnterKeyPressed(row, $event)"
[context-menu]="getContextMenuActions(row, col)" [adf-context-menu]="getContextMenuActions(row, col)"
[context-menu-enabled]="contextMenu"> [adf-context-menu-enabled]="contextMenu">
<div *ngIf="!col.template" class="adf-cell-container"> <div *ngIf="!col.template" class="adf-cell-container">
<ng-container [ngSwitch]="col.type"> <ng-container [ngSwitch]="col.type">
<div *ngSwitchCase="'image'" class="adf-cell-value"> <div *ngSwitchCase="'image'" class="adf-cell-value">
+9 -3
View File
@@ -37,7 +37,9 @@ import { LocationCellComponent } from './components/datatable/location-cell.comp
import { LoadingContentTemplateDirective } from './directives/loading-template.directive'; import { LoadingContentTemplateDirective } from './directives/loading-template.directive';
import { NoContentTemplateDirective } from './directives/no-content-template.directive'; import { NoContentTemplateDirective } from './directives/no-content-template.directive';
import { NoPermissionTemplateDirective } from './directives/no-permission-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({ @NgModule({
imports: [ imports: [
@@ -62,7 +64,9 @@ import { EmptyCustomContentDirective } from './directives/empty-custom-content.d
NoContentTemplateDirective, NoContentTemplateDirective,
NoPermissionTemplateDirective, NoPermissionTemplateDirective,
LoadingContentTemplateDirective, LoadingContentTemplateDirective,
EmptyCustomContentDirective CustomEmptyContentTemplateDirective,
CustomLoadingContentTemplateDirective,
CustomNoPermissionTemplateDirective
], ],
exports: [ exports: [
DataTableComponent, DataTableComponent,
@@ -77,7 +81,9 @@ import { EmptyCustomContentDirective } from './directives/empty-custom-content.d
NoContentTemplateDirective, NoContentTemplateDirective,
NoPermissionTemplateDirective, NoPermissionTemplateDirective,
LoadingContentTemplateDirective, LoadingContentTemplateDirective,
EmptyCustomContentDirective CustomEmptyContentTemplateDirective,
CustomLoadingContentTemplateDirective,
CustomNoPermissionTemplateDirective
] ]
}) })
export class DataTableModule {} export class DataTableModule {}
@@ -15,22 +15,15 @@
* limitations under the License. * limitations under the License.
*/ */
import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core'; import { Directive } from '@angular/core';
import { DocumentListComponent } from './../document-list.component';
/**
* 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({ @Directive({
selector: 'empty-folder-content' selector: 'adf-custom-empty-content-template, empty-folder-content'
}) })
export class EmptyFolderContentDirective implements AfterContentInit {
@ContentChild(TemplateRef) export class CustomEmptyContentTemplateDirective {}
template: any;
constructor(private documentList: DocumentListComponent) {
}
ngAfterContentInit() {
this.documentList.emptyFolderTemplate = this.template;
this.documentList.dataTable.noContentTemplate = this.template;
}
}
@@ -18,7 +18,6 @@
import { Directive } from '@angular/core'; import { Directive } from '@angular/core';
@Directive({ @Directive({
selector: 'adf-empty-custom-content' selector: 'adf-custom-loading-content-template'
}) })
export class CustomLoadingContentTemplateDirective {}
export class EmptyCustomContentDirective {}
@@ -15,22 +15,14 @@
* limitations under the License. * limitations under the License.
*/ */
import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core'; import { Directive } from '@angular/core';
import { DocumentListComponent } from './../document-list.component';
/**
* 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({ @Directive({
selector: 'no-permission-content' selector: 'adf-custom-no-permission-template, no-permission-content'
}) })
export class NoPermissionContentDirective implements AfterContentInit { export class CustomNoPermissionTemplateDirective {}
@ContentChild(TemplateRef)
template: any;
constructor(private documentList: DocumentListComponent) {
}
ngAfterContentInit() {
this.documentList.noPermissionTemplate = this.template;
this.documentList.dataTable.noPermissionTemplate = this.template;
}
}
@@ -18,8 +18,11 @@
import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core'; import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
import { DataTableComponent } from '../components/datatable/datatable.component'; import { DataTableComponent } from '../components/datatable/datatable.component';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ @Directive({
selector: 'loading-content-template' selector: 'adf-loading-content-template, loading-content-template'
}) })
export class LoadingContentTemplateDirective implements AfterContentInit { export class LoadingContentTemplateDirective implements AfterContentInit {
@@ -18,8 +18,11 @@
import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core'; import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
import { DataTableComponent } from '../components/datatable/datatable.component'; import { DataTableComponent } from '../components/datatable/datatable.component';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ @Directive({
selector: 'no-content-template' selector: 'adf-no-content-template, no-content-template'
}) })
export class NoContentTemplateDirective implements AfterContentInit { export class NoContentTemplateDirective implements AfterContentInit {
@@ -18,8 +18,11 @@
import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core'; import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
import { DataTableComponent } from '../components/datatable/datatable.component'; import { DataTableComponent } from '../components/datatable/datatable.component';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ @Directive({
selector: 'no-permission-template' selector: 'adf-no-permission-template, no-permission-template'
}) })
export class NoPermissionTemplateDirective implements AfterContentInit { export class NoPermissionTemplateDirective implements AfterContentInit {
+3 -1
View File
@@ -40,6 +40,8 @@ export * from './data/data-table.schema';
export * from './directives/loading-template.directive'; export * from './directives/loading-template.directive';
export * from './directives/no-content-template.directive'; export * from './directives/no-content-template.directive';
export * from './directives/no-permission-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'; export * from './datatable.module';
@@ -21,8 +21,11 @@ import { AlfrescoApiService } from '../services/alfresco-api.service';
import { DownloadZipDialogComponent } from '../dialogs/download-zip.dialog'; import { DownloadZipDialogComponent } from '../dialogs/download-zip.dialog';
import { NodeEntry } from '@alfresco/js-api'; import { NodeEntry } from '@alfresco/js-api';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ @Directive({
selector: '[adfNodeDownload]' selector: '[adf-node-download], [adfNodeDownload]'
}) })
export class NodeDownloadDirective { export class NodeDownloadDirective {
@@ -17,4 +17,7 @@
import { Directive } from '@angular/core'; 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 {}
@@ -18,7 +18,7 @@
</mat-card-content> </mat-card-content>
<mat-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()" <mat-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()"
#outcomesContainer> #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" <button *ngFor="let outcome of form.outcomes"
mat-button mat-button
[attr.data-automation-id]="'adf-form-' + outcome.name | lowercase" [attr.data-automation-id]="'adf-form-' + outcome.name | lowercase"
@@ -35,8 +35,11 @@ export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
multi: true multi: true
}; };
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ @Directive({
selector: '[textMask]', selector: '[adf-text-mask], [textMask]',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
}) })
export class InputMaskDirective implements OnChanges, ControlValueAccessor { export class InputMaskDirective implements OnChanges, ControlValueAccessor {
@@ -26,6 +26,9 @@ import { Component, Directive, ViewEncapsulation } from '@angular/core';
}) })
export class InfoDrawerLayoutComponent {} export class InfoDrawerLayoutComponent {}
@Directive({ selector: '[info-drawer-title]' }) export class InfoDrawerTitleDirective {} /**
@Directive({ selector: '[info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {} * Directive selectors without adf- prefix will be deprecated on 3.0.0
@Directive({ selector: '[info-drawer-content]' }) export class InfoDrawerContentDirective {} */
@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 {}
@@ -1,16 +1,16 @@
<div class="adf-sidebar-action-menu"> <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"> <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> <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> </button>
<div *ngIf="!isExpanded()" class="adf-sidebar-action-menu-icon" [matMenuTriggerFor]="adfSidebarMenu"> <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> </div>
<mat-menu #adfSidebarMenu="matMenu" class="adf-sidebar-action-menu-panel" [overlapTrigger]="false" yPosition="below"> <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"> <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> </div>
</mat-menu> </mat-menu>
</div> </div>
@@ -58,11 +58,11 @@ describe('SidebarActionMenuComponent', () => {
@Component({ @Component({
template: ` template: `
<adf-sidebar-action-menu [expanded]="expanded" [title]="title"> <adf-sidebar-action-menu [expanded]="expanded" [title]="title">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon> <mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-expand-icon> <div adf-sidebar-menu-expand-icon>
<mat-icon>queue</mat-icon> <mat-icon>queue</mat-icon>
</div> </div>
<div sidebar-menu-options> <div adf-sidebar-menu-options>
<button mat-menu-item> <button mat-menu-item>
<mat-icon>assignment</mat-icon> <mat-icon>assignment</mat-icon>
<span>Option1</span> <span>Option1</span>
@@ -122,7 +122,7 @@ describe('Custom SidebarActionMenuComponent', () => {
expect(title.textContent).toBe('FakeTitle'); expect(title.textContent).toBe('FakeTitle');
}); });
it('should render the sidebar-menu-options', () => { it('should render the adf-sidebar-menu-options', () => {
fixture.detectChanges(); fixture.detectChanges();
const actionButton = fixture.nativeElement.querySelector('.adf-sidebar-action-menu-button'); const actionButton = fixture.nativeElement.querySelector('.adf-sidebar-action-menu-button');
const options = fixture.nativeElement.querySelectorAll('.adf-sidebar-action-menu-options'); const options = fixture.nativeElement.querySelectorAll('.adf-sidebar-action-menu-options');
@@ -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 selectors without adf- prefix will be deprecated on 3.0.0
@Directive({ selector: '[sidebar-menu-expand-icon]' }) export class SidebarMenuExpandIconDirective { } */
@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 { }
@@ -5,7 +5,7 @@
[showLoginActions]="false" [showLoginActions]="false"
[backgroundImageUrl]="''" [backgroundImageUrl]="''"
(success)="onLoginSuccess($event)"> (success)="onLoginSuccess($event)">
<login-header><ng-template></ng-template></login-header> <adf-login-header><ng-template></ng-template></adf-login-header>
<login-footer><ng-template></ng-template></login-footer> <adf-login-footer><ng-template></ng-template></adf-login-footer>
</adf-login> </adf-login>
</div> </div>
@@ -23,8 +23,11 @@ import {
} from '@angular/core'; } from '@angular/core';
import { LoginComponent } from '../components/login.component'; import { LoginComponent } from '../components/login.component';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ @Directive({
selector: 'login-footer' selector: 'adf-login-footer, login-footer'
}) })
export class LoginFooterDirective implements AfterContentInit { export class LoginFooterDirective implements AfterContentInit {
@@ -23,8 +23,11 @@ import {
} from '@angular/core'; } from '@angular/core';
import { LoginComponent } from '../components/login.component'; import { LoginComponent } from '../components/login.component';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ @Directive({
selector: 'login-header' selector: 'adf-login-header, login-header'
}) })
export class LoginHeaderDirective implements AfterContentInit { export class LoginHeaderDirective implements AfterContentInit {
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-alfresco-publish'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-alfresco-publish, raphael-icon-alfresco-publish'})
export class RaphaelIconAlfrescoPublishDirective extends RaphaelBase implements OnInit { export class RaphaelIconAlfrescoPublishDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-box-publish'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-box-publish, raphael-icon-box-publish'})
export class RaphaelIconBoxPublishDirective extends RaphaelBase implements OnInit { export class RaphaelIconBoxPublishDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-business-rule'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-business-rule, raphael-icon-business-rule'})
export class RaphaelIconBusinessRuleDirective extends RaphaelBase implements OnInit { export class RaphaelIconBusinessRuleDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-camel'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-camel, raphael-icon-camel'})
export class RaphaelIconCamelDirective extends RaphaelBase implements OnInit { export class RaphaelIconCamelDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-error'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-error, raphael-icon-error'})
export class RaphaelIconErrorDirective extends RaphaelBase implements OnInit { export class RaphaelIconErrorDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-google-drive-publish'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-google-drive-publish, raphael-icon-google-drive-publish'})
export class RaphaelIconGoogleDrivePublishDirective extends RaphaelBase implements OnInit { export class RaphaelIconGoogleDrivePublishDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-manual'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-manual, raphael-icon-manual'})
export class RaphaelIconManualDirective extends RaphaelBase implements OnInit { export class RaphaelIconManualDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-message'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-message, raphael-icon-message'})
export class RaphaelIconMessageDirective extends RaphaelBase implements OnInit { export class RaphaelIconMessageDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-mule'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-mule, raphael-icon-mule'})
export class RaphaelIconMuleDirective extends RaphaelBase implements OnInit { export class RaphaelIconMuleDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-receive'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-receive, raphael-icon-receive'})
export class RaphaelIconReceiveDirective extends RaphaelBase implements OnInit { export class RaphaelIconReceiveDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-rest-call'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-rest-call, raphael-icon-rest-call'})
export class RaphaelIconRestCallDirective extends RaphaelBase implements OnInit { export class RaphaelIconRestCallDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-script'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-script, raphael-icon-script'})
export class RaphaelIconScriptDirective extends RaphaelBase implements OnInit { export class RaphaelIconScriptDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-send'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-send, raphael-icon-send'})
export class RaphaelIconSendDirective extends RaphaelBase implements OnInit { export class RaphaelIconSendDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-service'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-service, raphael-icon-service'})
export class RaphaelIconServiceDirective extends RaphaelBase implements OnInit { export class RaphaelIconServiceDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-signal'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-signal, raphael-icon-signal'})
export class RaphaelIconSignalDirective extends RaphaelBase implements OnInit { export class RaphaelIconSignalDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-timer'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-timer, raphael-icon-timer'})
export class RaphaelIconTimerDirective extends RaphaelBase implements OnInit { export class RaphaelIconTimerDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base'; import { RaphaelBase } from './../raphael-base';
import { RaphaelService } from './../raphael.service'; import { RaphaelService } from './../raphael.service';
@Directive({selector: 'raphael-icon-user'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-icon-user, raphael-icon-user'})
export class RaphaelIconUserDirective extends RaphaelBase implements OnInit { export class RaphaelIconUserDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base'; import { RaphaelBase } from './raphael-base';
import { RaphaelService } from './raphael.service'; import { RaphaelService } from './raphael.service';
@Directive({selector: 'raphael-circle'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-circle, raphael-circle'})
export class RaphaelCircleDirective extends RaphaelBase implements OnInit { export class RaphaelCircleDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base'; import { RaphaelBase } from './raphael-base';
import { RaphaelService } from './raphael.service'; import { RaphaelService } from './raphael.service';
@Directive({selector: 'raphael-cross'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-cross, raphael-cross'})
export class RaphaelCrossDirective extends RaphaelBase implements OnInit { export class RaphaelCrossDirective extends RaphaelBase implements OnInit {
@Input() @Input()
center: Point; center: Point;
@@ -22,7 +22,10 @@ import { RaphaelService } from './raphael.service';
declare let Raphael: any; declare let Raphael: any;
@Directive({selector: 'raphael-flow-arrow'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-flow-arrow, raphael-flow-arrow'})
export class RaphaelFlowArrowDirective extends RaphaelBase implements OnInit { export class RaphaelFlowArrowDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base'; import { RaphaelBase } from './raphael-base';
import { RaphaelService } from './raphael.service'; import { RaphaelService } from './raphael.service';
@Directive({ selector: 'raphael-multiline-text' }) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ selector: 'adf-raphael-multiline-text, raphael-multiline-text' })
export class RaphaelMultilineTextDirective extends RaphaelBase implements OnInit { export class RaphaelMultilineTextDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base'; import { RaphaelBase } from './raphael-base';
import { RaphaelService } from './raphael.service'; import { RaphaelService } from './raphael.service';
@Directive({selector: 'raphael-pentagon'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-pentagon, raphael-pentagon'})
export class RaphaelPentagonDirective extends RaphaelBase implements OnInit { export class RaphaelPentagonDirective extends RaphaelBase implements OnInit {
@Input() @Input()
center: Point; center: Point;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base'; import { RaphaelBase } from './raphael-base';
import { RaphaelService } from './raphael.service'; import { RaphaelService } from './raphael.service';
@Directive({selector: 'raphael-plus'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-plus, raphael-plus'})
export class RaphaelPlusDirective extends RaphaelBase implements OnInit { export class RaphaelPlusDirective extends RaphaelBase implements OnInit {
@Input() @Input()
center: Point; center: Point;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base'; import { RaphaelBase } from './raphael-base';
import { RaphaelService } from './raphael.service'; import { RaphaelService } from './raphael.service';
@Directive({ selector: 'raphael-rect' }) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ selector: 'adf-raphael-rect, raphael-rect' })
export class RaphaelRectDirective extends RaphaelBase implements OnInit { export class RaphaelRectDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base'; import { RaphaelBase } from './raphael-base';
import { RaphaelService } from './raphael.service'; import { RaphaelService } from './raphael.service';
@Directive({selector: 'raphael-rhombus'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-rhombus, raphael-rhombus'})
export class RaphaelRhombusDirective extends RaphaelBase implements OnInit { export class RaphaelRhombusDirective extends RaphaelBase implements OnInit {
@Input() @Input()
center: Point; center: Point;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base'; import { RaphaelBase } from './raphael-base';
import { RaphaelService } from './raphael.service'; import { RaphaelService } from './raphael.service';
@Directive({selector: 'raphael-text'}) /**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({selector: 'adf-raphael-text, raphael-text'})
export class RaphaelTextDirective extends RaphaelBase implements OnInit { export class RaphaelTextDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@@ -19,7 +19,7 @@
</div> </div>
<ng-template #noApps> <ng-template #noApps>
<div class="adf-app-list-empty"> <div class="adf-app-list-empty">
<ng-content select="adf-empty-custom-content" *ngIf="hasEmptyCustomContentTemplate; else defaultEmptyTemplate" <ng-content select="adf-custom-empty-content" *ngIf="hasEmptyCustomContentTemplate; else defaultEmptyTemplate"
class="adf-custom-empty-template"> class="adf-custom-empty-template">
</ng-content> </ng-content>
@@ -171,10 +171,10 @@ describe('AppListCloudComponent', () => {
@Component({ @Component({
template: ` template: `
<adf-cloud-app-list> <adf-cloud-app-list>
<adf-empty-custom-content> <adf-custom-empty-content>
<mat-icon>apps</mat-icon> <mat-icon>apps</mat-icon>
<p id="custom-id">No Apps Found</p> <p id="custom-id">No Apps Found</p>
</adf-empty-custom-content> </adf-custom-empty-content>
</adf-cloud-app-list> </adf-cloud-app-list>
` `
}) })
@@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { EmptyCustomContentDirective } from '@alfresco/adf-core'; import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild } from '@angular/core'; import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild } from '@angular/core';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { AppsProcessCloudService } from '../services/apps-process-cloud.service'; import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
@@ -32,8 +32,8 @@
public static LAYOUT_GRID: string = 'GRID'; public static LAYOUT_GRID: string = 'GRID';
public static RUNNING_STATUS: string = 'RUNNING'; public static RUNNING_STATUS: string = 'RUNNING';
@ContentChild(EmptyCustomContentDirective) @ContentChild(CustomEmptyContentTemplateDirective)
emptyCustomContent: EmptyCustomContentDirective; emptyCustomContent: CustomEmptyContentTemplateDirective;
/** (**required**) Defines the layout of the apps. There are two possible /** (**required**) Defines the layout of the apps. There are two possible
* values, "GRID" and "LIST". * values, "GRID" and "LIST".
@@ -6,23 +6,25 @@
[multiselect]="multiselect" [multiselect]="multiselect"
(rowClick)="onRowClick($event)" (rowClick)="onRowClick($event)"
(row-keyup)="onRowKeyUp($event)"> (row-keyup)="onRowKeyUp($event)">
<loading-content-template> <adf-loading-content-template>
<ng-template> <ng-template>
<mat-progress-spinner <mat-progress-spinner
*ngIf="!customLoadingContent"
class="adf-cloud-process-list-loading-margin" class="adf-cloud-process-list-loading-margin"
[color]="'primary'" [color]="'primary'"
[mode]="'indeterminate'"> [mode]="'indeterminate'">
</mat-progress-spinner> </mat-progress-spinner>
<ng-content select="adf-custom-loading-content-template"></ng-content>
</ng-template> </ng-template>
</loading-content-template> </adf-loading-content-template>
<no-content-template> <adf-no-content-template>
<ng-template> <ng-template>
<adf-empty-content *ngIf="!emptyCustomContent" <adf-empty-content *ngIf="!emptyCustomContent"
icon="assessment" icon="assessment"
[title]="'ADF_CLOUD_PROCESS_LIST.MESSAGES.TITLE' | translate" [title]="'ADF_CLOUD_PROCESS_LIST.MESSAGES.TITLE' | translate"
[subtitle]="'ADF_CLOUD_PROCESS_LIST.MESSAGES.SUBTITLE'| translate"> [subtitle]="'ADF_CLOUD_PROCESS_LIST.MESSAGES.SUBTITLE'| translate">
</adf-empty-content> </adf-empty-content>
<ng-content select="adf-empty-custom-content"></ng-content> <ng-content select="adf-custom-empty-content-template"></ng-content>
</ng-template> </ng-template>
</no-content-template> </adf-no-content-template>
</adf-datatable> </adf-datatable>
@@ -47,12 +47,12 @@ class CustomTaskListComponent {
@Component({ @Component({
template: ` template: `
<adf-cloud-process-list> <adf-cloud-process-list>
<adf-empty-custom-content> <adf-custom-empty-content-template>
<p id="custom-id">TEST</p> <p id="custom-id">TEST</p>
</adf-empty-custom-content> </adf-custom-empty-content-template>
</adf-cloud-process-list> </adf-cloud-process-list>
` `
}) })
class EmptyTemplateComponent { class EmptyTemplateComponent {
@@ -17,9 +17,9 @@
import { Component, ViewEncapsulation, OnChanges, AfterContentInit, ContentChild, Output, EventEmitter, SimpleChanges, SimpleChange, Input } from '@angular/core'; import { Component, ViewEncapsulation, OnChanges, AfterContentInit, ContentChild, Output, EventEmitter, SimpleChanges, SimpleChange, Input } from '@angular/core';
import { DataTableSchema, PaginatedComponent, import { DataTableSchema, PaginatedComponent,
EmptyCustomContentDirective, AppConfigService, CustomEmptyContentTemplateDirective, AppConfigService,
UserPreferencesService, PaginationModel, UserPreferencesService, PaginationModel,
UserPreferenceValues, DataRowEvent } from '@alfresco/adf-core'; UserPreferenceValues, DataRowEvent, CustomLoadingContentTemplateDirective } from '@alfresco/adf-core';
import { ProcessListCloudService } from '../services/process-list-cloud.service'; import { ProcessListCloudService } from '../services/process-list-cloud.service';
import { BehaviorSubject } from 'rxjs'; import { BehaviorSubject } from 'rxjs';
import { processCloudPresetsDefaultModel } from '../models/process-cloud-preset.model'; import { processCloudPresetsDefaultModel } from '../models/process-cloud-preset.model';
@@ -36,8 +36,11 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
static PRESET_KEY = 'adf-cloud-process-list.presets'; static PRESET_KEY = 'adf-cloud-process-list.presets';
@ContentChild(EmptyCustomContentDirective) @ContentChild(CustomEmptyContentTemplateDirective)
emptyCustomContent: EmptyCustomContentDirective; emptyCustomContent: CustomEmptyContentTemplateDirective;
@ContentChild(CustomLoadingContentTemplateDirective)
customLoadingContent: CustomLoadingContentTemplateDirective;
/** The name of the application. */ /** The name of the application. */
@Input() @Input()
@@ -10,7 +10,7 @@
(row-unselect)="onRowUnselect($event)" (row-unselect)="onRowUnselect($event)"
(rowClick)="onRowClick($event)" (rowClick)="onRowClick($event)"
(row-keyup)="onRowKeyUp($event)"> (row-keyup)="onRowKeyUp($event)">
<loading-content-template> <adf-loading-content-template>
<ng-template> <ng-template>
<!-- Add your custom loading template here --> <!-- Add your custom loading template here -->
<mat-progress-spinner class="adf-cloud-task-list-loading-margin" <mat-progress-spinner class="adf-cloud-task-list-loading-margin"
@@ -18,16 +18,16 @@
[mode]="'indeterminate'"> [mode]="'indeterminate'">
</mat-progress-spinner> </mat-progress-spinner>
</ng-template> </ng-template>
</loading-content-template> </adf-loading-content-template>
<no-content-template> <adf-no-content-template>
<ng-template> <ng-template>
<adf-empty-content *ngIf="!emptyCustomContent" <adf-empty-content *ngIf="!emptyCustomContent"
icon="assignment" icon="assignment"
[title]="'ADF_CLOUD_TASK_LIST.LIST.MESSAGES.TITLE' | translate" [title]="'ADF_CLOUD_TASK_LIST.LIST.MESSAGES.TITLE' | translate"
[subtitle]="'ADF_CLOUD_TASK_LIST.LIST.MESSAGES.SUBTITLE' | translate"> [subtitle]="'ADF_CLOUD_TASK_LIST.LIST.MESSAGES.SUBTITLE' | translate">
</adf-empty-content> </adf-empty-content>
<ng-content select="adf-empty-custom-content"></ng-content> <ng-content select="adf-custom-empty-content"></ng-content>
</ng-template> </ng-template>
</no-content-template> </adf-no-content-template>
</adf-datatable> </adf-datatable>
</ng-container> </ng-container>
@@ -19,7 +19,7 @@ import { Component, ViewEncapsulation, OnChanges, Input, SimpleChanges, Output,
import { AppConfigService, UserPreferencesService, import { AppConfigService, UserPreferencesService,
DataTableSchema, UserPreferenceValues, DataTableSchema, UserPreferenceValues,
PaginatedComponent, PaginationModel, PaginatedComponent, PaginationModel,
DataRowEvent, EmptyCustomContentDirective } from '@alfresco/adf-core'; DataRowEvent, CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
import { taskPresetsCloudDefaultModel } from '../models/task-preset-cloud.model'; import { taskPresetsCloudDefaultModel } from '../models/task-preset-cloud.model';
import { TaskQueryCloudRequestModel } from '../models/filter-cloud-model'; import { TaskQueryCloudRequestModel } from '../models/filter-cloud-model';
import { BehaviorSubject } from 'rxjs'; import { BehaviorSubject } from 'rxjs';
@@ -38,8 +38,8 @@ export class TaskListCloudComponent extends DataTableSchema implements OnChanges
static PRESET_KEY = 'adf-cloud-task-list.presets'; static PRESET_KEY = 'adf-cloud-task-list.presets';
@ContentChild(EmptyCustomContentDirective) @ContentChild(CustomEmptyContentTemplateDirective)
emptyCustomContent: EmptyCustomContentDirective; emptyCustomContent: CustomEmptyContentTemplateDirective;
/** The name of the application. */ /** The name of the application. */
@Input() @Input()
@@ -43,7 +43,7 @@
<ng-template #empty> <ng-template #empty>
<div class="adf-app-list-empty" *ngIf="isEmpty()"> <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> <ng-template #defaultEmptyTemplate>
<adf-empty-content <adf-empty-content
@@ -243,9 +243,9 @@ describe('AppsListComponent', () => {
@Component({ @Component({
template: ` template: `
<adf-apps> <adf-apps>
<adf-empty-custom-content> <adf-custom-empty-content>
<p id="custom-id">No Apps</p> <p id="custom-id">No Apps</p>
</adf-empty-custom-content> </adf-custom-empty-content>
</adf-apps> </adf-apps>
` `
}) })
@@ -15,7 +15,7 @@
* limitations under the License. * 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 { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild } from '@angular/core';
import { Observable, Observer, of } from 'rxjs'; import { Observable, Observer, of } from 'rxjs';
import { AppDefinitionRepresentationModel } from '../task-list'; 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_ICON: string = 'glyphicon-asterisk';
public static DEFAULT_TASKS_APP_MATERIAL_ICON: string = 'favorite_border'; public static DEFAULT_TASKS_APP_MATERIAL_ICON: string = 'favorite_border';
@ContentChild(EmptyCustomContentDirective) @ContentChild(CustomEmptyContentTemplateDirective)
emptyCustomContent: EmptyCustomContentDirective; emptyCustomContent: CustomEmptyContentTemplateDirective;
/** (**required**) Defines the layout of the apps. There are two possible /** (**required**) Defines the layout of the apps. There are two possible
* values, "GRID" and "LIST". * values, "GRID" and "LIST".
@@ -5,7 +5,7 @@
(showRowActionsMenu)="onShowRowActionsMenu($event)" (showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"> (executeRowAction)="onExecuteRowAction($event)">
<no-content-template> <adf-no-content-template>
<ng-template> <ng-template>
<ng-content *ngIf="hasCustomTemplate; else defaulEmptyList" class="adf-custom-empty-template"></ng-content> <ng-content *ngIf="hasCustomTemplate; else defaulEmptyList" class="adf-custom-empty-template"></ng-content>
<ng-template #defaulEmptyList> <ng-template #defaulEmptyList>
@@ -16,7 +16,7 @@
</adf-empty-list> </adf-empty-list>
</ng-template> </ng-template>
</ng-template> </ng-template>
</no-content-template> </adf-no-content-template>
<data-columns> <data-columns>
<data-column key="icon" type="image" srTitle="ADF_PROCESS_LIST.PROPERTIES.THUMBNAIL" [sortable]="false"></data-column> <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-column key="created" type="date" format="shortDate" title="{{'ADF_PROCESS_LIST.PROPERTIES.CREATED' | translate}}"></data-column>
</data-columns> </data-columns>
<loading-content-template> <adf-loading-content-template>
<ng-template> <ng-template>
<!--Add your custom loading template here--> <!--Add your custom loading template here-->
<mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'"> <mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'">
</mat-progress-spinner> </mat-progress-spinner>
</ng-template> </ng-template>
</loading-content-template> </adf-loading-content-template>
</adf-datatable> </adf-datatable>

Some files were not shown because too many files have changed in this diff Show More