[ADF-852] Form style Material 2 (#2151)

* mdl2 transition part form 1

* hyperlink

* radio buttons

* label

* people component

* [ADF-852] moved textarea to new angular material

* number widget

* change error multiline

* [ADF-852] added md desgin for dropdown

* [ADF-852] removed unused css file

* functional widget

* error dropdown

* [ADF-852] - changed to new md date

* remove md-date-time-picker dependency in ng2-alfresco-from

* [ADF-852] conversion dynamic table phase 1

* container widget

* remove test unused

* validation change

* [ADF-852] convert dynamic table phase 2

* [ADF-852] improving style and fixing bugs

* move custom style for form in form.scss

* error footer refactor

* fix models and test

* [ADF-852]- fixed minor twitch on dynamic table

* align fields and fix tests dropdown

* disabling button in readonly
clean mdl form start process form

* align dropdown

* [ADF-1048] Upload widget can manage multiple files. (#2134)

* [ADF-1048] improving upload widget

* [ADF-1048] added ability to upload multiple file on upload widget

* [ADF-1048] added multiple upload elements on upload widget

* [ADF-1048] - show all the files on the completed form

* [ADF-1048] fixed wrong selecion on displya upload

* [ADF-1048] removed fdescribe from upload widget

* date validation and custom moment data adapter

* move content widget in the widget folder

* add style fields and theming

* color primary radio and checkbox

* fix amount widget and colors

* change ViewEncapsulation and fix date style button issue

* empty form customization 1736

* focus label style

* [ADF-224] fix the rendering of custom stencils when form is opened in readonly state. (#2161)

* [ADF-224] Fixed rendering of custom stencil in readonly mode

* [ADF-224] improved variable name

* test fix

* container filter in form model creation

* show display value correctly

* fix change date and test

* fix date editor and add some test coverage for date

* style minor issue

* fix new unused local import rule

* fix test date

* strict date check

* fix analytics failing test

* restore null as default in model

* unify model diagrams and analytics

ng2-components/ng2-activiti-tasklist/index.ts

@@ -37,8 +37,8 @@ import { PeopleSearchComponent } from './src/components/people-search.component'
 import { PeopleComponent } from './src/components/people.component';
 import { StartTaskComponent } from './src/components/start-task.component';
 import { TaskAttachmentListComponent } from './src/components/task-attachment-list.component';
-import { TaskDetailsComponent } from './src/components/task-details.component';
 import { TaskAuditDirective } from './src/components/task-audit.directive';
+import { TaskDetailsComponent } from './src/components/task-details.component';
 import { TaskFiltersComponent } from './src/components/task-filters.component';
 import { TaskHeaderComponent } from './src/components/task-header.component';
 import { TaskListComponent } from './src/components/tasklist.component';

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

@@ -79,7 +79,7 @@ describe('AppsListComponent', () => {
         expect(getAppsSpy).toHaveBeenCalled();
     });
 
-    it('should show the apps filterd by defaultAppId', () => {
+    it('should show the apps filtered by defaultAppId', () => {
         component.filtersAppId = [{defaultAppId: 'fake-app-1'}];
         fixture.detectChanges();
         expect(component.isEmpty()).toBe(false);
@@ -87,7 +87,7 @@ describe('AppsListComponent', () => {
         expect(component.appList.length).toEqual(1);
     });
 
-    it('should show the apps filterd by deploymentId', () => {
+    it('should show the apps filtered by deploymentId', () => {
         component.filtersAppId = [{deploymentId: '4'}];
         fixture.detectChanges();
         expect(component.isEmpty()).toBe(false);
@@ -96,7 +96,7 @@ describe('AppsListComponent', () => {
         expect(component.appList[0].deploymentId).toEqual('4');
     });
 
-    it('should show the apps filterd by name', () => {
+    it('should show the apps filtered by name', () => {
         component.filtersAppId = [{name: 'App5'}];
         fixture.detectChanges();
         expect(component.isEmpty()).toBe(false);
@@ -105,7 +105,7 @@ describe('AppsListComponent', () => {
         expect(component.appList[0].name).toEqual('App5');
     });
 
-    it('should show the apps filterd by id', () => {
+    it('should show the apps filtered by id', () => {
         component.filtersAppId = [{id: 6}];
         fixture.detectChanges();
         expect(component.isEmpty()).toBe(false);
@@ -114,7 +114,7 @@ describe('AppsListComponent', () => {
         expect(component.appList[0].id).toEqual(6);
     });
 
-    it('should show the apps filterd by modelId', () => {
+    it('should show the apps filtered by modelId', () => {
         component.filtersAppId = [{modelId: 66}];
         fixture.detectChanges();
         expect(component.isEmpty()).toBe(false);
@@ -123,7 +123,7 @@ describe('AppsListComponent', () => {
         expect(component.appList[0].modelId).toEqual(66);
     });
 
-    it('should show the apps filterd by tenandId', () => {
+    it('should show the apps filtered by tenandId', () => {
         component.filtersAppId = [{tenantId: 9}];
         fixture.detectChanges();
         expect(component.isEmpty()).toBe(false);

ng2-components/ng2-activiti-tasklist/src/components/comments.component.spec.ts

@@ -26,8 +26,8 @@ import { DatePipe } from '@angular/common';
 import { MdInputModule } from '@angular/material';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 import { TaskListService } from './../services/tasklist.service';
-import { CommentsComponent } from './comments.component';
 import { CommentListComponent } from './comment-list.component';
+import { CommentsComponent } from './comments.component';
 
 describe('CommentsComponent', () => {
 

ng2-components/ng2-activiti-tasklist/src/components/create-task-attachment.component.ts

@@ -21,7 +21,7 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'adf-create-task-attachment',
-    styleUrls: ['./create-task-attachment.component.css'],
+    styleUrls: ['./create-task-attachment.component.scss'],
     templateUrl: './create-task-attachment.component.html'
 })
 export class AttachmentComponent implements OnChanges {

ng2-components/ng2-activiti-tasklist/src/components/people-list.component.spec.ts

@@ -19,8 +19,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { DataRowActionEvent, DataRowEvent, DataTableModule, ObjectDataRow } from 'ng2-alfresco-datatable';
 import { Observable } from 'rxjs/Observable';
-import { User } from '../models/user.model';
 import { UserEventModel } from '../models/user-event.model';
+import { User } from '../models/user.model';
 import { PeopleListComponent } from './people-list.component';
 
 declare let jasmine: any;

ng2-components/ng2-activiti-tasklist/src/components/people-list.component.ts

@@ -26,7 +26,7 @@ declare let componentHandler: any;
 @Component({
     selector: 'adf-people-list',
     templateUrl: './people-list.component.html',
-    styleUrls: ['./people-list.component.css']
+    styleUrls: ['./people-list.component.scss']
 })
 
 export class PeopleListComponent implements AfterViewInit, AfterContentInit {

ng2-components/ng2-activiti-tasklist/src/components/people-search.component.spec.ts

@@ -20,8 +20,8 @@ import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 import { Observable } from 'rxjs/Observable';
 import { User } from '../models/user.model';
-import { PeopleSearchComponent } from './people-search.component';
 import { PeopleListComponent } from './people-list.component';
+import { PeopleSearchComponent } from './people-search.component';
 
 declare let jasmine: any;
 

ng2-components/ng2-activiti-tasklist/src/components/people.component.spec.ts

@@ -21,9 +21,9 @@ import { DataTableModule } from 'ng2-alfresco-datatable';
 import { Observable } from 'rxjs/Observable';
 import { User } from '../models/user.model';
 import { PeopleService } from '../services/people.service';
+import { PeopleListComponent } from './people-list.component';
 import { PeopleSearchComponent } from './people-search.component';
 import { PeopleComponent } from './people.component';
-import { PeopleListComponent } from './people-list.component';
 
 declare let jasmine: any;
 

ng2-components/ng2-activiti-tasklist/src/components/task-details.component.html

@@ -46,6 +46,8 @@
             (formLoaded)='onFormLoaded($event)'
             (onError)='onFormError($event)'
             (executeOutcome)='onFormExecuteOutcome($event)'>
+            <div empty-form ><h3 class="adf-task-title">Please select a Task</h3></div>
+
         </adf-form>
     </div>
     <div *ngIf="!isAssigned()">

ng2-components/ng2-activiti-tasklist/src/components/task-details.component.ts

@@ -199,6 +199,8 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
     private loadDetails(taskId: string) {
         this.taskPeople = [];
         this.taskFormName = null;
+        this.readOnlyForm = false;
+
         if (taskId) {
             this.activitiTaskList.getTaskDetails(taskId).subscribe(
                 (res: TaskDetailsModel) => {

ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.css

@@ -1,23 +0,0 @@
-.mdl-list__item {
-    cursor: pointer;
-}
-
-.activiti-filters__entry {
-    cursor: pointer;
-}
-
-.activiti-filters__entry-icon {
-    margin-right: 12px !important;
-}
-
-.activiti-filters__entry.active {
-    color: rgb(68,138,255);
-}
-
-.activiti-filters__entry:hover {
-    opacity: 0.8;
-}
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-    color: rgb(68,138,255);
-}

ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.html

@@ -1,9 +1,9 @@
 <div class="menu-container">
     <ul class='mdl-list'>
-        <li class="mdl-list__item activiti-filters__entry" (click)="selectFilter(filter)" *ngFor="let filter of filters"
+        <li class="mdl-list__item adf-filters__entry" (click)="selectFilter(filter)" *ngFor="let filter of filters"
             [class.active]="currentFilter === filter">
             <span class="mdl-list__item-primary-content">
-            <i *ngIf="hasIcon" class="material-icons mdl-list__item-icon activiti-filters__entry-icon" [attr.data-automation-id]="filter.name + '_filter'" >assignment</i>
+            <i *ngIf="hasIcon" class="material-icons mdl-list__item-icon adf-filters__entry-icon" [attr.data-automation-id]="filter.name + '_filter'" >assignment</i>
             {{filter.name}}
             </span>
         </li>

ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.scss

@@ -0,0 +1,27 @@
+.mdl-list__item {
+    cursor: pointer;
+}
+
+.adf {
+
+    &-filters__entry {
+        cursor: pointer;
+    }
+
+    &-filters__entry-icon {
+        margin-right: 12px !important;
+    }
+
+    &-filters__entry {
+        &.active {
+            color: rgb(68, 138, 255);
+        }
+        &:hover {
+            opacity: 0.8;
+        }
+        &.active .adf-filters__entry-icon {
+            color: rgb(68, 138, 255);
+        }
+    }
+
+}

ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.ts

@@ -24,7 +24,7 @@ import { TaskListService } from './../services/tasklist.service';
 @Component({
     selector: 'adf-filters, activiti-filters',
     templateUrl: './task-filters.component.html',
-    styleUrls: ['task-filters.component.css'],
+    styleUrls: ['task-filters.component.scss'],
     providers: [TaskListService]
 })
 export class TaskFiltersComponent implements OnInit, OnChanges {

ng2-components/ng2-activiti-tasklist/src/models/filter.model.ts

@@ -34,15 +34,17 @@ export class AppDefinitionRepresentationModel {
     tenantId: number;
 
     constructor(obj?: any) {
-        this.defaultAppId = obj && obj.defaultAppId || null;
-        this.deploymentId = obj && obj.deploymentId || false;
-        this.name = obj && obj.name || null;
-        this.description = obj && obj.description || null;
-        this.theme = obj && obj.theme || null;
-        this.icon = obj && obj.icon || null;
-        this.id = obj && obj.id;
-        this.modelId = obj && obj.modelId;
-        this.tenantId = obj && obj.tenantId;
+        if (obj) {
+            this.defaultAppId = obj.defaultAppId ? obj.defaultAppId : null;
+            this.deploymentId = obj.deploymentId ? obj.deploymentId  : null;
+            this.name = obj.name ? obj.name  : null;
+            this.description = obj.description ? obj.description  : null;
+            this.theme = obj.theme ? obj.theme  : null;
+            this.icon = obj.icon ? obj.icon  : null;
+            this.id = obj.id ? obj.id  : null;
+            this.modelId = obj.modelId ? obj.modelId  : null;
+            this.tenantId = obj.tenantId ? obj.tenantId  : null;
+        }
     }
 }
 
@@ -59,9 +61,11 @@ export class FilterParamsModel {
     index: number;
 
     constructor(obj?: any) {
-        this.id = obj && obj.id || null;
-        this.name = obj && obj.name || null;
-        this.index = obj && obj.index;
+        if (obj) {
+            this.id = obj.id || null;
+            this.name = obj.name || null;
+            this.index = obj.index;
+        }
     }
 }
 
@@ -83,14 +87,16 @@ export class FilterRepresentationModel {
     landingTaskId: string;
 
     constructor(obj?: any) {
-        this.id = obj && obj.id || null;
-        this.appId = obj && obj.appId || null;
-        this.name = obj && obj.name || null;
-        this.recent = obj && obj.recent || false;
-        this.icon = obj && obj.icon || null;
-        this.filter = new FilterParamRepresentationModel(obj.filter);
-        this.index = obj && obj.index;
-        this.landingTaskId = obj && obj.landingTaskId;
+        if (obj) {
+            this.id = obj.id || null;
+            this.appId = obj.appId || null;
+            this.name = obj.name || null;
+            this.recent = !!obj.recent;
+            this.icon = obj.icon || null;
+            this.filter = new FilterParamRepresentationModel(obj.filter);
+            this.index = obj.index;
+            this.landingTaskId = obj.landingTaskId;
+        }
     }
 
     hasFilter() {
@@ -116,14 +122,16 @@ export class FilterParamRepresentationModel {
     dueBefore: Date;
 
     constructor(obj?: any) {
-        this.processDefinitionId = obj && obj.processDefinitionId || null;
-        this.processDefinitionKey = obj && obj.processDefinitionKey || null;
-        this.name = obj && obj.name || null;
-        this.state = obj && obj.state || null;
-        this.sort = obj && obj.sort || null;
-        this.assignment = obj && obj.assignment || null;
-        this.dueAfter = obj && obj.dueAfter || null;
-        this.dueBefore = obj && obj.dueBefore || null;
+        if (obj) {
+            this.processDefinitionId = obj.processDefinitionId || null;
+            this.processDefinitionKey = obj.processDefinitionKey || null;
+            this.name = obj.name || null;
+            this.state = obj.state || null;
+            this.sort = obj.sort || null;
+            this.assignment = obj.assignment || null;
+            this.dueAfter = obj.dueAfter || null;
+            this.dueBefore = obj.dueBefore || null;
+        }
     }
 }
 
@@ -141,16 +149,18 @@ export class TaskQueryRequestRepresentationModel {
     landingTaskId: string;
 
     constructor(obj?: any) {
-        this.appDefinitionId = obj && obj.appDefinitionId || null;
-        this.processInstanceId = obj && obj.processInstanceId || null;
-        this.processDefinitionId = obj && obj.processDefinitionId || null;
-        this.processDefinitionKey = obj && obj.processDefinitionKey || null;
-        this.text = obj && obj.text || null;
-        this.assignment = obj && obj.assignment || null;
-        this.state = obj && obj.state || null;
-        this.sort = obj && obj.sort || null;
-        this.page = obj && obj.page || 0;
-        this.size = obj && obj.size || 25;
-        this.landingTaskId = obj && obj.landingTaskId || '';
+        if (obj) {
+            this.appDefinitionId = obj.appDefinitionId || null;
+            this.processInstanceId = obj.processInstanceId || null;
+            this.processDefinitionId = obj.processDefinitionId || null;
+            this.processDefinitionKey = obj.processDefinitionKey || null;
+            this.text = obj.text || null;
+            this.assignment = obj.assignment || null;
+            this.state = obj.state || null;
+            this.sort = obj.sort || null;
+            this.page = obj.page || 0;
+            this.size = obj.size || 25;
+            this.landingTaskId = obj.landingTaskId || '';
+        }
     }
 }

ng2-components/ng2-activiti-tasklist/src/models/task-details.model.ts

@@ -58,37 +58,39 @@ export class TaskDetailsModel {
     taskDefinitionKey: string;
 
     constructor(obj?: any) {
-        this.id = obj && obj.id || null;
-        this.name = obj && obj.name || null;
-        this.priority = obj && obj.priority;
-        this.assignee = obj.assignee ? new User(obj.assignee) : null;
-        this.adhocTaskCanBeReassigned = obj && obj.adhocTaskCanBeReassigned;
-        this.category = obj && obj.category || null;
-        this.created = obj && obj.created || null;
-        this.description = obj && obj.description || null;
-        this.dueDate = obj && obj.dueDate || null;
-        this.duration = obj && obj.duration || null;
-        this.endDate = obj && obj.endDate || null;
-        this.executionId = obj && obj.executionId || null;
-        this.formKey = obj && obj.formKey || null;
-        this.initiatorCanCompleteTask = obj && obj.initiatorCanCompleteTask || false;
-        this.managerOfCandidateGroup = obj && obj.managerOfCandidateGroup || false;
-        this.memberOfCandidateGroup = obj && obj.memberOfCandidateGroup || false;
-        this.memberOfCandidateUsers = obj && obj.memberOfCandidateUsers || false;
-        this.involvedPeople = obj && obj.involvedPeople;
-        this.parentTaskId = obj && obj.parentTaskId || null;
-        this.parentTaskName = obj && obj.parentTaskName || null;
-        this.processDefinitionCategory = obj && obj.processDefinitionCategory || null;
-        this.processDefinitionDeploymentId = obj && obj.processDefinitionDeploymentId || null;
-        this.processDefinitionDescription = obj && obj.processDefinitionDescription || null;
-        this.processDefinitionId = obj && obj.processDefinitionId || null;
-        this.processDefinitionKey = obj && obj.processDefinitionKey || null;
-        this.processDefinitionName = obj && obj.processDefinitionName || null;
-        this.processDefinitionVersion = obj && obj.processDefinitionVersion || 0;
-        this.processInstanceId = obj && obj.processInstanceId || null;
-        this.processInstanceName = obj && obj.processInstanceName || null;
-        this.processInstanceStartUserId = obj && obj.processInstanceStartUserId || null;
-        this.taskDefinitionKey = obj && obj.taskDefinitionKey || null;
+        if (obj) {
+            this.id = obj.id || null;
+            this.name = obj.name || null;
+            this.priority = obj.priority;
+            this.assignee = obj.assignee ? new User(obj.assignee) : null;
+            this.adhocTaskCanBeReassigned = obj.adhocTaskCanBeReassigned;
+            this.category = obj.category || null;
+            this.created = obj.created || null;
+            this.description = obj.description || null;
+            this.dueDate = obj.dueDate || null;
+            this.duration = obj.duration || null;
+            this.endDate = obj.endDate || null;
+            this.executionId = obj.executionId || null;
+            this.formKey = obj.formKey || null;
+            this.initiatorCanCompleteTask = !!obj.initiatorCanCompleteTask;
+            this.managerOfCandidateGroup = !!obj.managerOfCandidateGroup;
+            this.memberOfCandidateGroup = !!obj.memberOfCandidateGroup;
+            this.memberOfCandidateUsers = !!obj.memberOfCandidateUsers;
+            this.involvedPeople = obj.involvedPeople;
+            this.parentTaskId = obj.parentTaskId || null;
+            this.parentTaskName = obj.parentTaskName || null;
+            this.processDefinitionCategory = obj.processDefinitionCategory || null;
+            this.processDefinitionDeploymentId = obj.processDefinitionDeploymentId || null;
+            this.processDefinitionDescription = obj.processDefinitionDescription || null;
+            this.processDefinitionId = obj.processDefinitionId || null;
+            this.processDefinitionKey = obj.processDefinitionKey || null;
+            this.processDefinitionName = obj.processDefinitionName || null;
+            this.processDefinitionVersion = obj.processDefinitionVersion || 0;
+            this.processInstanceId = obj.processInstanceId || null;
+            this.processInstanceName = obj.processInstanceName || null;
+            this.processInstanceStartUserId = obj.processInstanceStartUserId || null;
+            this.taskDefinitionKey = obj.taskDefinitionKey || null;
+        }
     }
 
     getFullName(): string {