From 27d309611f361b5685290c8a2877dd328aea21bb Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Fri, 16 Sep 2016 16:04:33 +0100 Subject: [PATCH] Add LayoutType property to render List/Grid of the activiti apps --- .../activiti/activiti-demo.component.html | 2 +- .../activiti/activiti-demo.component.ts | 8 ++- .../activiti-apps-grid.component.css | 22 ++++++++ .../components/activiti-apps.component.html | 20 ++++++- .../src/components/activiti-apps.component.ts | 52 +++++++++++++++++-- .../src/services/activiti-tasklist.service.ts | 2 +- 6 files changed, 99 insertions(+), 7 deletions(-) create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/activiti-apps-grid.component.css diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html index ada072f2bc..74a467dadb 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html @@ -1,5 +1,5 @@
- +
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts index 7938c8b0a3..0a8a0e3a87 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts +++ b/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() { diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps-grid.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps-grid.component.css new file mode 100644 index 0000000000..75fe759764 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.html index 3bcaf14012..74876b2ddc 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.html +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.html @@ -1,5 +1,5 @@
-
    +
    • touch_app @@ -7,4 +7,22 @@
    +
    +
    +
    +

    {{app.name}}

    +
    +
    +

    {{app.description}}

    +
    +
    + done +
    + + + + +
    +
    +
\ No newline at end of file diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts index 43f3d0deea..31e437ffe0 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts +++ b/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', - styleUrls: ['./activiti-apps.component.css'], + templateUrl: 'activiti-apps.component.html', + 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 = new EventEmitter(); @@ -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; } diff --git a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts index f1da9b2ec0..c6c86e0db7 100644 --- a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts +++ b/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); } /**