[ADF-1404] Data Column enhancements for Document List (#2220)

* support 'timeAgo' format for data-column

* file size column type and bug fixes

* readme updates

* location column type

* readme fixes

* update unit tests

* file size pipe tests
This commit is contained in:
Denys Vuika
2017-08-16 09:53:39 +01:00
committed by Mario Romano
parent 9e5b19e34c
commit 06e03ad1e9
14 changed files with 295 additions and 50 deletions

View File

@@ -16,6 +16,7 @@
*/
import { ModuleWithProviders, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
import { MaterialModule } from './src/material.module';
@@ -30,6 +31,7 @@ export { DataRowActionEvent, DataRowActionModel } from './src/components/datatab
import { DataTableCellComponent } from './src/components/datatable/datatable-cell.component';
import { DataTableComponent } from './src/components/datatable/datatable.component';
import { EmptyListComponent } from './src/components/datatable/empty-list.component';
import { LocationCellComponent } from './src/components/datatable/location-cell.component';
import { LoadingContentTemplateDirective } from './src/directives/loading-template.directive';
import { NoContentTemplateDirective } from './src/directives/no-content-template.directive';
@@ -38,6 +40,7 @@ export function directives() {
DataTableComponent,
EmptyListComponent,
DataTableCellComponent,
LocationCellComponent,
NoContentTemplateDirective,
LoadingContentTemplateDirective
];
@@ -45,6 +48,7 @@ export function directives() {
@NgModule({
imports: [
RouterModule,
CoreModule,
MaterialModule
],
@@ -61,7 +65,8 @@ export function directives() {
],
exports: [
...directives(),
MaterialModule
MaterialModule,
RouterModule
]
})
export class DataTableModule {

View File

@@ -37,10 +37,8 @@ export class DataTableCellComponent implements OnInit {
@Input()
value: any;
constructor() { }
ngOnInit() {
if (this.column && this.column.key && this.row && this.data) {
if (!this.value && this.column && this.column.key && this.row && this.data) {
this.value = this.data.getValue(this.row, this.column);
}
}

View File

@@ -84,6 +84,16 @@
[attr.data-automation-id]="'date_' + data.getValue(row, col)">
<adf-datatable-cell [data]="data" [column]="col" [row]="row"></adf-datatable-cell>
</div>
<div *ngSwitchCase="'location'" class="cell-value"
[mdTooltip]="getCellTooltip(row, col)"
[attr.data-automation-id]="'location' + data.getValue(row, col)">
<adf-location-cell [data]="data" [column]="col" [row]="row"></adf-location-cell>
</div>
<div *ngSwitchCase="'fileSize'" class="cell-value"
[mdTooltip]="getCellTooltip(row, col)"
[attr.data-automation-id]="'fileSize_' + data.getValue(row, col)">
<adf-datatable-cell [value]="data.getValue(row, col) | adfFileSize"></adf-datatable-cell>
</div>
<div *ngSwitchCase="'text'" class="cell-value"
[mdTooltip]="getCellTooltip(row, col)"
[attr.data-automation-id]="'text_' + data.getValue(row, col)">

View File

@@ -18,6 +18,7 @@
import { SimpleChange } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MdCheckboxChange } from '@angular/material';
import { RouterTestingModule } from '@angular/router/testing';
import { CoreModule } from 'ng2-alfresco-core';
import { MaterialModule } from '../../material.module';
import {
@@ -29,6 +30,7 @@ import {
} from './../../data/index';
import { DataTableCellComponent } from './datatable-cell.component';
import { DataTableComponent } from './datatable.component';
import { LocationCellComponent } from './location-cell.component';
describe('DataTable', () => {
@@ -40,11 +42,13 @@ describe('DataTable', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
CoreModule.forRoot(),
RouterTestingModule,
CoreModule,
MaterialModule
],
declarations: [
DataTableCellComponent,
LocationCellComponent,
DataTableComponent
]
}).compileComponents();

View File

@@ -0,0 +1,60 @@
/*!
* @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 { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { PathInfoEntity } from 'alfresco-js-api';
import { DataTableCellComponent } from './datatable-cell.component';
@Component({
selector: 'adf-location-cell',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-container>
<a href="" [title]="tooltip" [routerLink]="link">
{{ displayText }}
</a>
</ng-container>
`,
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-location-cell' }
})
export class LocationCellComponent extends DataTableCellComponent implements OnInit {
@Input()
tooltip: string = '';
@Input()
link: any[];
@Input()
displayText: string = '';
/** @override */
ngOnInit() {
if (!this.value && this.column && this.column.key && this.row && this.data) {
const path: PathInfoEntity = this.data.getValue(this.row, this.column);
if (path) {
this.value = path;
this.displayText = path.name.split('/').pop();
this.tooltip = path.name;
const parent = path.elements[path.elements.length - 1];
this.link = [ this.column.format, parent.id ];
}
}
}
}

View File

@@ -17,7 +17,8 @@
import { DatePipe } from '@angular/common';
import { TemplateRef } from '@angular/core';
import { ObjectUtils } from 'ng2-alfresco-core';
import { ObjectUtils, TimeAgoPipe } from 'ng2-alfresco-core';
import { DataColumn, DataRow, DataSorting, DataTableAdapter } from './datatable-adapter';
// Simple implementation of the DataTableAdapter interface.
@@ -103,12 +104,10 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
let value = row.getValue(col.key);
if (col.type === 'date') {
let datePipe = new DatePipe('en-US');
let format = col.format || 'medium';
try {
return datePipe.transform(value, format);
return this.formatDate(col, value);
} catch (err) {
console.error(`DocumentList: error parsing date ${value} to format ${format}`);
console.error(`Error parsing date ${value} to format ${col.format}`);
}
}
@@ -120,6 +119,21 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
return value;
}
formatDate(col: DataColumn, value: any): string {
if (col.type === 'date') {
const format = col.format || 'medium';
if (format === 'timeAgo') {
const timeAgoPipe = new TimeAgoPipe();
return timeAgoPipe.transform(value);
} else {
const datePipe = new DatePipe('en-US');
return datePipe.transform(value, format);
}
}
return value;
}
getSorting(): DataSorting {
return this._sorting;
}

View File

@@ -16,9 +16,11 @@
*/
import { async, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { CoreModule } from 'ng2-alfresco-core';
import { DataTableCellComponent } from '../components/datatable/datatable-cell.component';
import { DataTableComponent } from '../components/datatable/datatable.component';
import { LocationCellComponent } from '../components/datatable/location-cell.component';
import { MaterialModule } from '../material.module';
import { LoadingContentTemplateDirective } from './loading-template.directive';
@@ -30,12 +32,14 @@ describe('LoadingContentTemplateDirective', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
MaterialModule,
CoreModule.forRoot()
CoreModule
],
declarations: [
DataTableComponent,
DataTableCellComponent,
LocationCellComponent,
LoadingContentTemplateDirective
]
}).compileComponents();

View File

@@ -16,9 +16,11 @@
*/
import { async, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { CoreModule } from 'ng2-alfresco-core';
import { DataTableCellComponent } from '../components/datatable/datatable-cell.component';
import { DataTableComponent } from '../components/datatable/datatable.component';
import { LocationCellComponent } from '../components/datatable/location-cell.component';
import { MaterialModule } from '../material.module';
import { NoContentTemplateDirective } from './no-content-template.directive';
@@ -30,13 +32,15 @@ describe('NoContentTemplateDirective', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
MaterialModule,
CoreModule.forRoot()
CoreModule
],
declarations: [
DataTableComponent,
DataTableCellComponent,
NoContentTemplateDirective
NoContentTemplateDirective,
LocationCellComponent
]
}).compileComponents();
}));