Skip to content

Commit f5df106

Browse files
mazarijurajmazarijuraj
authored
Merge pull request #22 from netgrif/NAB-368
[NAB-368] Component parameters
2 parents 9983fc8 + 1c6ba63 commit f5df106

File tree

9 files changed

+508
-52
lines changed

9 files changed

+508
-52
lines changed

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

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ <h5 class="full-width margin-html">Delegate event</h5>
5353
<div *ngIf="isSomeGridsterFieldSelected()">
5454
<h4 class="full-width margin-html">
5555
Id: {{ dataVariable.id }}
56-
<button *ngIf="isSomeGridsterFieldSelected()" mat-icon-button matTooltip="Refactor field ID"
56+
<button mat-icon-button matTooltip="Refactor field ID"
5757
(click)="openRefactorDialog($event, dataVariable)">
5858
<mat-icon>edit</mat-icon>
5959
</button>
@@ -78,7 +78,7 @@ <h4 class="full-width margin-html">
7878
</mat-form-field>
7979
</div>
8080

81-
<div *ngIf="isSomeGridsterFieldSelected()">
81+
<div>
8282
<mat-form-field class="full-width margin-html">
8383
<mat-label>Title</mat-label>
8484
<input matInput type="text" [(ngModel)]="dataVariable.title.value" (change)="notifyGridster()">
@@ -199,14 +199,25 @@ <h4 class="full-width margin-html">
199199
<div *ngIf="dataVariable.component !== undefined" class="full-width">
200200
<mat-form-field class="full-width margin-html">
201201
<mat-label>Component Name</mat-label>
202-
<input matInput [(ngModel)]="dataVariable.component.name" (change)="setComponent($event);notifyGridster()">
202+
<input matInput [(ngModel)]="dataVariable.component.name" (change)="setComponent($event);notifyGridster()"
203+
[formControl]="componentNameFormCtrl" [matAutocomplete]="componentAutocomplete">
204+
<mat-autocomplete #componentAutocomplete="matAutocomplete" (optionSelected)="setComponent($event);notifyGridster()">
205+
<mat-option *ngFor="let componentDef of filteredComponents(dataVariable.component)" [value]="componentDef.name">
206+
{{componentDef.title}}
207+
</mat-option>
208+
</mat-autocomplete>
203209
</mat-form-field>
204210
<div>
205211
<div *ngIf="dataVariable.component.properties.length > 0">
206212
<div *ngFor="let property of dataVariable.component.properties; let i = index" class="margin-html properties">
207213
<mat-form-field class="margin-right8px">
208-
<input matInput type="text" placeholder="Key" [value]="property.key"
214+
<input matInput type="text" placeholder="Key" [value]="property.key" [matAutocomplete]="propertyAutocomplete"
209215
(change)="setPropertyKey($event, i, dataVariable.component) ;notifyGridster()">
216+
<mat-autocomplete #propertyAutocomplete="matAutocomplete" (optionSelected)="setPropertyKey($event, i, dataVariable.component);notifyGridster()">
217+
<mat-option *ngFor="let propertyDef of filteredProperties(dataVariable.component, property.key)" [value]="propertyDef.name">
218+
{{propertyDef.name}}
219+
</mat-option>
220+
</mat-autocomplete>
210221
</mat-form-field>
211222
<mat-form-field class="margin-right8px">
212223
<input matInput type="text" placeholder="Value" [value]="property.value"
@@ -228,6 +239,11 @@ <h4 class="full-width margin-html">
228239
<mat-icon>add</mat-icon>
229240
Add property
230241
</button>
242+
<button mat-stroked-button color="primary" class="button-text save-button"
243+
(click)="cloneProperty(dataVariable, dataRef, 'component')">
244+
<mat-icon>move_down</mat-icon>
245+
Copy to DataRef
246+
</button>
231247
<div *ngIf="isIconEnumeration(dataVariable.type, dataVariable?.component)">
232248
<div *ngIf="dataVariable.component.icons.length > 0; else noIcons">
233249
<div *ngFor="let icon of dataVariable.component.icons; let i = index" class="margin-html properties">
@@ -272,15 +288,25 @@ <h4 class="full-width margin-html">
272288
<div *ngIf="dataRef.component !== undefined" class="full-width">
273289
<mat-form-field class="full-width">
274290
<mat-label>Component Name</mat-label>
275-
<input matInput [(ngModel)]="dataRef.component.name"
276-
(change)="setDataRefComponent($event);notifyGridster()">
291+
<input matInput [(ngModel)]="dataRef.component.name" (change)="setDataRefComponent($event);notifyGridster()"
292+
[formControl]="dataRefComponentNameFormCtrl" [matAutocomplete]="dataRefComponentAutocomplete">
293+
<mat-autocomplete #dataRefComponentAutocomplete="matAutocomplete" (optionSelected)="setComponent($event);notifyGridster()">
294+
<mat-option *ngFor="let componentDef of filteredComponents(dataRef.component)" [value]="componentDef.name">
295+
{{componentDef.title}}
296+
</mat-option>
297+
</mat-autocomplete>
277298
</mat-form-field>
278299
<div>
279300
<div *ngIf="dataRef.component.properties.length > 0">
280301
<div *ngFor="let property of dataRef.component.properties; let i = index" class="margin-html properties">
281302
<mat-form-field class="margin-right8px">
282-
<input matInput type="text" placeholder="Key" [value]="property.key"
303+
<input matInput type="text" placeholder="Key" [value]="property.key" [matAutocomplete]="dataRefPropertyAutocomplete"
283304
(change)="setPropertyKey($event, i, dataRef.component) ;notifyGridster()">
305+
<mat-autocomplete #dataRefPropertyAutocomplete="matAutocomplete" (optionSelected)="setPropertyKey($event, i, dataRef.component);notifyGridster()">
306+
<mat-option *ngFor="let propertyDef of filteredProperties(dataRef.component, property.key)" [value]="propertyDef.name">
307+
{{propertyDef.name}}
308+
</mat-option>
309+
</mat-autocomplete>
284310
</mat-form-field>
285311
<mat-form-field class="margin-right8px">
286312
<input matInput type="text" placeholder="Value" [value]="property.value"
@@ -303,6 +329,11 @@ <h4 class="full-width margin-html">
303329
<mat-icon>add</mat-icon>
304330
Add property
305331
</button>
332+
<button mat-stroked-button color="primary" class="button-text save-button"
333+
(click)="cloneProperty(dataRef, dataVariable, 'component')">
334+
<mat-icon>move_up</mat-icon>
335+
Copy to DataField
336+
</button>
306337
<div *ngIf="isIconEnumeration(dataVariable.type, dataRef.component)" >
307338
<div *ngIf="dataRef.component.icons.length > 0; else noIcons">
308339
<div *ngFor="let icon of dataRef.component.icons; let i = index" class="margin-html properties">

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

Lines changed: 64 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ import {DATE_FORMAT, DATE_TIME_FORMAT, EnumerationFieldValue} from '@netgrif/com
3535
import {Router} from '@angular/router';
3636
import {ActionsModeService} from '../../modeler/actions-mode/actions-mode.service';
3737
import {ActionsMasterDetailService} from '../../modeler/actions-mode/actions-master-detail.setvice';
38+
import {ComponentDef, DataRefDef, FieldListService, PropertyDef} from '../field-list/field-list.service';
39+
import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
3840

3941
@Component({
4042
selector: 'nab-edit-panel',
@@ -72,15 +74,18 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
7274
filteredOptions: Observable<Array<EnumerationFieldValue>>;
7375
formControlRef: FormControl;
7476
transitionOptions: Array<EnumerationFieldValue>;
75-
7677
behaviorOptions;
7778

79+
componentNameFormCtrl: FormControl;
80+
dataRefComponentNameFormCtrl: FormControl;
81+
7882
constructor(public gridsterService: GridsterService,
7983
public modelService: ModelService,
8084
private dialog: MatDialog,
8185
private transitionService: SelectedTransitionService,
8286
private _router: Router,
8387
private _actionMode: ActionsModeService,
88+
private _fieldListService: FieldListService,
8489
private _actionsMasterDetail: ActionsMasterDetailService) {
8590
// this.transitionOptions = [];
8691
this.formControlRef = new FormControl();
@@ -92,6 +97,8 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
9297
}
9398

9499
ngOnInit() {
100+
this.componentNameFormCtrl = new FormControl();
101+
this.dataRefComponentNameFormCtrl = new FormControl();
95102
this.transId = this.transitionService.id;
96103
if (this.transId === null) {
97104
this.numOfCols = ModelerConfig.LAYOUT_DEFAULT_COLS;
@@ -408,8 +415,13 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
408415
return false;
409416
}
410417

411-
setPropertyKey($event, index: number, component: PetriflowComponent) {
412-
component.properties[index].key = $event.target.value;
418+
public setPropertyKey($event, index: number, component: PetriflowComponent): void {
419+
if ($event instanceof MatAutocompleteSelectedEvent) {
420+
component.properties[index].key = $event.option.value;
421+
this.setPropertyDefaultValue($event, index, component);
422+
} else {
423+
component.properties[index].key = $event.target.value;
424+
}
413425
}
414426

415427
setPropertyValue($event, index: number, component: PetriflowComponent) {
@@ -440,18 +452,26 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
440452
}
441453
}
442454

443-
setComponent($event) {
455+
public setComponent($event): void {
444456
if (!this.gridsterService.selectedDataField.dataVariable.component) {
445457
this.gridsterService.selectedDataField.dataVariable.component = new PetriflowComponent('');
446458
}
447-
this.gridsterService.selectedDataField.dataVariable.component.name = $event.target.value;
459+
if ($event instanceof MatAutocompleteSelectedEvent) {
460+
this.gridsterService.selectedDataField.dataVariable.component.name = $event.option.value;
461+
} else {
462+
this.gridsterService.selectedDataField.dataVariable.component.name = $event.target.value;
463+
}
448464
}
449465

450-
setDataRefComponent($event) {
466+
public setDataRefComponent($event): void {
451467
if (!this.gridsterService.selectedDataField.dataRef.component) {
452468
this.gridsterService.selectedDataField.dataRef.component = new PetriflowComponent('');
453469
}
454-
this.gridsterService.selectedDataField.dataRef.component.name = $event.target.value;
470+
if ($event instanceof MatAutocompleteSelectedEvent) {
471+
this.gridsterService.selectedDataField.dataRef.component.name = $event.option.value;
472+
} else {
473+
this.gridsterService.selectedDataField.dataRef.component.name = $event.target.value;
474+
}
455475
}
456476

457477
taskRefTitle(option: EnumerationFieldValue) {
@@ -515,4 +535,41 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
515535
numberOfActions(): number {
516536
return this.modelService.numberOfTransitionActions(this.transition);
517537
}
538+
539+
filteredComponents(component: PetriflowComponent): Array<ComponentDef> {
540+
const componentDefs: DataRefDef = this._fieldListService.fieldListArray.find(type => type.type === this.dataVariable.type);
541+
if (!componentDefs) {
542+
return [];
543+
}
544+
return componentDefs.components.filter(def => def.name !== undefined && def.title.toLowerCase().includes(component.name));
545+
}
546+
547+
public filteredProperties(component: PetriflowComponent, propertyName: string): Array<PropertyDef> {
548+
const componentDefs: DataRefDef = this._fieldListService.fieldListArray.find(type => type.type === this.dataVariable.type);
549+
if (!componentDefs) {
550+
return [];
551+
}
552+
const propertyDefs: ComponentDef = componentDefs.components.find(compDef => {
553+
return (!component.name && !compDef.name) || (!!component.name && !!compDef.name && component.name === compDef.name);
554+
});
555+
if (!propertyDefs || !propertyDefs.properties) {
556+
return [];
557+
}
558+
const existingProperties = component.properties.map(compProperty => compProperty.key);
559+
return propertyDefs.properties.filter(propDef => propDef.name.includes(propertyName) && !existingProperties.includes(propDef.name));
560+
}
561+
562+
public setPropertyDefaultValue($event: MatAutocompleteSelectedEvent, index: number, component: PetriflowComponent): void {
563+
component.properties[index].value = this._fieldListService.fieldListArray
564+
.find(type => type.type === this.dataVariable.type)?.components
565+
.find(compDef => (!component.name && !compDef.name) || (!!component.name && !!compDef.name && component.name === compDef.name))?.properties
566+
.find(propDef => propDef.name === $event.option.value).defaultValue;
567+
}
568+
569+
public cloneProperty(source: DataRef | DataVariable, target: DataRef | DataVariable, property: string): void {
570+
if (!(property in source)) {
571+
return;
572+
}
573+
target[property] = source[property].clone();
574+
}
518575
}

‎src/app/form-builder/field-list/field-list.component.ts‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import {MatDialog} from '@angular/material/dialog';
33
import {ModelService} from '../../modeler/services/model/model.service';
44
import {GridsterService} from '../gridster/gridster.service';
55
import {Router} from '@angular/router';
6-
import {FieldListService} from './field-list.service';
7-
import {DataType, DataVariable} from '@netgrif/petriflow';
6+
import {ComponentDef, FieldListService} from './field-list.service';
7+
import {DataType, DataVariable, Property} from '@netgrif/petriflow';
88
import {timer} from 'rxjs';
99
import {MatExpansionPanel} from '@angular/material/expansion';
1010
import {MatSnackBar} from '@angular/material/snack-bar';
@@ -95,6 +95,9 @@ export class FieldListComponent implements OnInit, AfterViewInit {
9595
if (meta.cols) {
9696
$event.dataTransfer.setData('cols', meta.cols);
9797
}
98+
if (meta.properties) {
99+
$event.dataTransfer.setData('properties', JSON.stringify(meta.properties));
100+
}
98101
this.dragStartHandler($event, false);
99102
}
100103

@@ -104,10 +107,13 @@ export class FieldListComponent implements OnInit, AfterViewInit {
104107
if (datafield.component?.name) {
105108
const meta = this.fieldListService.fieldListArray.find(type => type.type === datafield.type).components.find(c => c?.name === datafield.component.name);
106109
if (meta?.rows) {
107-
$event.dataTransfer.setData('rows', meta.rows);
110+
$event.dataTransfer.setData('rows', `${meta.rows}`);
108111
}
109112
if (meta?.cols) {
110-
$event.dataTransfer.setData('cols', meta.cols);
113+
$event.dataTransfer.setData('cols', `${meta.cols}`);
114+
}
115+
if (meta?.properties) {
116+
$event.dataTransfer.setData('properties', JSON.stringify(meta.properties));
111117
}
112118
}
113119
this.dragStartHandler($event, true);
@@ -141,13 +147,18 @@ export class FieldListComponent implements OnInit, AfterViewInit {
141147
this.addDataRef(field, meta);
142148
}
143149

144-
private addDataRef(data: DataVariable, meta: any) {
145-
this.gridsterService.addDataRef(data, meta.rows, meta.cols, meta.name, {
150+
private addDataRef(data: DataVariable, meta: ComponentDef) {
151+
const dataRef = this.gridsterService.addDataRef(data, meta.rows, meta.cols, meta.name, {
146152
x: 0,
147153
y: 0,
148154
rows: meta.rows,
149155
cols: meta.cols
150156
} as GridsterItem);
157+
if (meta.name && meta.properties) {
158+
for (const property of meta.properties) {
159+
dataRef.component.properties.push(new Property(property.name, property.defaultValue));
160+
}
161+
}
151162
this.gridsterService.options.api.optionsChanged();
152163
}
153164

0 commit comments

Comments
 (0)