[NAE-2489] View only builder

projects/nae-example-app/src/app/doc/builder-example/builder-tabs-example.component.ts

@@ -11,7 +11,7 @@ import {TranslateService} from "@ngx-translate/core";
     templateUrl: './builder-tabs-example.component.html',
     styleUrls: ['./builder-tabs-example.component.scss'],
     providers: [
-        {provide: NAE_VIEW_ID_SEGMENT, useValue: 'all-cases'},
+        {provide: NAE_VIEW_ID_SEGMENT, useValue: 'builder-tabs'},
         {provide: NAE_TASK_FORCE_OPEN, useValue: false},
         ViewIdService
     ]

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

@@ -1,6 +1,6 @@
 <div class="height-builder">
     <nc-builder-modeler class="builder-fix" *ngIf="builderModeService.mode !== typeMode.FORM_BUILDER && (loading | async) === false"></nc-builder-modeler>
-    <nc-builder-form-builder class="builder-fix" *ngIf="builderModeService.mode === typeMode.FORM_BUILDER && !onlyTaskMode() && (loading | async) === false"></nc-builder-form-builder>
+    <nc-builder-form-builder class="builder-fix" *ngIf="builderModeService.mode === typeMode.FORM_BUILDER && (loading | async) === false"></nc-builder-form-builder>
     <div *ngIf="(loading | async)" fxFill fxLayoutAlign="center center">
         <mat-spinner ></mat-spinner>
     </div>

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

@@ -1,19 +1,19 @@
-import {Component, Inject, Optional, Type, OnDestroy} from '@angular/core';
+import {Component, Inject, OnDestroy, Optional, Type} 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 {
+    CaseRefField,
     CaseResourceService,
-    LoadingEmitter,
-    NAE_TAB_DATA,
-    ImmediateData,
     DATA_FIELD_PORTAL_DATA,
-    CaseRefField,
     DataFieldPortalData,
-    LoggerService
+    ImmediateData,
+    LoadingEmitter,
+    LoggerService,
+    NAE_TAB_DATA, ProcessRefField
 } from "@netgrif/components-core";
 import {InjectedTabbedBuilderViewData} from "./injected-builder-data";
 import {FieldListService} from './form-builder/field-list/field-list.service';
@@ -145,7 +145,7 @@ export class BuilderComponent implements OnDestroy {
                 protected _builderIntegrationService: BuilderIntegrationService,
                 protected _logger: LoggerService,
                 @Optional() @Inject(NAE_TAB_DATA) injectedTabData: InjectedTabbedBuilderViewData,
-                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<CaseRefField>,
+                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<ProcessRefField>,
                 protected _translateService: TranslateService) {
         this.loading = new LoadingEmitter(true);
         if (injectedTabData !== null && injectedTabData?.processCase) {
@@ -156,7 +156,7 @@ export class BuilderComponent implements OnDestroy {
                 this._caseResourceService.getOneCase(this._builderIntegrationService.processCase.stringId).subscribe({
                     next: processCase => {
                         this._builderIntegrationService.processCase = processCase;
-                        this.resolveIntegratedMode()
+                        this.resolveIntegratedMode();
                         this._builderIntegrationService.reloadModes = true;
                     },
                     error: error => {
@@ -166,6 +166,7 @@ export class BuilderComponent implements OnDestroy {
             });
         } else if (dataFieldPortalData !== null && dataFieldPortalData?.dataField?.value?.length > 0) {
             this._builderIntegrationService.isIntegrated = true;
+            this._builderIntegrationService.dataField = dataFieldPortalData.dataField;
             this._caseResourceService.getOneCase(dataFieldPortalData?.dataField?.value[0]).subscribe({next: processCase => {
                 this._builderIntegrationService.processCase = processCase;
                 this.resolveIntegratedMode();
@@ -175,7 +176,7 @@ export class BuilderComponent implements OnDestroy {
             this._reloadSub = this._builderIntegrationService.reloadCase.subscribe(() => {
                 this._caseResourceService.getOneCase(this._builderIntegrationService.processCase?.stringId).subscribe(processCase => {
                     this._builderIntegrationService.processCase = processCase;
-                    this.resolveIntegratedMode()
+                    this.resolveIntegratedMode();
                     this._builderIntegrationService.reloadModes = true;
                 })
             });
@@ -193,26 +194,30 @@ export class BuilderComponent implements OnDestroy {
         this._reloadSub?.unsubscribe();
     }
 
-    public onlyTaskMode() {
-        return this._builderIntegrationService.isIntegrated && this._builderIntegrationService.onlyTaskView;
-    }
-
     protected resolveIntegratedMode() {
-        if (this._builderIntegrationService.processCase.immediateData.find((data: ImmediateData) => data.stringId === 'state')?.value === 'draft') {
-            const taskId = this._builderIntegrationService.processCase.tasks.find(taskPair => taskPair.transition === 'edit')?.task;
+        const stateFieldValue: string = this._builderIntegrationService.processCase.immediateData.find((data: ImmediateData) => data.stringId === 'state')?.value;
+        const taskId = this._builderIntegrationService.processCase.tasks.find(taskPair => taskPair.transition === 'form')?.task;
+        if (stateFieldValue === 'draft') {
             this._builderIntegrationService.editTaskId = taskId;
-            this._builderIntegrationService.onlyTaskView = false;
+            const isDataFieldVisible: boolean = this._builderIntegrationService.dataField?.behavior?.visible;
+            this.builderModeService.readOnly$.next(isDataFieldVisible);
+            if (isDataFieldVisible) {
+                this._builderIntegrationService.allowedTransIds = ['view'];
+            }
             this._builderIntegrationService.getXml().subscribe(value => {
                 this.parseModel(value, BuilderMode.TASK_MODE);
                 this.loading.off();
             }, error => {
                 console.log(error);
                 this.loading.off();
             })
-        } else if (this._builderIntegrationService.processCase.immediateData.find((data: ImmediateData) => data.stringId === 'state')?.value === 'deployed') {
-            const taskId = this._builderIntegrationService.processCase.tasks.find(taskPair => taskPair.transition === 'view')?.task;
+        } else if (stateFieldValue === 'deployed' || stateFieldValue === 'archived') {
+            this.builderModeService.readOnly$.next(true);
+            const isDataFieldVisible: boolean = this._builderIntegrationService.dataField?.behavior?.visible;
+            if (isDataFieldVisible) {
+                this._builderIntegrationService.allowedTransIds = ['view'];
+            }
             this._builderIntegrationService.editTaskId = undefined;
-            this._builderIntegrationService.onlyTaskView = true;
             this._builderIntegrationService.getXml(taskId).subscribe(value => {
                 this.parseModel(value, BuilderMode.TASK_MODE);
                 this.loading.off();
@@ -221,9 +226,9 @@ export class BuilderComponent implements OnDestroy {
                 this.loading.off();
             })
         } else {
+            this.builderModeService.readOnly$.next(false);
             this.loading.off();
             this._builderIntegrationService.editTaskId = undefined;
-            this._builderIntegrationService.onlyTaskView = true;
         }
         this.builderModeService.mode = BuilderMode.TASK_MODE;
     }

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

@@ -1,7 +1,7 @@
 import {Injector, NgModule} from '@angular/core';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {BuilderComponent} from './builder.component';
-import {MaterialModule, ComponentRegistryService} from '@netgrif/components-core';
+import {MaterialModule, ComponentRegistryService, FrontActionRegistryService} 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';
@@ -14,6 +14,7 @@ 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';
 import {TranslateModule} from "@ngx-translate/core";
+import {readOnlyBuilder} from "./read-only-builder";
 
 
 @NgModule({
@@ -40,7 +41,8 @@ import {TranslateModule} from "@ngx-translate/core";
 })
 export class BuilderModule {
 
-    constructor(registry: ComponentRegistryService) {
+    constructor(registry: ComponentRegistryService, frontActionRegistry: FrontActionRegistryService) {
         registry.register("process-ref-default", (injector: Injector) => new ComponentPortal<any>(ProcessRefDefaultComponent, null, injector));
+        frontActionRegistry.register('readOnlyBuilder', readOnlyBuilder);
     }
 }

projects/netgrif-components/src/lib/builder/dialogs/dialog-arc-edit/dialog-arc-edit.component.html

@@ -6,7 +6,7 @@ <h2 mat-dialog-title>{{ 'builder.dialogs.arc-edit.editArc' | translate}}</h2>
     </mat-form-field>
     <mat-form-field fxFlex appearance="outline">
         <mat-label>{{ 'builder.dialogs.arc-edit.type' | translate}}</mat-label>
-        <mat-select [(ngModel)]="arcType" [disabled]="isTPArc()" (ngModelChange)="onTypeChange($event)">
+        <mat-select [(ngModel)]="arcType" [disabled]="isTPArc() || _builderModeService.readOnly" (ngModelChange)="onTypeChange($event)">
             <mat-select-trigger>
                 {{arcType}}
             </mat-select-trigger>
@@ -47,7 +47,7 @@ <h2 mat-dialog-title>{{ 'builder.dialogs.arc-edit.editArc' | translate}}</h2>
     </mat-form-field>
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-flat-button color="primary" [mat-dialog-close]="arc" [disabled]="multiplicityCtrl.invalid">
+    <button mat-flat-button color="primary" [mat-dialog-close]="arc" [disabled]="multiplicityCtrl.invalid || _builderModeService.readOnly">
         <mat-icon>done</mat-icon>
         <span>{{ 'builder.dialogs.arc-edit.save' | translate}}</span>
     </button>

projects/netgrif-components/src/lib/builder/dialogs/dialog-arc-edit/dialog-arc-edit.component.ts

@@ -8,6 +8,7 @@ import {ModelService} from '../../modeler/services/model/model.service';
 import {ChangedArc} from './changed-arc';
 import {CanvasToolContext} from "../../modeler/edit-mode/services/modes/canvas-tool-context";
 import {TranslateService} from "@ngx-translate/core";
+import {BuilderModeService} from "../../services/builder-mode.service";
 
 export interface ArcEditData {
     context: CanvasToolContext
@@ -48,18 +49,28 @@ export class DialogArcEditComponent implements OnInit {
         [XmlArcType.INHIBITOR, 'radio_button_unchecked'],
     ]);
     private modelService: ModelService;
+    protected _builderModeService: BuilderModeService;
+    protected _translateService: TranslateService;
 
     constructor(
         @Inject(MAT_DIALOG_DATA) public data: ArcEditData,
-        protected _translateService: TranslateService
     ) {
         this.modelService = data.context.modelService;
+        this._builderModeService = data.context.builderModeService;
+        this._translateService = data.context.translateService;
         this.arc = new ChangedArc(undefined, this.modelService.model.getArc(data.arcId).clone());
         this.formControlRef = new FormControl('');
         this.multiplicityCtrl = new FormControl('', [
             Validators.required,
             this.validMultiplicity()
         ]);
+        if (this._builderModeService.readOnly) {
+            this.multiplicityCtrl.disable();
+            this.formControlRef.disable();
+        } else {
+            this.multiplicityCtrl.enable();
+            this.formControlRef.enable();
+        }
     }
 
     ngOnInit(): void {