Skip to content

[NAB-368] Component parameters #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mazarijuraj merged 8 commits into from
Apr 14, 2025
Merged

[NAB-368] Component parameters #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
58830d9
[NAB-368] - Component parameters
mazarijuraj Dec 4, 2024
d18b24b
[NAB-368] - Component parameters
mazarijuraj Dec 9, 2024
e9793d9
[NAB-368] - Component parameters
mazarijuraj Dec 16, 2024
64308d0
Merge remote-tracking branch 'origin/next' into NAB-368
camperko Mar 27, 2025
60a15d2
[NAB-368] Component parameters
camperko Apr 1, 2025
dd50cba
Merge branch 'next' into NAB-368
mazarijuraj Apr 7, 2025
c9b7fa2
[NAB-368] Component parameters
camperko Apr 8, 2025
1c6ba63
Merge remote-tracking branch 'origin/NAB-368' into NAB-368
mazarijuraj Apr 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 38 additions & 7 deletions src/app/form-builder/edit-panel/edit-panel.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <h5 class="full-width margin-html">Delegate event</h5>
<div *ngIf="isSomeGridsterFieldSelected()">
<h4 class="full-width margin-html">
Id: {{ dataVariable.id }}
<button *ngIf="isSomeGridsterFieldSelected()" mat-icon-button matTooltip="Refactor field ID"
<button mat-icon-button matTooltip="Refactor field ID"
(click)="openRefactorDialog($event, dataVariable)">
<mat-icon>edit</mat-icon>
</button>
Expand All @@ -78,7 +78,7 @@ <h4 class="full-width margin-html">
</mat-form-field>
</div>

<div *ngIf="isSomeGridsterFieldSelected()">
<div>
<mat-form-field class="full-width margin-html">
<mat-label>Title</mat-label>
<input matInput type="text" [(ngModel)]="dataVariable.title.value" (change)="notifyGridster()">
Expand Down Expand Up @@ -199,14 +199,25 @@ <h4 class="full-width margin-html">
<div *ngIf="dataVariable.component !== undefined" class="full-width">
<mat-form-field class="full-width margin-html">
<mat-label>Component Name</mat-label>
<input matInput [(ngModel)]="dataVariable.component.name" (change)="setComponent($event);notifyGridster()">
<input matInput [(ngModel)]="dataVariable.component.name" (change)="setComponent($event);notifyGridster()"
[formControl]="componentNameFormCtrl" [matAutocomplete]="componentAutocomplete">
<mat-autocomplete #componentAutocomplete="matAutocomplete" (optionSelected)="setComponent($event);notifyGridster()">
<mat-option *ngFor="let componentDef of filteredComponents(dataVariable.component)" [value]="componentDef.name">
{{componentDef.title}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<div>
<div *ngIf="dataVariable.component.properties.length > 0">
<div *ngFor="let property of dataVariable.component.properties; let i = index" class="margin-html properties">
<mat-form-field class="margin-right8px">
<input matInput type="text" placeholder="Key" [value]="property.key"
<input matInput type="text" placeholder="Key" [value]="property.key" [matAutocomplete]="propertyAutocomplete"
(change)="setPropertyKey($event, i, dataVariable.component) ;notifyGridster()">
<mat-autocomplete #propertyAutocomplete="matAutocomplete" (optionSelected)="setPropertyKey($event, i, dataVariable.component);notifyGridster()">
<mat-option *ngFor="let propertyDef of filteredProperties(dataVariable.component, property.key)" [value]="propertyDef.name">
{{propertyDef.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="margin-right8px">
<input matInput type="text" placeholder="Value" [value]="property.value"
Expand All @@ -228,6 +239,11 @@ <h4 class="full-width margin-html">
<mat-icon>add</mat-icon>
Add property
</button>
<button mat-stroked-button color="primary" class="button-text save-button"
(click)="cloneProperty(dataVariable, dataRef, 'component')">
<mat-icon>move_down</mat-icon>
Copy to DataRef
</button>
<div *ngIf="isIconEnumeration(dataVariable.type, dataVariable?.component)">
<div *ngIf="dataVariable.component.icons.length > 0; else noIcons">
<div *ngFor="let icon of dataVariable.component.icons; let i = index" class="margin-html properties">
Expand Down Expand Up @@ -272,15 +288,25 @@ <h4 class="full-width margin-html">
<div *ngIf="dataRef.component !== undefined" class="full-width">
<mat-form-field class="full-width">
<mat-label>Component Name</mat-label>
<input matInput [(ngModel)]="dataRef.component.name"
(change)="setDataRefComponent($event);notifyGridster()">
<input matInput [(ngModel)]="dataRef.component.name" (change)="setDataRefComponent($event);notifyGridster()"
[formControl]="dataRefComponentNameFormCtrl" [matAutocomplete]="dataRefComponentAutocomplete">
<mat-autocomplete #dataRefComponentAutocomplete="matAutocomplete" (optionSelected)="setComponent($event);notifyGridster()">
<mat-option *ngFor="let componentDef of filteredComponents(dataRef.component)" [value]="componentDef.name">
{{componentDef.title}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<div>
<div *ngIf="dataRef.component.properties.length > 0">
<div *ngFor="let property of dataRef.component.properties; let i = index" class="margin-html properties">
<mat-form-field class="margin-right8px">
<input matInput type="text" placeholder="Key" [value]="property.key"
<input matInput type="text" placeholder="Key" [value]="property.key" [matAutocomplete]="dataRefPropertyAutocomplete"
(change)="setPropertyKey($event, i, dataRef.component) ;notifyGridster()">
<mat-autocomplete #dataRefPropertyAutocomplete="matAutocomplete" (optionSelected)="setPropertyKey($event, i, dataRef.component);notifyGridster()">
<mat-option *ngFor="let propertyDef of filteredProperties(dataRef.component, property.key)" [value]="propertyDef.name">
{{propertyDef.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="margin-right8px">
<input matInput type="text" placeholder="Value" [value]="property.value"
Expand All @@ -303,6 +329,11 @@ <h4 class="full-width margin-html">
<mat-icon>add</mat-icon>
Add property
</button>
<button mat-stroked-button color="primary" class="button-text save-button"
(click)="cloneProperty(dataRef, dataVariable, 'component')">
<mat-icon>move_up</mat-icon>
Copy to DataField
</button>
<div *ngIf="isIconEnumeration(dataVariable.type, dataRef.component)" >
<div *ngIf="dataRef.component.icons.length > 0; else noIcons">
<div *ngFor="let icon of dataRef.component.icons; let i = index" class="margin-html properties">
Expand Down
71 changes: 64 additions & 7 deletions src/app/form-builder/edit-panel/edit-panel.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ import {DATE_FORMAT, DATE_TIME_FORMAT, EnumerationFieldValue} from '@netgrif/com
import {Router} from '@angular/router';
import {ActionsModeService} from '../../modeler/actions-mode/actions-mode.service';
import {ActionsMasterDetailService} from '../../modeler/actions-mode/actions-master-detail.setvice';
import {ComponentDef, DataRefDef, FieldListService, PropertyDef} from '../field-list/field-list.service';
import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';

@Component({
selector: 'nab-edit-panel',
Expand Down Expand Up @@ -72,15 +74,18 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
filteredOptions: Observable<Array<EnumerationFieldValue>>;
formControlRef: FormControl;
transitionOptions: Array<EnumerationFieldValue>;

behaviorOptions;

componentNameFormCtrl: FormControl;
dataRefComponentNameFormCtrl: FormControl;

constructor(public gridsterService: GridsterService,
public modelService: ModelService,
private dialog: MatDialog,
private transitionService: SelectedTransitionService,
private _router: Router,
private _actionMode: ActionsModeService,
private _fieldListService: FieldListService,
private _actionsMasterDetail: ActionsMasterDetailService) {
// this.transitionOptions = [];
this.formControlRef = new FormControl();
Expand All @@ -92,6 +97,8 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
}

ngOnInit() {
this.componentNameFormCtrl = new FormControl();
this.dataRefComponentNameFormCtrl = new FormControl();
this.transId = this.transitionService.id;
if (this.transId === null) {
this.numOfCols = ModelerConfig.LAYOUT_DEFAULT_COLS;
Expand Down Expand Up @@ -408,8 +415,13 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
return false;
}

setPropertyKey($event, index: number, component: PetriflowComponent) {
component.properties[index].key = $event.target.value;
public setPropertyKey($event, index: number, component: PetriflowComponent): void {
if ($event instanceof MatAutocompleteSelectedEvent) {
component.properties[index].key = $event.option.value;
this.setPropertyDefaultValue($event, index, component);
} else {
component.properties[index].key = $event.target.value;
}
}

setPropertyValue($event, index: number, component: PetriflowComponent) {
Expand Down Expand Up @@ -440,18 +452,26 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
}
}

setComponent($event) {
public setComponent($event): void {
if (!this.gridsterService.selectedDataField.dataVariable.component) {
this.gridsterService.selectedDataField.dataVariable.component = new PetriflowComponent('');
}
this.gridsterService.selectedDataField.dataVariable.component.name = $event.target.value;
if ($event instanceof MatAutocompleteSelectedEvent) {
this.gridsterService.selectedDataField.dataVariable.component.name = $event.option.value;
} else {
this.gridsterService.selectedDataField.dataVariable.component.name = $event.target.value;
}
}

setDataRefComponent($event) {
public setDataRefComponent($event): void {
if (!this.gridsterService.selectedDataField.dataRef.component) {
this.gridsterService.selectedDataField.dataRef.component = new PetriflowComponent('');
}
this.gridsterService.selectedDataField.dataRef.component.name = $event.target.value;
if ($event instanceof MatAutocompleteSelectedEvent) {
this.gridsterService.selectedDataField.dataRef.component.name = $event.option.value;
} else {
this.gridsterService.selectedDataField.dataRef.component.name = $event.target.value;
}
}

taskRefTitle(option: EnumerationFieldValue) {
Expand Down Expand Up @@ -515,4 +535,41 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
numberOfActions(): number {
return this.modelService.numberOfTransitionActions(this.transition);
}

filteredComponents(component: PetriflowComponent): Array<ComponentDef> {
const componentDefs: DataRefDef = this._fieldListService.fieldListArray.find(type => type.type === this.dataVariable.type);
if (!componentDefs) {
return [];
}
return componentDefs.components.filter(def => def.name !== undefined && def.title.toLowerCase().includes(component.name));
}

public filteredProperties(component: PetriflowComponent, propertyName: string): Array<PropertyDef> {
const componentDefs: DataRefDef = this._fieldListService.fieldListArray.find(type => type.type === this.dataVariable.type);
if (!componentDefs) {
return [];
}
const propertyDefs: ComponentDef = componentDefs.components.find(compDef => {
return (!component.name && !compDef.name) || (!!component.name && !!compDef.name && component.name === compDef.name);
});
if (!propertyDefs || !propertyDefs.properties) {
return [];
}
const existingProperties = component.properties.map(compProperty => compProperty.key);
return propertyDefs.properties.filter(propDef => propDef.name.includes(propertyName) && !existingProperties.includes(propDef.name));
}

public setPropertyDefaultValue($event: MatAutocompleteSelectedEvent, index: number, component: PetriflowComponent): void {
component.properties[index].value = this._fieldListService.fieldListArray
.find(type => type.type === this.dataVariable.type)?.components
.find(compDef => (!component.name && !compDef.name) || (!!component.name && !!compDef.name && component.name === compDef.name))?.properties
.find(propDef => propDef.name === $event.option.value).defaultValue;
}

public cloneProperty(source: DataRef | DataVariable, target: DataRef | DataVariable, property: string): void {
if (!(property in source)) {
return;
}
target[property] = source[property].clone();
}
}
23 changes: 17 additions & 6 deletions src/app/form-builder/field-list/field-list.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import {MatDialog} from '@angular/material/dialog';
import {ModelService} from '../../modeler/services/model/model.service';
import {GridsterService} from '../gridster/gridster.service';
import {Router} from '@angular/router';
import {FieldListService} from './field-list.service';
import {DataType, DataVariable} from '@netgrif/petriflow';
import {ComponentDef, FieldListService} from './field-list.service';
import {DataType, DataVariable, Property} from '@netgrif/petriflow';
import {timer} from 'rxjs';
import {MatExpansionPanel} from '@angular/material/expansion';
import {MatSnackBar} from '@angular/material/snack-bar';
Expand Down Expand Up @@ -95,6 +95,9 @@ export class FieldListComponent implements OnInit, AfterViewInit {
if (meta.cols) {
$event.dataTransfer.setData('cols', meta.cols);
}
if (meta.properties) {
$event.dataTransfer.setData('properties', JSON.stringify(meta.properties));
}
this.dragStartHandler($event, false);
}

Expand All @@ -104,10 +107,13 @@ export class FieldListComponent implements OnInit, AfterViewInit {
if (datafield.component?.name) {
const meta = this.fieldListService.fieldListArray.find(type => type.type === datafield.type).components.find(c => c?.name === datafield.component.name);
if (meta?.rows) {
$event.dataTransfer.setData('rows', meta.rows);
$event.dataTransfer.setData('rows', `${meta.rows}`);
}
if (meta?.cols) {
$event.dataTransfer.setData('cols', meta.cols);
$event.dataTransfer.setData('cols', `${meta.cols}`);
}
if (meta?.properties) {
$event.dataTransfer.setData('properties', JSON.stringify(meta.properties));
}
}
this.dragStartHandler($event, true);
Expand Down Expand Up @@ -141,13 +147,18 @@ export class FieldListComponent implements OnInit, AfterViewInit {
this.addDataRef(field, meta);
}

private addDataRef(data: DataVariable, meta: any) {
this.gridsterService.addDataRef(data, meta.rows, meta.cols, meta.name, {
private addDataRef(data: DataVariable, meta: ComponentDef) {
const dataRef = this.gridsterService.addDataRef(data, meta.rows, meta.cols, meta.name, {
x: 0,
y: 0,
rows: meta.rows,
cols: meta.cols
} as GridsterItem);
if (meta.name && meta.properties) {
for (const property of meta.properties) {
dataRef.component.properties.push(new Property(property.name, property.defaultValue));
}
}
this.gridsterService.options.api.optionsChanged();
}

Expand Down
Loading