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

#340 Empty content template and context menu for datatable

Browse Source
This commit is contained in:
Denys Vuika
2016-07-05 12:37:07 +01:00
parent e3924fdaa3
commit 236926c1ca
9 changed files with 132 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ng2-components/ng2-alfresco-core/src/components/context-menu.directive.ts
View File

@@ -26,17 +26,20 @@ import { ContextMenuService } from './../services/context-menu.service';
})
export class ContextMenuDirective {
@Input('context-menu')
links;
links: any[];
constructor(
private _contextMenuService: ContextMenuService) {}
onShowContextMenu(event?: MouseEvent) {
if (this._contextMenuService) {
this._contextMenuService.show.next({event: event, obj: this.links});
}
if (event) {
event.preventDefault();
}
if (this.links && this.links.length > 0) {
if (this._contextMenuService) {
this._contextMenuService.show.next({event: event, obj: this.links});
}
}
}
}

5
ng2-components/ng2-alfresco-datatable/index.ts
View File

@@ -16,14 +16,17 @@
*/
import { DataTableComponent } from './src/components/datatable.component';
import { NoContentTemplateComponent } from './src/components/no-content-template.component';
// components
export * from './src/components/datatable.component';
export * from './src/components/no-content-template.component';
// data
export * from './src/data/datatable-adapter';
export * from './src/data/object-datatable-adapter';
export const ALFRESCO_DATATABLE_DIRECTIVES: [any] = [
DataTableComponent
DataTableComponent,
NoContentTemplateComponent
];

3
ng2-components/ng2-alfresco-datatable/package.json
View File

@@ -66,7 +66,8 @@
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12",
"rimraf": "2.5.2"
"rimraf": "2.5.2",
"ng2-alfresco-core": "^0.1.35"
},
"peerDependencies": {
"material-design-icons": "^2.2.3",

12
ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html
View File

@@ -42,7 +42,8 @@
<td *ngFor="let col of data.getColumns()" [ngSwitch]="col.type"
class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
(click)="onRowClick(row, $event)"
(dblclick)="onRowDblClick(row, $event)">
(dblclick)="onRowDblClick(row, $event)"
[context-menu]="getContextActions(row, col)">
<div *ngSwitchCase="'image'" class="cell-value">
<i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
<img *ngIf="!isIconValue(row, col)" class="image-cell" alt="" src="{{data.getValue(row, col)}}">
@@ -62,5 +63,14 @@
<td *ngIf="actions"><!-- todo: actions --></td>
</tr>
<tr *ngIf="data.getRows().length === 0">
<td class="mdl-data-table__cell--non-numeric empty-folder-content"
[attr.colspan]="1 + data.getColumns().length">
<template *ngIf="noContentTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="noContentTemplate">
</template>
</td>
</tr>
</tbody>
</table>

24
ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts
View File

@@ -22,9 +22,13 @@ import {
Input,
Output,
EventEmitter,
AfterViewChecked
AfterViewChecked,
TemplateRef
} from '@angular/core';
// import { Subject } from 'rxjs/Rx';
import { CONTEXT_MENU_DIRECTIVES } from 'ng2-alfresco-core';
import {
DataTableAdapter,
DataRow,
@@ -41,7 +45,8 @@ declare let __moduleName: string;
moduleId: __moduleName,
selector: 'alfresco-datatable',
styleUrls: ['./datatable.component.css'],
templateUrl: './datatable.component.html'
templateUrl: './datatable.component.html',
directives: [CONTEXT_MENU_DIRECTIVES]
})
export class DataTableComponent implements OnInit, AfterViewChecked {
@@ -55,13 +60,18 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
actions: boolean = false;
@Output()
rowClick: EventEmitter<DataRowEvent> = new EventEmitter();
rowClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
@Output()
rowDblClick: EventEmitter<DataRowEvent> = new EventEmitter();
rowDblClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
noContentTemplate: TemplateRef<any>;
isSelectAllChecked: boolean = false;
@Output()
showContextMenu: EventEmitter<any> = new EventEmitter();
// TODO: left for reference, will be removed during future revisions
constructor(/*private _ngZone?: NgZone*/) {
}
@@ -158,4 +168,10 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
}
return false;
}
getContextActions(row: DataRow, col: DataColumn) {
let args = { row: row, col: col, actions: [] };
this.showContextMenu.emit({ args: args });
return args.actions;
}
}

41
ng2-components/ng2-alfresco-datatable/src/components/no-content-template.component.ts Normal file
View File

@@ -0,0 +1,41 @@
/*!
* @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 {
Directive,
ContentChild,
TemplateRef,
AfterContentInit
} from '@angular/core';
import { DataTableComponent } from './datatable.component';
@Directive({
selector: 'no-content-template'
})
export class NoContentTemplateComponent implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
constructor(
private dataTable: DataTableComponent) {
}
ngAfterContentInit() {
this.dataTable.noContentTemplate = this.template;
}
}

14
ng2-components/ng2-alfresco-documentlist/demo/src/main.ts
View File

@@ -56,7 +56,13 @@ import {
#documentList
[currentFolderPath]="currentPath"
(folderChange)="onFolderChanged($event)">
<!--
<empty-folder-content>
<template>
<h1>Sorry, no content here</h1>
</template>
</empty-folder-content>
-->
<content-columns>
<content-column source="$thumbnail" type="image"></content-column>
<content-column
@@ -195,11 +201,13 @@ class DocumentListDemo implements OnInit {
}
myCustomAction1(event) {
alert('Custom document action for ' + event.value.displayName);
let entry = event.value.entry;
alert(`Custom document action for ${entry.name}`);
}
myFolderAction1(event) {
alert('Custom folder action for ' + event.value.displayName);
let entry = event.value.entry;
alert(`Custom folder action for ${entry.name}`);
}
login() {

7
ng2-components/ng2-alfresco-documentlist/src/components/document-list.html
View File

@@ -1,8 +1,15 @@
<alfresco-datatable
[data]="data"
(showContextMenu)="onRowContextMenu($event)"
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<no-content-template>
<template>
<img [src]="baseComponentPath + '/img/document-list.empty-folder.png'">
</template>
</no-content-template>
</alfresco-datatable>
<table *ngIf="folder" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
<thead>
<tr>

34
ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts
View File

@@ -22,10 +22,12 @@ import {
Output,
EventEmitter,
AfterContentInit,
AfterViewInit,
AfterViewChecked,
OnChanges,
TemplateRef,
NgZone
NgZone,
ViewChild
} from '@angular/core';
import { DatePipe } from '@angular/common';
import { Subject } from 'rxjs/Rx';
@@ -34,7 +36,8 @@ import { CONTEXT_MENU_DIRECTIVES } from 'ng2-alfresco-core';
import {
ALFRESCO_DATATABLE_DIRECTIVES,
DataSorting,
DataRowEvent
DataRowEvent,
DataTableComponent
} from 'ng2-alfresco-datatable';
import { AlfrescoService } from './../services/alfresco.service';
@@ -58,7 +61,7 @@ declare let __moduleName: string;
'(contextmenu)': 'onShowContextMenu($event)'
}
})
export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit, OnChanges {
export class DocumentList implements OnInit, AfterViewInit, AfterViewChecked, AfterContentInit, OnChanges {
static SINGLE_CLICK_NAVIGATION: string = 'click';
static DOUBLE_CLICK_NAVIGATION: string = 'dblclick';
@@ -88,6 +91,9 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
@Output()
preview: EventEmitter<any> = new EventEmitter();
@ViewChild(DataTableComponent)
dataTable: DataTableComponent;
private _path = this.DEFAULT_ROOT_FOLDER;
get currentFolderPath(): string {
@@ -137,7 +143,8 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
constructor(
private alfrescoService: AlfrescoService,
private ngZone: NgZone) {
this.setupTable();
this.setupData();
}
getContextActions(node: MinimalNodeEntity) {
@@ -189,6 +196,15 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
}
}
ngAfterViewInit() {
if (this.dataTable) {
// this.dataTable.contextActionResolver = this.resolveContextAction;
if (this.emptyFolderTemplate) {
this.dataTable.noContentTemplate = this.emptyFolderTemplate;
}
}
}
ngAfterViewChecked() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
@@ -518,7 +534,7 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
return column && column.source && !column.source.startsWith('$');
}
private setupTable() {
private setupData() {
this.data = new ShareDataTableAdapter(
this.alfrescoService,
this.baseComponentPath,
@@ -532,4 +548,12 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
this.data.setSorting(new DataSorting('id', 'asc'));
}
onRowContextMenu(event) {
let args = event.args;
let node = (<ShareDataRow> args.row).node;
if (node) {
args.actions = this.getContextActions(node) || [];
}
};
}