[NAB-389] Cannot change the number of columns in form editor

- fix according to PR

Author: Kovy95

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

@@ -3,15 +3,15 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
 import {GridsterService} from '../gridster/gridster.service';
 import {
     Appearance,
-    Component as PetriflowComponent, DataGroup,
+    Component as PetriflowComponent,
     DataRef,
     DataRefBehavior,
     DataType,
     DataVariable,
     I18nString,
     I18nWithDynamic,
     Icon,
-    IconType, LayoutType,
+    IconType,
     Option,
     Property,
     Template,
@@ -226,14 +226,7 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
         this.gridsterService.options.minCols = newCols;
         this.gridsterService.options.maxCols = newCols;
         this.gridsterService.options.maxItemCols = newCols;
-        if (this.modelService.model.getTransition(this.transId).dataGroups?.length > 0) {
-            this.modelService.model.getTransition(this.transId).dataGroups[0].cols = newCols;
-        } else {
-            const dataGroup = new DataGroup(`${this.transId}_0`);
-            dataGroup.layout = LayoutType.GRID;
-            dataGroup.cols = newCols;
-            this.modelService.model.getTransition(this.transId).dataGroups.push(dataGroup);
-        }
+        this.modelService.model.getTransition(this.transId).dataGroups[0].cols = newCols;
         this.gridsterService.options.api.optionsChanged();
         this.registerChange();
     }

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

@@ -2,6 +2,9 @@ import {AfterViewInit, Component, OnDestroy, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {ModelService} from '../modeler/services/model/model.service';
 import {ModelerUtils} from '../modeler/modeler-utils';
+import {ModelerConfig} from "../modeler/modeler-config";
+import {SelectedTransitionService} from "../modeler/selected-transition.service";
+import {DataGroup, LayoutType} from '@netgrif/petriflow';
 
 @Component({
     selector: 'nab-form-builder',
@@ -12,10 +15,16 @@ export class FormBuilderComponent implements AfterViewInit {
     title = 'form-builder';
     width: number;
 
-    constructor(private router: Router, private modelService: ModelService) {
+    constructor(private router: Router, private modelService: ModelService, private transitionService: SelectedTransitionService) {
         if (!this.modelService.model) {
             this.router.navigate(['/modeler']);
         }
+        if (this.modelService.model.getTransition(this.transitionService.id)?.dataGroups?.length === 0) {
+            const dataGroup = new DataGroup(`${this.transitionService.id}_0`);
+            dataGroup.layout = LayoutType.GRID;
+            dataGroup.cols = ModelerConfig.LAYOUT_DEFAULT_COLS;
+            this.modelService.model.getTransition(this.transitionService.id).dataGroups.push(dataGroup);
+        }
     }
 
     ngAfterViewInit(): void {

src/app/form-builder/gridster/gridster.service.ts

@@ -18,15 +18,15 @@ import {
     DataType,
     DataVariable,
     Expression, I18nWithDynamic,
-    LayoutType, Property,
+    Property,
     Template,
     Transition,
     TransitionLayout
 } from '@netgrif/petriflow';
 import {BehaviorSubject, ReplaySubject, Subject} from 'rxjs';
 import {DataFieldUtils} from '../data-field-utils';
 import {SelectedTransitionService} from '../../modeler/selected-transition.service';
-import {ComponentDef, FieldListService, PropertyDef} from '../field-list/field-list.service';
+import {FieldListService, PropertyDef} from '../field-list/field-list.service';
 import {ModelerConfig} from '../../modeler/modeler-config';
 import {debounceTime} from 'rxjs/operators';
 
@@ -221,12 +221,6 @@ export class GridsterService {
             dataRef.component = new Component(componentName);
         }
         const transition = this.modelService.model.getTransition(this.transitionId);
-        if (transition.dataGroups.length === 0) {
-            const dataGroup = new DataGroup(`${transition.id}_0`);
-            dataGroup.layout = LayoutType.GRID;
-            dataGroup.cols = this.options.minCols;
-            transition.dataGroups.push(dataGroup);
-        }
         transition.dataGroups[0].addDataRef(dataRef);
         if (dataVariable.type === DataType.TASK_REF && dataVariable.init?.value === this.transitionId) {
             dataVariable.init.value = undefined;