Add LayoutType property to render List/Grid of the activiti apps

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -1,5 +1,5 @@
 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-    <activiti-apps (appClick)="onAppClick($event)"></activiti-apps>
+    <activiti-apps [layoutType]="layoutType" (appClick)="onAppClick($event)" #activitiapps></activiti-apps>
     <header class="mdl-layout__header">
         <!-- Tabs -->
         <div class="mdl-layout__tab-bar mdl-js-ripple-effect">

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -19,7 +19,8 @@ import { Component, AfterViewChecked, ViewChild, Input } from '@angular/core';
 import { ALFRESCO_TASKLIST_DIRECTIVES,
     AppDefinitionRepresentationModel,
     FilterRepresentationModel,
-    UserTaskFilterRepresentationModel
+    UserTaskFilterRepresentationModel,
+    ActivitiApps
 } from 'ng2-activiti-tasklist';
 import { ACTIVITI_PROCESSLIST_DIRECTIVES } from 'ng2-activiti-processlist';
 import { ActivitiForm } from 'ng2-activiti-form';
@@ -40,6 +41,9 @@ export class ActivitiDemoComponent implements AfterViewChecked {
 
     currentChoice: string = 'task-list';
 
+    @ViewChild('activitiapps')
+    activitiapps: ActivitiApps;
+
     @ViewChild('activitifilter')
     activitifilter: any;
 
@@ -55,6 +59,7 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     @ViewChild('activitiprocessdetails')
     activitiprocessdetails: any;
 
+    layoutType: string;
     currentTaskId: string;
     currentProcessInstanceId: string;
 
@@ -95,6 +100,7 @@ export class ActivitiDemoComponent implements AfterViewChecked {
         this.sub = this.route.params.subscribe(params => {
             this.appId = params['appId'];
         });
+        this.layoutType = ActivitiApps.LAYOUT_GRID;
     }
 
     ngOnDestroy() {

ng2-components/ng2-activiti-tasklist/src/components/activiti-apps-grid.component.css

@@ -0,0 +1,22 @@
+.mdl-card__media {
+    margin: 0;
+}
+
+.mdl-card__media > img {
+    max-width: 100%;
+}
+
+.mdl-card__actions {
+    display: flex;
+    box-sizing:border-box;
+    align-items: center;
+}
+.mdl-card__actions > .mdl-button--icon {
+    margin-right: 3px;
+    margin-left: 3px;
+}
+
+.mdl-card:hover {
+    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
+    cursor: pointer;
+}

ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.html

@@ -1,5 +1,5 @@
 <div class="menu-container" *ngIf="!isEmpty()">
-    <ul class='mdl-list'>
+    <ul class='mdl-list' *ngIf="isList()">
         <li class="mdl-list__item" (click)="selectApp(app)" *ngFor="let app of appList">
             <span class="mdl-list__item-primary-content">
             <i class="material-icons mdl-list__item-icon">touch_app</i>
@@ -7,4 +7,22 @@
             </span>
         </li>
     </ul>
+    <div class="mdl-grid" *ngIf="isGrid()">
+        <div (click)="selectApp(app)" class="mdl-card mdl-cell mdl-cell--3-col mdl-cell--3-col-tablet mdl-shadow--2dp" *ngFor="let app of appList">
+            <div class="mdl-card__title">
+                <h1 class="mdl-card__title-text">{{app.name}}</h1>
+            </div>
+            <div class="mdl-card__supporting-text">
+                <p>{{app.description}}</p>
+            </div>
+            <div class="mdl-card__actions mdl-card--border">
+                <i class="material-icons" *ngIf="isSelected(app.id)">done</i>
+                <div class="mdl-layout-spacer"></div>
+                <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">delete</i></button>
+                <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+                <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+                <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">file_download</i></button>
+            </div>
+        </div>
+    </div>
 </div>

ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import { AlfrescoTranslationService, AlfrescoAuthenticationService, AlfrescoPipeTranslate } from 'ng2-alfresco-core';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 import { AppDefinitionRepresentationModel } from '../models/filter.model';
@@ -28,14 +28,20 @@ declare let __moduleName: string;
 @Component({
     selector: 'activiti-apps',
     moduleId: __moduleName,
-    templateUrl: './activiti-apps.component.html',
+    templateUrl: 'activiti-apps.component.html',
-    styleUrls: ['./activiti-apps.component.css'],
+    styleUrls: ['./activiti-apps.component.css', './activiti-apps-grid.component.css'],
     providers: [ActivitiTaskListService],
     pipes: [AlfrescoPipeTranslate]
 
 })
 export class ActivitiApps implements OnInit {
 
+    public static LAYOUT_LIST: string = 'LIST';
+    public static LAYOUT_GRID: string = 'GRID';
+
+    @Input()
+    layoutType: string = ActivitiApps.LAYOUT_GRID;
+
     @Output()
     appClick: EventEmitter<AppDefinitionRepresentationModel> = new EventEmitter<AppDefinitionRepresentationModel>();
 
@@ -63,6 +69,10 @@ export class ActivitiApps implements OnInit {
     }
 
     ngOnInit() {
+        if (!this.isValidType()) {
+            throw( new Error(`LayoutType property allowed values: ${ActivitiApps.LAYOUT_LIST} - ${ActivitiApps.LAYOUT_GRID}`));
+        }
+
         this.apps$.subscribe((app: any) => {
             this.appList.push(app);
         });
@@ -93,6 +103,42 @@ export class ActivitiApps implements OnInit {
         this.appClick.emit(app);
     }
 
+    /**
+     * Return true if the appId is the current app
+     * @param appId
+     * @returns {boolean}
+     */
+    isSelected(appId: number): boolean {
+        return (this.currentApp !== undefined && appId === this.currentApp.id);
+    }
+
+    /**
+     * Check if the value of the layoutType property is an allowed value
+     * @returns {boolean}
+     */
+    isValidType(): boolean {
+        if (this.layoutType && (this.layoutType === ActivitiApps.LAYOUT_LIST || this.layoutType === ActivitiApps.LAYOUT_GRID)) {
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Return true if the layout type is LIST
+     * @returns {boolean}
+     */
+    isList(): boolean {
+        return this.layoutType === ActivitiApps.LAYOUT_LIST;
+    }
+
+    /**
+     * Return true if the layout type is GRID
+     * @returns {boolean}
+     */
+    isGrid(): boolean {
+        return this.layoutType === ActivitiApps.LAYOUT_GRID;
+    }
+
     isEmpty(): boolean {
         return this.appList.length === 0;
     }

ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts

@@ -42,7 +42,7 @@ export class ActivitiTaskListService {
                 }
                 return response.data;
             })
-            .do(data => console.log('Application: ' + JSON.stringify(data)));
+            .catch(this.handleError);
     }
 
     /**