[NAB-359] Task ref with multiple init values

package.json

@@ -58,9 +58,9 @@
         "@mdi/font": "^7.4.47",
         "@netgrif/components": "7.0.0-beta.1",
         "@netgrif/components-core": "7.0.0-beta.1",
-        "@netgrif/petri.svg": "1.1.0",
+        "@netgrif/petri.svg": "1.1.1",
         "@netgrif/petriflow": "2.2.0",
-        "@netgrif/petriflow.svg": "1.1.0",
+        "@netgrif/petriflow.svg": "1.1.1",
         "@ngbracket/ngx-layout": "^17.0.1",
         "@ngx-translate/core": "~15.0.0",
         "@ngx-translate/http-loader": "~8.0.0",

src/app/form-builder/edit-panel/edit-panel.component.html

@@ -151,20 +151,9 @@ <h4 class="full-width margin-html">
                                          class="full-width">
                 </ngx-mat-datetime-picker>
             </mat-form-field>
-            <mat-form-field *ngIf="isTaskRef()" class="full-width margin-html">
-                <mat-label>Initial value</mat-label>
-                <input type="text"
-                       aria-label="Autocomplete"
-                       matInput
-                       [formControl]="formControlRef"
-                       [matAutocomplete]="auto">
-                <mat-autocomplete [displayWith]="renderSelection" autoActiveFirstOption #auto="matAutocomplete">
-                    <mat-option *ngFor="let option of filteredOptions | async" [value]="option.key"
-                                (click)="selectAuto(option.key);notifyGridster()" [disabled]="isDisabled(option.key)">
-                        {{ taskRefTitle(option) }}
-                    </mat-option>
-                </mat-autocomplete>
-            </mat-form-field>
+            <div class="margin-html" *ngIf="isTaskRef()">
+                <nab-task-ref-init-field [taskRef]="dataVariable"></nab-task-ref-init-field>
+            </div>
             <!--  OPTIONS MANAGEMENT IF APPLICABLE  -->
             <div *ngIf="hasOptions()">
                 <mat-divider></mat-divider>

src/app/form-builder/form-builder.component.html

@@ -11,6 +11,7 @@
              [style.width.px]="width"
              fixedInViewport=true
              disableClose="true"
+             style="max-width: 450px;"
              class="app-mat-sidenav-right" mode="side" position="end" opened>
     <div fxLayout="row">
         <div class="handle" mwlResizeHandle [resizeEdges]="{ left: true }"></div>

src/app/form-builder/form-builder.module.ts

@@ -15,6 +15,7 @@ import {InfoLabelComponent} from './info-label/info-label.component';
 import {DataFieldsComponentModule} from '@netgrif/components';
 import {FlexLayoutModule} from '@ngbracket/ngx-layout';
 import {ResizableModule} from 'angular-resizable-element';
+import {ModelerModule} from '../modeler/modeler.module';
 
 @NgModule({
     declarations: [
@@ -39,7 +40,8 @@ import {ResizableModule} from 'angular-resizable-element';
         HttpClientModule,
         MaterialImportModule,
         ReactiveFormsModule,
-        ResizableModule
+        ResizableModule,
+        ModelerModule
     ]
 })
 export class FormBuilderModule {

src/app/modeler/data-mode/data-detail/data-detail.component.html

@@ -142,45 +142,93 @@
 
         <div fxFlex="2.5"></div>
 
-        <mat-form-field fxFlex="45" *ngIf="!isOptionField() && item.type !== 'taskRef'">
+        <mat-form-field fxFlex="45" *ngIf="isItemInitDynamic();else static_init">
             <mat-label>Initial value</mat-label>
-            <input matInput [ngModel]="item?.init?.value"
-                   (change)="setValue($event, 'init')">
-        </mat-form-field>
-
-        <mat-form-field fxFlex="45" *ngIf="isOptionField()" class="full-width">
-            <mat-label>Initial value</mat-label>
-            <mat-select *ngIf="!hasInits(); else hasInitsItems" [(ngModel)]="item.init.value">
-                <mat-option>None</mat-option>
-                <mat-option *ngFor="let opt of item.options" [value]="opt.key">
-                    {{ opt.value?.value }}
-                </mat-option>
-            </mat-select>
-            <ng-template #hasInitsItems>
-                <mat-select (valueChange)="changeInitsValue($event)"
-                            [value]="getInitsValue()" multiple>
-                    <mat-option *ngFor="let opt of item.options" [value]="opt.key">
-                        {{ opt.value?.value }}
-                    </mat-option>
-                </mat-select>
-            </ng-template>
-        </mat-form-field>
-
-        <mat-form-field fxFlex="45" *ngIf="item.type === 'taskRef'">
-            <mat-label>Initial value</mat-label>
-            <input type="text"
-                   aria-label="Autocomplete"
-                   matInput
-                   [formControl]="formControlRef">
-            <!--                           [matAutocomplete]="auto">-->
-            <!--                    <mat-autocomplete [displayWith]="renderSelection" autoActiveFirstOption #auto="matAutocomplete">-->
-            <!--                        <mat-option *ngFor="let option of filteredOptions | async" [value]="option.key"-->
-            <!--                                    (click)="clickOption(item, option.key)" [disabled]="isDisabled(option.key)">-->
-            <!--                            {{option.key}} - {{option.value}}-->
-            <!--                        </mat-option>-->
-            <!--                    </mat-autocomplete>-->
+            <input matInput [ngModel]="item?.init?.value" (change)="setValue($event, 'init')">
         </mat-form-field>
 
+        <ng-template #static_init>
+            @switch (item.type) {
+                @case (DataType.BOOLEAN) {
+                    <div fxFlex="45" class="full-width">
+                        <span>Initial value </span>
+                        <mat-slide-toggle [checked]="item.init.value === 'true'" (change)="setBooleanValue($event)">
+                            {{item.init.value}}
+                        </mat-slide-toggle>
+                    </div>
+                }
+                @case (DataType.NUMBER) {
+                    <mat-form-field fxFlex="45" class="full-width">
+                        <mat-label>Initial value</mat-label>
+                        <input matInput type="number" [(ngModel)]="item.init.value" (change)="setNumberValue($event)">
+                    </mat-form-field>
+                }
+                @case (DataType.DATE) {
+                    <mat-form-field fxFlex="45" class="full-width">
+                        <mat-label>Initial value</mat-label>
+                        <mat-datepicker-toggle matPrefix [for]="datepicker"></mat-datepicker-toggle>
+                        <input matInput (dateChange)="formatDate($event);"
+                               [matDatepicker]="datepicker"
+                               [(ngModel)]="item.init.value"
+                               (click)="datepicker.open()"
+                               (keydown.enter)="datepicker.close()">
+                        <mat-datepicker #datepicker>
+                        </mat-datepicker>
+                    </mat-form-field>
+                }
+                @case (DataType.DATETIME) {
+                    <mat-form-field fxFlex="45" class="full-width">
+                        <mat-label>Initial value</mat-label>
+                        <input matInput
+                               [ngxMatDatetimePicker]="picker"
+                               [(ngModel)]="item.init.value"
+                               (dateChange)="formatDateTime($event)">
+                        <mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
+                        <ngx-mat-datetime-picker #picker
+                                                 [showSpinners]="true"
+                                                 [showSeconds]="false"
+                                                 [stepHour]="1"
+                                                 [stepMinute]="5"
+                                                 [color]="'primary'"
+                                                 [enableMeridian]="false"
+                                                 class="full-width">
+                        </ngx-mat-datetime-picker>
+                    </mat-form-field>
+                }
+                @case (DataType.TASK_REF) {
+                    <nab-task-ref-init-field [taskRef]="item" fxFlex="45" class="full-width"></nab-task-ref-init-field>
+                }
+                @case ((item.type === DataType.ENUMERATION || item.type === DataType.ENUMERATION_MAP) ? item.type : '') {
+                    <mat-form-field fxFlex="45" class="full-width">
+                        <mat-label>Initial value</mat-label>
+                        <mat-select [(ngModel)]="item.init.value">
+                            <mat-option>None</mat-option>
+                            <mat-option *ngFor="let opt of item.options" [value]="opt.key">
+                                {{ opt.value?.value }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                }
+                @case ((item.type === DataType.MULTICHOICE || item.type === DataType.MULTICHOICE_MAP) ? item.type : '') {
+                    <mat-form-field fxFlex="45" class="full-width">
+                        <mat-label>Initial value</mat-label>
+                        <mat-select (valueChange)="changeInitsValue($event)"
+                                    [value]="getInitsValue()" multiple>
+                            <mat-option *ngFor="let opt of item.options" [value]="opt.key">
+                                {{ opt.value?.value }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                }
+                @default {
+                    <mat-form-field fxFlex="45">
+                        <mat-label>Initial value</mat-label>
+                        <input matInput [ngModel]="item?.init?.value"
+                               (change)="setValue($event, 'init')">
+                    </mat-form-field>
+                }
+            }
+        </ng-template>
 
         <div fxFlex="2.5"></div>
 
@@ -310,21 +358,12 @@
 
         <div fxFlex="20">Options Init</div>
 
-        <mat-form-field fxFlex="25">
+        <mat-form-field fxFlex="75">
             <input matInput [ngModel]="getItemOptionsInitExpression()"
                    (change)="setValue($event,'options-init')">
         </mat-form-field>
 
         <div fxFlex="2.5"></div>
-
-        <div fxFlex="20">Is Options Init dynamic?</div>
-
-        <mat-form-field fxFlex="25">
-            <input matInput [ngModel]="getItemOptionsInitDynamic()"
-                   (change)="setValue($event,'options-init-dynamic')">
-        </mat-form-field>
-
-        <div fxFlex="2.5"></div>
     </div>
 
     <div fxLayout="row wrap" fxLayoutAlign="start center">

src/app/modeler/data-mode/data-detail/data-detail.component.ts

@@ -1,9 +1,11 @@
-import {Component, OnDestroy} from '@angular/core';
+import {Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 import {DataMasterDetailService} from '../data-master-detail.service';
 import {
     Component as PetriflowComponent,
     DataType,
-    DataVariable, Expression, I18nString,
+    DataVariable,
+    Expression,
+    I18nString,
     I18nWithDynamic,
     Option,
     Property,
@@ -23,6 +25,8 @@ import {HistoryService} from '../../services/history/history.service';
 import {Observable} from 'rxjs';
 import {map, startWith, tap} from 'rxjs/operators';
 import {ModelerUtils} from '../../modeler-utils';
+import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
+import {MatChipInputEvent} from '@angular/material/chips';
 
 export interface TypeArray {
     viewValue: string;
@@ -174,21 +178,14 @@ export class DataDetailComponent implements OnDestroy {
                 this.item.placeholder.value = $event.target.value;
                 break;
             }
-            case 'init': {
-                const value = $event.target.value;
-                if (this.item.init === undefined) {
-                    this.item.init = new I18nWithDynamic(value);
-                } else {
-                    this.item.init.value = value;
-                }
-                break;
-            }
             case 'dynamic-init': {
                 const value = $event.source.checked;
                 if (this.item.init === undefined) {
-                    this.item.init = new I18nWithDynamic(value);
-                } else {
-                    this.item.init.dynamic = value;
+                    this.item.init = new I18nWithDynamic('');
+                }
+                this.item.init.dynamic = value;
+                if (value === true) {
+                    this.item.inits = new Array<I18nWithDynamic>();
                 }
                 break;
             }
@@ -231,6 +228,31 @@ export class DataDetailComponent implements OnDestroy {
         this.historyDataSave.save = true;
     }
 
+    setBooleanValue(event) {
+        this.item.init.value = event.checked.toString();
+    }
+
+    setNumberValue(event) {
+        this.item.init.value = event.target.value.toString();
+    }
+
+    formatDate(event) {
+        // TODO: NAB-326 better solution? date picker setting to store only date?
+        if (event.target.value) {
+            this.item.init.value = event.target.value.toISOString();
+        } else {
+            this.item.init.value = '';
+        }
+    }
+
+    formatDateTime(event) {
+        if (event.target.value) {
+            this.item.init.value = event.target.value.toISOString();
+        } else {
+            this.item.init.value = '';
+        }
+    }
+
     removeSpecificAttributeOnChange() {
         this.item.inits = [];
         this.item.init.value = '';
@@ -364,4 +386,8 @@ export class DataDetailComponent implements OnDestroy {
     trackByFn(index: any, item: any) {
         return index;
     }
+
+    protected readonly DataType = DataType;
+    protected readonly Boolean = Boolean;
+    protected readonly DataFieldUtils = DataFieldUtils;
 }

src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.html

@@ -0,0 +1,26 @@
+<mat-form-field class="full-width">
+    <mat-label>Initial value</mat-label>
+    <mat-chip-grid #chipGrid>
+        @for (init of taskRef.inits; track $index) {
+            <mat-chip-row (removed)="removeInit($index)">
+                {{ prettyTask(init?.value) }}
+                <button matChipRemove>
+                    <mat-icon>cancel</mat-icon>
+                </button>
+            </mat-chip-row>
+        }
+    </mat-chip-grid>
+    <input
+        #taskRefInput
+        name="Inits"
+        [formControl]="taskRefFormControl"
+        [matChipInputFor]="chipGrid"
+        [matAutocomplete]="auto"
+        (matChipInputTokenEnd)="addInit($event)"
+    />
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectInit($event)">
+        @for (task of tasks; track task) {
+            <mat-option [value]="task.id" [disabled]="isReferenced(task)">{{ task.label?.value }} [{{ task.id }}]</mat-option>
+        }
+    </mat-autocomplete>
+</mat-form-field>

src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.scss

@@ -0,0 +1,3 @@
+.full-width {
+    width: 100%;
+}

src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskRefInitFieldComponent } from './task-ref-init-field.component';
+
+describe('TaskRefInitFieldComponent', () => {
+  let component: TaskRefInitFieldComponent;
+  let fixture: ComponentFixture<TaskRefInitFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TaskRefInitFieldComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TaskRefInitFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});