From 7d6b1c922bed3ffba5860d1c01a0c9978ff63835 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 4 Jul 2016 14:25:32 +0100 Subject: [PATCH 01/16] Live reload configuration --- ng2-components/ng2-alfresco-documentlist/demo/package.json | 5 +++-- .../ng2-alfresco-documentlist/demo/wsrv-config.json | 6 ++++++ ng2-components/ng2-alfresco-documentlist/package.json | 3 ++- 3 files changed, 11 insertions(+), 3 deletions(-) create mode 100644 ng2-components/ng2-alfresco-documentlist/demo/wsrv-config.json diff --git a/ng2-components/ng2-alfresco-documentlist/demo/package.json b/ng2-components/ng2-alfresco-documentlist/demo/package.json index 30021aa356..3c1407e2a7 100644 --- a/ng2-components/ng2-alfresco-documentlist/demo/package.json +++ b/ng2-components/ng2-alfresco-documentlist/demo/package.json @@ -9,7 +9,7 @@ "typings": "typings install", "postinstall": "npm run typings && npm run build", "start": "concurrently \"npm run build:w\" \"npm run server\" ", - "server": "wsrv -o -s", + "server": "wsrv -o -s -l", "build": "npm run tslint && rimraf dist && tsc", "build:w": "npm run tslint && rimraf dist && tsc -w", "tslint": "npm run tslint-src && npm run tslint-root", @@ -41,7 +41,8 @@ "alfresco-js-api": "^0.1.0", "ng2-alfresco-core": "^0.1.36", - "ng2-alfresco-documentlist": "^0.1.34" + "ng2-alfresco-documentlist": "^0.1.34", + "ng2-alfresco-datatable": "^0.1.17" }, "devDependencies": { "concurrently": "2.0.0", diff --git a/ng2-components/ng2-alfresco-documentlist/demo/wsrv-config.json b/ng2-components/ng2-alfresco-documentlist/demo/wsrv-config.json new file mode 100644 index 0000000000..3269598468 --- /dev/null +++ b/ng2-components/ng2-alfresco-documentlist/demo/wsrv-config.json @@ -0,0 +1,6 @@ +{ + "watch": [ + "node_modules/ng2-alfresco-datatable/dist/**/*.{html,htm,css,js}", + "node_modules/ng2-alfresco-documentlist/dist/**/*.{html,htm,css,js}" + ] +} diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json index 756826a299..6db9f1c37d 100644 --- a/ng2-components/ng2-alfresco-documentlist/package.json +++ b/ng2-components/ng2-alfresco-documentlist/package.json @@ -73,8 +73,9 @@ "zone.js": "0.6.12", "rimraf": "2.5.2", "ng2-translate": "2.2.2", + "alfresco-js-api": "^0.1.0", "ng2-alfresco-core": "^0.1.35", - "alfresco-js-api": "^0.1.0" + "ng2-alfresco-datatable": "^0.1.17" }, "peerDependencies": { "material-design-icons": "^2.2.3", From b02a465f27c0c39fc8bedf69daab24b590049ae5 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 4 Jul 2016 17:56:52 +0100 Subject: [PATCH 02/16] Date format support for datatable columns --- .../src/components/datatable.component.html | 12 ++++++++---- .../src/data/datatable-adapter.ts | 5 +++-- .../src/data/object-datatable-adapter.ts | 17 ++++++++++++++++- 3 files changed, 27 insertions(+), 7 deletions(-) diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html index 6bee3e7145..7554a3e7e0 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html @@ -41,15 +41,19 @@ -
+ (click)="onRowClick(row, $event)" + (dblclick)="onRowDblClick(row, $event)"> +
{{asIconValue(row, col)}}
-
+
{{data.getValue(row, col)}}
- +
+ {{data.getValue(row, col)}} +
+ diff --git a/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts index cec755921f..9ba0a0c716 100644 --- a/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts +++ b/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts @@ -25,7 +25,7 @@ export interface DataTableAdapter { getSorting(): DataSorting; setSorting(sorting: DataSorting): void; sort(key?: string, direction?: string): void; - + } export interface DataRow { @@ -39,7 +39,8 @@ export interface DataRow { export interface DataColumn { key: string; - type: string; // text|image + type: string; // text|image|date + format?: string; sortable?: boolean; title?: string; srTitle?: string; diff --git a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts index 16cf6ad0f7..b5677e0b71 100644 --- a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts +++ b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts @@ -15,6 +15,8 @@ * limitations under the License. */ +import { DatePipe } from '@angular/common'; + import { DataTableAdapter, DataRow, @@ -78,7 +80,20 @@ export class ObjectDataTableAdapter implements DataTableAdapter { if (!col) { throw new Error('Column not found'); } - return row.getValue(col.key); + + let value = row.getValue(col.key); + + if (col.type === 'date') { + let datePipe = new DatePipe(); + let format = col.format || 'medium'; + try { + return datePipe.transform(value, format); + } catch (err) { + console.error(`DocumentList: error parsing date ${value} to format ${format}`); + } + } + + return value; } getSorting(): DataSorting { From e3924fdaa31ba63091d7de28af9beed414e093f4 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 5 Jul 2016 09:30:28 +0100 Subject: [PATCH 03/16] Integrating datatable into document list (wip) --- .../src/components/datatable.component.ts | 19 +- .../src/data/datatable-adapter.ts | 13 +- .../demo/src/main.ts | 3 +- .../demo/systemjs.config.js | 2 + .../src/components/document-list.html | 5 + .../src/components/document-list.ts | 68 +++++- .../src/data/share-datatable-adapter.ts | 228 ++++++++++++++++++ 7 files changed, 320 insertions(+), 18 deletions(-) create mode 100644 ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts index 2ef163b267..7e9c38a56d 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts @@ -29,7 +29,8 @@ import { DataTableAdapter, DataRow, DataColumn, - DataSorting + DataSorting, + DataRowEvent } from './../data/datatable-adapter'; import { ObjectDataTableAdapter } from '../data/object-datatable-adapter'; @@ -54,10 +55,10 @@ export class DataTableComponent implements OnInit, AfterViewChecked { actions: boolean = false; @Output() - rowClick: EventEmitter = new EventEmitter(); + rowClick: EventEmitter = new EventEmitter(); @Output() - rowDblClick: EventEmitter = new EventEmitter(); + rowDblClick: EventEmitter = new EventEmitter(); isSelectAllChecked: boolean = false; @@ -84,7 +85,8 @@ export class DataTableComponent implements OnInit, AfterViewChecked { } this.rowClick.emit({ - value: row + value: row, + event: e }); } @@ -94,7 +96,8 @@ export class DataTableComponent implements OnInit, AfterViewChecked { } this.rowDblClick.emit({ - value: row + value: row, + event: e }); } @@ -134,14 +137,16 @@ export class DataTableComponent implements OnInit, AfterViewChecked { isIconValue(row: DataRow, col: DataColumn) { if (row && col) { - return row.getValue(col.key).startsWith('material-icons://'); + let value = row.getValue(col.key); + return value && value.startsWith('material-icons://'); } return false; } asIconValue(row: DataRow, col: DataColumn) { if (this.isIconValue(row, col)) { - return row.getValue(col.key).replace('material-icons://', ''); + let value = row.getValue(col.key) || ''; + return value.replace('material-icons://', ''); } return null; } diff --git a/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts index 9ba0a0c716..e6b2cb07b2 100644 --- a/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts +++ b/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts @@ -16,7 +16,6 @@ */ export interface DataTableAdapter { - getRows(): Array; setRows(rows: Array): void; getColumns(): Array; @@ -25,19 +24,15 @@ export interface DataTableAdapter { getSorting(): DataSorting; setSorting(sorting: DataSorting): void; sort(key?: string, direction?: string): void; - } export interface DataRow { - isSelected: boolean; hasValue(key: string): boolean; getValue(key: string): any; - } export interface DataColumn { - key: string; type: string; // text|image|date format?: string; @@ -45,14 +40,16 @@ export interface DataColumn { title?: string; srTitle?: string; cssClass?: string; - } export class DataSorting { - constructor( public key?: string, public direction?: string) { } - +} + +export interface DataRowEvent { + value?: DataRow; + event: Event; } diff --git a/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts b/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts index 0902e6a751..8b84975ca5 100644 --- a/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts +++ b/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts @@ -156,7 +156,8 @@ class DocumentListDemo implements OnInit { currentPath: string = '/'; authenticated: boolean; - public host: string = 'http://devproducts-platform.alfresco.me'; + // host: string = 'http://devproducts-platform.alfresco.me'; + host: string = 'http://127.0.0.1:8080'; token: string; diff --git a/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js b/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js index 13a0e340b1..4831e6d740 100644 --- a/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js +++ b/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js @@ -12,6 +12,7 @@ 'ng2-translate': 'node_modules/ng2-translate', 'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/dist', + 'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/dist', 'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist/dist' }; // packages tells the System loader how to load when no filename and/or no extension @@ -22,6 +23,7 @@ 'ng2-translate': { defaultExtension: 'js' }, 'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' }, + 'ng2-alfresco-datatable': { main: 'index.js', defaultExtension: 'js' }, 'ng2-alfresco-documentlist': { main: 'index.js', defaultExtension: 'js' } }; var ngPackageNames = [ diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html index a3cc0693ed..0a2e6fc70c 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html @@ -1,3 +1,8 @@ + + diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts index f9f9d53a13..d70a1f43a5 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts @@ -30,11 +30,19 @@ import { import { DatePipe } from '@angular/common'; import { Subject } from 'rxjs/Rx'; import { CONTEXT_MENU_DIRECTIVES } from 'ng2-alfresco-core'; + +import { + ALFRESCO_DATATABLE_DIRECTIVES, + DataSorting, + DataRowEvent +} from 'ng2-alfresco-datatable'; + import { AlfrescoService } from './../services/alfresco.service'; import { MinimalNodeEntity, NodePaging } from './../models/document-library.model'; import { ContentActionModel } from './../models/content-action.model'; import { ContentColumnModel } from './../models/content-column.model'; import { ColumnSortingModel } from './../models/column-sorting.model'; +import { ShareDataTableAdapter, ShareDataRow } from './../data/share-datatable-adapter'; declare var componentHandler; declare let __moduleName: string; @@ -45,7 +53,7 @@ declare let __moduleName: string; styleUrls: ['./document-list.css'], templateUrl: './document-list.html', providers: [AlfrescoService], - directives: [CONTEXT_MENU_DIRECTIVES], + directives: [CONTEXT_MENU_DIRECTIVES, ALFRESCO_DATATABLE_DIRECTIVES], host: { '(contextmenu)': 'onShowContextMenu($event)' } @@ -124,9 +132,13 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit, contextActionHandler: Subject = new Subject(); + data: ShareDataTableAdapter; + constructor( private alfrescoService: AlfrescoService, - private ngZone: NgZone) {} + private ngZone: NgZone) { + this.setupTable(); + } getContextActions(node: MinimalNodeEntity) { if (node && node.entry) { @@ -326,6 +338,7 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit, folder => this.folder = this.sort(folder, this.sorting), error => this.errorMessage = error ); + this.data.loadPath(path); } } @@ -451,6 +464,42 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit, return node; } + onRowClick(event: DataRowEvent) { + let item = ( event.value).node; + + if (this.navigate && this.navigationMode === DocumentList.SINGLE_CLICK_NAVIGATION) { + if (item && item.entry) { + if (item.entry.isFile) { + this.preview.emit({ + value: item + }); + } + + if (item.entry.isFolder) { + this.performNavigation(item); + } + } + } + + } + + onRowDblClick(event?: DataRowEvent) { + let item = ( event.value).node; + if (this.navigate && this.navigationMode === DocumentList.DOUBLE_CLICK_NAVIGATION) { + if (item && item.entry) { + if (item.entry.isFile) { + this.preview.emit({ + value: item + }); + } + + if (item.entry.isFolder) { + this.performNavigation(item); + } + } + } + } + private getObjectValueRaw(target: any, key: string) { let val = this.getObjectValue(target, key); @@ -468,4 +517,19 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit, private isSortableColumn(column: ContentColumnModel) { return column && column.source && !column.source.startsWith('$'); } + + private setupTable() { + this.data = new ShareDataTableAdapter( + this.alfrescoService, + this.baseComponentPath, + [ + { type: 'image', key: '$thumbnail', title: '', srTitle: 'Thumbnail' }, + { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width', sortable: true }, + { type: 'text', key: 'createdByUser.displayName', title: 'Created by', sortable: true }, + { type: 'date', format: 'medium', key: 'createdAt', title: 'Created on', sortable: true } + ] + ); + + this.data.setSorting(new DataSorting('id', 'asc')); + } } diff --git a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts new file mode 100644 index 0000000000..0b0e3babe6 --- /dev/null +++ b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts @@ -0,0 +1,228 @@ +/*! + * @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 { DatePipe } from '@angular/common'; +import { + DataTableAdapter, + DataRow, DataColumn, DataSorting, + ObjectDataColumn +} from 'ng2-alfresco-datatable'; + +import { NodePaging, MinimalNodeEntity } from './../models/document-library.model'; +import { AlfrescoService as DataService } from './../services/alfresco.service'; + + +export class ShareDataTableAdapter implements DataTableAdapter { + + private sorting: DataSorting; + private rows: DataRow[]; + private columns: DataColumn[]; + + constructor(private dataService: DataService, + private basePath: string, + schema: DataColumn[]) { + this.rows = []; + this.columns = []; + + if (schema && schema.length > 0) { + this.columns = schema.map(item => { + return new ObjectDataColumn(item); + }); + } + } + + getRows(): Array { + return this.rows; + } + + setRows(rows: Array) { + this.rows = rows || []; + this.sort(); + } + + getColumns(): Array { + return this.columns; + } + + setColumns(columns: Array) { + this.columns = columns || []; + } + + getValue(row: DataRow, col: DataColumn): any { + if (!row) { + throw new Error('Row not found'); + } + if (!col) { + throw new Error('Column not found'); + } + let value = row.getValue(col.key); + + if (col.type === 'date') { + let datePipe = new DatePipe(); + let format = col.format || 'medium'; + try { + return datePipe.transform(value, format); + } catch (err) { + console.error(`DocumentList: error parsing date ${value} to format ${format}`); + } + } + + if (col.type === 'image') { + + if (col.key === '$thumbnail') { + let isFolder = row.getValue('isFolder'); + if (isFolder) { + return `${this.basePath}/img/ft_ic_folder.svg`; + } + + let isFile = row.getValue('isFile'); + if (isFile) { + let mimeType = row.getValue('content.mimeType'); + if (mimeType) { + let icon = this.dataService.getMimeTypeIcon(mimeType); + if (icon) { + return `${this.basePath}/img/${icon}`; + } + } + } + + return `${this.basePath}/img/ft_ic_miscellaneous.svg`; + } + + } + + return value; + } + + getSorting(): DataSorting { + return this.sorting; + } + + setSorting(sorting: DataSorting): void { + this.sorting = sorting; + + if (sorting && sorting.key) { + this.rows.sort((a: DataRow, b: DataRow) => { + let left = a.getValue(sorting.key); + if (left) { + left = (left instanceof Date) ? left.valueOf().toString() : left.toString(); + } else { + left = ''; + } + + let right = b.getValue(sorting.key); + if (right) { + right = (right instanceof Date) ? right.valueOf().toString() : right.toString(); + } else { + right = ''; + } + + return sorting.direction === 'asc' + ? left.localeCompare(right) + : right.localeCompare(left); + }); + } + } + + sort(key?: string, direction?: string): void { + let sorting = this.sorting || new DataSorting(); + if (key) { + sorting.key = key; + sorting.direction = direction || 'asc'; + } + this.setSorting(sorting); + } + + loadPath(path: string) { + if (path && this.dataService) { + this.dataService + .getFolder(path) + .subscribe(val => { + let page = val; + let data = page.list.entries; + if (data && data.length > 0) { + this.rows = data.map(item => new ShareDataRow(item)); + // Sort by first sortable or just first column + let sortable = this.columns.filter(c => c.sortable); + if (sortable.length > 0) { + this.sort(sortable[0].key, 'asc'); + } else { + this.sort(this.columns[0].key, 'asc'); + } + } else { + this.rows = []; + } + }, + error => console.log(error)); + } + } + +} + +export class ShareDataRow implements DataRow { + isSelected: boolean = false; + + get node(): MinimalNodeEntity { + return this.obj; + } + + constructor(private obj: MinimalNodeEntity) { + if (!obj) { + throw new Error('Object source not found'); + } + } + + /** + * Gets a value from an object by composed key + * documentList.getObjectValue({ item: { nodeType: 'cm:folder' }}, 'item.nodeType') ==> 'cm:folder' + * @param target + * @param key + * @returns {string} + */ + getObjectValue(target: any, key: string): any { + + if (!target) { + return undefined; + } + + let keys = key.split('.'); + key = ''; + + do { + key += keys.shift(); + let value = target[key]; + if (value !== undefined && (typeof value === 'object' || !keys.length)) { + target = value; + key = ''; + } else if (!keys.length) { + target = undefined; + } else { + key += '.'; + } + } while (keys.length); + + return target; + } + + getValue(key: string): any { + return this.getObjectValue(this.obj.entry, key); + } + + hasValue(key: string): boolean { + return this.getValue(key) ? true : false; + } +} From 236926c1caa3fa7ad7b0b1a36eb155f53118a519 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 5 Jul 2016 12:37:07 +0100 Subject: [PATCH 04/16] #340 Empty content template and context menu for datatable --- .../src/components/context-menu.directive.ts | 11 +++-- .../ng2-alfresco-datatable/index.ts | 5 ++- .../ng2-alfresco-datatable/package.json | 3 +- .../src/components/datatable.component.html | 12 +++++- .../src/components/datatable.component.ts | 24 +++++++++-- .../no-content-template.component.ts | 41 +++++++++++++++++++ .../demo/src/main.ts | 14 +++++-- .../src/components/document-list.html | 7 ++++ .../src/components/document-list.ts | 34 ++++++++++++--- 9 files changed, 132 insertions(+), 19 deletions(-) create mode 100644 ng2-components/ng2-alfresco-datatable/src/components/no-content-template.component.ts diff --git a/ng2-components/ng2-alfresco-core/src/components/context-menu.directive.ts b/ng2-components/ng2-alfresco-core/src/components/context-menu.directive.ts index ae816ce374..be498b8069 100644 --- a/ng2-components/ng2-alfresco-core/src/components/context-menu.directive.ts +++ b/ng2-components/ng2-alfresco-core/src/components/context-menu.directive.ts @@ -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}); + } + } } } diff --git a/ng2-components/ng2-alfresco-datatable/index.ts b/ng2-components/ng2-alfresco-datatable/index.ts index e1791a1457..2c4b5b3e3d 100644 --- a/ng2-components/ng2-alfresco-datatable/index.ts +++ b/ng2-components/ng2-alfresco-datatable/index.ts @@ -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 ]; diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json index 69fed501e8..6abec62e8c 100644 --- a/ng2-components/ng2-alfresco-datatable/package.json +++ b/ng2-components/ng2-alfresco-datatable/package.json @@ -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", diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html index 7554a3e7e0..896e5816b5 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html @@ -42,7 +42,8 @@ + + +
+ (dblclick)="onRowDblClick(row, $event)" + [context-menu]="getContextActions(row, col)">
{{asIconValue(row, col)}} @@ -62,5 +63,14 @@
+ +
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts index 7e9c38a56d..a8e66c039f 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts @@ -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 = new EventEmitter(); + rowClick: EventEmitter = new EventEmitter(); @Output() - rowDblClick: EventEmitter = new EventEmitter(); + rowDblClick: EventEmitter = new EventEmitter(); + + noContentTemplate: TemplateRef; isSelectAllChecked: boolean = false; + @Output() + showContextMenu: EventEmitter = 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; + } } diff --git a/ng2-components/ng2-alfresco-datatable/src/components/no-content-template.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/no-content-template.component.ts new file mode 100644 index 0000000000..081d31b733 --- /dev/null +++ b/ng2-components/ng2-alfresco-datatable/src/components/no-content-template.component.ts @@ -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; + } +} diff --git a/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts b/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts index 8b84975ca5..1e6eb2ad4a 100644 --- a/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts +++ b/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts @@ -56,7 +56,13 @@ import { #documentList [currentFolderPath]="currentPath" (folderChange)="onFolderChanged($event)"> - + + + + + diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts index d70a1f43a5..fe0a0144c0 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts @@ -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 = 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 = ( args.row).node; + if (node) { + args.actions = this.getContextActions(node) || []; + } + }; } From 6c3f08412b4b96f538c8225854092e2639c36afc Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 5 Jul 2016 12:48:49 +0100 Subject: [PATCH 05/16] Travis related scripts --- ng2-components/ng2-alfresco-datatable/package.json | 3 ++- ng2-components/ng2-alfresco-documentlist/package.json | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json index 6abec62e8c..300fe26274 100644 --- a/ng2-components/ng2-alfresco-datatable/package.json +++ b/ng2-components/ng2-alfresco-datatable/package.json @@ -26,7 +26,8 @@ "test-browser": "concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"", "posttest": "node_modules/.bin/remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html", "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report", - "prepublish": "npm run build" + "prepublish": "npm run build", + "travis": "npm link ng2-alfresco-core" }, "main": "./dist/index.js", "typings": "./dist/index.d.ts", diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json index 6db9f1c37d..3f815185b9 100644 --- a/ng2-components/ng2-alfresco-documentlist/package.json +++ b/ng2-components/ng2-alfresco-documentlist/package.json @@ -27,7 +27,8 @@ "test-browser": "concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"", "posttest": "node_modules/.bin/remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html", "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report", - "prepublish": "npm run build" + "prepublish": "npm run build", + "travis": "npm link ng2-alfresco-core" }, "main": "./dist/index.js", "typings": "./dist/index.d.ts", From e414135bd2a1f1fa7a712cb3a430b9a71b9aa278 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 5 Jul 2016 14:19:07 +0100 Subject: [PATCH 06/16] #340 document list now wraps and extends datatable --- .../app/components/files/files.component.html | 2 + .../src/components/datatable.component.css | 16 +++ .../src/components/datatable.component.html | 21 +++- .../src/components/datatable.component.ts | 24 +++- .../demo/src/main.ts | 3 + .../src/components/document-list.css | 55 --------- .../src/components/document-list.html | 110 +----------------- .../src/components/document-list.ts | 60 ++++++++-- .../src/data/share-datatable-adapter.ts | 21 +++- 9 files changed, 132 insertions(+), 180 deletions(-) diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html index 4b85525635..f4fcfbc05c 100644 --- a/demo-shell-ng2/app/components/files/files.component.html +++ b/demo-shell-ng2/app/components/files/files.component.html @@ -10,6 +10,8 @@ + -
+ + +
    +
  • + {{action.title}} +
    • +
+