#82 datatable project cleanup

basic implementation of main features:

- custom data sources
- column types
- sorting by columns
- click events

ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html

@@ -1,18 +1,12 @@
-<ol *ngIf="breadcrumb" class="breadcrumb">
-    <li *ngFor="#r of route; #last = last" [class.active]="last" [ngSwitch]="last">
-        <span *ngSwitchWhen="true">{{r.name}}</span>
-        <a *ngSwitchDefault href="#" (click)="goToRoute(r, $event)">{{r.name}}</a>
-    </li>
-</ol>
-<table *ngIf="folder" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+<table *ngIf="data" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
     <thead>
     <tr>
         <!-- Columns -->
         <th class="mdl-data-table__cell--non-numeric {{col.cssClass}}"
-            *ngFor="#col of columns"
+            *ngFor="#col of data.columns"
             [class.column-header]="col.title"
-            [class.mdl-data-table__header--sorted-ascending]="sorting.key === col.source && sorting.direction === 'asc'"
-            [class.mdl-data-table__header--sorted-descending]="sorting.key === col.source && sorting.direction === 'desc'"
+            [class.mdl-data-table__header--sorted-ascending]="isColumnSorted(col, 'asc')"
+            [class.mdl-data-table__header--sorted-descending]="isColumnSorted(col, 'desc')"
             (click)="onColumnHeaderClick(col)">
             <span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span>
             <span *ngIf="col.title">{{col.title}}</span>
@@ -24,77 +18,28 @@
     </tr>
     </thead>
     <tbody>
-    <tr class="parent-folder-link" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)">
-        <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>
-            </button>
-        </td>
-    </tr>
+    <!-- todo: special 'navigate parent row' support -->
 
-    <tr *ngFor="#content of folder.list.entries; #idx = index">
-        <!-- Columns -->
-        <td *ngFor="#col of columns" [ngSwitch]="col.source"
-            class="mdl-data-table__cell--non-numeric {{content.entry.isFolder ? 'folder-row-cell' : 'document-row-cell'}} {{col.cssClass}}"
-            (click)="onItemClick(content, $event)">
-            <div *ngSwitchWhen="'$thumbnail'">
-                <div *ngIf="content.entry.isFolder">
-                    <i class="material-icons folder-thumbnail">{{folderIcon || 'folder_open'}}</i>
-                </div>
-                <div *ngIf="!content.entry.isFolder">
-                    <img class="document-thumbnail" alt="" src="{{getDocumentThumbnailUrl(content)}}">
-                </div>
+    <tr *ngFor="#row of data.rows; #idx = index">
+
+        <td *ngFor="#col of data.columns" [ngSwitch]="col.type"
+            class="mdl-data-table__cell--non-numeric data-cell {{col.cssClass}}"
+            (click)="onRowClicked(row, $event)">
+            <div *ngSwitchWhen="'image'">
+                <i *ngIf="isIconValue(row, col)" class="material-icons folder-thumbnail">{{asIconValue(row, col)}}</i>
+                <img *ngIf="!isIconValue(row, col)" class="document-thumbnail" alt="" src="{{data.getValue(row, col)}}">
+            </div>
+            <div *ngSwitchWhen="'text'">
+                {{data.getValue(row, col)}}
             </div>
             <span *ngSwitchDefault>
-                {{getObjectValue(content.entry, col.source)}}
+               <!-- empty cell for unknown column type -->
             </span>
+
         </td>
 
-        <!-- Actions: folder -->
-        <td *ngIf="content.entry.isFolder">
-            <!-- action buttons -->
-            <button class="mdl-button mdl-js-button mdl-button--icon"
-                    *ngFor="#action of getContentActions('folder', 'button')"
-                    (click)="executeContentAction(content, action)">
-                <i class="material-icons">{{action.icon}}</i>
-            </button>
+        <td><!-- todo: actions --></td>
 
-            <!-- action menu -->
-            <button [id]="'folder_action_menu_' + idx" class="mdl-button mdl-js-button mdl-button--icon">
-                <i class="material-icons">more_vert</i>
-            </button>
-            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
-                [attr.for]="'folder_action_menu_' + idx">
-                <li class="mdl-menu__item"
-                    *ngFor="#action of getContentActions('folder', 'menu')"
-                    (click)="executeContentAction(content, action)">
-                    {{action.title}}
-                </li>
-            </ul>
-        </td>
-        <!-- Actions: document -->
-        <td *ngIf="!content.entry.isFolder">
-            <!-- action buttons -->
-            <button class="mdl-button mdl-js-button mdl-button--icon"
-                    *ngFor="#action of getContentActions('document', 'button')"
-                    (click)="executeContentAction(content, action)">
-                <i class="material-icons">{{action.icon}}</i>
-            </button>
-
-            <!-- action menu -->
-            <button [id]="'document_action_menu_' + idx" class="mdl-button mdl-js-button mdl-button--icon">
-                <i class="material-icons">more_vert</i>
-            </button>
-            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
-                [attr.for]="'document_action_menu_' + idx">
-                <li class="mdl-menu__item"
-                    *ngFor="#action of getContentActions('document', 'menu')"
-                    (click)="executeContentAction(content, action)">
-                    {{action.title}}
-                </li>
-            </ul>
-        </td>
     </tr>
     </tbody>
 </table>