Configurable columns for document list

- thumbnail, displayName and all other columns (except actions) are now
configurable
- support for default set of columns if no custom defined
refs #51
This commit is contained in:
Denys Vuika
2016-05-04 16:43:56 +01:00
parent 4a6d0c55bf
commit e0b42ca932
10 changed files with 89 additions and 94 deletions

View File

@@ -7,19 +7,15 @@
<table *ngIf="folder" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
<thead>
<tr>
<!-- Thumbnails -->
<th *ngIf="thumbnails"></th>
<!-- Name -->
<th class="mdl-data-table__cell--non-numeric full-width">Name</th>
<!-- Custom columns -->
<th class="mdl-data-table__cell--non-numeric" *ngFor="#col of columns">{{col.title}}</th>
<!-- Columns -->
<th class="mdl-data-table__cell--non-numeric {{col.cssClass}}" *ngFor="#col of columns">{{col.title}}</th>
<!-- Actions -->
<th></th>
</tr>
</thead>
<tbody>
<tr class="parent-folder-link" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)">
<td [attr.colspan]="3 + columns?.length">
<td [attr.colspan]="1 + columns?.length">
<button class="mdl-button mdl-js-button mdl-button--icon"
(click)="onNavigateParentClick($event)">
<i class="material-icons">arrow_upward</i>
@@ -28,40 +24,23 @@
</tr>
<tr *ngFor="#content of folder.items; #idx = index">
<!-- Thumbnails: folder -->
<td *ngIf="thumbnails && content.isFolder">
<i class="material-icons folder-thumbnail"
(click)="onItemClick(content, $event)">{{folderIcon || 'folder_open'}}</i>
</td>
<!-- Thumbnails: document -->
<td *ngIf="thumbnails && !content.isFolder">
<img *ngIf="thumbnails" class="document-thumbnail"
alt=""
src="{{getDocumentThumbnailUrl(content)}}"
(click)="onItemClick(content, $event)">
</td>
<!-- Name: folder -->
<td *ngIf="content.isFolder" class="mdl-data-table__cell--non-numeric folder-row-cell"
<!-- Columns -->
<td *ngFor="#col of columns" [ngSwitch]="col.source"
class="mdl-data-table__cell--non-numeric {{content.isFolder ? 'folder-row-cell' : 'document-row-cell'}} {{col.cssClass}}"
(click)="onItemClick(content, $event)">
<span class="content-header">
{{content.displayName}}
<div *ngSwitchWhen="'$thumbnail'">
<div *ngIf="content.isFolder">
<i class="material-icons folder-thumbnail">{{folderIcon || 'folder_open'}}</i>
</div>
<div *ngIf="!content.isFolder">
<img class="document-thumbnail" alt="" src="{{getDocumentThumbnailUrl(content)}}">
</div>
</div>
<span *ngSwitchDefault>
{{content[col.source]}}
</span>
</td>
<!-- Name: document -->
<td *ngIf="!content.isFolder" class="mdl-data-table__cell--non-numeric" >
<span class="content-header" (click)="onItemClick(content, $event)">
{{content.displayName}}
</span>
</td>
<!-- Custom columns -->
<td *ngFor="#col of columns" class="mdl-data-table__cell--non-numeric {{col.cssClass}}">
{{content[col.source]}}
</td>
<!-- Actions: folder -->
<td *ngIf="content.isFolder">
<!-- action buttons -->