[NAE-2462] Builder component decomposition

package.json

@@ -34,7 +34,7 @@
         "lint": "ng lint",
         "e2e": "ng e2e",
         "ncc:clean": "node projects/netgrif-components-core/src/scripts/delete-local-build-link.js",
-        "ncc:build": "npm run ncc:clean && ng build netgrif-components-core --configuration production && npm run ncc:build-schematics && npm run pfql:build-grammar",
+        "ncc:build": "npm run ncc:clean && npm run pfql:build-grammar && ng build netgrif-components-core --configuration production && npm run ncc:build-schematics",
         "ncc:local-build": "npm run ncc:build && npm i ./dist/netgrif-components-core --save-optional --legacy-peer-deps",
         "ncc:build-schematics": "node projects/netgrif-components-core/src/scripts/build-schematics.js",
         "ncc:lint": "ng lint netgrif-components-core",
@@ -86,7 +86,7 @@
         "@mdi/angular-material": "^7.2.96",
         "@mdi/font": "^7.4.47",
         "@netgrif/petri.svg": "1.1.1",
-        "@netgrif/petriflow": "2.2.3",
+        "@netgrif/petriflow": "2.2.4",
         "@netgrif/petriflow.svg": "1.1.1",
         "@ngbracket/ngx-layout": "^17.0.1",
         "@ngx-translate/core": "~15.0.0",

projects/netgrif-components-core/src/lib/data-fields/filter-field/abstract-filter-field-content.component.spec.ts

@@ -8,8 +8,7 @@ import {Subject} from 'rxjs';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {FieldTypeResource} from "../../task-content/model/field-type-resource";
-import {DATA_FIELD_PORTAL_DATA} from "@netgrif/components-core";
-import {DataFieldPortalData} from "../models/data-field-portal-data-injection-token";
+import {DATA_FIELD_PORTAL_DATA, DataFieldPortalData} from "../models/data-field-portal-data-injection-token";
 import {FormControl} from "@angular/forms";
 
 describe('AbstractFilterFieldContentComponent', () => {

projects/netgrif-components-core/src/lib/data-fields/models/component.ts

@@ -17,6 +17,7 @@ export enum ComponentPrefixes {
     NUMBER = 'number-',
     TASK_REF = 'task-ref-',
     CASE_REF = 'case-ref-',
+    PROCESS_REF = 'process-ref-',
     TEXT = 'text-',
     USER = 'user-',
     USER_LIST = 'user-list-',

projects/netgrif-components-core/src/lib/data-fields/process-ref-field/model/process-ref-field.ts

@@ -0,0 +1,18 @@
+import {DataField} from '../../models/abstract-data-field';
+import {Behavior} from '../../models/behavior';
+import {Layout} from '../../models/layout';
+import {Validation} from '../../models/validation';
+import {Component, ComponentPrefixes} from '../../models/component';
+
+export class ProcessRefField extends DataField<Array<string>> {
+
+    constructor(stringId: string, title: string, initialValue: Array<string>, behavior: Behavior,
+                placeholder?: string, description?: string, layout?: Layout, validations?: Array<Validation>, component?: Component,
+                parentTaskId?: string) {
+        super(stringId, title, initialValue, behavior, placeholder, description, layout, validations, component, parentTaskId);
+    }
+
+    public getTypedComponentType(): string {
+        return ComponentPrefixes.PROCESS_REF + this.getComponentType();
+    }
+}

projects/netgrif-components-core/src/lib/data-fields/process-ref-field/process-ref-default/abstract-process-ref-default.component.ts

@@ -0,0 +1,28 @@
+import {Component, Inject, Injector, Optional, Type} from '@angular/core';
+import {DATA_FIELD_PORTAL_DATA, DataFieldPortalData} from '../../models/data-field-portal-data-injection-token';
+import {AbstractBaseDataFieldComponent} from '../../base-component/abstract-base-data-field.component';
+import {ComponentPortal} from '@angular/cdk/portal';
+import {ProcessRefField} from '../model/process-ref-field';
+
+@Component({
+    selector: 'ncc-abstract-process-ref-default',
+    template: ''
+})
+export abstract class AbstractProcessRefDefaultComponent extends AbstractBaseDataFieldComponent<ProcessRefField> {
+
+    public componentPortal: ComponentPortal<any>;
+
+    protected constructor(protected injector: Injector,
+                          protected builderComponent: Type<any>,
+                          @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<ProcessRefField>) {
+        super(dataFieldPortalData);
+    }
+
+    createPortal() {
+        const portalInjector = Injector.create({
+            providers: [],
+            parent: this.injector
+        });
+        this.componentPortal = new ComponentPortal(this.builderComponent, null, portalInjector);
+    }
+}

projects/netgrif-components-core/src/lib/data-fields/public-api.ts

@@ -67,6 +67,8 @@ export * from './task-ref-field/task-ref-dashboard-field/task-ref-dashboard-tile
 export * from './task-ref-field/task-ref-dashboard-field/abstract-task-ref-dashboard-field.component';
 export * from './task-ref-field/task-ref-list-field/abstract-task-ref-list-field.component';
 export * from './case-ref-field/case-ref-default/case-ref-default.component';
+export * from './process-ref-field/process-ref-default/abstract-process-ref-default.component';
+export * from './process-ref-field/model/process-ref-field';
 export * from './case-ref-field/model/case-ref-injection-tokens';
 export * from './string-collection-field/string-collection-default-field/abstract-string-collection-default-field.component';
 

projects/netgrif-components-core/src/lib/search/search-service/search.service.spec.ts

@@ -20,16 +20,14 @@ import {of} from 'rxjs';
 import {SimpleFilter} from '../../filter/models/simple-filter';
 import {PetriNetRequestBody} from '../../resources/interface/petri-net-request-body';
 import {TaskSearchRequestBody} from "../../filter/models/task-search-request-body";
-import {
-    MockUserService,
-    User,
-    UserService
-} from "@netgrif/components-core";
 import {Injectable} from "@angular/core";
 import {PfqlVisitor} from "../../pfql/pfql-visitor";
 import {AuthenticationModule} from "../../authentication/authentication.module";
 import {NAE_IGNORE_NETS_ON_AUTOCOMPLETE_CATEGORY} from "../category-factory/search-categories-injection-token";
 import {RouterTestingModule} from "@angular/router/testing";
+import {UserService} from "../../user/services/user.service";
+import {MockUserService} from "../../utility/tests/mocks/mock-user.service";
+import {User} from "../../user/models/user";
 
 describe('SearchService', () => {
     let service: SearchService;

projects/netgrif-components-core/src/lib/task-content/model/field-type-resource.ts

@@ -18,6 +18,7 @@ export enum FieldTypeResource {
     MULTICHOICE_MAP = 'multichoice_map',
     TASK_REF = 'taskRef',
     CASE_REF = 'caseRef',
+    PROCESS_REF = 'processRef',
     CASE_FILTER = 'caseFilter',
     TASK_FILTER = 'taskFilter',
     PROCESS_FILTER = 'processFilter',

projects/netgrif-components-core/src/lib/task-content/services/field-converter.service.ts

@@ -26,6 +26,7 @@ import {UserListValue} from '../../data-fields/user-list-field/models/user-list-
 import {decodeBase64, encodeBase64} from "../../utility/base64";
 import {CaseRefField} from '../../data-fields/case-ref-field/model/case-ref-field';
 import {StringCollectionField} from '../../data-fields/string-collection-field/models/string-collection-field';
+import {ProcessRefField} from '../../data-fields/process-ref-field/model/process-ref-field';
 
 @Injectable({
     providedIn: 'root'
@@ -108,6 +109,9 @@ export class FieldConverterService {
             case FieldTypeResource.CASE_REF:
                 return new CaseRefField(item.stringId, item.name, item.value ? item.value : [], item.behavior,
                     item.placeholder, item.description, item.layout, item.validations, item.component, item.parentTaskId);
+            case FieldTypeResource.PROCESS_REF:
+                return new ProcessRefField(item.stringId, item.name, item.value ? item.value : [], item.behavior,
+                    item.placeholder, item.description, item.layout, item.validations, item.component, item.parentTaskId);
             case FieldTypeResource.CASE_FILTER:
             case FieldTypeResource.TASK_FILTER:
             case FieldTypeResource.PROCESS_FILTER:
@@ -153,6 +157,8 @@ export class FieldConverterService {
             return FieldTypeResource.I18N;
         } else if (item instanceof CaseRefField) {
             return FieldTypeResource.CASE_REF;
+        } else if (item instanceof ProcessRefField) {
+            return FieldTypeResource.PROCESS_REF;
         } else if (item instanceof StringCollectionField) {
             return FieldTypeResource.STRING_COLLECTION;
         }

projects/netgrif-components-core/src/lib/user/services/user.service.ts

@@ -66,10 +66,6 @@ export class UserService implements OnDestroy {
         return this._userChange$.asObservable();
     }
 
-    get anonymousUser(): User {
-        return this.anonymousUser;
-    }
-
     get anonymousUser$(): Observable<User> {
         return this._anonymousUserChange$.asObservable();
     }

projects/netgrif-components/package.json

@@ -48,7 +48,7 @@
         "@mdi/angular-material": "^7.2.96",
         "@mdi/font": "^7.4.47",
         "@netgrif/petri.svg": "1.1.1",
-        "@netgrif/petriflow": "2.2.3",
+        "@netgrif/petriflow": "2.2.4",
         "@netgrif/petriflow.svg": "1.1.1",
         "@ngx-translate/core": "~15.0.0",
         "@ngx-translate/http-loader": "~8.0.0",

projects/netgrif-components/src/lib/builder/builder.component.ts

@@ -1,11 +1,20 @@
-import {ChangeDetectionStrategy, Component, Inject, Optional} from '@angular/core';
+import {Component, Inject, Optional, Type, OnDestroy} from '@angular/core';
 import {BuilderMode, BuilderModeService} from "./services/builder-mode.service";
 import {ModelService} from "./modeler/services/model/model.service";
 import {ActivatedRoute, Router} from "@angular/router";
 import {MatDialog} from "@angular/material/dialog";
 import {HttpClient} from "@angular/common/http";
 import {HistoryService} from "./modeler/services/history/history.service";
-import {CaseResourceService, LoadingEmitter, NAE_TAB_DATA, ImmediateData} from "@netgrif/components-core";
+import {
+    CaseResourceService,
+    LoadingEmitter,
+    NAE_TAB_DATA,
+    ImmediateData,
+    DATA_FIELD_PORTAL_DATA,
+    CaseRefField,
+    DataFieldPortalData,
+    LoggerService
+} from "@netgrif/components-core";
 import {InjectedTabbedBuilderViewData} from "./injected-builder-data";
 import {FieldListService} from './form-builder/field-list/field-list.service';
 import {GridsterService} from './form-builder/gridster/gridster.service';
@@ -55,6 +64,8 @@
 import {BuilderIntegrationService} from "./services/builder-integration.service";
 import {TaskModeService} from "./modeler/task-mode/task-mode.service";
 import {LocalStorageService} from "./services/local-storage.service";
+import {PetriflowCanvasService} from '@netgrif/petriflow.svg';
+import {Subscription} from "rxjs";
 
 @Component({
     selector: 'nc-builder',
@@ -110,12 +121,17 @@
         I18nControlService,
         BuilderIntegrationService,
         TaskModeService,
-        LocalStorageService
+        LocalStorageService,
+        // PetriflowCanvasService is `providedIn: 'root'` in @netgrif/petriflow.svg, which would make it a
+        // single instance shared by every open builder tab (wrong canvas/model rendered on tab switch).
+        // Re-provided here so each <nc-builder> instance gets its own canvas/panzoom state.
+        {provide: PetriflowCanvasService, useClass: PetriflowCanvasService as unknown as Type<PetriflowCanvasService>}
     ]
 })
-export class BuilderComponent {
+export class BuilderComponent implements OnDestroy {
     public typeMode = BuilderMode;
     public loading: LoadingEmitter;
+    protected _reloadSub: Subscription;
 
     constructor(private modelService: ModelService, private router: Router,
                 public dialog: MatDialog,
@@ -126,14 +142,36 @@
                 public builderModeService: BuilderModeService,
                 protected _caseResourceService: CaseResourceService,
                 protected _builderIntegrationService: BuilderIntegrationService,
-                @Optional() @Inject(NAE_TAB_DATA) injectedTabData: InjectedTabbedBuilderViewData) {
+                protected _logger: LoggerService,
+                @Optional() @Inject(NAE_TAB_DATA) injectedTabData: InjectedTabbedBuilderViewData,
+                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<CaseRefField>) {
         this.loading = new LoadingEmitter(true);
-        if (injectedTabData?.processCase) {
+        if (injectedTabData !== null && injectedTabData?.processCase) {
             this._builderIntegrationService.isIntegrated = true;
             this._builderIntegrationService.processCase = injectedTabData.processCase;
             this.resolveIntegratedMode();
-            this._builderIntegrationService.reloadCase.subscribe(() => {
-                this._caseResourceService.getOneCase(this._builderIntegrationService.processCase.stringId).subscribe(processCase => {
+            this._reloadSub = this._builderIntegrationService.reloadCase.subscribe(() => {
+                this._caseResourceService.getOneCase(this._builderIntegrationService.processCase.stringId).subscribe({
+                    next: processCase => {
+                        this._builderIntegrationService.processCase = processCase;
+                        this.resolveIntegratedMode()
+                        this._builderIntegrationService.reloadModes = true;
+                    },
+                    error: error => {
+                        this._logger.error('Process case reload failed', error.message);
+                    }
+                })
+            });
+        } else if (dataFieldPortalData !== null && dataFieldPortalData?.dataField?.value?.length > 0) {
+            this._builderIntegrationService.isIntegrated = true;
+            this._caseResourceService.getOneCase(dataFieldPortalData?.dataField?.value[0]).subscribe({next: processCase => {
+                this._builderIntegrationService.processCase = processCase;
+                this.resolveIntegratedMode();
+            }, error: () => {
+                this.loading.off();
+            }})
+            this._reloadSub = this._builderIntegrationService.reloadCase.subscribe(() => {
+                this._caseResourceService.getOneCase(this._builderIntegrationService.processCase?.stringId).subscribe(processCase => {
                     this._builderIntegrationService.processCase = processCase;
                     this.resolveIntegratedMode()
                     this._builderIntegrationService.reloadModes = true;
@@ -149,6 +187,10 @@
         }
     }
 
+    ngOnDestroy(): void {
+        this._reloadSub?.unsubscribe();
+    }
+
     public onlyTaskMode() {
         return this._builderIntegrationService.isIntegrated && this._builderIntegrationService.onlyTaskView;
     }

projects/netgrif-components/src/lib/builder/builder.module.ts

@@ -1,7 +1,7 @@
-import {NgModule} from '@angular/core';
+import {Injector, NgModule} from '@angular/core';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {BuilderComponent} from './builder.component';
-import {MaterialModule} from '@netgrif/components-core';
+import {MaterialModule, ComponentRegistryService} from '@netgrif/components-core';
 import {FormBuilderModule} from './form-builder/form-builder.module';
 import {ModelerModule} from './modeler/modeler.module';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
@@ -11,11 +11,14 @@ import {TaskContentComponentModule} from '../task-content/task-content.module';
 import {MaterialIconPickerComponent} from './modeler/components/material-icon-picker/material-icon-picker.component';
 import {BuilderDialogsModule} from './dialogs/dialogs.module';
 import {FlexLayoutModule} from "@ngbracket/ngx-layout";
+import {ComponentPortal} from '@angular/cdk/portal';
+import {ProcessRefDefaultComponent} from '../data-fields/process-ref/process-ref-default/process-ref-default.component';
 
 
 @NgModule({
     declarations: [
         BuilderComponent,
+        ProcessRefDefaultComponent,
     ],
     imports: [
         BuilderDialogsModule,
@@ -34,4 +37,8 @@ import {FlexLayoutModule} from "@ngbracket/ngx-layout";
     exports: [BuilderComponent]
 })
 export class BuilderModule {
+
+    constructor(registry: ComponentRegistryService) {
+        registry.register("process-ref-default", (injector: Injector) => new ComponentPortal<any>(ProcessRefDefaultComponent, null, injector));
+    }
 }

projects/netgrif-components/src/lib/builder/builder.theme.scss

@@ -6,6 +6,18 @@
     $warn: map-get($theme, warn);
 
     // BUILDER
+
+    .single-task-fix {
+        .fix-datafield-expansion-panel {
+            .mat-expansion-panel:not(.mat-expanded) > .mat-expansion-panel-content {
+                height: 0 !important;
+            }
+
+            .mat-expansion-panel.mat-expanded > .mat-expansion-panel-content {
+                height: 100% !important;
+            }
+        }
+    }
     .svg-active-stroke {
         stroke:  mat.get-color-from-palette($accent, 500) !important;
     }
@@ -15,6 +27,10 @@
     }
 
     .builder-fix {
+        .info-label-icon {
+            color: mat.get-color-from-palette($primary, 500);
+        }
+
         .app-mat-viewnav {
             background-color: mat.get-color-from-palette($primary, 600) !important;
 

projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.html

@@ -1,4 +1,4 @@
-<mat-list class="noselect">
+<mat-list class="noselect fix-datafield-expansion-panel">
     <h3 class="field-list-heading">Data fields</h3>
 
     <mat-expansion-panel #existingFieldPanel class="field-list-expansion-panel expansion-panel-compact">

projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.ts

@@ -141,8 +141,8 @@ export class FieldListComponent implements OnInit, AfterViewInit {
     }
 
     typeTitle(type: DataType): string {
-        const name = (type as string).replace('_', ' ').replace(/([A-Z])/g, ' $1').toLowerCase();
-        return name.charAt(0).toUpperCase() + name.slice(1);
+        const name = (type as string)?.replace('_', ' ')?.replace(/([A-Z])/g, ' $1')?.toLowerCase();
+        return name ? name.charAt(0).toUpperCase() + name.slice(1) : '';
     }
 
     addNewField(type: DataType, meta: any) {

projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.service.ts

@@ -373,6 +373,13 @@ export class FieldListService {
                 {title: 'Dashboard', name: 'dashboard', cols: 4}
             ]
         },
+        {
+            type: DataType.PROCESS_REF,
+            showPlaceholder: true,
+            components: [
+                {title: 'Simple', cols: 4},
+            ]
+        },
         {
             type: DataType.CASE_REF,
             showPlaceholder: true,
@@ -403,7 +410,7 @@ export class FieldListService {
             ]
         },
         {
-            type: 'stringCollection' as DataType,
+            type: DataType.STRING_COLLECTION,
             components: [
                 {title: 'Simple'}
             ],