Merge remote-tracking branch 'origin/next' into NAB-359

Author: camperko

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netgrif/application-builder",
-    "version": "2.1.0-RC.1",
+    "version": "2.1.0-RC.2",
     "description": "Netgrif Application Builder for building, configuring and modeling applications for Application Engine.",
     "homepage": "https://builder.netgrif.com",
     "license": "SEE LICENSE IN LICENSE FILE",

src/app/app.module.ts

@@ -44,6 +44,7 @@ import {AppBuilderConfigurationService} from './app-builder-configuration.servic
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatPaginatorIntl} from '@angular/material/paginator';
 import {BuilderPaginatorIntl} from './modeler/components/master-detail/main-master/builder-paginator-inpl';
+import {DialogMarkingChangeComponent} from './dialogs/dialog-marking-change/dialog-marking-change.component';
 
 const appRoutes: Routes = [
     {
@@ -77,6 +78,7 @@ const appRoutes: Routes = [
         DialogModelEditComponent,
         MaterialIconPickerComponent,
         DialogLocalStorageModelComponent,
+        DialogMarkingChangeComponent
     ],
     imports: [
         BrowserModule,

src/app/dialogs/dialog-change-data/dialog-change-data.component.html

@@ -1,13 +1,15 @@
-<h2 mat-dialog-title>Change referenced data values</h2>
+<h2 mat-dialog-title>Change referenced data value{{dataSet.length > 1 ? 's' : ''}}</h2>
 <mat-dialog-content class="netgrif-input">
     <mat-form-field fxFlex *ngFor="let data of dataSet">
         <mat-label>{{data.id}}</mat-label>
-        <input type="number" step="1" matInput [(ngModel)]="data.value">
+        <input type="number" step="1" min="0" matInput [(ngModel)]="data.value" [formControl]="valueCtrl">
+        <mat-error *ngIf="valueCtrl.errors && valueCtrl.errors.required">Value is required</mat-error>
+        <mat-error *ngIf="valueCtrl.errors && valueCtrl.errors.validValue">Value can not be a negative number</mat-error>
     </mat-form-field>
     <span *ngIf="dataSet.length === 0">No referenced data found</span>
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-flat-button color="primary" [mat-dialog-close]="dataSet">
+    <button mat-flat-button color="primary" [mat-dialog-close]="dataSet" [disabled]="valueCtrl.invalid">
         <mat-icon>done</mat-icon>
         <span>Save</span>
     </button>

src/app/dialogs/dialog-change-data/dialog-change-data.component.ts

@@ -1,5 +1,8 @@
 import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {FormControl, ValidatorFn, Validators} from '@angular/forms';
+import {CanvasTransition} from '../../modeler/edit-mode/domain/canvas-transition';
+import {CanvasNodeElement} from '../../modeler/edit-mode/domain/canvas-node-element';
 
 export interface DataSet {
     dataSet: Map<string, number>;
@@ -18,11 +21,26 @@ export interface Data {
 export class DialogChangeDataComponent {
 
     public dataSet: Array<Data>;
+    public valueCtrl: FormControl;
 
     constructor(
         @Inject(MAT_DIALOG_DATA) public data: DataSet,
     ) {
         this.dataSet = new Array<Data>();
         data.dataSet.forEach((value, id) => this.dataSet.push({id, value}));
+        this.valueCtrl = new FormControl('', [
+            Validators.required,
+            this.validValue()
+        ]);
+    }
+
+    private validValue(): ValidatorFn {
+        return (fc: FormControl): { [key: string]: any } | null => {
+            const value = Math.floor(fc.value as number);
+            if (value !== Infinity && value === fc.value as number && value >= 0) {
+                return null;
+            }
+            return ({validMultiplicity: true})
+        };
     }
 }

src/app/dialogs/dialog-marking-change/dialog-marking-change.component.html

@@ -0,0 +1,15 @@
+<h2 mat-dialog-title>Change marking of place {{CanvasNodeElement.pretty(place)}}</h2>
+<mat-dialog-content class="netgrif-input">
+    <mat-form-field fxFlex>
+        <mat-label>Tokens</mat-label>
+        <input type="number" min="0" step="1" matInput [(ngModel)]="place.marking" [formControl]="markingCtrl">
+        <mat-error *ngIf="markingCtrl.errors && markingCtrl.errors.required">Number of tokens is required</mat-error>
+        <mat-error *ngIf="markingCtrl.errors && markingCtrl.errors.validMultiplicity">Number of tokens must be a non-negative integer</mat-error>
+    </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-flat-button color="primary" [mat-dialog-close]="place.marking" [disabled]="markingCtrl.invalid">
+        <mat-icon>done</mat-icon>
+        <span>Save</span>
+    </button>
+</mat-dialog-actions>

src/app/dialogs/dialog-marking-change/dialog-marking-change.component.scss

@@ -0,0 +1,8 @@
+mat-dialog-content {
+    display: flex;
+    flex-direction: column;
+}
+
+mat-dialog-actions {
+    justify-content: flex-end;
+}

src/app/dialogs/dialog-marking-change/dialog-marking-change.component.ts

@@ -0,0 +1,41 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {FormControl, ValidatorFn, Validators} from '@angular/forms';
+import {PlaceEditData} from '../dialog-place-edit/dialog-place-edit.component';
+import {SimulationModeService} from '../../modeler/simulation-mode/simulation-mode.service';
+import {Place} from '@netgrif/petriflow';
+import {CanvasNodeElement} from '../../modeler/edit-mode/domain/canvas-node-element';
+
+@Component({
+    selector: 'nab-dialog-marking-change',
+    templateUrl: './dialog-marking-change.component.html',
+    styleUrl: './dialog-marking-change.component.scss'
+})
+export class DialogMarkingChangeComponent {
+
+    public markingCtrl: FormControl;
+    public place: Place;
+
+    constructor(
+        @Inject(MAT_DIALOG_DATA) public data: PlaceEditData,
+        public simulationService: SimulationModeService
+    ) {
+        this.place = this.simulationService.model.getPlace(data.placeId);
+        this.markingCtrl = new FormControl('', [
+            Validators.required,
+            this.validValue()
+        ]);
+    }
+
+    private validValue(): ValidatorFn {
+        return (fc: FormControl): { [key: string]: any } | null => {
+            const value = Math.floor(fc.value as number);
+            if (value !== Infinity && value === fc.value as number && value >= 0) {
+                return null;
+            }
+            return ({validMultiplicity: true})
+        };
+    }
+
+    protected readonly CanvasNodeElement = CanvasNodeElement;
+}

src/app/dialogs/dialog-place-edit/dialog-place-edit.component.html

@@ -13,7 +13,7 @@ <h2 mat-dialog-title>Edit place</h2>
     <mat-form-field fxFlex>
         <mat-label>Tokens</mat-label>
         <input type="number" min="0" step="1" matInput [(ngModel)]="place.place.marking" [formControl]="markingCtrl">
-        <mat-error *ngIf="markingCtrl.errors && markingCtrl.errors.required">Id is required</mat-error>
+        <mat-error *ngIf="markingCtrl.errors && markingCtrl.errors.required">Number of tokens is required</mat-error>
         <mat-error *ngIf="markingCtrl.errors && markingCtrl.errors.validMarking">
             Number of tokens must be a non-negative integer
         </mat-error>

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

@@ -83,12 +83,11 @@ <h4 class="full-width margin-html">
                 <mat-label>Title</mat-label>
                 <input matInput type="text" [(ngModel)]="dataVariable.title.value" (change)="notifyGridster()">
             </mat-form-field>
-            <mat-form-field *ngIf="!isListOptionsDisplay()" class="full-width margin-html">
+            <mat-form-field class="full-width margin-html">
                 <mat-label>Placeholder</mat-label>
                 <input matInput type="text" [(ngModel)]="dataVariable.placeholder.value" (change)="notifyGridster()">
             </mat-form-field>
-            <mat-form-field *ngIf="!isBoolean() && !isButton() && !isListOptionsDisplay() && !isFile() && !isFileList()"
-                            class="full-width margin-html">
+            <mat-form-field class="full-width margin-html">
                 <mat-label>Description</mat-label>
                 <textarea matInput [(ngModel)]="dataVariable.desc.value" (change)="notifyGridster()"></textarea>
             </mat-form-field>