[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",
"DATATABLE": "Datatable",
"DATATABLE_LAZY": "Datatable (Lazy)",
"DOCUMENT_LIST": "Document List",
"FORM": "Form",
"FORM_LIST": "Form List",
"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 { CloudFiltersDemoComponent } from './components/app-layout/cloud/cloud-filters-demo.component';
import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
import { DocumentListDemoComponent } from './components/document-list/document-list-demo.component';
@NgModule({
imports: [
@@ -133,7 +134,8 @@ import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/st
StartTaskCloudDemoComponent,
StartProcessCloudDemoComponent,
CloudBreadcrumbsComponent,
CloudFiltersDemoComponent
CloudFiltersDemoComponent,
DocumentListDemoComponent
],
providers: [
{
+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 { StartTaskCloudDemoComponent } from './components/app-layout/cloud/start-task-cloud-demo.component';
import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
import { DocumentListDemoComponent } from './components/document-list/document-list-demo.component';
export const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
@@ -334,6 +335,10 @@ export const appRoutes: Routes = [
path: 'datatable-lazy',
loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule'
},
{
path: 'document-list',
component: DocumentListDemoComponent
},
{
path: 'task-list',
canActivate: [AuthGuardBpm],
@@ -47,6 +47,7 @@ export class AppLayoutComponent implements OnInit {
{ href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
{ href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
{ href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },
{ href: '/document-list', icon: 'list_alt', title: 'APP_LAYOUT.DOCUMENT_LIST' },
{ href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
{ href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
{ href: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' },
@@ -9,14 +9,14 @@
<ng-template>
<adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-options>
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
</button>
</div>
<div sidebar-menu-options>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
@@ -0,0 +1,36 @@
<h1>Document List Demo Page</h1>
<h3>Default Loading Template</h3>
<adf-document-list currentFolderId="-my-" #defaultDocumentList>
</adf-document-list>
<h3>Custom Loading Template</h3>
<adf-document-list currentFolderId="-my-" #customLoadingDocumentList>
<adf-custom-loading-content-template>
This is a custom loading template
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</adf-custom-loading-content-template>
</adf-document-list>
<h3>Default No Permission Template</h3>
<adf-document-list currentFolderId="-my-" #defaultNoPermissionDocumentList>
</adf-document-list>
<h3>Custom No Permission Template</h3>
<adf-document-list currentFolderId="-my-" #customNoPermissionDocumentList>
<adf-custom-no-permission-template>
This is a custom no permission template<mat-icon>pan_tool</mat-icon> You shall not see the content
</adf-custom-no-permission-template>
</adf-document-list>
<h3>Default Empty Content Template</h3>
<adf-document-list #defaultEmptyDocumentList>
</adf-document-list>
<h3>Custom Empty Content Template</h3>
<adf-document-list #customEmptyDocumentList>
<adf-custom-empty-content-template>
<div>This is a custom no content template</div>
<mat-icon>cancel_presentation</mat-icon>
</adf-custom-empty-content-template>
</adf-document-list>
@@ -0,0 +1,57 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, ViewChild, AfterViewChecked } from '@angular/core';
import { DocumentListComponent } from '@alfresco/adf-content-services';
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({
selector: 'app-document-list',
templateUrl: './document-list-demo.component.html'
})
export class DocumentListDemoComponent implements AfterViewChecked {
@ViewChild('defaultDocumentList')
defaultDocumentListComponent: DocumentListComponent;
@ViewChild('customLoadingDocumentList')
customLoadingDocumentList: DocumentListComponent;
@ViewChild('customNoPermissionDocumentList')
customNoPermissionDocumentList: DocumentListComponent;
@ViewChild('defaultNoPermissionDocumentList')
defaultNoPermissionDocumentList: DocumentListComponent;
@ViewChild('customEmptyDocumentList')
customEmptyDocumentList: DocumentListComponent;
@ViewChild('defaultEmptyDocumentList')
defaultEmptyDocumentList: DocumentListComponent;
constructor() {
}
ngAfterViewChecked(): void {
this.defaultDocumentListComponent.dataTable.loading = true;
this.customLoadingDocumentList.dataTable.loading = true;
this.customEmptyDocumentList.dataTable.data = new ObjectDataTableAdapter();
this.defaultEmptyDocumentList.dataTable.data = new ObjectDataTableAdapter();
this.customNoPermissionDocumentList.dataTable.noPermission = true;
this.defaultNoPermissionDocumentList.dataTable.noPermission = true;
}
}
@@ -16,14 +16,12 @@
[maxItems]="5"
(preview)="showFile($event)"
selectionMode="null">
<empty-folder-content>
<ng-template>
<div class="adf-empty-list__block">
<mat-icon>history</mat-icon>
<p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
</div>
</ng-template>
</empty-folder-content>
<adf-custom-empty-content-template>
<div class="adf-empty-list__block">
<mat-icon>history</mat-icon>
<p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
</div>
</adf-custom-empty-content-template>
</adf-document-list>
</mat-expansion-panel>
</mat-accordion>
@@ -227,18 +225,18 @@
(folderChange)="onFolderChange($event)"
(permissionError)="handlePermissionError($event)"
(name-click)="documentList.onNodeDblClick($event.detail?.node)">
<no-permission-content *ngIf="enableCustomPermissionMessage">
<adf-custom-no-permission-template *ngIf="enableCustomPermissionMessage">
<ng-template>
<h1>You don't have permissions</h1>
</ng-template>
</no-permission-content>
<empty-folder-content *ngIf="disableDragArea">
</adf-custom-no-permission-template>
<adf-custom-empty-content-template *ngIf="disableDragArea">
<ng-template>
<div class="adf-empty_template">
<div class="adf-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
</div>
</ng-template>
</empty-folder-content>
</adf-custom-empty-content-template>
<data-columns>
<data-column
key="$thumbnail"
@@ -8,7 +8,7 @@
<adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-options>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-task" (click)="navigateStartTask()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
@@ -120,7 +120,7 @@
<adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-options>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-process"
(click)="navigateStartProcess()">
<mat-icon>assessment</mat-icon>
@@ -38,16 +38,14 @@
[contextMenuActions]="true"
[contentActions]="false">
<empty-folder-content>
<ng-template>
<adf-empty-content
icon="delete"
[title]="'TRASHCAN.EMPTY_STATE.TITLE'">
<p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
<p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
</adf-empty-content>
</ng-template>
</empty-folder-content>
<adf-custom-empty-content-template>
<adf-empty-content
icon="delete"
[title]="'TRASHCAN.EMPTY_STATE.TITLE'">
<p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
<p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
</adf-empty-content>
</adf-custom-empty-content-template>
<data-columns>
@@ -37,6 +37,7 @@ Displays the documents from a repository.
- [Custom image resolver](#custom-image-resolver)
- [Custom 'empty folder' template](#custom-empty-folder-template)
- [Custom 'permission denied' template](#custom-permission-denied-template)
- [Custom 'loading' template](#custom-loading-template)
- [See also](#see-also)
## Basic Usage
@@ -827,11 +828,9 @@ However, you can change this by defining your own custom HTML template:
```html
<adf-document-list ...>
<empty-folder-content>
<ng-template>
<h1>Sorry, no content here</h1>
</ng-template>
</empty-folder-content>
<adf-custom-empty-content-template>
<h1>Sorry, no content here</h1>
</adf-custom-empty-content-template>
</adf-document-list>
```
@@ -850,11 +849,9 @@ You can change this by defining your own custom HTML template:
```html
<adf-document-list ...>
<no-permission-content>
<ng-template>
<h1>You don't have permissions</h1>
</ng-template>
</no-permission-content>
<adf-custom-no-permission-template>
<h1>You don't have permissions</h1>
</adf-custom-no-permission-template>
</adf-document-list>
```
@@ -862,6 +859,27 @@ This will give the following output:
![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
- [Datatable component](../core/datatable.component.md)
@@ -12,7 +12,7 @@ Provides drag-and-drop features for an element such as a `div`.
## Basic Usage
```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)"
(folderEntityDropped)="onFolderEntityDropped($event)"
dropzone="" webkitdropzone="*" #dragAndDropArea>
+1 -1
View File
@@ -12,7 +12,7 @@ Adds a context menu to a component.
## Basic Usage
```html
<my-component [context-menu]="menuItems"></my-component>
<my-component [adf-context-menu]="menuItems"></my-component>
<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
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:
```html
<adf-datatable ...>
<no-content-template>
<adf-no-content-template>
<!--Add your custom empty template here-->
<ng-template>
<h1>Sorry, no content</h1>
</ng-template>
</no-content-template>
</adf-no-content-template>
</adf-datatable>
```
@@ -275,12 +275,12 @@ You can also supply a `<no-content-template>` or an
</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:
```html
<adf-datatable ...>
<loading-content-template>
<adf-loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
<mat-progress-spinner
@@ -289,7 +289,7 @@ while the data for the table is loading:
[mode]="'indeterminate'">
</mat-progress-spinner>
</ng-template>
</loading-content-template>
</adf-loading-content-template>
</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.
## 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
<adf-login ...>
<login-header><ng-template>My custom HTML for the header</ng-template></login-header>
<login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer>
<adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
<adf-login-footer><ng-template>My custom HTML for the footer</ng-template></adf-login-footer>
</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
the following names:
- sidebar-menu-title-icon
- sidebar-menu-options
- sidebar-menu-expand-icon
- adf-sidebar-menu-title-icon
- adf-sidebar-menu-options
- adf-sidebar-menu-expand-icon
```html
<adf-sidebar-action-menu>
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-expand-icon>
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div adf-sidebar-menu-expand-icon>
<mat-icon>queue</mat-icon>
</div>
<div sidebar-menu-options>
<div adf-sidebar-menu-options>
<button mat-menu-item>
<mat-icon>assignment</mat-icon>
<span>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)
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
<adf-cloud-app-list
[layoutType]="'GRID'">
<adf-empty-custom-content>
<adf-custom-empty-content>
No Apps present
</adf-empty-custom-content>
</adf-custom-empty-content>
</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)
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:
```html
<adf-cloud-process-list>
<adf-empty-custom-content>
<adf-custom-empty-content>
Your Content
</adf-empty-custom-content>
</adf-custom-empty-content>
<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)
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:
```html
<adf-cloud-task-list>
<adf-empty-custom-content>
<adf-custom-empty-content>
Your Content
</adf-empty-custom-content>
</adf-custom-empty-content>
<adf-cloud-task-list>
```
+3 -3
View File
@@ -22,14 +22,14 @@ Shows all available apps.
### [Transclusions](../user-guide/transclusion.md)
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
<adf-apps
[layoutType]="'GRID'">
<adf-empty-custom-content>
<adf-custom-empty-content>
No Apps present
</adf-empty-custom-content>
</adf-custom-empty-content>
</adf-apps>
```
@@ -34,14 +34,14 @@ Renders a list containing all the process instances matched by the parameters sp
### [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:
```html
<adf-process-instance-list>
<adf-empty-custom-content>
<adf-custom-empty-content>
Your Content
</adf-empty-custom-content>
</adf-custom-empty-content>
<adf-process-instance-list>
```
@@ -64,12 +64,12 @@ example:
```html
<adf-task-details [taskId]="taskId">
<no-task-details-template>
<adf-no-task-details-template>
<ng-template>
<h1>Sorry, no tasks here</h1>
<img src="example.jpg">
</ng-template>
</no-task-details-template>
</adf-no-task-details-template>
</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)
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:
```html
<adf-tasklist>
<adf-empty-custom-content>
<adf-custom-empty-content>
Your Content
</adf-empty-custom-content>
</adf-custom-empty-content>
<adf-tasklist>
```
+1 -1
View File
@@ -30,7 +30,7 @@ Open the [`login.component`](../core/login.component.md)`.html` file and change
```html
<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>
```
+5 -5
View File
@@ -138,7 +138,7 @@ project have a
[Transclusions](../user-guide/transclusion.md)
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:
@@ -149,17 +149,17 @@ Let's add a simple Hello World message in the footer. Open the template `src/app
(executeSubmit)="myExecuteSubmitMethod($event)"
copyrightText="© 2017 Alfresco Software, Inc. All Rights Reserved."
successRoute="/documentlist">
<login-footer>
<adf-login-footer>
<ng-template>
Hello World!
</ng-template>
</login-footer>
</adf-login-footer>
</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
+1 -1
View File
@@ -34,7 +34,7 @@ content of the body:
```html
<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>
```
@@ -69,11 +69,10 @@
(ready)="onFolderLoaded($event)"
(node-dblclick)="onNodeDoubleClick($event)"
data-automation-id="content-node-selector-document-list">
<empty-folder-content>
<ng-template>
<div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div>
</ng-template>
</empty-folder-content>
<adf-custom-empty-content-template>
<div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div>
</adf-custom-empty-content-template>
<data-columns>
<data-column key="$thumbnail" type="image"></data-column>
@@ -23,45 +23,43 @@
(row-unselect)="onNodeUnselect($event.detail)"
[class.adf-datatable-gallery-thumbnails]="data.thumbnails">
<div *ngIf="!isEmptyTemplateDefined()">
<no-content-template>
<ng-template>
<adf-empty-list>
<div class="adf-empty-list_template adf-empty-folder">
<div class="adf-empty-folder-this-space-is-empty">{{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}}</div>
<div fxHide.lt-md="true" class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
<div fxHide.lt-md="true" class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
<img class="adf-empty-folder-image" [src]="emptyFolderImageUrl">
</div>
<!-- <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}} </div> -->
</adf-empty-list>
</ng-template>
</no-content-template>
</div>
<div *ngIf="!isNoPermissionTemplateDefined()">
<no-permission-template>
<ng-template>
<div class="adf-no-permission__template">
<mat-icon>ic_error</mat-icon>
<p class="adf-no-permission__template--text">{{ 'ADF-DOCUMENT-LIST.NO_PERMISSION' | translate }}</p>
<adf-no-content-template>
<ng-template>
<adf-empty-list *ngIf="!customNoContentTemplate">
<div class="adf-empty-list_template adf-empty-folder">
<div class="adf-empty-folder-this-space-is-empty">{{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}}</div>
<div fxHide.lt-md="true" class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
<div fxHide.lt-md="true" class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
<img class="adf-empty-folder-image" [src]="emptyFolderImageUrl">
</div>
</ng-template>
</no-permission-template>
</div>
<!-- <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}} </div> -->
</adf-empty-list>
<ng-content select="adf-custom-empty-content-template"></ng-content>
</ng-template>
</adf-no-content-template>
<adf-no-permission-template>
<ng-template>
<div class="adf-no-permission__template" *ngIf="!customNoPermissionsTemplate">
<mat-icon>ic_error</mat-icon>
<p class="adf-no-permission__template--text">{{ 'ADF-DOCUMENT-LIST.NO_PERMISSION' | translate }}</p>
</div>
<ng-content select="adf-custom-no-permission-template"></ng-content>
</ng-template>
</adf-no-permission-template>
<adf-loading-content-template>
<ng-template>
<div class="adf-document-list-loading-container" *ngIf="!customLoadingContent">
<mat-progress-spinner
id="adf-document-list-loading"
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</mat-progress-spinner>
</div>
<ng-content select="adf-custom-loading-content-template"></ng-content>
</ng-template>
</adf-loading-content-template>
<div>
<loading-content-template>
<ng-template>
<div class="adf-document-list-loading-container">
<mat-progress-spinner
id="adf-document-list-loading"
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</mat-progress-spinner>
</div>
</ng-template>
</loading-content-template>
</div>
</adf-datatable>
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange, TemplateRef, QueryList } from '@angular/core';
import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange, QueryList } from '@angular/core';
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { AlfrescoApiService, DataColumnListComponent, DataColumnComponent } from '@alfresco/adf-core';
import { DataColumn, DataTableComponent } from '@alfresco/adf-core';
@@ -39,6 +39,7 @@ import { DocumentListComponent } from './document-list.component';
import { setupTestBed } from '@alfresco/adf-core';
import { ContentTestingModule } from '../../testing/content.testing.module';
import { NodeEntry } from '@alfresco/js-api';
import { By } from '@angular/platform-browser';
describe('DocumentList', () => {
@@ -846,42 +847,26 @@ describe('DocumentList', () => {
expect(documentList.navigationMode).toBe(DocumentListComponent.SINGLE_CLICK_NAVIGATION);
});
it('should require dataTable to check empty template', () => {
documentList.dataTable = null;
expect(documentList.isEmptyTemplateDefined()).toBeFalsy();
});
it('should check [empty folder] template ', () => {
documentList.emptyFolderTemplate = <TemplateRef<any>> {};
it('should display [empty folder] template ', () => {
fixture.detectChanges();
documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.dataTable).toBeDefined();
expect(documentList.isEmptyTemplateDefined()).toBeTruthy();
documentList.emptyFolderTemplate = null;
expect(documentList.isEmptyTemplateDefined()).toBeFalsy();
expect(fixture.debugElement.query(By.css('adf-empty-list'))).not.toBeNull();
});
it('should require dataTable to check no permission template', () => {
documentList.dataTable = null;
expect(documentList.isNoPermissionTemplateDefined()).toBe(false);
it('should display no permission template when the user has no permission', () => {
documentList.noPermission = true;
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('.adf-no-permission__template'))).not.toBeNull();
});
it('should return true if custom permission template is provided', () => {
documentList.noPermissionTemplate = <TemplateRef<any>> {};
documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.isNoPermissionTemplateDefined()).toBe(true);
});
it('should return false if no custom permission template is provided', () => {
documentList.noPermissionTemplate = null;
documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.isNoPermissionTemplateDefined()).toBe(false);
it('should display loading template when data is loading', () => {
documentList.loading = true;
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('mat-progress-spinner'))).not.toBeNull();
});
it('should empty folder NOT show the pagination', () => {
documentList.emptyFolderTemplate = <TemplateRef<any>> {};
documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.isEmpty()).toBeTruthy();
@@ -19,13 +19,13 @@
import {
AfterContentInit, Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, NgZone,
OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation
OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation
} from '@angular/core';
import {
ContentService, DataCellEvent, DataColumn, DataRowActionEvent, DataSorting, DataTableComponent,
DisplayMode, ObjectDataColumn, PaginatedComponent, AppConfigService, DataColumnListComponent,
UserPreferencesService, PaginationModel, ThumbnailService
UserPreferencesService, PaginationModel, ThumbnailService, CustomLoadingContentTemplateDirective, CustomNoPermissionTemplateDirective, CustomEmptyContentTemplateDirective
} from '@alfresco/adf-core';
import { Node, NodeEntry, NodePaging } from '@alfresco/js-api';
@@ -60,6 +60,15 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
@ContentChild(DataColumnListComponent)
columnList: DataColumnListComponent;
@ContentChild(CustomLoadingContentTemplateDirective)
customLoadingContent: CustomLoadingContentTemplateDirective;
@ContentChild(CustomNoPermissionTemplateDirective)
customNoPermissionsTemplate: CustomNoPermissionTemplateDirective;
@ContentChild(CustomEmptyContentTemplateDirective)
customNoContentTemplate: CustomEmptyContentTemplateDirective;
/** Include additional information about the node in the server request. For example: association, isLink, isLocked and others. */
@Input()
includeFields: string[];
@@ -212,8 +221,6 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
dataTable: DataTableComponent;
actions: ContentActionModel[] = [];
emptyFolderTemplate: TemplateRef<any>;
noPermissionTemplate: TemplateRef<any>;
contextActionHandler: Subject<any> = new Subject();
data: ShareDataTableAdapter;
noPermission: boolean = false;
@@ -283,24 +290,6 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
return this._pagination;
}
isEmptyTemplateDefined(): boolean {
if (this.dataTable) {
if (this.emptyFolderTemplate) {
return true;
}
}
return false;
}
isNoPermissionTemplateDefined(): boolean {
if (this.dataTable) {
if (this.noPermissionTemplate) {
return true;
}
}
return false;
}
isMobile(): boolean {
return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
@@ -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 { DocumentListComponent } from './components/document-list.component';
import { EmptyFolderContentDirective } from './components/empty-folder/empty-folder-content.directive';
import { NoPermissionContentDirective } from './components/no-permission/no-permission-content.directive';
import { TrashcanNameColumnComponent } from './components/trashcan-name-column/trashcan-name-column.component';
import { LibraryStatusColumnComponent } from './components/library-status-column/library-status-column.component';
import { LibraryRoleColumnComponent } from './components/library-role-column/library-role-column.component';
@@ -55,9 +53,7 @@ import { NameColumnComponent } from './components/name-column/name-column.compon
NameColumnComponent,
ContentColumnListComponent,
ContentActionComponent,
ContentActionListComponent,
EmptyFolderContentDirective,
NoPermissionContentDirective
ContentActionListComponent
],
exports: [
DocumentListComponent,
@@ -69,9 +65,7 @@ import { NameColumnComponent } from './components/name-column/name-column.compon
NameColumnComponent,
ContentColumnListComponent,
ContentActionComponent,
ContentActionListComponent,
EmptyFolderContentDirective,
NoPermissionContentDirective
ContentActionListComponent
],
entryComponents: [
TrashcanNameColumnComponent,
@@ -21,8 +21,6 @@ export * from './components/content-column/content-column.component';
export * from './components/content-column/content-column-list.component';
export * from './components/content-action/content-action.component';
export * from './components/content-action/content-action-list.component';
export * from './components/empty-folder/empty-folder-content.directive';
export * from './components/no-permission/no-permission-content.directive';
export * from './components/library-name-column/library-name-column.component';
export * from './components/library-role-column/library-role-column.component';
export * from './components/library-status-column/library-status-column.component';
@@ -41,7 +41,11 @@ export const SEARCH_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
multi: true
};
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({
// tslint:disable-next-line:directive-selector
selector: `input[searchAutocomplete], textarea[searchAutocomplete]`,
host: {
'role': 'combobox',
@@ -2,14 +2,14 @@ adf-upload-drag-area {
overflow: hidden;
}
.upload-border {
.adf-upload-border {
vertical-align: middle;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.file-draggable__input-focus {
color: #2196F3;
border: 1px dashed #2196F3;
.adf-file-draggable__input-focus {
color: #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)"
(folderEntityDropped)="onFolderEntityDropped($event)"
(upload-files)="onUploadFiles($event)"
@@ -20,15 +20,18 @@
import { FileUtils } from '@alfresco/adf-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({
selector: '[file-draggable]'
selector: '[adf-file-draggable], [file-draggable]'
})
export class FileDraggableDirective implements OnInit, OnDestroy {
files: File [];
/** Enables/disables drag-and-drop functionality. */
@Input('file-draggable')
@Input('adf-file-draggable')
enabled: boolean = true;
/** 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()
folderEntityDropped: EventEmitter<any> = new EventEmitter();
private cssClassName: string = 'file-draggable__input-focus';
private cssClassName: string = 'adf-file-draggable__input-focus';
private element: HTMLElement;
constructor(el: ElementRef, private ngZone: NgZone) {
@@ -21,15 +21,15 @@ import { Directive, HostListener, Input } from '@angular/core';
import { ContextMenuOverlayService } from './context-menu-overlay.service';
@Directive({
selector: '[context-menu]'
selector: '[adf-context-menu], [context-menu]'
})
export class ContextMenuDirective {
/** Items for the menu. */
@Input('context-menu')
@Input('adf-context-menu')
links: any[];
/** Is the menu enabled? */
@Input('context-menu-enabled')
@Input('adf-context-menu-enabled')
enabled: boolean = false;
constructor(private contextMenuService: ContextMenuOverlayService) {}
+1 -1
View File
@@ -24,7 +24,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@Component({
selector: 'adf-test-component',
template: `
<div id="target" [context-menu]="actions" [context-menu-enabled]="true"></div>
<div id="target" [adf-context-menu]="actions" [adf-context-menu-enabled]="true"></div>
`
})
class TestComponent {
@@ -89,8 +89,8 @@
tabindex="0"
(click)="onRowClick(row, $event)"
(keydown.enter)="onEnterKeyPressed(row, $event)"
[context-menu]="getContextMenuActions(row, col)"
[context-menu-enabled]="contextMenu">
[adf-context-menu]="getContextMenuActions(row, col)"
[adf-context-menu-enabled]="contextMenu">
<div *ngIf="!col.template" class="adf-cell-container">
<ng-container [ngSwitch]="col.type">
<div *ngSwitchCase="'image'" class="adf-cell-value">
+9 -3
View File
@@ -37,7 +37,9 @@ import { LocationCellComponent } from './components/datatable/location-cell.comp
import { LoadingContentTemplateDirective } from './directives/loading-template.directive';
import { NoContentTemplateDirective } from './directives/no-content-template.directive';
import { NoPermissionTemplateDirective } from './directives/no-permission-template.directive';
import { EmptyCustomContentDirective } from './directives/empty-custom-content.directive';
import { CustomEmptyContentTemplateDirective } from './directives/custom-empty-content-template.directive';
import { CustomLoadingContentTemplateDirective } from './directives/custom-loading-template.directive';
import { CustomNoPermissionTemplateDirective } from './directives/custom-no-permission-template.directive';
@NgModule({
imports: [
@@ -62,7 +64,9 @@ import { EmptyCustomContentDirective } from './directives/empty-custom-content.d
NoContentTemplateDirective,
NoPermissionTemplateDirective,
LoadingContentTemplateDirective,
EmptyCustomContentDirective
CustomEmptyContentTemplateDirective,
CustomLoadingContentTemplateDirective,
CustomNoPermissionTemplateDirective
],
exports: [
DataTableComponent,
@@ -77,7 +81,9 @@ import { EmptyCustomContentDirective } from './directives/empty-custom-content.d
NoContentTemplateDirective,
NoPermissionTemplateDirective,
LoadingContentTemplateDirective,
EmptyCustomContentDirective
CustomEmptyContentTemplateDirective,
CustomLoadingContentTemplateDirective,
CustomNoPermissionTemplateDirective
]
})
export class DataTableModule {}
@@ -15,22 +15,15 @@
* limitations under the License.
*/
import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
import { DocumentListComponent } from './../document-list.component';
import { Directive } from '@angular/core';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0.
* The empty-folder-content selector will be deprecated as it has been replace by
* adf-custom-empty-content-template.
*/
@Directive({
selector: 'empty-folder-content'
selector: 'adf-custom-empty-content-template, empty-folder-content'
})
export class EmptyFolderContentDirective implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
constructor(private documentList: DocumentListComponent) {
}
ngAfterContentInit() {
this.documentList.emptyFolderTemplate = this.template;
this.documentList.dataTable.noContentTemplate = this.template;
}
}
export class CustomEmptyContentTemplateDirective {}
@@ -18,7 +18,6 @@
import { Directive } from '@angular/core';
@Directive({
selector: 'adf-empty-custom-content'
selector: 'adf-custom-loading-content-template'
})
export class EmptyCustomContentDirective {}
export class CustomLoadingContentTemplateDirective {}
@@ -15,22 +15,14 @@
* limitations under the License.
*/
import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
import { DocumentListComponent } from './../document-list.component';
import { Directive } from '@angular/core';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0.
* The no-permission-content selector will be deprecated as it has been replace by
* adf-custom-no-permission-template.
*/
@Directive({
selector: 'no-permission-content'
selector: 'adf-custom-no-permission-template, no-permission-content'
})
export class NoPermissionContentDirective implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
constructor(private documentList: DocumentListComponent) {
}
ngAfterContentInit() {
this.documentList.noPermissionTemplate = this.template;
this.documentList.dataTable.noPermissionTemplate = this.template;
}
}
export class CustomNoPermissionTemplateDirective {}
@@ -18,8 +18,11 @@
import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
import { DataTableComponent } from '../components/datatable/datatable.component';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({
selector: 'loading-content-template'
selector: 'adf-loading-content-template, loading-content-template'
})
export class LoadingContentTemplateDirective implements AfterContentInit {
@@ -18,8 +18,11 @@
import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
import { DataTableComponent } from '../components/datatable/datatable.component';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({
selector: 'no-content-template'
selector: 'adf-no-content-template, no-content-template'
})
export class NoContentTemplateDirective implements AfterContentInit {
@@ -18,8 +18,11 @@
import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
import { DataTableComponent } from '../components/datatable/datatable.component';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({
selector: 'no-permission-template'
selector: 'adf-no-permission-template, no-permission-template'
})
export class NoPermissionTemplateDirective implements AfterContentInit {
+3 -1
View File
@@ -40,6 +40,8 @@ export * from './data/data-table.schema';
export * from './directives/loading-template.directive';
export * from './directives/no-content-template.directive';
export * from './directives/no-permission-template.directive';
export * from './directives/empty-custom-content.directive';
export * from './directives/custom-empty-content-template.directive';
export * from './directives/custom-loading-template.directive';
export * from './directives/custom-no-permission-template.directive';
export * from './datatable.module';
@@ -21,8 +21,11 @@ import { AlfrescoApiService } from '../services/alfresco-api.service';
import { DownloadZipDialogComponent } from '../dialogs/download-zip.dialog';
import { NodeEntry } from '@alfresco/js-api';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({
selector: '[adfNodeDownload]'
selector: '[adf-node-download], [adfNodeDownload]'
})
export class NodeDownloadDirective {
@@ -17,4 +17,7 @@
import { Directive } from '@angular/core';
@Directive({ selector: '[form-custom-button]' }) export class StartFormCustomButtonDirective {}
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ selector: '[adf-form-custom-button], [form-custom-button]' }) export class StartFormCustomButtonDirective {}
@@ -18,7 +18,7 @@
</mat-card-content>
<mat-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()"
#outcomesContainer>
<ng-content select="[form-custom-button]"></ng-content>
<ng-content select="[adf-form-custom-button]"></ng-content>
<button *ngFor="let outcome of form.outcomes"
mat-button
[attr.data-automation-id]="'adf-form-' + outcome.name | lowercase"
@@ -35,8 +35,11 @@ export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
multi: true
};
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({
selector: '[textMask]',
selector: '[adf-text-mask], [textMask]',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class InputMaskDirective implements OnChanges, ControlValueAccessor {
@@ -26,6 +26,9 @@ import { Component, Directive, ViewEncapsulation } from '@angular/core';
})
export class InfoDrawerLayoutComponent {}
@Directive({ selector: '[info-drawer-title]' }) export class InfoDrawerTitleDirective {}
@Directive({ selector: '[info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
@Directive({ selector: '[info-drawer-content]' }) export class InfoDrawerContentDirective {}
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ selector: '[adf-info-drawer-title], [info-drawer-title]' }) export class InfoDrawerTitleDirective {}
@Directive({ selector: '[adf-info-drawer-buttons], [info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
@Directive({ selector: '[adf-info-drawer-content], [info-drawer-content]' }) export class InfoDrawerContentDirective {}
@@ -1,16 +1,16 @@
<div class="adf-sidebar-action-menu">
<button *ngIf="isExpanded()" mat-raised-button class="adf-sidebar-action-menu-button" data-automation-id="create-button" [matMenuTriggerFor]="adfSidebarMenu">
<span *ngIf="title" class="adf-sidebar-action-menu-text">{{ title }}</span>
<ng-content select="[sidebar-menu-title-icon]"></ng-content>
<ng-content select="[adf-sidebar-menu-title-icon]"></ng-content>
</button>
<div *ngIf="!isExpanded()" class="adf-sidebar-action-menu-icon" [matMenuTriggerFor]="adfSidebarMenu">
<ng-content select="[sidebar-menu-expand-icon]"></ng-content>
<ng-content select="[adf-sidebar-menu-expand-icon]"></ng-content>
</div>
<mat-menu #adfSidebarMenu="matMenu" class="adf-sidebar-action-menu-panel" [overlapTrigger]="false" yPosition="below">
<div class="adf-sidebar-action-menu-options" [style.width.px]="width">
<ng-content select="[sidebar-menu-options]"></ng-content>
<ng-content select="[adf-sidebar-menu-options]"></ng-content>
</div>
</mat-menu>
</div>
@@ -58,11 +58,11 @@ describe('SidebarActionMenuComponent', () => {
@Component({
template: `
<adf-sidebar-action-menu [expanded]="expanded" [title]="title">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-expand-icon>
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div adf-sidebar-menu-expand-icon>
<mat-icon>queue</mat-icon>
</div>
<div sidebar-menu-options>
<div adf-sidebar-menu-options>
<button mat-menu-item>
<mat-icon>assignment</mat-icon>
<span>Option1</span>
@@ -122,7 +122,7 @@ describe('Custom SidebarActionMenuComponent', () => {
expect(title.textContent).toBe('FakeTitle');
});
it('should render the sidebar-menu-options', () => {
it('should render the adf-sidebar-menu-options', () => {
fixture.detectChanges();
const actionButton = fixture.nativeElement.querySelector('.adf-sidebar-action-menu-button');
const options = fixture.nativeElement.querySelectorAll('.adf-sidebar-action-menu-options');
@@ -45,6 +45,9 @@ export class SidebarActionMenuComponent {
}
}
@Directive({ selector: '[sidebar-menu-options]' }) export class SidebarMenuDirective {}
@Directive({ selector: '[sidebar-menu-title-icon]' }) export class SidebarMenuTitleIconDirective { }
@Directive({ selector: '[sidebar-menu-expand-icon]' }) export class SidebarMenuExpandIconDirective { }
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ selector: '[adf-sidebar-menu-options], [sidebar-menu-options]' }) export class SidebarMenuDirective {}
@Directive({ selector: '[adf-sidebar-menu-title-icon], [sidebar-menu-title-icon]' }) export class SidebarMenuTitleIconDirective { }
@Directive({ selector: '[adf-sidebar-menu-expand-icon], [sidebar-menu-expand-icon]' }) export class SidebarMenuExpandIconDirective { }
@@ -5,7 +5,7 @@
[showLoginActions]="false"
[backgroundImageUrl]="''"
(success)="onLoginSuccess($event)">
<login-header><ng-template></ng-template></login-header>
<login-footer><ng-template></ng-template></login-footer>
<adf-login-header><ng-template></ng-template></adf-login-header>
<adf-login-footer><ng-template></ng-template></adf-login-footer>
</adf-login>
</div>
@@ -23,8 +23,11 @@ import {
} from '@angular/core';
import { LoginComponent } from '../components/login.component';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({
selector: 'login-footer'
selector: 'adf-login-footer, login-footer'
})
export class LoginFooterDirective implements AfterContentInit {
@@ -23,8 +23,11 @@ import {
} from '@angular/core';
import { LoginComponent } from '../components/login.component';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({
selector: 'login-header'
selector: 'adf-login-header, login-header'
})
export class LoginHeaderDirective implements AfterContentInit {
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './../models/point';
import { RaphaelBase } from './../raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base';
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 {
@Input()
center: Point;
@@ -22,7 +22,10 @@ import { RaphaelService } from './raphael.service';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base';
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 {
@Input()
center: Point;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base';
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 {
@Input()
center: Point;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base';
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 {
@Input()
paper: any;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base';
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 {
@Input()
center: Point;
@@ -20,7 +20,10 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base';
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 {
@Input()
paper: any;
@@ -19,7 +19,7 @@
</div>
<ng-template #noApps>
<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">
</ng-content>
@@ -171,10 +171,10 @@ describe('AppListCloudComponent', () => {
@Component({
template: `
<adf-cloud-app-list>
<adf-empty-custom-content>
<adf-custom-empty-content>
<mat-icon>apps</mat-icon>
<p id="custom-id">No Apps Found</p>
</adf-empty-custom-content>
</adf-custom-empty-content>
</adf-cloud-app-list>
`
})
@@ -15,7 +15,7 @@
* 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 { Observable } from 'rxjs';
import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
@@ -32,8 +32,8 @@
public static LAYOUT_GRID: string = 'GRID';
public static RUNNING_STATUS: string = 'RUNNING';
@ContentChild(EmptyCustomContentDirective)
emptyCustomContent: EmptyCustomContentDirective;
@ContentChild(CustomEmptyContentTemplateDirective)
emptyCustomContent: CustomEmptyContentTemplateDirective;
/** (**required**) Defines the layout of the apps. There are two possible
* values, "GRID" and "LIST".
@@ -6,23 +6,25 @@
[multiselect]="multiselect"
(rowClick)="onRowClick($event)"
(row-keyup)="onRowKeyUp($event)">
<loading-content-template>
<adf-loading-content-template>
<ng-template>
<mat-progress-spinner
*ngIf="!customLoadingContent"
class="adf-cloud-process-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</mat-progress-spinner>
<ng-content select="adf-custom-loading-content-template"></ng-content>
</ng-template>
</loading-content-template>
<no-content-template>
</adf-loading-content-template>
<adf-no-content-template>
<ng-template>
<adf-empty-content *ngIf="!emptyCustomContent"
icon="assessment"
[title]="'ADF_CLOUD_PROCESS_LIST.MESSAGES.TITLE' | translate"
[subtitle]="'ADF_CLOUD_PROCESS_LIST.MESSAGES.SUBTITLE'| translate">
</adf-empty-content>
<ng-content select="adf-empty-custom-content"></ng-content>
<ng-content select="adf-custom-empty-content-template"></ng-content>
</ng-template>
</no-content-template>
</adf-no-content-template>
</adf-datatable>
@@ -47,12 +47,12 @@ class CustomTaskListComponent {
@Component({
template: `
<adf-cloud-process-list>
<adf-empty-custom-content>
<p id="custom-id">TEST</p>
</adf-empty-custom-content>
</adf-cloud-process-list>
`
<adf-cloud-process-list>
<adf-custom-empty-content-template>
<p id="custom-id">TEST</p>
</adf-custom-empty-content-template>
</adf-cloud-process-list>
`
})
class EmptyTemplateComponent {
@@ -17,9 +17,9 @@
import { Component, ViewEncapsulation, OnChanges, AfterContentInit, ContentChild, Output, EventEmitter, SimpleChanges, SimpleChange, Input } from '@angular/core';
import { DataTableSchema, PaginatedComponent,
EmptyCustomContentDirective, AppConfigService,
CustomEmptyContentTemplateDirective, AppConfigService,
UserPreferencesService, PaginationModel,
UserPreferenceValues, DataRowEvent } from '@alfresco/adf-core';
UserPreferenceValues, DataRowEvent, CustomLoadingContentTemplateDirective } from '@alfresco/adf-core';
import { ProcessListCloudService } from '../services/process-list-cloud.service';
import { BehaviorSubject } from 'rxjs';
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';
@ContentChild(EmptyCustomContentDirective)
emptyCustomContent: EmptyCustomContentDirective;
@ContentChild(CustomEmptyContentTemplateDirective)
emptyCustomContent: CustomEmptyContentTemplateDirective;
@ContentChild(CustomLoadingContentTemplateDirective)
customLoadingContent: CustomLoadingContentTemplateDirective;
/** The name of the application. */
@Input()
@@ -10,7 +10,7 @@
(row-unselect)="onRowUnselect($event)"
(rowClick)="onRowClick($event)"
(row-keyup)="onRowKeyUp($event)">
<loading-content-template>
<adf-loading-content-template>
<ng-template>
<!-- Add your custom loading template here -->
<mat-progress-spinner class="adf-cloud-task-list-loading-margin"
@@ -18,16 +18,16 @@
[mode]="'indeterminate'">
</mat-progress-spinner>
</ng-template>
</loading-content-template>
<no-content-template>
</adf-loading-content-template>
<adf-no-content-template>
<ng-template>
<adf-empty-content *ngIf="!emptyCustomContent"
icon="assignment"
[title]="'ADF_CLOUD_TASK_LIST.LIST.MESSAGES.TITLE' | translate"
[subtitle]="'ADF_CLOUD_TASK_LIST.LIST.MESSAGES.SUBTITLE' | translate">
</adf-empty-content>
<ng-content select="adf-empty-custom-content"></ng-content>
<ng-content select="adf-custom-empty-content"></ng-content>
</ng-template>
</no-content-template>
</adf-no-content-template>
</adf-datatable>
</ng-container>
@@ -19,7 +19,7 @@ import { Component, ViewEncapsulation, OnChanges, Input, SimpleChanges, Output,
import { AppConfigService, UserPreferencesService,
DataTableSchema, UserPreferenceValues,
PaginatedComponent, PaginationModel,
DataRowEvent, EmptyCustomContentDirective } from '@alfresco/adf-core';
DataRowEvent, CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
import { taskPresetsCloudDefaultModel } from '../models/task-preset-cloud.model';
import { TaskQueryCloudRequestModel } from '../models/filter-cloud-model';
import { BehaviorSubject } from 'rxjs';
@@ -38,8 +38,8 @@ export class TaskListCloudComponent extends DataTableSchema implements OnChanges
static PRESET_KEY = 'adf-cloud-task-list.presets';
@ContentChild(EmptyCustomContentDirective)
emptyCustomContent: EmptyCustomContentDirective;
@ContentChild(CustomEmptyContentTemplateDirective)
emptyCustomContent: CustomEmptyContentTemplateDirective;
/** The name of the application. */
@Input()
@@ -43,7 +43,7 @@
<ng-template #empty>
<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>
<adf-empty-content
@@ -243,9 +243,9 @@ describe('AppsListComponent', () => {
@Component({
template: `
<adf-apps>
<adf-empty-custom-content>
<adf-custom-empty-content>
<p id="custom-id">No Apps</p>
</adf-empty-custom-content>
</adf-custom-empty-content>
</adf-apps>
`
})
@@ -15,7 +15,7 @@
* 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 { Observable, Observer, of } from 'rxjs';
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_MATERIAL_ICON: string = 'favorite_border';
@ContentChild(EmptyCustomContentDirective)
emptyCustomContent: EmptyCustomContentDirective;
@ContentChild(CustomEmptyContentTemplateDirective)
emptyCustomContent: CustomEmptyContentTemplateDirective;
/** (**required**) Defines the layout of the apps. There are two possible
* values, "GRID" and "LIST".
@@ -5,7 +5,7 @@
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)">
<no-content-template>
<adf-no-content-template>
<ng-template>
<ng-content *ngIf="hasCustomTemplate; else defaulEmptyList" class="adf-custom-empty-template"></ng-content>
<ng-template #defaulEmptyList>
@@ -16,7 +16,7 @@
</adf-empty-list>
</ng-template>
</ng-template>
</no-content-template>
</adf-no-content-template>
<data-columns>
<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-columns>
<loading-content-template>
<adf-loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
<mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'">
</mat-progress-spinner>
</ng-template>
</loading-content-template>
</adf-loading-content-template>
</adf-datatable>

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