mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[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:
committed by
Mario Romano
parent
9e5b19e34c
commit
06e03ad1e9
@@ -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 {
|
||||
|
@@ -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);
|
||||
}
|
||||
}
|
||||
|
@@ -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)">
|
||||
|
@@ -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();
|
||||
|
@@ -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 ];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@@ -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;
|
||||
}
|
||||
|
@@ -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();
|
||||
|
@@ -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();
|
||||
}));
|
||||
|
Reference in New Issue
Block a user