[NAE-1684] Frontend component for data field caseRef

Kovy95 · Kovy95 · commit 4341b1186e7f · 2022-09-15T12:03:31.000+02:00
- add highlighting
- add error handling
- add new translations
diff --git a/projects/netgrif-components-core/src/assets/i18n/de.json b/projects/netgrif-components-core/src/assets/i18n/de.json
@@ -245,7 +245,8 @@
             "maxFilesExceeded": "Die maximale Anzahl hochladbarer Dateien ist überschritten: ",
             "maxFilesSizeExceeded": "Die maximale Größe der hochgeladenen Dateien wird überschritten: ",
             "notSelectedUser": "Es wurde kein Benutzer ausgewählt",
-            "userAssigned": "Benutzer {{userName}} wurde zugewiesen"
+            "userAssigned": "Benutzer {{userName}} wurde zugewiesen",
+            "caseNetGetFailed": "Das Abrufen des Fallnetzes ist fehlgeschlagen"
         },
         "values": {
             "boolean": {
diff --git a/projects/netgrif-components-core/src/assets/i18n/en.json b/projects/netgrif-components-core/src/assets/i18n/en.json
@@ -245,7 +245,8 @@
             "maxFilesExceeded": "Maximum number of uploadable files exceeded: ",
             "maxFilesSizeExceeded": "The maximum size of uploaded files is exceeded: ",
             "notSelectedUser": "No user has been selected",
-            "userAssigned": "User {{userName}} was assigned"
+            "userAssigned": "User {{userName}} was assigned",
+            "caseNetGetFailed": "Getting case Net failed"
         },
         "values": {
             "boolean": {
diff --git a/projects/netgrif-components-core/src/assets/i18n/sk.json b/projects/netgrif-components-core/src/assets/i18n/sk.json
@@ -245,7 +245,8 @@
             "maxFilesExceeded": "Je presiahnutý maximálny počet nahratých súborov: ",
             "maxFilesSizeExceeded": "Je presiahnutá maximálna veľkosť nahrávaných súborov: ",
             "notSelectedUser": "Nebol vybraný žiadny používateľ",
-            "userAssigned": "Používateľ {{userName}} bol pridelený"
+            "userAssigned": "Používateľ {{userName}} bol pridelený",
+            "caseNetGetFailed": "Načítanie siete podľa prípadu zlyhalo"
         },
         "values": {
             "boolean": {
diff --git a/projects/netgrif-components-core/src/lib/data-fields/case-ref-field/abstract-case-ref-field.component.ts b/projects/netgrif-components-core/src/lib/data-fields/case-ref-field/abstract-case-ref-field.component.ts
@@ -12,7 +12,7 @@ import {
 } from '@netgrif/petriflow.svg';
 import {
     Arc,
-    InhibitorArc,
+    InhibitorArc, Place,
     ReadArc,
     RegularPlaceTransitionArc,
     RegularTransitionPlaceArc,
@@ -25,6 +25,10 @@ import {TransitionImport} from '../../resources/interface/transition-import';
 import {PlaceImport} from '../../resources/interface/place-import';
 import {ArcImport} from '../../resources/interface/arc-import';
 import {ArcType} from '../../resources/interface/arc-type';
+import {PetriNetImport} from '../../resources/interface/petri-net-import';
+import {LoggerService} from '../../logger/services/logger.service';
+import {SnackBarService} from '../../snack-bar/services/snack-bar.service';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
     selector: 'ncc-abstract-case-ref-field',
@@ -36,14 +40,16 @@ export abstract class AbstractCaseRefFieldComponent implements AfterViewInit {
 
     constructor(protected _petriflowCanvasService: PetriflowCanvasService, protected _petriflowFactoryService: PetriflowCanvasFactoryService,
                 protected _petriflowConfigService: PetriflowCanvasConfigurationService, protected _caseResourceService: CaseResourceService,
-                protected _petriNetResourceService: PetriNetResourceService){
+                protected _petriNetResourceService: PetriNetResourceService, protected _log: LoggerService, protected _snackBar: SnackBarService,
+                protected _translate: TranslateService) {
     }
 
     ngAfterViewInit(): void {
         this._petriNetResourceService.getNetByCaseId(this.dataField.value).subscribe(net => {
             if (net) {
                 const trans: Array<PetriflowTransition> = [];
                 const places: Array<PetriflowPlace> = [];
+                const arcs: Array<PetriflowArc<any>> = [];
                 let minX: number = Number.MAX_SAFE_INTEGER;
                 let minY: number = Number.MAX_SAFE_INTEGER;
                 net.transitions.forEach((value) => {
@@ -57,17 +63,30 @@ export abstract class AbstractCaseRefFieldComponent implements AfterViewInit {
                     minY = Math.min(minY, value.position.y);
                 })
                 net.arcs.forEach((arc) => {
-                    this.createArcs(trans, places, arc);
+                    arcs.push(this.createArcs(trans, places, arc, net));
                     arc.breakpoints?.forEach(value => {
                         minX = Math.min(minX, value.x);
                         minY = Math.min(minY, value.y);
                     });
                 });
-                this._petriflowCanvasService.panzoom?.moveTo(-minX+20, -minY+20);
-                setTimeout(() => {
-                    this._petriflowCanvasService.panzoom?.pause();
-                })
+                trans.forEach(value => {
+                    if (net.assignedTasks.includes(value.canvasElement.label.textContent)) {
+                        value.activate();
+                    }
+                    if (this.isEnabled(value, places, arcs)) {
+                        value.canvasElement.element.classList.add('svg-transition-enabled');
+                    }
+                });
+                this._petriflowCanvasService.panzoom?.moveTo(-minX + 20, -minY + 20);
+                if (this.dataField.component?.properties?.lock === 'true') {
+                    setTimeout(() => {
+                        this._petriflowCanvasService.panzoom?.pause();
+                    })
+                }
             }
+        }, error => {
+            this._log.error('Getting net by Case ID failed', error);
+            this._snackBar.openErrorSnackBar(this._translate.instant('dataField.snackBar.caseNetGetFailed'));
         });
     }
 
@@ -85,23 +104,38 @@ export abstract class AbstractCaseRefFieldComponent implements AfterViewInit {
         return place;
     }
 
-    protected createArcs(trans: Array<PetriflowTransition>, places: Array<PetriflowPlace>, arc: ArcImport) {
+    protected createArcs(trans: Array<PetriflowTransition>, places: Array<PetriflowPlace>, arc: ArcImport, net: PetriNetImport) {
         let source: PetriflowPlace | PetriflowTransition = trans.find(value => value.canvasElement.label.textContent === arc.sourceId);
         let destination: PetriflowPlace | PetriflowTransition;
+        let activable: boolean = false;
         if (source === undefined) {
             source = places.find(value => value.canvasElement.label.textContent === arc.sourceId);
             destination = trans.find(value => value.canvasElement.label.textContent === arc.destinationId);
+            if (net.assignedTasks.includes(destination.canvasElement.label.textContent)) {
+                source.activate();
+                destination.activate();
+                activable = true;
+            }
         } else {
             destination = places.find(value => value.canvasElement.label.textContent === arc.destinationId);
+            if (net.finishedTasks.includes(source.canvasElement.label.textContent)) {
+                source.activate();
+                activable = true;
+            }
         }
         if (source === undefined || destination === undefined) {
-            console.error("Can't find source or destination for arc [" + arc.importId + "]");
+            this._log.error("Can't find source or destination for arc [" + arc.importId + "]");
         } else {
             const newArc: Arc = this.createArc(arc, source, destination);
+            if (activable) {
+                newArc.activate();
+            }
             const petriflowArc: PetriflowArc<Arc> = this.createPetriflowArc(arc, newArc, source);
             this._petriflowCanvasService.canvas.container.appendChild(newArc.container);
             this._petriflowCanvasService.petriflowElementsCollection.arcs.push(petriflowArc);
+            return petriflowArc;
         }
+        return undefined
     }
 
     protected createArc(arc: ArcImport, source: PetriflowTransition | PetriflowPlace, destination: PetriflowPlace | PetriflowTransition) {
@@ -155,4 +189,40 @@ export abstract class AbstractCaseRefFieldComponent implements AfterViewInit {
             return undefined;
         }
     }
+
+    protected isEnabled(t: PetriflowTransition, places: Array<PetriflowPlace>, arcs: Array<PetriflowArc<any>>): boolean {
+        const testMarking: Map<string, number> = new Map();
+
+        for (const place of places) {
+            testMarking.set(place.canvasElement.id, place.canvasElement.tokensCount);
+        }
+        for (const arc of arcs) {
+            if (arc.element.end.id === t.canvasElement.id && (arc instanceof PetriflowInhibitorArc) && testMarking.get((arc.element.start as Place).id) >= parseInt(arc.element.multiplicity.data, 10)) {
+                return false;
+            }
+        }
+        for (const arc of arcs) {
+            if (arc.element.end.id === t.canvasElement.id && (arc instanceof PetriflowReadArc) && testMarking.get((arc.element.start as Place).id) < parseInt(arc.element.multiplicity.data, 10)) {
+                return false;
+            }
+        }
+        for (const arc of arcs) {
+            if (arc.element.end.id === t.canvasElement.id && arc instanceof PetriflowPlaceTransitionArc) {
+                const place = testMarking.get((arc.element.start as Place).id)
+                testMarking.set((arc.element.start as Place).id, place - parseInt(arc.element.multiplicity.data, 10));
+            }
+        }
+        for (const place of testMarking.values()) {
+            if (place < 0) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    public getHeight() {
+        return (this.dataField.layout && this.dataField.layout.rows && this.dataField.layout.rows) > 1 ?
+            this.dataField.layout.rows * CaseRefField.FIELD_HEIGHT : CaseRefField.FIELD_HEIGHT;
+    }
 }
diff --git a/projects/netgrif-components-core/src/lib/data-fields/case-ref-field/models/case-ref-field.ts b/projects/netgrif-components-core/src/lib/data-fields/case-ref-field/models/case-ref-field.ts
@@ -7,6 +7,8 @@ import {TextFieldView} from '../../text-field/models/text-field';
 
 export class CaseRefField extends DataField<string> {
 
+    public static FIELD_HEIGHT: number = 75;
+
     constructor(stringId: string, title: string, value: string, behavior: Behavior, placeholder?: string,
                 description?: string, layout?: Layout, validations?: Array<Validation>, _component?: Component, parentTaskId?: string) {
         super(stringId, title, value, behavior, placeholder, description, layout, validations, _component, parentTaskId);
diff --git a/projects/netgrif-components-core/src/lib/resources/interface/petri-net-import.ts b/projects/netgrif-components-core/src/lib/resources/interface/petri-net-import.ts
@@ -6,4 +6,6 @@ export interface PetriNetImport {
     transitions: Array<TransitionImport>;
     places: Array<PlaceImport>;
     arcs: Array<ArcImport>;
+    assignedTasks: Array<string>;
+    finishedTasks: Array<string>;
 }
diff --git a/projects/netgrif-components/src/lib/data-fields/case-ref-field/case-ref-field.component.html b/projects/netgrif-components/src/lib/data-fields/case-ref-field/case-ref-field.component.html
@@ -1,3 +1,3 @@
 <div class="outer">
-    <petriflow-svg-canvas class="canvas"></petriflow-svg-canvas>
+    <petriflow-svg-canvas class="canvas" [ngStyle]="{'min-height': getHeight()+'px'}"></petriflow-svg-canvas>
 </div>
diff --git a/projects/netgrif-components/src/lib/data-fields/case-ref-field/case-ref-field.component.scss b/projects/netgrif-components/src/lib/data-fields/case-ref-field/case-ref-field.component.scss
@@ -1,6 +1,5 @@
 .outer {
     display: flex;
-    min-height: 300px;
     width: 100%;
     max-height: 100%;
 }
diff --git a/projects/netgrif-components/src/lib/data-fields/case-ref-field/case-ref-field.component.spec.ts b/projects/netgrif-components/src/lib/data-fields/case-ref-field/case-ref-field.component.spec.ts
@@ -9,7 +9,9 @@ import {
     ConfigurationService,
     TestConfigurationService,
     CaseRefField,
-    PetriNetResourceService
+    PetriNetResourceService,
+    SnackBarModule,
+    ErrorSnackBarComponent
 } from '@netgrif/components-core';
 import {CaseRefFieldComponent} from './case-ref-field.component';
 import {AngularResizeEventModule} from 'angular-resize-event';
@@ -18,6 +20,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {PetriflowCanvasModule} from '@netgrif/petriflow.svg';
 import {Component} from '@angular/core';
 import {of} from 'rxjs';
+import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
 
 describe('CaseRefFieldComponent', () => {
     let component: CaseRefFieldComponent;
@@ -32,7 +35,7 @@ describe('CaseRefFieldComponent', () => {
                 HttpClientTestingModule,
                 NoopAnimationsModule,
                 PetriflowCanvasModule,
-
+                SnackBarModule
             ],
             providers: [
                 {provide: AuthenticationMethodService, useClass: MockAuthenticationMethodService},
@@ -41,8 +44,7 @@ describe('CaseRefFieldComponent', () => {
                 {provide: PetriNetResourceService, useClass: MyPetriNetResource},
             ],
             declarations: [CaseRefFieldComponent]
-        })
-            .compileComponents();
+        }).compileComponents();
         fixture = TestBed.createComponent(TestWrapperComponent);
         component = fixture.debugElement.children[0].componentInstance;
         fixture.detectChanges();
diff --git a/projects/netgrif-components/src/lib/data-fields/case-ref-field/case-ref-field.component.ts b/projects/netgrif-components/src/lib/data-fields/case-ref-field/case-ref-field.component.ts
@@ -1,10 +1,17 @@
 import {Component} from '@angular/core';
-import {AbstractCaseRefFieldComponent, CaseResourceService, PetriNetResourceService} from '@netgrif/components-core';
+import {
+    AbstractCaseRefFieldComponent,
+    CaseResourceService,
+    PetriNetResourceService,
+    LoggerService,
+    SnackBarService
+} from '@netgrif/components-core';
 import {
     PetriflowCanvasConfigurationService,
     PetriflowCanvasFactoryService,
     PetriflowCanvasService
 } from '@netgrif/petriflow.svg';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'nc-case-ref-field',
@@ -15,8 +22,10 @@ export class CaseRefFieldComponent extends AbstractCaseRefFieldComponent {
 
     constructor(protected _petriflowCanvasService: PetriflowCanvasService, protected _petriflowFactoryService: PetriflowCanvasFactoryService,
                 protected _petriflowConfigService: PetriflowCanvasConfigurationService, protected _caseResourceService: CaseResourceService,
-                protected _petriNetResourceService: PetriNetResourceService){
-        super(_petriflowCanvasService, _petriflowFactoryService, _petriflowConfigService, _caseResourceService, _petriNetResourceService);
+                protected _petriNetResourceService: PetriNetResourceService, protected _log: LoggerService, protected _snackBar: SnackBarService,
+                protected _translate: TranslateService){
+        super(_petriflowCanvasService, _petriflowFactoryService, _petriflowConfigService, _caseResourceService, _petriNetResourceService,
+            _log, _snackBar, _translate);
     }
 
 }
diff --git a/projects/netgrif-components/src/lib/data-fields/data-field.theme.scss b/projects/netgrif-components/src/lib/data-fields/data-field.theme.scss
@@ -220,5 +220,26 @@
     .form-input-error {
         border-color: mat.get-color-from-palette($warn) !important;
     }
+
+    .svg-inactive-stroke {
+        stroke: black !important;
+    }
+
+    .svg-inactive-fill {
+        fill: black !important;
+    }
+
+    .svg-active-stroke {
+        stroke: map-get($primary, A200) !important;
+    }
+
+    .svg-active-fill {
+        fill: map-get($primary, A200) !important;
+    }
+
+    .svg-transition-enabled {
+        stroke: green;
+        fill: yellowgreen;
+    }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,6 @@ export interface PetriNetImport {`
`6`	`6`	`transitions: Array<TransitionImport>;`
`7`	`7`	`places: Array<PlaceImport>;`
`8`	`8`	`arcs: Array<ArcImport>;`
	`9`	`+ assignedTasks: Array<string>;`
	`10`	`+ finishedTasks: Array<string>;`
`9`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`.outer {`
`2`	`2`	`display: flex;`
`3`		`- min-height: 300px;`
`4`	`3`	`width: 100%;`
`5`	`4`	`max-height: 100%;`
`6`	`5`	`}`