Skip to content

Commit 9983fc8

Browse files
mazarijurajmazarijuraj
authored
Merge pull request #21 from netgrif/NAB-359
[NAB-359] Task ref with multiple init values
2 parents dc733e6 + 956a98c commit 9983fc8

11 files changed

+266
-80
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,9 @@
5858
"@mdi/font": "^7.4.47",
5959
"@netgrif/components": "7.0.0-beta.1",
6060
"@netgrif/components-core": "7.0.0-beta.1",
61-
"@netgrif/petri.svg": "1.1.0",
61+
"@netgrif/petri.svg": "1.1.1",
6262
"@netgrif/petriflow": "2.2.0",
63-
"@netgrif/petriflow.svg": "1.1.0",
63+
"@netgrif/petriflow.svg": "1.1.1",
6464
"@ngbracket/ngx-layout": "^17.0.1",
6565
"@ngx-translate/core": "~15.0.0",
6666
"@ngx-translate/http-loader": "~8.0.0",

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

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -151,20 +151,9 @@ <h4 class="full-width margin-html">
151151
class="full-width">
152152
</ngx-mat-datetime-picker>
153153
</mat-form-field>
154-
<mat-form-field *ngIf="isTaskRef()" class="full-width margin-html">
155-
<mat-label>Initial value</mat-label>
156-
<input type="text"
157-
aria-label="Autocomplete"
158-
matInput
159-
[formControl]="formControlRef"
160-
[matAutocomplete]="auto">
161-
<mat-autocomplete [displayWith]="renderSelection" autoActiveFirstOption #auto="matAutocomplete">
162-
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.key"
163-
(click)="selectAuto(option.key);notifyGridster()" [disabled]="isDisabled(option.key)">
164-
{{ taskRefTitle(option) }}
165-
</mat-option>
166-
</mat-autocomplete>
167-
</mat-form-field>
154+
<div class="margin-html" *ngIf="isTaskRef()">
155+
<nab-task-ref-init-field [taskRef]="dataVariable"></nab-task-ref-init-field>
156+
</div>
168157
<!-- OPTIONS MANAGEMENT IF APPLICABLE -->
169158
<div *ngIf="hasOptions()">
170159
<mat-divider></mat-divider>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
[style.width.px]="width"
1212
fixedInViewport=true
1313
disableClose="true"
14+
style="max-width: 450px;"
1415
class="app-mat-sidenav-right" mode="side" position="end" opened>
1516
<div fxLayout="row">
1617
<div class="handle" mwlResizeHandle [resizeEdges]="{ left: true }"></div>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {InfoLabelComponent} from './info-label/info-label.component';
1515
import {DataFieldsComponentModule} from '@netgrif/components';
1616
import {FlexLayoutModule} from '@ngbracket/ngx-layout';
1717
import {ResizableModule} from 'angular-resizable-element';
18+
import {ModelerModule} from '../modeler/modeler.module';
1819

1920
@NgModule({
2021
declarations: [
@@ -39,7 +40,8 @@ import {ResizableModule} from 'angular-resizable-element';
3940
HttpClientModule,
4041
MaterialImportModule,
4142
ReactiveFormsModule,
42-
ResizableModule
43+
ResizableModule,
44+
ModelerModule
4345
]
4446
})
4547
export class FormBuilderModule {

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

Lines changed: 85 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -142,45 +142,93 @@
142142

143143
<div fxFlex="2.5"></div>
144144

145-
<mat-form-field fxFlex="45" *ngIf="!isOptionField() && item.type !== 'taskRef'">
145+
<mat-form-field fxFlex="45" *ngIf="isItemInitDynamic();else static_init">
146146
<mat-label>Initial value</mat-label>
147-
<input matInput [ngModel]="item?.init?.value"
148-
(change)="setValue($event, 'init')">
149-
</mat-form-field>
150-
151-
<mat-form-field fxFlex="45" *ngIf="isOptionField()" class="full-width">
152-
<mat-label>Initial value</mat-label>
153-
<mat-select *ngIf="!hasInits(); else hasInitsItems" [(ngModel)]="item.init.value">
154-
<mat-option>None</mat-option>
155-
<mat-option *ngFor="let opt of item.options" [value]="opt.key">
156-
{{ opt.value?.value }}
157-
</mat-option>
158-
</mat-select>
159-
<ng-template #hasInitsItems>
160-
<mat-select (valueChange)="changeInitsValue($event)"
161-
[value]="getInitsValue()" multiple>
162-
<mat-option *ngFor="let opt of item.options" [value]="opt.key">
163-
{{ opt.value?.value }}
164-
</mat-option>
165-
</mat-select>
166-
</ng-template>
167-
</mat-form-field>
168-
169-
<mat-form-field fxFlex="45" *ngIf="item.type === 'taskRef'">
170-
<mat-label>Initial value</mat-label>
171-
<input type="text"
172-
aria-label="Autocomplete"
173-
matInput
174-
[formControl]="formControlRef">
175-
<!-- [matAutocomplete]="auto">-->
176-
<!-- <mat-autocomplete [displayWith]="renderSelection" autoActiveFirstOption #auto="matAutocomplete">-->
177-
<!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.key"-->
178-
<!-- (click)="clickOption(item, option.key)" [disabled]="isDisabled(option.key)">-->
179-
<!-- {{option.key}} - {{option.value}}-->
180-
<!-- </mat-option>-->
181-
<!-- </mat-autocomplete>-->
147+
<input matInput [ngModel]="item?.init?.value" (change)="setValue($event, 'init')">
182148
</mat-form-field>
183149

150+
<ng-template #static_init>
151+
@switch (item.type) {
152+
@case (DataType.BOOLEAN) {
153+
<div fxFlex="45" class="full-width">
154+
<span>Initial value </span>
155+
<mat-slide-toggle [checked]="item.init.value === 'true'" (change)="setBooleanValue($event)">
156+
{{item.init.value}}
157+
</mat-slide-toggle>
158+
</div>
159+
}
160+
@case (DataType.NUMBER) {
161+
<mat-form-field fxFlex="45" class="full-width">
162+
<mat-label>Initial value</mat-label>
163+
<input matInput type="number" [(ngModel)]="item.init.value" (change)="setNumberValue($event)">
164+
</mat-form-field>
165+
}
166+
@case (DataType.DATE) {
167+
<mat-form-field fxFlex="45" class="full-width">
168+
<mat-label>Initial value</mat-label>
169+
<mat-datepicker-toggle matPrefix [for]="datepicker"></mat-datepicker-toggle>
170+
<input matInput (dateChange)="formatDate($event);"
171+
[matDatepicker]="datepicker"
172+
[(ngModel)]="item.init.value"
173+
(click)="datepicker.open()"
174+
(keydown.enter)="datepicker.close()">
175+
<mat-datepicker #datepicker>
176+
</mat-datepicker>
177+
</mat-form-field>
178+
}
179+
@case (DataType.DATETIME) {
180+
<mat-form-field fxFlex="45" class="full-width">
181+
<mat-label>Initial value</mat-label>
182+
<input matInput
183+
[ngxMatDatetimePicker]="picker"
184+
[(ngModel)]="item.init.value"
185+
(dateChange)="formatDateTime($event)">
186+
<mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
187+
<ngx-mat-datetime-picker #picker
188+
[showSpinners]="true"
189+
[showSeconds]="false"
190+
[stepHour]="1"
191+
[stepMinute]="5"
192+
[color]="'primary'"
193+
[enableMeridian]="false"
194+
class="full-width">
195+
</ngx-mat-datetime-picker>
196+
</mat-form-field>
197+
}
198+
@case (DataType.TASK_REF) {
199+
<nab-task-ref-init-field [taskRef]="item" fxFlex="45" class="full-width"></nab-task-ref-init-field>
200+
}
201+
@case ((item.type === DataType.ENUMERATION || item.type === DataType.ENUMERATION_MAP) ? item.type : '') {
202+
<mat-form-field fxFlex="45" class="full-width">
203+
<mat-label>Initial value</mat-label>
204+
<mat-select [(ngModel)]="item.init.value">
205+
<mat-option>None</mat-option>
206+
<mat-option *ngFor="let opt of item.options" [value]="opt.key">
207+
{{ opt.value?.value }}
208+
</mat-option>
209+
</mat-select>
210+
</mat-form-field>
211+
}
212+
@case ((item.type === DataType.MULTICHOICE || item.type === DataType.MULTICHOICE_MAP) ? item.type : '') {
213+
<mat-form-field fxFlex="45" class="full-width">
214+
<mat-label>Initial value</mat-label>
215+
<mat-select (valueChange)="changeInitsValue($event)"
216+
[value]="getInitsValue()" multiple>
217+
<mat-option *ngFor="let opt of item.options" [value]="opt.key">
218+
{{ opt.value?.value }}
219+
</mat-option>
220+
</mat-select>
221+
</mat-form-field>
222+
}
223+
@default {
224+
<mat-form-field fxFlex="45">
225+
<mat-label>Initial value</mat-label>
226+
<input matInput [ngModel]="item?.init?.value"
227+
(change)="setValue($event, 'init')">
228+
</mat-form-field>
229+
}
230+
}
231+
</ng-template>
184232

185233
<div fxFlex="2.5"></div>
186234

@@ -310,21 +358,12 @@
310358

311359
<div fxFlex="20">Options Init</div>
312360

313-
<mat-form-field fxFlex="25">
361+
<mat-form-field fxFlex="75">
314362
<input matInput [ngModel]="getItemOptionsInitExpression()"
315363
(change)="setValue($event,'options-init')">
316364
</mat-form-field>
317365

318366
<div fxFlex="2.5"></div>
319-
320-
<div fxFlex="20">Is Options Init dynamic?</div>
321-
322-
<mat-form-field fxFlex="25">
323-
<input matInput [ngModel]="getItemOptionsInitDynamic()"
324-
(change)="setValue($event,'options-init-dynamic')">
325-
</mat-form-field>
326-
327-
<div fxFlex="2.5"></div>
328367
</div>
329368

330369
<div fxLayout="row wrap" fxLayoutAlign="start center">

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

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import {Component, OnDestroy} from '@angular/core';
1+
import {Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
22
import {DataMasterDetailService} from '../data-master-detail.service';
33
import {
44
Component as PetriflowComponent,
55
DataType,
6-
DataVariable, Expression, I18nString,
6+
DataVariable,
7+
Expression,
8+
I18nString,
79
I18nWithDynamic,
810
Option,
911
Property,
@@ -23,6 +25,8 @@ import {HistoryService} from '../../services/history/history.service';
2325
import {Observable} from 'rxjs';
2426
import {map, startWith, tap} from 'rxjs/operators';
2527
import {ModelerUtils} from '../../modeler-utils';
28+
import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
29+
import {MatChipInputEvent} from '@angular/material/chips';
2630

2731
export interface TypeArray {
2832
viewValue: string;
@@ -174,21 +178,14 @@ export class DataDetailComponent implements OnDestroy {
174178
this.item.placeholder.value = $event.target.value;
175179
break;
176180
}
177-
case 'init': {
178-
const value = $event.target.value;
179-
if (this.item.init === undefined) {
180-
this.item.init = new I18nWithDynamic(value);
181-
} else {
182-
this.item.init.value = value;
183-
}
184-
break;
185-
}
186181
case 'dynamic-init': {
187182
const value = $event.source.checked;
188183
if (this.item.init === undefined) {
189-
this.item.init = new I18nWithDynamic(value);
190-
} else {
191-
this.item.init.dynamic = value;
184+
this.item.init = new I18nWithDynamic('');
185+
}
186+
this.item.init.dynamic = value;
187+
if (value === true) {
188+
this.item.inits = new Array<I18nWithDynamic>();
192189
}
193190
break;
194191
}
@@ -231,6 +228,31 @@ export class DataDetailComponent implements OnDestroy {
231228
this.historyDataSave.save = true;
232229
}
233230

231+
setBooleanValue(event) {
232+
this.item.init.value = event.checked.toString();
233+
}
234+
235+
setNumberValue(event) {
236+
this.item.init.value = event.target.value.toString();
237+
}
238+
239+
formatDate(event) {
240+
// TODO: NAB-326 better solution? date picker setting to store only date?
241+
if (event.target.value) {
242+
this.item.init.value = event.target.value.toISOString();
243+
} else {
244+
this.item.init.value = '';
245+
}
246+
}
247+
248+
formatDateTime(event) {
249+
if (event.target.value) {
250+
this.item.init.value = event.target.value.toISOString();
251+
} else {
252+
this.item.init.value = '';
253+
}
254+
}
255+
234256
removeSpecificAttributeOnChange() {
235257
this.item.inits = [];
236258
this.item.init.value = '';
@@ -364,4 +386,8 @@ export class DataDetailComponent implements OnDestroy {
364386
trackByFn(index: any, item: any) {
365387
return index;
366388
}
389+
390+
protected readonly DataType = DataType;
391+
protected readonly Boolean = Boolean;
392+
protected readonly DataFieldUtils = DataFieldUtils;
367393
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<mat-form-field class="full-width">
2+
<mat-label>Initial value</mat-label>
3+
<mat-chip-grid #chipGrid>
4+
@for (init of taskRef.inits; track $index) {
5+
<mat-chip-row (removed)="removeInit($index)">
6+
{{ prettyTask(init?.value) }}
7+
<button matChipRemove>
8+
<mat-icon>cancel</mat-icon>
9+
</button>
10+
</mat-chip-row>
11+
}
12+
</mat-chip-grid>
13+
<input
14+
#taskRefInput
15+
name="Inits"
16+
[formControl]="taskRefFormControl"
17+
[matChipInputFor]="chipGrid"
18+
[matAutocomplete]="auto"
19+
(matChipInputTokenEnd)="addInit($event)"
20+
/>
21+
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectInit($event)">
22+
@for (task of tasks; track task) {
23+
<mat-option [value]="task.id" [disabled]="isReferenced(task)">{{ task.label?.value }} [{{ task.id }}]</mat-option>
24+
}
25+
</mat-autocomplete>
26+
</mat-form-field>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.full-width {
2+
width: 100%;
3+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { TaskRefInitFieldComponent } from './task-ref-init-field.component';
4+
5+
describe('TaskRefInitFieldComponent', () => {
6+
let component: TaskRefInitFieldComponent;
7+
let fixture: ComponentFixture<TaskRefInitFieldComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
imports: [TaskRefInitFieldComponent]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(TaskRefInitFieldComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

0 commit comments

Comments
 (0)