mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
Date format support for datatable columns
This commit is contained in:
@@ -41,15 +41,19 @@
|
|||||||
</td>
|
</td>
|
||||||
<td *ngFor="let col of data.getColumns()" [ngSwitch]="col.type"
|
<td *ngFor="let col of data.getColumns()" [ngSwitch]="col.type"
|
||||||
class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
|
class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
|
||||||
(click)="onRowClick(row, $event)" (dblclick)="onRowDblClick(row, $event)">
|
(click)="onRowClick(row, $event)"
|
||||||
<div *ngSwitchCase="'image'">
|
(dblclick)="onRowDblClick(row, $event)">
|
||||||
|
<div *ngSwitchCase="'image'" class="cell-value">
|
||||||
<i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
|
<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)}}">
|
<img *ngIf="!isIconValue(row, col)" class="image-cell" alt="" src="{{data.getValue(row, col)}}">
|
||||||
</div>
|
</div>
|
||||||
<div *ngSwitchCase="'text'">
|
<div *ngSwitchCase="'date'" class="cell-value">
|
||||||
{{data.getValue(row, col)}}
|
{{data.getValue(row, col)}}
|
||||||
</div>
|
</div>
|
||||||
<span *ngSwitchDefault>
|
<div *ngSwitchCase="'text'" class="cell-value">
|
||||||
|
{{data.getValue(row, col)}}
|
||||||
|
</div>
|
||||||
|
<span *ngSwitchDefault class="cell-value">
|
||||||
<!-- empty cell for unknown column type -->
|
<!-- empty cell for unknown column type -->
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
@@ -25,7 +25,7 @@ export interface DataTableAdapter {
|
|||||||
getSorting(): DataSorting;
|
getSorting(): DataSorting;
|
||||||
setSorting(sorting: DataSorting): void;
|
setSorting(sorting: DataSorting): void;
|
||||||
sort(key?: string, direction?: string): void;
|
sort(key?: string, direction?: string): void;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DataRow {
|
export interface DataRow {
|
||||||
@@ -39,7 +39,8 @@ export interface DataRow {
|
|||||||
export interface DataColumn {
|
export interface DataColumn {
|
||||||
|
|
||||||
key: string;
|
key: string;
|
||||||
type: string; // text|image
|
type: string; // text|image|date
|
||||||
|
format?: string;
|
||||||
sortable?: boolean;
|
sortable?: boolean;
|
||||||
title?: string;
|
title?: string;
|
||||||
srTitle?: string;
|
srTitle?: string;
|
||||||
|
@@ -15,6 +15,8 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import { DatePipe } from '@angular/common';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
DataTableAdapter,
|
DataTableAdapter,
|
||||||
DataRow,
|
DataRow,
|
||||||
@@ -78,7 +80,20 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
|
|||||||
if (!col) {
|
if (!col) {
|
||||||
throw new Error('Column not found');
|
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 {
|
getSorting(): DataSorting {
|
||||||
|
Reference in New Issue
Block a user