Ticket #109 : Add button in the HumanTask editor

Author: habarthierry-hue

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

@@ -25,6 +25,7 @@ import { HeaderComponent, HeaderComponentDialog } from './viewdef/rendering/comp
 import { PwdComponent, PwdComponentDialog } from './viewdef/rendering/components/pwd/pwd.component';
 import { RowComponent, RowComponentDialog } from './viewdef/rendering/components/row/row.component';
 import { SelectComponent, SelectComponentDialog } from './viewdef/rendering/components/select/select.component';
+import { SubmitBtnComponent, SubmitBtnComponentDialog } from './viewdef/rendering/components/submitbtn/submitbtn.component';
 import { TxtComponent, TxtComponentDialog } from './viewdef/rendering/components/txt/txt.component';
 import { ViewHumanTaskDefRenderingComponent } from './viewdef/rendering/rendering.component';
 import { ViewHumanTaskDef } from './viewdef/view.component';
@@ -59,7 +60,9 @@ import { ViewHumanTaskDef } from './viewdef/view.component';
         HeaderComponent,
         ContainerComponent,
         ConfirmPwdComponent,
-        ConfirmPwdComponentDialog
+        ConfirmPwdComponentDialog,
+        SubmitBtnComponentDialog,
+        SubmitBtnComponent
     ],
     declarations: [
         AddHumanTaskDefDialog,
@@ -97,7 +100,9 @@ import { ViewHumanTaskDef } from './viewdef/view.component';
         ContainerComponent,
         ConfirmPwdComponent,
         ConfirmPwdComponentDialog,
-        TranslateEnumPipe 
+        TranslateEnumPipe,
+        SubmitBtnComponentDialog,
+        SubmitBtnComponent
     ]
 })
 

src/CaseManagement.Website/angularApp/app/humantasks/viewdef/rendering/components/basetxt-dialog.component.ts

@@ -11,17 +11,18 @@ export abstract class BaseTxtComponentDialog {
         @Inject(MAT_DIALOG_DATA) public data: any,
         public dialogRef: MatDialogRef<BaseTxtComponentDialog>
     ) {
-        this.configureForm = new FormGroup({
+        const self = this;
+        self.configureForm = new FormGroup({
             name: new FormControl(''),
             validationRule: new FormControl('')
         });
-        this.languages.forEach((lng: string) => {
-            this.configureForm.addControl('label#' + lng, new FormControl(''));
+        self.languages.forEach((lng: string) => {
+            self.configureForm.addControl('label#' + lng, new FormControl(''));
         });
-        this.configureForm.get('name').setValue(data.opt.name);
+        self.configureForm.get('name').setValue(data.opt.name);
         if (data.opt.translations) {
             data.opt.translations.forEach(function (tr: any) {
-                this.configureForm.get('label#' + tr.language).setValue(tr.value);
+                self.configureForm.get('label#' + tr.language).setValue(tr.value);
             });
         }
 

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

@@ -55,7 +55,10 @@ export abstract class BaseTxtComponent extends BaseUIComponent {
                 return;
             }
 
-            this.option = r;
+            this.option.name = r.name;
+            this.option.type = r.type;
+            this.option.validationRules = r.validationRules;
+            this.option.translations = r.translations;
             this.control = new FormControl('', this.buildValidationRules());
             this.form.removeControl(this.option.name);
             this.form.addControl(this.option.name, this.control);

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

@@ -1,4 +1,4 @@
-<div #parent (drop)="dropElt($event)" [class]="'component '+ title" [class.selected]="isSelected" [class.editMode]="uiOption.editMode" (click)="clickComponent($event)">
+<div #parent (drop)="dropElt($event)" (dragleave)="dragLeave($event)" (dragover)="dragOver($event)" [class]="'component '+ title" [class.focused]="isFocused" [class.selected]="isSelected" [class.editMode]="uiOption.editMode" (click)="clickComponent($event)">
     <div class="title" *ngIf="uiOption.editMode">
         {{ title }}
     </div>

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

@@ -9,6 +9,7 @@ import { HeaderComponent } from "./header/header.component";
 import { FormGroup } from "@angular/forms";
 import { PwdComponent } from "./pwd/pwd.component";
 import { ConfirmPwdComponent } from "./confirmpwd/confirmpwd.component";
+import { SubmitBtnComponent } from "./submitbtn/submitbtn.component";
 
 @Component({
     selector: 'dynamic-component',
@@ -31,7 +32,8 @@ export class DynamicComponent implements OnInit, OnDestroy {
         'container': ContainerComponent,
         'header': HeaderComponent,
         'pwd': PwdComponent,
-        'confirmpwd': ConfirmPwdComponent
+        'confirmpwd': ConfirmPwdComponent,
+        'submitbtn': SubmitBtnComponent
     };
     @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
     @ViewChild('parent', { read: ViewContainerRef }) parent: ViewContainerRef;
@@ -74,6 +76,7 @@ export class DynamicComponent implements OnInit, OnDestroy {
     }
     @Input() parentOption: any = null;
     isSelected: boolean = false;
+    isFocused: boolean = false;
     title: string = null;
 
     constructor(private compFactoryResolver: ComponentFactoryResolver) { }
@@ -118,6 +121,35 @@ export class DynamicComponent implements OnInit, OnDestroy {
 
         const json = JSON.parse(evt.dataTransfer.getData('json'));
         this.option.children.push(json);
+        this.isFocused = false;
+    }
+
+    dragLeave(evt: any) {
+        if (!this._uiOption.editMode) {
+            return;
+        }
+
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (!this.option.children) {
+            return;
+        }
+
+        this.isFocused = false;
+    }
+
+    dragOver(evt: any) {
+        if (!this._uiOption.editMode) {
+            return;
+        }
+
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (!this.option.children) {
+            return;
+        }
+
+        this.isFocused = true;
     }
 
     openSettings(evt: any) {

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

@@ -1 +1 @@
-<div [class]="option.class">{{ option.txt }}</div>
+<div [class]="option.class">{{ option.translations | translateenum }}</div>

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

@@ -30,23 +30,50 @@ export class HeaderComponent extends BaseUIComponent {
     templateUrl: 'headerdialog.component.html',
 })
 export class HeaderComponentDialog {
-    configureHeaderForm: FormGroup;
+    configureForm: FormGroup;
+    languages: string[] = ['fr', 'en'];
+
     constructor(
         @Inject(MAT_DIALOG_DATA) public data: any,
         public dialogRef: MatDialogRef<HeaderComponentDialog>
     ) {
-        this.configureHeaderForm = new FormGroup({
+        const self = this;
+        this.configureForm = new FormGroup({
             txt: new FormControl({ value: '' }),
             class: new FormControl({ value: '' })
         });
-        this.configureHeaderForm.get('txt').setValue(data.opt.txt);
-        this.configureHeaderForm.get('class').setValue(data.opt.class);
+        self.languages.forEach((lng: string) => {
+            this.configureForm.addControl('label#' + lng, new FormControl(''));
+        });
+        this.configureForm.get('class').setValue(data.opt.class);
+        if (data.opt.translations) {
+            data.opt.translations.forEach(function (tr: any) {
+                self.configureForm.get('label#' + tr.language).setValue(tr.value);
+            });
+        }
     }
 
-    onSave(val: { txt: string, class: string }) {
+    onSave(val: { class: string }) {
+        const translations: any[] = [];
+        for (const key in this.configureForm.controls) {
+            if (key.startsWith('label')) {
+                const language = key.split('#')[1];
+                translations.push({
+                    language: language,
+                    value: this.configureForm.get(key).value
+                });
+            }
+        }
+
         const opt = this.data.opt;
-        opt.txt = val.txt;
+        opt.translations = translations;
         opt.class = val.class;
         this.dialogRef.close(opt);
     }
+
+    close(evt: any) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.dialogRef.close(null);
+    }
 }

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

@@ -1,10 +1,10 @@
 <h1 mat-dialog-title>{{ 'HUMANTASK.EDITOR.CONFIGUREHEADER' | translate }}</h1>
-<div mat-dialog-content>
-    <form [formGroup]="configureHeaderForm" (ngSubmit)="onSave(configureHeaderForm.value)">
-        <!-- Text -->
-        <mat-form-field class="full-width" appearance="outline" floatLabel="always">
-            <mat-label>{{ 'SHARED.TEXT' | translate }}</mat-label>
-            <input matInput name="txt" formControlName="txt" />
+<form [formGroup]="configureForm" (ngSubmit)="onSave(configureForm.value)">
+    <div mat-dialog-content>
+        <!-- Label -->
+        <mat-form-field class="full-width" appearance="outline" floatLabel="always" *ngFor="let language of languages">
+            <mat-label>{{ 'HUMANTASK.EDITOR.TRANSLATIONS.' + language | translate }}</mat-label>
+            <input matInput name="label" [formControlName]="'label#' + language" />
         </mat-form-field>
         <!-- Types -->
         <mat-form-field class="full-width" appearance="outline" floatLabel="always">
@@ -15,9 +15,9 @@
                 <mat-option value="mat-display-4">Display 4</mat-option>
             </mat-select>
         </mat-form-field>
+    </div>
+    <mat-dialog-actions>
         <button mat-raised-button color="primary">{{ 'SHARED.SAVE' | translate }}</button>
-    </form>
-</div>
-<mat-dialog-actions>
-    <button mat-button mat-dialog-close>{{ 'SHARED.CANCEL' | translate }}</button>
-</mat-dialog-actions>
+        <button mat-button (click)="close($event)">{{ 'SHARED.CANCEL' | translate }}</button>
+    </mat-dialog-actions>
+</form>

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

@@ -52,4 +52,10 @@ export class RowComponentDialog {
 
         this.dialogRef.close(opt);
     }
+
+    close(evt: any) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.dialogRef.close(null);
+    }
 }

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

@@ -1,14 +1,14 @@
-<h1 mat-dialog-title>{{ 'HUMANTASK.EDITOR.CONFIGUREROW' | translate }}</h1>
-<div mat-dialog-content>
-    <form [formGroup]="configureRowForm" (ngSubmit)="onSave(configureRowForm.value)">
+<h1 mat-dialog-title>{{ 'HUMANTASK.EDITOR.CONFIGUREROW' | translate }}</h1> 
+<form [formGroup]="configureRowForm" (ngSubmit)="onSave(configureRowForm.value)">
+    <div mat-dialog-content>
         <!-- Nb columns -->
         <mat-form-field class="full-width" appearance="outline" floatLabel="always">
             <mat-label>{{ 'SHARED.NBCOLUMNS' | translate }}</mat-label>
             <input matInput name="nbColumns" formControlName="nbColumns" />
         </mat-form-field>
+    </div>
+    <mat-dialog-actions>
         <button mat-raised-button color="primary">{{ 'SHARED.SAVE' | translate }}</button>
-    </form>
-</div>
-<mat-dialog-actions>
-    <button mat-button mat-dialog-close>{{ 'SHARED.CANCEL' | translate }}</button>
-</mat-dialog-actions>
+        <button mat-button (click)="close($event)">{{ 'SHARED.CANCEL' | translate }}</button>
+    </mat-dialog-actions>
+</form>