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

#164 column types, date formatting

Browse Source
This commit is contained in:
Denys Vuika
2016-06-08 13:11:50 +01:00
parent fd27fd0844
commit e657fcdcab
8 changed files with 59 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demo-shell-ng2/app/components/files/files.component.html
View File

@@ -17,7 +17,7 @@
</empty-folder-content>
-->
<content-columns>
<content-column source="$thumbnail"></content-column>
<content-column source="$thumbnail" type="image"></content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
source="name"
@@ -35,7 +35,9 @@
</content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
source="createdAt">
source="createdAt"
type="date"
format="medium">
</content-column>
</content-columns>

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

@@ -50,7 +50,7 @@ import {
<alfresco-document-list #doclist>
<content-columns>
<content-column source="$thumbnail"></content-column>
<content-column source="$thumbnail" type="image"></content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
source="name"
@@ -66,7 +66,9 @@ import {
</content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
source="createdAt">
source="createdAt"
type="date"
format="medium">
</content-column>
</content-columns>
<content-actions>

10
ng2-components/ng2-alfresco-documentlist/src/components/content-column.ts
View File

@@ -40,6 +40,12 @@ export class ContentColumn implements OnInit, OnChanges {
@Input('class')
cssClass: string;
@Input()
type: string = 'text';
@Input()
format: string;
model: ContentColumnModel;
constructor(private list: ContentColumnList) {
@@ -51,7 +57,9 @@ export class ContentColumn implements OnInit, OnChanges {
title: this.title,
srTitle: this.srTitle,
source: this.source,
cssClass: this.cssClass
cssClass: this.cssClass,
type: this.type,
format: this.format
});
if (!this.model.srTitle && this.model.source === '$thumbnail') {

2
ng2-components/ng2-alfresco-documentlist/src/components/document-list.css
View File

@@ -23,6 +23,8 @@
cursor: pointer;
}
:host .cell-value {}
:host .folder-row-cell.name-column,
:host .document-row-cell.name-column {
font-size: 15px;

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

@@ -36,15 +36,18 @@
<tr *ngFor="#content of folder.list.entries; #idx = index"
[attr.data-automation-id]="getObjectValue(content.entry, 'name')">
<!-- Columns -->
<td *ngFor="#col of columns" [ngSwitch]="col.source"
<td *ngFor="#col of columns" [ngSwitch]="col.type"
class="mdl-data-table__cell--non-numeric {{content.entry.isFolder ? 'folder-row-cell' : 'document-row-cell'}} {{col.cssClass}}"
(click)="onItemClick(content, $event)"
[attr.data-automation-id]="col.source === '$thumbnail' ? '$thumbnail' : col.source + '_' + getObjectValue(content.entry, col.source)">
<div *ngSwitchWhen="'$thumbnail'">
<img class="thumbnail" src="{{getThumbnailUrl(content)}}">
<div *ngSwitchWhen="'image'" class="cell-value">
<img class="thumbnail" [src]="getCellValue(content, col)">
</div>
<span *ngSwitchDefault>
{{getObjectValue(content.entry, col.source)}}
<span *ngSwitchWhen="'date'" class="cell-value">
{{ getCellValue(content, col) }}
</span>
<span *ngSwitchDefault class="cell-value">
{{ getCellValue(content, col) }}
</span>
</td>

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

@@ -59,7 +59,9 @@ describe('DocumentList', () => {
title: 'title',
source: 'source',
cssClass: 'css',
srTitle: ''
srTitle: '',
type: 'text',
format: ''
};
documentList.columns.push(column);

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

@@ -26,6 +26,7 @@ import {
OnChanges,
TemplateRef
} from 'angular2/core';
import { DatePipe } from 'angular2/common';
import { AlfrescoService } from './../services/alfresco.service';
import { MinimalNodeEntity, NodePaging } from './../models/document-library.model';
import { ContentActionModel } from './../models/content-action.model';
@@ -345,12 +346,36 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
return target;
}
getCellValue(row: MinimalNodeEntity, col: ContentColumnModel): any {
let value = this._getObjectValueRaw(row.entry, col.source);
if (col.type === 'date') {
let datePipe = new DatePipe();
if (datePipe.supports(value)) {
// TODO: to be changed to plan non-array value post angular2 beta.15
let pattern = col.format ? [col.format] : [];
return datePipe.transform(value, pattern);
}
}
if (col.type === 'image') {
if (col.source === '$thumbnail') {
return this.getThumbnailUrl(row);
}
}
return value;
}
/**
* Creates a set of predefined columns.
*/
setupDefaultColumns(): void {
let thumbnailCol = new ContentColumnModel();
thumbnailCol.source = '$thumbnail';
thumbnailCol.type = 'image';
let nameCol = new ContentColumnModel();
nameCol.title = 'Name';

4
ng2-components/ng2-alfresco-documentlist/src/models/content-column.model.ts
View File

@@ -20,6 +20,8 @@ export class ContentColumnModel {
srTitle: string;
source: string;
cssClass: string;
type: string = 'text'; // text|date|image|number
format: string = 'medium';
constructor(obj?: any) {
if (obj) {
@@ -27,6 +29,8 @@ export class ContentColumnModel {
this.srTitle = obj.srTitle;
this.source = obj.source;
this.cssClass = obj.cssClass;
this.type = obj.type || 'text';
this.format = obj.format;
}
}
}