Ticket #105 : Add UI components

Author: habarthierry-hue

logos/header.svg

@@ -19,12 +19,14 @@ import { ViewHumanTaskDefInfoComponent } from './viewdef/info/info.component';
 import { ViewTaskPeopleAssignmentComponent } from './viewdef/peopleassignment/view-peopleassignment.component';
 import { ViewPresentationParametersComponent } from './viewdef/presentationparameters/view-presentationparameters.component';
 import { ColumnComponent } from './viewdef/rendering/components/column/column.component';
+import { ContainerComponent } from './viewdef/rendering/components/container/container.component';
 import { DynamicComponent } from './viewdef/rendering/components/dynamic.component';
-import { RowComponent } from './viewdef/rendering/components/row/row.component';
+import { HeaderComponent, HeaderComponentDialog } from './viewdef/rendering/components/header/header.component';
+import { RowComponent, RowComponentDialog } from './viewdef/rendering/components/row/row.component';
+import { SelectComponent, SelectComponentDialog } from './viewdef/rendering/components/select/select.component';
+import { TxtComponent, TxtComponentDialog } from './viewdef/rendering/components/txt/txt.component';
 import { ViewHumanTaskDefRenderingComponent } from './viewdef/rendering/rendering.component';
 import { ViewHumanTaskDef } from './viewdef/view.component';
-import { TxtComponent } from './viewdef/rendering/components/txt/txt.component';
-import { SelectComponent } from './viewdef/rendering/components/select/select.component';
 
 @NgModule({
     imports: [
@@ -38,16 +40,23 @@ import { SelectComponent } from './viewdef/rendering/components/select/select.co
         CreateHumanTaskInstanceDialog,
         AddEscalationDialog,
         EditEscalationDialog,
+        RowComponentDialog,
+        TxtComponentDialog,
+        SelectComponentDialog,
+        HeaderComponentDialog,
         RowComponent,
         ColumnComponent,
         TxtComponent,
-        SelectComponent
+        SelectComponent,
+        HeaderComponent,
+        ContainerComponent
     ],
     declarations: [
         AddHumanTaskDefDialog,
         CreateHumanTaskInstanceDialog,
         AddEscalationDialog,
         EditEscalationDialog,
+        SelectComponentDialog,
         HumanTasksComponent,
         ListHumanTaskFilesComponent,
         ViewHumanTaskDef,
@@ -59,12 +68,17 @@ import { SelectComponent } from './viewdef/rendering/components/select/select.co
         ViewHumanTaskDefDeadlinesComponent,
         ViewHumanTaskDefRenderingComponent,
         PeopleAssignmentComponent,
+        RowComponentDialog,
+        TxtComponentDialog,
+        HeaderComponentDialog,
         PresentationParameterComponent,
         DynamicComponent,
         ColumnComponent,
         SelectComponent,
         RowComponent,
         TxtComponent,
+        HeaderComponent,
+        ContainerComponent,
         TranslateFieldPipe
     ],
     providers: [ TranslateFieldPipe ]

src/CaseManagement.Website/angularApp/app/humantasks/humantasks.module.ts

@@ -3,4 +3,7 @@
 export class BaseUIComponent {
     option: any;
     parent: ViewContainerRef;
+    openDialog() {
+
+    }
 }

src/CaseManagement.Website/angularApp/app/humantasks/viewdef/rendering/components/baseui.component.ts

@@ -1 +1 @@
-<dynamic-component [option]="option" *ngFor="let option of option.children"></dynamic-component>
+<dynamic-component [option]="opt" [parentOption]="option" *ngFor="let opt of option.children"></dynamic-component>

src/CaseManagement.Website/angularApp/app/humantasks/viewdef/rendering/components/column/column.component.html

@@ -0,0 +1 @@
+<dynamic-component [parentOption]="option" [option]="opt" *ngFor="let opt of option.children"></dynamic-component>

src/CaseManagement.Website/angularApp/app/humantasks/viewdef/rendering/components/container/container.component.html

@@ -0,0 +1,3 @@
+:host {
+    display: contents !important;
+}

src/CaseManagement.Website/angularApp/app/humantasks/viewdef/rendering/components/container/container.component.scss

@@ -0,0 +1,13 @@
+import { Component, OnInit } from "@angular/core";
+import { BaseUIComponent } from "../baseui.component";
+
+@Component({
+    selector: 'view-container',
+    templateUrl: 'container.component.html',
+    styleUrls: ['./container.component.scss']
+})
+export class ContainerComponent extends BaseUIComponent implements OnInit {
+    ngOnInit() {
+
+    }
+}

src/CaseManagement.Website/angularApp/app/humantasks/viewdef/rendering/components/container/container.component.ts

@@ -3,10 +3,10 @@
         {{ title }}
     </div>
     <ul class='toolbar'>
-        <li class='settings'>
+        <li class='settings' (click)="openSettings($event)">
             <svg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' viewBox='0 0 24 24' fill='white' width='18px' height='18px'><g><path d='M0,0h24v24H0V0z' fill='none' /><path d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z' /></g></svg>
         </li>
-        <li class='remove'>
+        <li *ngIf="parentOption" class='remove' (click)="remove($event)">
             <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='18px' height='18px'><path d='M0 0h24v24H0z' fill='none' /><path d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z' /></svg>
         </li>
     </ul>

src/CaseManagement.Website/angularApp/app/humantasks/viewdef/rendering/components/dynamic.component.html

@@ -1,9 +1,11 @@
 import { Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+import { BaseUIComponent } from "./baseui.component";
 import { ColumnComponent } from "./column/column.component";
+import { ContainerComponent } from "./container/container.component";
 import { RowComponent } from "./row/row.component";
-import { TxtComponent } from "./txt/txt.component";
-import { BaseUIComponent } from "./baseui.component";
 import { SelectComponent } from "./select/select.component";
+import { TxtComponent } from "./txt/txt.component";
+import { HeaderComponent } from "./header/header.component";
 
 @Component({
     selector: 'dynamic-component',
@@ -12,27 +14,21 @@ import { SelectComponent } from "./select/select.component";
 
 })
 export class DynamicComponent implements OnInit, OnDestroy {
-    private _option: any;
     private componentRef: ComponentRef<{}>;
     private _dic: any = {
         'row': RowComponent,
         'column': ColumnComponent,
         'txt': TxtComponent,
-        'select': SelectComponent
+        'select': SelectComponent,
+        'container': ContainerComponent,
+        'header': HeaderComponent
     };
     @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
     @ViewChild('parent', { read: ViewContainerRef }) parent: ViewContainerRef;
-    @Input()
-    get option() {
-        return this._option;
-    }
-    set option(v: any) {
-        if (!v) {
-            return;
-        }
+    baseUIComponent: BaseUIComponent = null;
+    @Input() option: any = null;
+    @Input() parentOption: any = null;
 
-        this._option = v;
-    }
     isSelected: boolean = false;
     title: string = null;
 
@@ -68,6 +64,35 @@ export class DynamicComponent implements OnInit, OnDestroy {
         this.option.children.push(json);
     }
 
+    openSettings(evt: any) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (!this.baseUIComponent) {
+            return;
+        }
+
+        this.baseUIComponent.openDialog();
+    }
+
+    remove(evt: any) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (!this.baseUIComponent || !this.parentOption || !this.parentOption.children) {
+            return;
+        }
+
+        const self = this;
+        const filtered = this.parentOption.children.filter((r: any) => {
+            return self.baseUIComponent.option.id === r.id;
+        });
+        if (filtered.length !== 1) {
+            return;
+        }
+
+        const index = this.parentOption.children.indexOf(filtered[0]);
+        this.parentOption.children.splice(index, 1);
+    }
+
     private refresh() {
         if (!this.option || !this.option.type) {
             return;
@@ -76,9 +101,9 @@ export class DynamicComponent implements OnInit, OnDestroy {
         const type = this._dic[this.option.type];
         const factory = this.compFactoryResolver.resolveComponentFactory(type);
         this.componentRef = this.container.createComponent(factory);
-        const instance = this.componentRef.instance as BaseUIComponent;
-        instance.option = this.option;
-        instance.parent = this.parent;
+        this.baseUIComponent = this.componentRef.instance as BaseUIComponent;
+        this.baseUIComponent .option = this.option;
+        this.baseUIComponent .parent = this.parent;
         this.title = this.option.type;
     }
 }

src/CaseManagement.Website/angularApp/app/humantasks/viewdef/rendering/components/dynamic.component.ts

@@ -0,0 +1 @@
+<div [class]="option.class">{{ option.txt }}</div>