From b47b4f18d8d2cb61dec795ef13137ab26747eb65 Mon Sep 17 00:00:00 2001 From: chvostek Date: Fri, 2 Oct 2026 10:55:40 +0200 Subject: [PATCH 01/24] [NAE-2489] View only builder - implement isDataFieldVisible for process ref field --- .../abstract-process-ref-default.component.ts | 7 +++++++ .../process-ref-default/process-ref-default.component.ts | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/projects/netgrif-components-core/src/lib/data-fields/process-ref-field/process-ref-default/abstract-process-ref-default.component.ts b/projects/netgrif-components-core/src/lib/data-fields/process-ref-field/process-ref-default/abstract-process-ref-default.component.ts index 8481925dc..1103353ff 100644 --- a/projects/netgrif-components-core/src/lib/data-fields/process-ref-field/process-ref-default/abstract-process-ref-default.component.ts +++ b/projects/netgrif-components-core/src/lib/data-fields/process-ref-field/process-ref-default/abstract-process-ref-default.component.ts @@ -25,4 +25,11 @@ export abstract class AbstractProcessRefDefaultComponent extends AbstractBaseDat }); this.componentPortal = new ComponentPortal(this.builderComponent, null, portalInjector); } + + protected isDataFieldVisible(): boolean { + if (!this.dataField) { + return false; + } + return !!(this.dataField as ProcessRefField).behavior?.visible; + } } diff --git a/projects/netgrif-components/src/lib/data-fields/process-ref/process-ref-default/process-ref-default.component.ts b/projects/netgrif-components/src/lib/data-fields/process-ref/process-ref-default/process-ref-default.component.ts index 1f36014ac..d56d7ef32 100644 --- a/projects/netgrif-components/src/lib/data-fields/process-ref/process-ref-default/process-ref-default.component.ts +++ b/projects/netgrif-components/src/lib/data-fields/process-ref/process-ref-default/process-ref-default.component.ts @@ -20,7 +20,7 @@ export class ProcessRefDefaultComponent extends AbstractProcessRefDefaultCompone constructor(injector: Injector, @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData) { - super(injector, BuilderComponent, dataFieldPortalData) + super(injector, BuilderComponent, dataFieldPortalData); } ngOnInit() { From e722a87e2a7ac411918edd9e509f65fda838403c Mon Sep 17 00:00:00 2001 From: chvostek Date: Wed, 7 Oct 2026 08:55:11 +0200 Subject: [PATCH 02/24] [NAE-2489] View only builder - introduce injection token for builder view mode - use builder token to search tasks in task-mode.component.ts --- .../builder-view-mode-injection-token.ts | 6 ++++++ .../builder-view-mode-token-factory.ts | 10 ++++++++++ .../src/lib/builder/public-api.ts | 2 ++ .../abstract-process-ref-default.component.ts | 7 ------- .../netgrif-components-core/src/public-api.ts | 1 + .../modeler/task-mode/task-mode.component.ts | 13 +++++++++---- .../process-ref-default.component.ts | 17 +++++++++++++---- 7 files changed, 41 insertions(+), 15 deletions(-) create mode 100644 projects/netgrif-components-core/src/lib/builder/builder-view-mode-injection-token.ts create mode 100644 projects/netgrif-components-core/src/lib/builder/factories/builder-view-mode-token-factory.ts create mode 100644 projects/netgrif-components-core/src/lib/builder/public-api.ts diff --git a/projects/netgrif-components-core/src/lib/builder/builder-view-mode-injection-token.ts b/projects/netgrif-components-core/src/lib/builder/builder-view-mode-injection-token.ts new file mode 100644 index 000000000..3ab3de29a --- /dev/null +++ b/projects/netgrif-components-core/src/lib/builder/builder-view-mode-injection-token.ts @@ -0,0 +1,6 @@ +import {InjectionToken} from "@angular/core"; + +/** + * todo 2489 + */ +export const BUILDER_VIEW_MODE = new InjectionToken('BuilderViewMode'); diff --git a/projects/netgrif-components-core/src/lib/builder/factories/builder-view-mode-token-factory.ts b/projects/netgrif-components-core/src/lib/builder/factories/builder-view-mode-token-factory.ts new file mode 100644 index 000000000..c052077db --- /dev/null +++ b/projects/netgrif-components-core/src/lib/builder/factories/builder-view-mode-token-factory.ts @@ -0,0 +1,10 @@ +import {DataFieldPortalData} from "../../data-fields/models/data-field-portal-data-injection-token"; +import {ProcessRefField} from "../../data-fields/process-ref-field/model/process-ref-field"; + +/** + * todo 2489 + */ +export const builderViewModeTokenFactory = (dataFieldPortalData?: DataFieldPortalData) => { + const dataField: ProcessRefField = dataFieldPortalData?.dataField; + return !!dataField && !!dataField.behavior?.visible; +} diff --git a/projects/netgrif-components-core/src/lib/builder/public-api.ts b/projects/netgrif-components-core/src/lib/builder/public-api.ts new file mode 100644 index 000000000..f8db26edd --- /dev/null +++ b/projects/netgrif-components-core/src/lib/builder/public-api.ts @@ -0,0 +1,2 @@ +export * from './factories/builder-view-mode-token-factory'; +export * from './builder-view-mode-injection-token' diff --git a/projects/netgrif-components-core/src/lib/data-fields/process-ref-field/process-ref-default/abstract-process-ref-default.component.ts b/projects/netgrif-components-core/src/lib/data-fields/process-ref-field/process-ref-default/abstract-process-ref-default.component.ts index 1103353ff..8481925dc 100644 --- a/projects/netgrif-components-core/src/lib/data-fields/process-ref-field/process-ref-default/abstract-process-ref-default.component.ts +++ b/projects/netgrif-components-core/src/lib/data-fields/process-ref-field/process-ref-default/abstract-process-ref-default.component.ts @@ -25,11 +25,4 @@ export abstract class AbstractProcessRefDefaultComponent extends AbstractBaseDat }); this.componentPortal = new ComponentPortal(this.builderComponent, null, portalInjector); } - - protected isDataFieldVisible(): boolean { - if (!this.dataField) { - return false; - } - return !!(this.dataField as ProcessRefField).behavior?.visible; - } } diff --git a/projects/netgrif-components-core/src/public-api.ts b/projects/netgrif-components-core/src/public-api.ts index 5b29bd9d0..cc2aa5cb9 100644 --- a/projects/netgrif-components-core/src/public-api.ts +++ b/projects/netgrif-components-core/src/public-api.ts @@ -50,3 +50,4 @@ export * from './lib/actions/public-api'; export * from './lib/providers/public-api'; export * from './lib/export/public-api'; export * from './lib/pfql/public-api'; +export * from './lib/builder/public-api'; diff --git a/projects/netgrif-components/src/lib/builder/modeler/task-mode/task-mode.component.ts b/projects/netgrif-components/src/lib/builder/modeler/task-mode/task-mode.component.ts index 150424ceb..95e305bd7 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/task-mode/task-mode.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/task-mode/task-mode.component.ts @@ -17,13 +17,18 @@ import { AllowedNetsService, TaskEventNotification, TaskEvent, - NAE_DEFAULT_HEADERS + NAE_DEFAULT_HEADERS, + BUILDER_VIEW_MODE } from '@netgrif/components-core'; import {BuilderIntegrationService} from "../../services/builder-integration.service"; -const baseFilterFactory = (integrationService: BuilderIntegrationService) => { +const baseFilterFactory = (integrationService: BuilderIntegrationService, builderViewMode: boolean) => { const caseId = integrationService?.processCase?.stringId ?? "__EMPTY__" - return {filter: SimpleFilter.fromTaskQuery({case: {id: caseId}, transitionId: ['deploy', 't10', 't11', 't4', 't6', 't9', 'view']})}; + let transitionIds = ['deploy', 't10', 't11', 't4', 't6', 't9', 'view']; + if (!!builderViewMode) { + transitionIds = ['view']; + } + return {filter: SimpleFilter.fromTaskQuery({case: {id: caseId}, transitionId: transitionIds})}; }; const localAllowedNetsFactory = (factory: AllowedNetsServiceFactory) => { @@ -50,7 +55,7 @@ const localAllowedNetsFactory = (factory: AllowedNetsServiceFactory) => { { provide: NAE_BASE_FILTER, useFactory: baseFilterFactory, - deps: [BuilderIntegrationService] + deps: [BuilderIntegrationService, BUILDER_VIEW_MODE] }, { provide: AllowedNetsService, diff --git a/projects/netgrif-components/src/lib/data-fields/process-ref/process-ref-default/process-ref-default.component.ts b/projects/netgrif-components/src/lib/data-fields/process-ref/process-ref-default/process-ref-default.component.ts index d56d7ef32..75bbde247 100644 --- a/projects/netgrif-components/src/lib/data-fields/process-ref/process-ref-default/process-ref-default.component.ts +++ b/projects/netgrif-components/src/lib/data-fields/process-ref/process-ref-default/process-ref-default.component.ts @@ -3,15 +3,24 @@ import { AbstractProcessRefDefaultComponent, DATA_FIELD_PORTAL_DATA, DataFieldPortalData, - ProcessRefField + ProcessRefField, + builderViewModeTokenFactory, + BUILDER_VIEW_MODE } from '@netgrif/components-core'; import {BuilderComponent} from '../../../builder/builder.component'; import {Subscription} from 'rxjs'; @Component({ - selector: 'nc-process-ref-default', - templateUrl: './process-ref-default.component.html', - styleUrls: ['./process-ref-default.component.scss'] + selector: 'nc-process-ref-default', + templateUrl: './process-ref-default.component.html', + styleUrls: ['./process-ref-default.component.scss'], + providers: [ + { + provide: BUILDER_VIEW_MODE, + useFactory: builderViewModeTokenFactory, + deps: [[new Optional(), DATA_FIELD_PORTAL_DATA]] + } + ] }) export class ProcessRefDefaultComponent extends AbstractProcessRefDefaultComponent implements OnInit, AfterViewInit, OnDestroy { From c5d6b7e966416950a1372ffce39eac2461902dae Mon Sep 17 00:00:00 2001 From: chvostek Date: Wed, 7 Oct 2026 11:43:25 +0200 Subject: [PATCH 03/24] [NAE-2489] View only builder - introduce readOnly in builder mode service - update available items in control panel - disable editing in role detail component --- .../builder-view-mode-injection-token.ts | 6 ----- .../builder-view-mode-token-factory.ts | 10 ------- .../src/lib/builder/public-api.ts | 2 -- .../netgrif-components-core/src/public-api.ts | 1 - .../src/lib/builder/builder.component.ts | 26 +++++++++++-------- .../control-panel/control-panel.service.ts | 26 ++++++------------- .../role-detail/role-detail.component.html | 4 +-- .../role-detail/role-detail.component.ts | 18 ++++++++++--- .../role-master-item.component.html | 4 +-- .../role-master-item.component.ts | 4 ++- .../role-mode/role-mode.component.html | 13 +++++----- .../modeler/role-mode/role-mode.component.ts | 3 ++- .../modeler/task-mode/task-mode.component.ts | 10 +++---- .../services/builder-integration.service.ts | 12 ++++++++- .../builder/services/builder-mode.service.ts | 9 +++++++ .../process-ref-default.component.ts | 11 +------- 16 files changed, 79 insertions(+), 80 deletions(-) delete mode 100644 projects/netgrif-components-core/src/lib/builder/builder-view-mode-injection-token.ts delete mode 100644 projects/netgrif-components-core/src/lib/builder/factories/builder-view-mode-token-factory.ts delete mode 100644 projects/netgrif-components-core/src/lib/builder/public-api.ts diff --git a/projects/netgrif-components-core/src/lib/builder/builder-view-mode-injection-token.ts b/projects/netgrif-components-core/src/lib/builder/builder-view-mode-injection-token.ts deleted file mode 100644 index 3ab3de29a..000000000 --- a/projects/netgrif-components-core/src/lib/builder/builder-view-mode-injection-token.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {InjectionToken} from "@angular/core"; - -/** - * todo 2489 - */ -export const BUILDER_VIEW_MODE = new InjectionToken('BuilderViewMode'); diff --git a/projects/netgrif-components-core/src/lib/builder/factories/builder-view-mode-token-factory.ts b/projects/netgrif-components-core/src/lib/builder/factories/builder-view-mode-token-factory.ts deleted file mode 100644 index c052077db..000000000 --- a/projects/netgrif-components-core/src/lib/builder/factories/builder-view-mode-token-factory.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {DataFieldPortalData} from "../../data-fields/models/data-field-portal-data-injection-token"; -import {ProcessRefField} from "../../data-fields/process-ref-field/model/process-ref-field"; - -/** - * todo 2489 - */ -export const builderViewModeTokenFactory = (dataFieldPortalData?: DataFieldPortalData) => { - const dataField: ProcessRefField = dataFieldPortalData?.dataField; - return !!dataField && !!dataField.behavior?.visible; -} diff --git a/projects/netgrif-components-core/src/lib/builder/public-api.ts b/projects/netgrif-components-core/src/lib/builder/public-api.ts deleted file mode 100644 index f8db26edd..000000000 --- a/projects/netgrif-components-core/src/lib/builder/public-api.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './factories/builder-view-mode-token-factory'; -export * from './builder-view-mode-injection-token' diff --git a/projects/netgrif-components-core/src/public-api.ts b/projects/netgrif-components-core/src/public-api.ts index cc2aa5cb9..5b29bd9d0 100644 --- a/projects/netgrif-components-core/src/public-api.ts +++ b/projects/netgrif-components-core/src/public-api.ts @@ -50,4 +50,3 @@ export * from './lib/actions/public-api'; export * from './lib/providers/public-api'; export * from './lib/export/public-api'; export * from './lib/pfql/public-api'; -export * from './lib/builder/public-api'; diff --git a/projects/netgrif-components/src/lib/builder/builder.component.ts b/projects/netgrif-components/src/lib/builder/builder.component.ts index b8bb4cc7a..278ae6d7b 100644 --- a/projects/netgrif-components/src/lib/builder/builder.component.ts +++ b/projects/netgrif-components/src/lib/builder/builder.component.ts @@ -1,4 +1,4 @@ -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"; @@ -6,14 +6,14 @@ 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, + @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData, 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; }) }); @@ -199,9 +200,11 @@ export class BuilderComponent implements OnDestroy { 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; - this._builderIntegrationService.editTaskId = taskId; + this._builderIntegrationService.editTaskId = this._builderIntegrationService.processCase.tasks.find(taskPair => taskPair.transition === 'edit')?.task; this._builderIntegrationService.onlyTaskView = false; + if (this._builderIntegrationService.dataField?.behavior?.visible) { + this.builderModeService.readOnly = true; + } this._builderIntegrationService.getXml().subscribe(value => { this.parseModel(value, BuilderMode.TASK_MODE); this.loading.off(); @@ -211,6 +214,7 @@ export class BuilderComponent implements OnDestroy { }) } 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; + this.builderModeService.readOnly = true; this._builderIntegrationService.editTaskId = undefined; this._builderIntegrationService.onlyTaskView = true; this._builderIntegrationService.getXml(taskId).subscribe(value => { diff --git a/projects/netgrif-components/src/lib/builder/modeler/control-panel/control-panel.service.ts b/projects/netgrif-components/src/lib/builder/modeler/control-panel/control-panel.service.ts index 6443443f5..7fd544923 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/control-panel/control-panel.service.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/control-panel/control-panel.service.ts @@ -60,27 +60,20 @@ export class ControlPanelService { protected initialize() { this._modeRegistry = new ModeRegistry(); this._globalToolRegistry.reset(); - if (this._builderIntegrationService.isIntegrated && this._builderIntegrationService.onlyTaskView) { - this.initializeOnlyTaskMode(); - } else { - this.initializeNormalMode(); - } + this.initializeMode(); this._defaultMode = this._builderIntegrationService.isIntegrated ? this._taskModeService.mode : this._editModeService.mode; this.activate(); - if (!this._builderIntegrationService.isIntegrated || !this._builderIntegrationService.onlyTaskView) { + if (!this._builderModeService.readOnly) { this._globalToolRegistry.registerItem(this._importModelTool); - this._globalToolRegistry.registerItem(this._exportModelTool); - this._globalToolRegistry.registerItem(this._exportSvgTool); this._globalToolRegistry.registerItem(this._undoTool); this._globalToolRegistry.registerItem(this._redoTool); - } else { - this._globalToolRegistry.registerItem(this._exportModelTool); - this._globalToolRegistry.registerItem(this._exportSvgTool); } + this._globalToolRegistry.registerItem(this._exportModelTool); + this._globalToolRegistry.registerItem(this._exportSvgTool); } - protected initializeNormalMode() { + protected initializeMode() { if (this._builderIntegrationService.isIntegrated) { this.registerMode(this._taskModeService); } @@ -90,12 +83,9 @@ export class ControlPanelService { this.registerMode(this._roleModeService); this.registerMode(this._actionModeService); this.registerMode(this._i18nModeService); - this.registerMode(this._historyModeService); - } - - protected initializeOnlyTaskMode() { - this.registerMode(this._taskModeService); - this.registerMode(this._simulationModeService); + if (!this._builderModeService.readOnly) { + this.registerMode(this._historyModeService); + } } // TODO: NAB-326 fix tool vs toolgroup and dividers problem diff --git a/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-detail/role-detail.component.html b/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-detail/role-detail.component.html index a8edb0bed..29f5ab5c8 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-detail/role-detail.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-detail/role-detail.component.html @@ -15,7 +15,7 @@ {{ 'builder.modeler.role-mode.title' | translate }} - +
@@ -24,7 +24,7 @@
- + {{ 'builder.modeler.role-mode.isGlobal' | translate }}
diff --git a/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-detail/role-detail.component.ts b/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-detail/role-detail.component.ts index 0d1f093f2..aaf810891 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-detail/role-detail.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-detail/role-detail.component.ts @@ -33,23 +33,33 @@ export class RoleDetailComponent implements OnDestroy { protected _builderModeService: BuilderModeService, protected _translateService: TranslateService ) { + this.roleIdForm = new FormControl('', [ + Validators.required, + this.validUnique(), + ]); this._masterService.getSelected$().subscribe(item => { this.saveChange(); if (item === undefined) { return; } this.role = new ChangedRole(item.clone()); + this.disableRoleIdFormControlOnReadOnly(); }); - this.roleIdForm = new FormControl('', [ - Validators.required, - this.validUnique(), - ]); + this.disableRoleIdFormControlOnReadOnly(); } ngOnDestroy(): void { this.saveChange(); } + private disableRoleIdFormControlOnReadOnly() { + if (this._builderModeService.readOnly) { + this.roleIdForm.disable(); + } else { + this.roleIdForm.enable(); + } + } + private saveChange(): void { if (!this.shouldSave) { return; diff --git a/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-master-item/role-master-item.component.html b/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-master-item/role-master-item.component.html index cba76fd24..f57af34ad 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-master-item/role-master-item.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-master-item/role-master-item.component.html @@ -8,13 +8,13 @@
{{ item.title.value }}
-
+
-
+
{{ node.title }} ({{ node.actionCount.getValue() }}) -
@@ -52,14 +51,14 @@
{{ 'builder.modeler.actions-mode.action-detail.name' | translate }} - +
{{ 'builder.modeler.actions-mode.action-detail.scope' | translate }} - + {{ opt.viewValue }} diff --git a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-detail/action-detail.component.ts b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-detail/action-detail.component.ts index 6d60d9d63..3caf2e5e7 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-detail/action-detail.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-detail/action-detail.component.ts @@ -15,6 +15,7 @@ import {Scope} from '../actions-mode.component'; import {ActionsModeService} from '../actions-mode.service'; import {ActionChangedEvent} from "../action-editor/action-editor-list/action-changed-event"; import {TranslateService} from "@ngx-translate/core"; +import {BuilderModeService} from "../../../services/builder-mode.service"; @Component({ selector: 'nc-builder-action-detail', @@ -37,7 +38,8 @@ export class ActionDetailComponent implements OnInit, OnDestroy { private _masterService: ActionsMasterDetailService, private _actionEditorTreeService: ActionEditorTreeService, private _historyService: HistoryService, - private _translateService: TranslateService) { + private _translateService: TranslateService, + protected _builderModeService: BuilderModeService) { this._actions = getActions(this._translateService); this.functionScopes = [ {viewValue: this._translateService.instant('builder.modeler.actions-mode.action-detail.process'), value: FunctionScope.PROCESS}, diff --git a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.html b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.html index 01d045445..2b3981f60 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.html @@ -17,7 +17,7 @@
-
- diff --git a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.ts b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.ts index a2f580255..d19db5cf8 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.ts @@ -13,6 +13,7 @@ import {ChangeType, EditableAction} from '../classes/editable-action'; import {LeafNode} from '../classes/leaf-node'; import {ActionChangedEvent} from "../action-editor-list/action-changed-event"; import {TranslateService} from "@ngx-translate/core"; +import {BuilderModeService} from "../../../../services/builder-mode.service"; @Component({ selector: 'nc-builder-action-editor', @@ -57,26 +58,29 @@ export class ActionEditorComponent implements OnInit { public DATA_EVENT_TYPES = ['set', 'get']; public PHASE_TYPES = ['pre', 'post']; + public editorOptions: object; + constructor( private actionEditorService: ActionEditorService, private modelService: ModelService, private deleteDialog: MatDialog, - private _translateService: TranslateService + private _translateService: TranslateService, + protected _builderModeService: BuilderModeService ) { this.formControl = new FormControl(undefined, {updateOn: 'blur'}); this.actionChanged = new EventEmitter(); this.drawerOpened = new EventEmitter(); + // options: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html + this.editorOptions = { + language: 'petriflow', + scrollBeyondLastLine: false, + automaticLayout: true, + wordWrap: 'off', + colorDecorators: true, + readOnly: this._builderModeService.readOnly + }; } - // options: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html - editorOptions = { - language: 'petriflow', - scrollBeyondLastLine: false, - automaticLayout: true, - wordWrap: 'off', - colorDecorators: true - }; - onInit(editorObject) { this.editor = editorObject; this.editor.onDidChangeModelContent(e => { diff --git a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-master/action-master.component.html b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-master/action-master.component.html index 10670cd03..06e898de0 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-master/action-master.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-master/action-master.component.html @@ -16,7 +16,8 @@

{{ 'builder.modeler.actions-mode.action-master.name' | translate }}

{{ 'builder.modeler.actions-mode.action-master.scope' | translate }}

-
diff --git a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-master/action-master.component.ts b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-master/action-master.component.ts index c9d8b2d2e..c1e0ef051 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-master/action-master.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-master/action-master.component.ts @@ -9,6 +9,7 @@ import {FunctionsTool} from '../tools/functions-tool'; import {ProcessActionsTool} from '../tools/process-actions-tool'; import {ActionMasterItemComponent} from './action-master-item/action-master-item.component'; import {FunctionMasterItemComponent} from './function-master-item/function-master-item.component'; +import {BuilderModeService} from "../../../services/builder-mode.service"; @Component({ selector: 'nc-builder-action-master', @@ -19,7 +20,8 @@ export class ActionMasterComponent extends PageMasterComponent implements OnInit constructor(private _parentInjector: Injector, private _actionsModeService: ActionsModeService, - public masterService: ActionsMasterDetailService) { + public masterService: ActionsMasterDetailService, + protected _builderModeService: BuilderModeService) { super(); } @@ -34,7 +36,6 @@ export class ActionMasterComponent extends PageMasterComponent implements OnInit } else if (this._allData.length === 0) { this.masterService.select(undefined); } - }); } From a77db876f572d3f477f6f56161a86ebe52579f6b Mon Sep 17 00:00:00 2001 From: chvostek Date: Thu, 8 Oct 2026 09:41:43 +0200 Subject: [PATCH 05/24] [NAE-2489] View only builder - add read only mode to i18n mode --- .../modeler/i18n-mode/languages/languages.component.html | 3 ++- .../modeler/i18n-mode/languages/languages.component.ts | 9 ++++++++- .../i18n-mode/languages/progress/progress.component.html | 3 ++- .../i18n-mode/languages/progress/progress.component.ts | 3 ++- .../translations/i18n-field/i18n-field.component.html | 2 +- .../translations/i18n-field/i18n-field.component.ts | 3 ++- 6 files changed, 17 insertions(+), 6 deletions(-) diff --git a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/languages.component.html b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/languages.component.html index 6a01af5f0..bb9b990dd 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/languages.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/languages.component.html @@ -9,7 +9,8 @@ -
diff --git a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/languages.component.ts b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/languages.component.ts index ad2b04f76..e9d6cc7d2 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/languages.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/languages.component.ts @@ -10,6 +10,7 @@ import {I18nControlService} from "../i18n-control.service"; import {I18nModeService} from "../i18n-mode.service"; import {LanguageIconsService} from "@netgrif/components-core"; import {TranslateService} from "@ngx-translate/core"; +import {BuilderModeService} from "../../../services/builder-mode.service"; @Component({ selector: 'nc-builder-languages', @@ -30,7 +31,8 @@ export class LanguagesComponent implements OnInit, OnDestroy { protected _historyService: HistoryService, protected _languageSelect: LanguageSelectService, protected _languageIconsService: LanguageIconsService, - protected _translateService: TranslateService) { + protected _translateService: TranslateService, + protected _builderModeService: BuilderModeService) { this.localeList = Object.keys(this._languageIconsService.languageIcons) .filter(key => key !== 'xx' && key !== undefined) .map(key => { @@ -38,6 +40,11 @@ export class LanguagesComponent implements OnInit, OnDestroy { const locale = Locales.list.find(l => l.languageCode === key); return new Locale(key, lang.languageName, key, locale?.country ?? key, locale?.countryCode ?? key); }); + if (this._builderModeService.readOnly) { + this.newLocaleFormControl.disable(); + } else { + this.newLocaleFormControl.enable(); + } } ngOnInit(): void { diff --git a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/progress/progress.component.html b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/progress/progress.component.html index 2846b239b..6e5a23d5c 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/progress/progress.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/progress/progress.component.html @@ -1,7 +1,8 @@
{{locale.prettyName}} -
diff --git a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/progress/progress.component.ts b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/progress/progress.component.ts index 72ade6583..8e48a2862 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/progress/progress.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/languages/progress/progress.component.ts @@ -1,6 +1,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; import {Locale} from '../../classes/locale'; import {I18nControlService} from '../../i18n-control.service'; +import {BuilderModeService} from "../../../../services/builder-mode.service"; @Component({ selector: 'nc-builder-progress', @@ -13,7 +14,7 @@ export class ProgressComponent { @Output() deleteLocale = new EventEmitter(); @Output() selectLocale = new EventEmitter(); - constructor(private i18nControlService: I18nControlService) { + constructor(private i18nControlService: I18nControlService, protected _builderModeService: BuilderModeService) { } removeLocale() { diff --git a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/i18n-field/i18n-field.component.html b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/i18n-field/i18n-field.component.html index fb670886f..70e04c70a 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/i18n-field/i18n-field.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/i18n-field/i18n-field.component.html @@ -13,6 +13,6 @@
{{ 'builder.modeler.i18n-mode.translation' | translate }} - +
diff --git a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/i18n-field/i18n-field.component.ts b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/i18n-field/i18n-field.component.ts index bea6f535d..c068c299b 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/i18n-field/i18n-field.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/i18n-field/i18n-field.component.ts @@ -6,6 +6,7 @@ import {I18nControlService} from "../../i18n-control.service"; import {MatFormField, MatInput, MatLabel} from "@angular/material/input"; import {FlexLayoutModule} from "@ngbracket/ngx-layout"; import {TranslateModule} from "@ngx-translate/core"; +import {BuilderModeService} from "../../../../services/builder-mode.service"; @Component({ selector: 'nc-builder-i18n-field', @@ -21,7 +22,7 @@ export class I18nFieldComponent implements OnInit { private _translationField: I18nString; private _translation: I18nTranslations; - constructor(protected _i18nModeService: I18nControlService) { + constructor(protected _i18nModeService: I18nControlService, protected _builderModeService: BuilderModeService) { } ngOnInit(): void { From 18dbe5e940999c092cb386b5e310e284bf2a1fe8 Mon Sep 17 00:00:00 2001 From: chvostek Date: Thu, 8 Oct 2026 10:29:37 +0200 Subject: [PATCH 06/24] [NAE-2489] View only builder - add read only mode to data mode --- .../data-detail/data-detail.component.html | 71 ++++++++++--------- .../data-detail/data-detail.component.ts | 9 ++- .../data-master-item.component.html | 4 +- .../data-master-item.component.ts | 4 +- .../data-mode/data-mode.component.html | 13 ++-- .../modeler/data-mode/data-mode.component.ts | 5 +- .../task-ref-init-field.component.html | 3 +- .../task-ref-init-field.component.ts | 3 +- 8 files changed, 64 insertions(+), 48 deletions(-) diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.html b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.html index d56cec491..07bb45f1b 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.html @@ -11,7 +11,7 @@
@@ -21,7 +21,7 @@ {{ 'builder.modeler.data-mode.title' | translate }} - +
@@ -32,7 +32,7 @@ {{ 'builder.modeler.data-mode.type' | translate }} - + {{ opt.viewValue }} @@ -43,7 +43,7 @@
+ (change)="setValue($event,'immediate')" [disabled]="_builderModeService.readOnly">
@@ -55,7 +55,7 @@ {{ 'builder.modeler.data-mode.placeholder' | translate }} + (change)="setValue($event,'placeholder')" [disabled]="_builderModeService.readOnly">
@@ -63,7 +63,7 @@ {{ 'builder.modeler.data-mode.description' | translate }} + (change)="setValue($event,'desc')" [disabled]="_builderModeService.readOnly">
@@ -76,7 +76,7 @@
{{ 'builder.modeler.data-mode.component' | translate }}
-
@@ -86,7 +86,7 @@ {{ 'builder.modeler.data-mode.encryption' | translate }} + (change)="setValue($event,'encryption')" [disabled]="_builderModeService.readOnly">
@@ -116,7 +116,7 @@ {{ 'builder.modeler.data-mode.key' | translate }} + [value]="property.key" [matAutocomplete]="propertyAutocomplete" [disabled]="_builderModeService.readOnly"> {{propertyDef.name}} @@ -126,9 +126,9 @@ {{ 'builder.modeler.data-mode.value' | translate }} + type="text" [value]="property.value" [disabled]="_builderModeService.readOnly"> -
@@ -138,7 +138,7 @@ {{ 'builder.modeler.data-mode.empty' | translate }}
- @@ -154,7 +154,7 @@ {{ 'builder.modeler.data-mode.initialValue' | translate }} - + @@ -162,7 +162,7 @@ @case (DataType.BOOLEAN) {
{{ 'builder.modeler.data-mode.initialValue' | translate }} - + {{item.init.value}}
@@ -170,7 +170,7 @@ @case (DataType.NUMBER) { {{ 'builder.modeler.data-mode.initialValue' | translate }} - + } @case (DataType.DATE) { @@ -181,7 +181,8 @@ [matDatepicker]="datepicker" [(ngModel)]="item.init.value" (click)="datepicker.open()" - (keydown.enter)="datepicker.close()"> + (keydown.enter)="datepicker.close()" + [disabled]="_builderModeService.readOnly"> @@ -192,7 +193,8 @@ + (dateChange)="formatDateTime($event)" + [disabled]="_builderModeService.readOnly"> {{ 'builder.modeler.data-mode.initialValue' | translate }} - + {{ 'builder.modeler.data-mode.none' | translate }} {{ opt.value?.value }} @@ -223,7 +225,7 @@ {{ 'builder.modeler.data-mode.initialValue' | translate }} + [value]="getInitsValue()" multiple [disabled]="_builderModeService.readOnly"> {{ opt.value?.value }} @@ -234,7 +236,7 @@ {{ 'builder.modeler.data-mode.initialValue' | translate }} + (change)="setValue($event, 'init')" [disabled]="_builderModeService.readOnly"> } } @@ -248,7 +250,8 @@
+ (change)="setValue($event,'dynamic-init')" + [disabled]="_builderModeService.readOnly">
@@ -266,9 +269,9 @@ {{ 'builder.modeler.data-mode.processIdentifier' | translate }} + [(ngModel)]="item.allowedNets[i]" [disabled]="_builderModeService.readOnly"> - @@ -278,7 +281,7 @@ {{ 'builder.modeler.data-mode.empty' | translate }} - @@ -298,14 +301,14 @@
{{ 'builder.modeler.data-mode.expression' | translate }} - + {{ 'builder.modeler.data-mode.message' | translate }} + [(ngModel)]="validation.message.value" [disabled]="_builderModeService.readOnly"> -
@@ -315,7 +318,7 @@ {{ 'builder.modeler.data-mode.empty' | translate }} - @@ -337,13 +340,15 @@ + placeholder="{{ 'builder.modeler.data-mode.optionKey' | translate }}" [value]="item.key" + [disabled]="_builderModeService.readOnly"> + type="text" placeholder="{{ 'builder.modeler.data-mode.optionValue' | translate }}" + [value]="item.value?.value" [disabled]="_builderModeService.readOnly"> - @@ -353,7 +358,7 @@ {{ 'builder.modeler.data-mode.noOptions' | translate }} - @@ -370,7 +375,7 @@ + (change)="setValue($event,'options-init')" [disabled]="_builderModeService.readOnly">
diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts index 7628266a4..a3c9737b3 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts @@ -50,7 +50,7 @@ export interface HistoryDataSave { templateUrl: './data-detail.component.html', styleUrl: './data-detail.component.scss' }) -export class DataDetailComponent implements OnDestroy { +class DataDetailComponent implements OnDestroy { counterEnumMap = 0; formControlRef: FormControl; @@ -69,11 +69,16 @@ export class DataDetailComponent implements OnDestroy { private _actionMode: ActionsModeService, private _actionsMasterDetail: ActionsMasterDetailService, private _historyService: HistoryService, - private _builderModeService: BuilderModeService, + protected _builderModeService: BuilderModeService, private _translateService: TranslateService ) { this.formControlRef = new FormControl(); this.componentNameFormCtrl = new FormControl(); + if (this._builderModeService.readOnly) { + this.componentNameFormCtrl.disable(); + } else { + this.componentNameFormCtrl.enable(); + } this.transitionOptions = this.createTransOptions(); this._masterService.getSelected$().subscribe(obj => { if (this.historyDataSave?.save) { diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-master-item/data-master-item.component.html b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-master-item/data-master-item.component.html index b0f07984c..42f0ad6c8 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-master-item/data-master-item.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-master-item/data-master-item.component.html @@ -10,13 +10,13 @@
diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-master-item/data-master-item.component.ts b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-master-item/data-master-item.component.ts index 174cca599..efe5fff1a 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-master-item/data-master-item.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-master-item/data-master-item.component.ts @@ -4,6 +4,7 @@ import {DataVariable} from '@netgrif/petriflow'; import {DialogDeleteComponent} from '../../../dialogs/dialog-delete/dialog-delete.component'; import {AbstractMasterDetailService} from '../../components/master-detail/abstract-master-detail.service'; import {MASTER_ITEM, MASTER_SERVICE} from '../../components/master-detail/main-master-item/master-injection-tokens'; +import {BuilderModeService} from "../../../services/builder-mode.service"; @Component({ selector: 'nc-builder-data-master-item', @@ -16,7 +17,8 @@ export class DataMasterItemComponent { constructor(@Inject(MASTER_ITEM) public item: DataVariable, @Inject(MASTER_SERVICE) protected _service: AbstractMasterDetailService, - protected _dialog: MatDialog) { + protected _dialog: MatDialog, + protected _builderModeService: BuilderModeService) { } onDelete(event: MouseEvent, item: DataVariable): void { diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.html b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.html index 5cc6b0924..37612a590 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.html @@ -1,8 +1,9 @@ + [masterItemComponent]="masterItemComponent" + [masterService]="masterService" + [detailComponent]="detailComponent" + [firstColName]="'builder.modeler.data-mode.idLabel' | translate" + [secondColName]="'builder.modeler.data-mode.name' | translate" + [buttonTooltip]="'builder.modeler.data-mode.addDataVariable' | translate" + [showAddButton]="!_builderModeService.readOnly"> diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.ts b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.ts index 08087819b..2815b6cb7 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.ts @@ -1,8 +1,9 @@ import {ComponentType} from '@angular/cdk/overlay'; import {Component} from '@angular/core'; -import {DataDetailComponent} from './data-detail/data-detail.component'; +import DataDetailComponent from './data-detail/data-detail.component'; import {DataMasterDetailService} from './data-master-detail.service'; import {DataMasterItemComponent} from './data-master-item/data-master-item.component'; +import {BuilderModeService} from "../../services/builder-mode.service"; export interface TypeArray { viewValue: string; @@ -16,7 +17,7 @@ export interface TypeArray { }) export class DataModeComponent { - constructor(protected _masterService: DataMasterDetailService ) { + constructor(protected _masterService: DataMasterDetailService, protected _builderModeService: BuilderModeService) { } get detailComponent(): ComponentType { diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.html b/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.html index d01522452..36841189a 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.html @@ -4,7 +4,7 @@ @for (init of taskRef.inits; track $index) { {{ prettyTask(init?.value) }} - @@ -17,6 +17,7 @@ [matChipInputFor]="chipGrid" [matAutocomplete]="auto" (matChipInputTokenEnd)="addInit($event)" + [disabled]="_builderModeService.readOnly" /> @for (task of tasks; track task) { diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.ts b/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.ts index d672ca26f..f80d7624e 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.ts @@ -4,6 +4,7 @@ import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete'; import {MatChipInputEvent} from '@angular/material/chips'; import {DataVariable, I18nWithDynamic, Transition} from '@netgrif/petriflow'; import {ModelService} from '../../services/model/model.service'; +import {BuilderModeService} from "../../../services/builder-mode.service"; @Component({ selector: 'nc-builder-task-ref-init-field', @@ -16,7 +17,7 @@ export class TaskRefInitFieldComponent { taskRefFormControl: FormControl; @ViewChild('taskRefInput') taskRefInput: ElementRef; - constructor(private _modelService: ModelService) { + constructor(private _modelService: ModelService, protected _builderModeService: BuilderModeService) { this.taskRefFormControl = new FormControl(''); } From 03052c55bac342e0a3983940dfb5f2fd175000c8 Mon Sep 17 00:00:00 2001 From: chvostek Date: Fri, 9 Oct 2026 09:39:14 +0200 Subject: [PATCH 07/24] [NAE-2489] View only builder - add read only mode to edit mode --- .../src/lib/builder/builder.component.html | 2 +- .../dialog-arc-edit.component.html | 4 +- .../dialog-arc-edit.component.ts | 11 +- .../dialog-manage-roles.component.html | 48 +++++--- .../dialog-manage-roles.component.ts | 4 + .../dialog-model-edit.component.html | 16 +-- .../dialog-model-edit.component.ts | 18 ++- .../dialog-place-edit.component.html | 4 +- .../dialog-place-edit.component.ts | 11 +- .../dialog-transition-edit.component.html | 16 +-- .../dialog-transition-edit.component.ts | 10 +- .../trigger-tree/trigger-tree.component.html | 13 +- .../trigger-tree/trigger-tree.component.ts | 3 +- .../edit-panel/edit-panel.component.html | 112 ++++++++++++------ .../edit-panel/edit-panel.component.ts | 9 +- .../field-list/field-list.component.html | 4 +- .../field-list/field-list.component.ts | 2 +- .../form-builder/form-builder.component.ts | 6 +- .../gridster-data-field.component.ts | 5 +- .../gridster/gridster.component.html | 4 +- .../gridster/gridster.component.ts | 2 +- .../material-icon-picker.component.ts | 8 +- .../control-panel/control-panel.service.ts | 6 +- .../data-detail/data-detail.component.ts | 2 +- .../modeler/data-mode/data-mode.component.ts | 2 +- .../manage-model-permissions-menu-item.ts | 3 +- .../transition/edit-form-menu-item.ts | 2 +- .../edit-transition-actions-menu-item.ts | 2 +- .../edit-transition-permissions-menu-item.ts | 3 +- .../modeler/edit-mode/edit-mode.service.ts | 66 +++++++---- .../edit-mode/services/modes/canvas-tool.ts | 18 +-- .../edit-mode/services/modes/select-tool.ts | 20 ++-- .../services/canvas/canvas-listener-tool.ts | 18 ++- 33 files changed, 299 insertions(+), 155 deletions(-) diff --git a/projects/netgrif-components/src/lib/builder/builder.component.html b/projects/netgrif-components/src/lib/builder/builder.component.html index 441dbc980..1b19c9e90 100644 --- a/projects/netgrif-components/src/lib/builder/builder.component.html +++ b/projects/netgrif-components/src/lib/builder/builder.component.html @@ -1,6 +1,6 @@
- +
diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-arc-edit/dialog-arc-edit.component.html b/projects/netgrif-components/src/lib/builder/dialogs/dialog-arc-edit/dialog-arc-edit.component.html index 0bf05eb53..4bca794d5 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-arc-edit/dialog-arc-edit.component.html +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-arc-edit/dialog-arc-edit.component.html @@ -6,7 +6,7 @@

{{ 'builder.dialogs.arc-edit.editArc' | translate}}

{{ 'builder.dialogs.arc-edit.type' | translate}} - + {{arcType}} @@ -47,7 +47,7 @@

{{ 'builder.dialogs.arc-edit.editArc' | translate}}

 - diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-arc-edit/dialog-arc-edit.component.ts b/projects/netgrif-components/src/lib/builder/dialogs/dialog-arc-edit/dialog-arc-edit.component.ts index e3af82202..e41741e0f 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-arc-edit/dialog-arc-edit.component.ts +++ b/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 @@ -51,7 +52,8 @@ export class DialogArcEditComponent implements OnInit { constructor( @Inject(MAT_DIALOG_DATA) public data: ArcEditData, - protected _translateService: TranslateService + protected _translateService: TranslateService, + protected _builderModeService: BuilderModeService ) { this.modelService = data.context.modelService; this.arc = new ChangedArc(undefined, this.modelService.model.getArc(data.arcId).clone()); @@ -60,6 +62,13 @@ export class DialogArcEditComponent implements OnInit { Validators.required, this.validMultiplicity() ]); + if (this._builderModeService.readOnly) { + this.multiplicityCtrl.disable(); + this.formControlRef.disable(); + } else { + this.multiplicityCtrl.enable(); + this.formControlRef.enable(); + } } ngOnInit(): void { diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-manage-roles/dialog-manage-roles.component.html b/projects/netgrif-components/src/lib/builder/dialogs/dialog-manage-roles/dialog-manage-roles.component.html index bdc17ce93..9a396ecbf 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-manage-roles/dialog-manage-roles.component.html +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-manage-roles/dialog-manage-roles.component.html @@ -21,7 +21,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.perform)" [indeterminate]="getIndeterminate(element.logic.perform)" (click)="setValue(element.id, 'perform')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.perform), 'checkbox-background-green': getChecked(element.logic.perform)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.perform), 'checkbox-background-green': getChecked(element.logic.perform)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.perform) | titlecase}} @@ -37,7 +38,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.delegate)" [indeterminate]="getIndeterminate(element.logic.delegate)" (click)="setValue(element.id, 'delegate')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.delegate), 'checkbox-background-green': getChecked(element.logic.delegate)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.delegate), 'checkbox-background-green': getChecked(element.logic.delegate)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.delegate) | titlecase}} @@ -53,7 +55,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.cancel)" [indeterminate]="getIndeterminate(element.logic.cancel)" (click)="setValue(element.id, 'cancel')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.cancel), 'checkbox-background-green': getChecked(element.logic.cancel)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.cancel), 'checkbox-background-green': getChecked(element.logic.cancel)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.cancel) | titlecase}} @@ -69,7 +72,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.assign)" [indeterminate]="getIndeterminate(element.logic.assign)" (click)="setValue(element.id, 'assign')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.assign), 'checkbox-background-green': getChecked(element.logic.assign)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.assign), 'checkbox-background-green': getChecked(element.logic.assign)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.assign) | titlecase}} @@ -85,7 +89,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.view)" [indeterminate]="getIndeterminate(element.logic.view)" (click)="setValue(element.id, 'view')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.view), 'checkbox-background-green': getChecked(element.logic.view)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.view), 'checkbox-background-green': getChecked(element.logic.view)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.view) | titlecase}} @@ -101,7 +106,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.create)" [indeterminate]="getIndeterminate(element.logic.create)" (click)="setValue(element.id, 'create')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.create), 'checkbox-background-green': getChecked(element.logic.create)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.create), 'checkbox-background-green': getChecked(element.logic.create)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.create) | titlecase}} @@ -117,7 +123,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.delete)" [indeterminate]="getIndeterminate(element.logic.delete)" (click)="setValue(element.id, 'delete')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.delete), 'checkbox-background-green': getChecked(element.logic.delete)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.delete), 'checkbox-background-green': getChecked(element.logic.delete)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.delete) | titlecase}} @@ -133,7 +140,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.view)" [indeterminate]="getIndeterminate(element.logic.view)" (click)="setValue(element.id, 'view')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.view), 'checkbox-background-green': getChecked(element.logic.view)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.view), 'checkbox-background-green': getChecked(element.logic.view)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.view) | titlecase}} @@ -167,7 +175,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.perform)" [indeterminate]="getIndeterminate(element.logic.perform)" (click)="setUserValue(element.id, 'perform')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.perform), 'checkbox-background-green': getChecked(element.logic.perform)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.perform), 'checkbox-background-green': getChecked(element.logic.perform)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.perform) | titlecase}} @@ -183,7 +192,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.delegate)" [indeterminate]="getIndeterminate(element.logic.delegate)" (click)="setUserValue(element.id, 'delegate')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.delegate), 'checkbox-background-green': getChecked(element.logic.delegate)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.delegate), 'checkbox-background-green': getChecked(element.logic.delegate)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.delegate) | titlecase}} @@ -199,7 +209,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.cancel)" [indeterminate]="getIndeterminate(element.logic.cancel)" (click)="setUserValue(element.id, 'cancel')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.cancel), 'checkbox-background-green': getChecked(element.logic.cancel)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.cancel), 'checkbox-background-green': getChecked(element.logic.cancel)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.cancel) | titlecase}} @@ -215,7 +226,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.assign)" [indeterminate]="getIndeterminate(element.logic.assign)" (click)="setUserValue(element.id, 'assign')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.assign), 'checkbox-background-green': getChecked(element.logic.assign)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.assign), 'checkbox-background-green': getChecked(element.logic.assign)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.assign) | titlecase}} @@ -231,7 +243,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.view)" [indeterminate]="getIndeterminate(element.logic.view)" (click)="setUserValue(element.id, 'view')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.view), 'checkbox-background-green': getChecked(element.logic.view)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.view), 'checkbox-background-green': getChecked(element.logic.view)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.view) | titlecase}} @@ -247,7 +260,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.create)" [indeterminate]="getIndeterminate(element.logic.create)" (click)="setUserValue(element.id, 'create')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.create), 'checkbox-background-green': getChecked(element.logic.create)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.create), 'checkbox-background-green': getChecked(element.logic.create)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.create) | titlecase}} @@ -263,7 +277,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.delete)" [indeterminate]="getIndeterminate(element.logic.delete)" (click)="setUserValue(element.id, 'delete')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.delete), 'checkbox-background-green': getChecked(element.logic.delete)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.delete), 'checkbox-background-green': getChecked(element.logic.delete)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.delete) | titlecase}} @@ -279,7 +294,8 @@

{{data.type === 'transition' ? ('builder.modeler.edit-mode. [checked]="getChecked(element.logic.view)" [indeterminate]="getIndeterminate(element.logic.view)" (click)="setUserValue(element.id, 'view')" - [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.view), 'checkbox-background-green': getChecked(element.logic.view)}"> + [ngClass]="{'checkbox-background-warn': getIndeterminate(element.logic.view), 'checkbox-background-green': getChecked(element.logic.view)}" + [disabled]="_builderModeService.readOnly"> {{stringValue(element.logic.view) | titlecase}} diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-manage-roles/dialog-manage-roles.component.ts b/projects/netgrif-components/src/lib/builder/dialogs/dialog-manage-roles/dialog-manage-roles.component.ts index d36cc3888..51d065129 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-manage-roles/dialog-manage-roles.component.ts +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-manage-roles/dialog-manage-roles.component.ts @@ -10,6 +10,7 @@ import {HistoryService} from '../../modeler/services/history/history.service'; import {ModelService} from '../../modeler/services/model/model.service'; import {LocalStorageService} from "../../services/local-storage.service"; import {TranslateService} from "@ngx-translate/core"; +import {BuilderModeService} from "../../services/builder-mode.service"; export enum RoleRefType { TRANSITION = 'transition', @@ -27,6 +28,7 @@ export interface ManagePermissionData { modelService: ModelService; historyService: HistoryService; localStorageService: LocalStorageService; + builderModeService: BuilderModeService; } @Component({ @@ -53,6 +55,7 @@ export class DialogManageRolesComponent implements OnInit, OnDestroy { private modelService: ModelService; private historyService: HistoryService; private _localStorageService: LocalStorageService; + protected _builderModeService: BuilderModeService; constructor( @Inject(MAT_DIALOG_DATA) public data: ManagePermissionData, @@ -61,6 +64,7 @@ export class DialogManageRolesComponent implements OnInit, OnDestroy { this.modelService = data.modelService; this.historyService = data.historyService; this._localStorageService = data.localStorageService; + this._builderModeService = data.builderModeService; if (this.data.type === RoleRefType.TRANSITION) { const arrayRoleRefs = [...this.data.rolesRefs]; this.addDefaultRoleRefs(arrayRoleRefs); diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-model-edit/dialog-model-edit.component.html b/projects/netgrif-components/src/lib/builder/dialogs/dialog-model-edit/dialog-model-edit.component.html index 4a027d9fc..c8d68e620 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-model-edit/dialog-model-edit.component.html +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-model-edit/dialog-model-edit.component.html @@ -24,16 +24,16 @@

{{ 'builder.dialogs.model-edit.title' | translate }}

- + {{ 'builder.dialogs.model-edit.defaultRole' | translate }} - + {{ 'builder.dialogs.model-edit.anonymousRole' | translate }}
{{ 'builder.dialogs.model-edit.defaultCaseName' | translate }} - +
{{ 'builder.dialogs.model-edit.tags' | translate }} @@ -45,13 +45,13 @@

{{ 'builder.dialogs.model-edit.title' | translate }}

{{ 'builder.dialogs.model-edit.key' | translate }} - + {{ 'builder.dialogs.model-edit.value' | translate }} - + -
@@ -62,7 +62,7 @@

{{ 'builder.dialogs.model-edit.title' | translate }}

- @@ -80,7 +80,7 @@

{{ 'builder.dialogs.model-edit.title' | translate }}

{{ 'builder.dialogs.model-edit.permissions' | translate }} ({{this.modelService.numberOfPermissions()}}) diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-model-edit/dialog-model-edit.component.ts b/projects/netgrif-components/src/lib/builder/dialogs/dialog-model-edit/dialog-model-edit.component.ts index fca77016c..f9cff6f88 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-model-edit/dialog-model-edit.component.ts +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-model-edit/dialog-model-edit.component.ts @@ -1,7 +1,6 @@ import {Component, Inject} from '@angular/core'; import {FormControl, ValidatorFn, Validators} from '@angular/forms'; import {MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog'; -import {Router} from '@angular/router'; import {DataType} from '@netgrif/petriflow'; import {ActionsModeService} from '../../modeler/actions-mode/actions-mode.service'; import {ProcessActionsTool} from '../../modeler/actions-mode/tools/process-actions-tool'; @@ -35,7 +34,7 @@ export class DialogModelEditComponent { public modelService: ModelService; private _actionMode: ActionsModeService; private _processTool: ProcessActionsTool; - private _builderModeService: BuilderModeService; + protected _builderModeService: BuilderModeService; private historyService: HistoryService; private _localStorageService: LocalStorageService; @@ -58,6 +57,18 @@ export class DialogModelEditComponent { ]); this.titleCtrl = new FormControl('', [Validators.required]); this.initialsCtrl = new FormControl('', [Validators.required]); + + if (this._builderModeService.readOnly) { + this.idCtrl.disable(); + this.versionCtrl.disable(); + this.titleCtrl.disable(); + this.initialsCtrl.disable(); + } else { + this.idCtrl.enable(); + this.versionCtrl.enable(); + this.titleCtrl.enable(); + this.initialsCtrl.enable(); + } } openPermissions() { @@ -72,7 +83,8 @@ export class DialogModelEditComponent { userLists: this.modelService.model.getDataSet().filter(item => item.type === DataType.USER_LIST), modelService: this.modelService, historyService: this.historyService, - localStorageService: this._localStorageService + localStorageService: this._localStorageService, + builderModeService: this._builderModeService } }); } diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-place-edit/dialog-place-edit.component.html b/projects/netgrif-components/src/lib/builder/dialogs/dialog-place-edit/dialog-place-edit.component.html index e16f50c6e..92241f334 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-place-edit/dialog-place-edit.component.html +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-place-edit/dialog-place-edit.component.html @@ -8,7 +8,7 @@

{{ 'builder.dialogs.place-edit.title' | translate }}

{{ 'builder.dialogs.place-edit.label' | translate }} - + {{ 'builder.dialogs.place-edit.tokens' | translate }} @@ -21,7 +21,7 @@

{{ 'builder.dialogs.place-edit.title' | translate }}

diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-place-edit/dialog-place-edit.component.ts b/projects/netgrif-components/src/lib/builder/dialogs/dialog-place-edit/dialog-place-edit.component.ts index db83efca1..1bba9f3d7 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-place-edit/dialog-place-edit.component.ts +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-place-edit/dialog-place-edit.component.ts @@ -4,6 +4,7 @@ import {MAT_DIALOG_DATA} from '@angular/material/dialog'; import {PlaceChange} from '../../modeler/history-mode/model/place/place-change'; import {ModelService} from '../../modeler/services/model/model.service'; import {SimulationModeService} from "../../modeler/simulation-mode/simulation-mode.service"; +import {BuilderModeService} from "../../services/builder-mode.service"; export interface PlaceEditData { placeId: string; @@ -25,7 +26,8 @@ export class DialogPlaceEditComponent { protected modelService: ModelService; constructor( - @Inject(MAT_DIALOG_DATA) public data: PlaceEditData + @Inject(MAT_DIALOG_DATA) public data: PlaceEditData, + protected _builderModeService: BuilderModeService ) { this.modelService = data.modelService; const modelPlace = this.modelService.model.getPlace(data.placeId); @@ -38,6 +40,13 @@ export class DialogPlaceEditComponent { Validators.required, this.validMarking() ]); + if (this._builderModeService.readOnly) { + this.idCtrl.disable(); + this.markingCtrl.disable(); + } else { + this.idCtrl.enable(); + this.markingCtrl.enable(); + } } private validUnique(): ValidatorFn { diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/dialog-transition-edit.component.html b/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/dialog-transition-edit.component.html index ef8943923..416217f3a 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/dialog-transition-edit.component.html +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/dialog-transition-edit.component.html @@ -9,7 +9,7 @@

{{ 'builder.dialogs.transition-edit.title' | translate }} {{ 'builder.dialogs.transition-edit.label' | translate }} - + @@ -20,7 +20,7 @@

{{ 'builder.dialogs.transition-edit.title' | translate }} {{ 'builder.dialogs.transition-edit.assignPolicy' | translate }} - + {{opt}} @@ -28,7 +28,7 @@

{{ 'builder.dialogs.transition-edit.title' | translate }} {{ 'builder.dialogs.transition-edit.finishPolicy' | translate }} - + {{opt}} @@ -47,13 +47,13 @@

{{ 'builder.dialogs.transition-edit.title' | translate }} {{ 'builder.dialogs.transition-edit.key' | translate }} - + {{ 'builder.dialogs.transition-edit.value' | translate }} - + -

@@ -64,7 +64,7 @@

{{ 'builder.dialogs.transition-edit.title' | translate }}
- @@ -85,7 +85,7 @@

{{ 'builder.dialogs.transition-edit.title' | translate }}code {{ 'builder.dialogs.transition-edit.permissions' | translate }} ({{this._modelService.numberOfTransitionPermissions(transition.transition)}}) - diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/dialog-transition-edit.component.ts b/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/dialog-transition-edit.component.ts index 5e4cd6944..52e4efe78 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/dialog-transition-edit.component.ts +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/dialog-transition-edit.component.ts @@ -36,7 +36,7 @@ export class DialogTransitionEditComponent implements OnInit { private _transitionService: SelectedTransitionService; private _actionMode: ActionsModeService; private _actionsMasterDetail: ActionsMasterDetailService; - private _builderModeService: BuilderModeService; + protected _builderModeService: BuilderModeService; private _historyService: HistoryService; private _localStorageService: LocalStorageService; @@ -58,6 +58,11 @@ export class DialogTransitionEditComponent implements OnInit { Validators.required, this.validUnique() ]); + if (this._builderModeService.readOnly) { + this.form.disable(); + } else { + this.form.enable(); + } } ngOnInit(): void { @@ -100,7 +105,8 @@ export class DialogTransitionEditComponent implements OnInit { userLists: this._modelService.model.getDataSet().filter(item => item.type === DataType.USER_LIST), modelService: this._modelService, historyService: this._historyService, - localStorageService: this._localStorageService + localStorageService: this._localStorageService, + builderModeService: this._builderModeService } }); } diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.html b/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.html index 27f7d1b9b..9855fd10a 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.html +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.html @@ -3,7 +3,7 @@
{{ 'builder.dialogs.transition-edit.trigger-tree.setTriggerType' | translate }} - + {{opt.value}} @@ -12,7 +12,7 @@
{{ 'builder.dialogs.transition-edit.trigger-tree.setTimeType' | translate }} - + {{opt.value}} @@ -21,7 +21,7 @@
{{ 'builder.dialogs.transition-edit.trigger-tree.setDelay' | translate }} - +
@@ -29,7 +29,8 @@ [ngxMatDatetimePicker]="picker" [placeholder]="'builder.dialogs.transition-edit.trigger-tree.setExact' | translate" [(ngModel)]="node.exact" - (ngModelChange)="emitChanges()"> + (ngModelChange)="emitChanges()" + [disabled]="_builderModeService.readOnly"> {{node.name}}
-
@@ -79,7 +80,7 @@
{{node.name}}
-
    diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.ts b/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.ts index 1c7f431c4..2a77dda05 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.ts +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.ts @@ -5,6 +5,7 @@ import {MatTreeNestedDataSource} from '@angular/material/tree'; import {DATE_TIME_FORMAT} from '@netgrif/components-core'; import {Trigger, TriggerType} from '@netgrif/petriflow'; import {TranslateService} from "@ngx-translate/core"; +import {BuilderModeService} from "../../../services/builder-mode.service"; interface TriggerNode { name?: string; @@ -33,7 +34,7 @@ export class TriggerTreeComponent { treeControl = new NestedTreeControl(node => node.trigger); dataSource = new MatTreeNestedDataSource(); - constructor(protected _translateService: TranslateService) { + constructor(protected _translateService: TranslateService, protected _builderModeService: BuilderModeService) { this.treeData = [{ name: this._translateService.instant('builder.dialogs.transition-edit.trigger-tree.triggers'), trigger: [] diff --git a/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.html b/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.html index 5f053d845..537497f4d 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.html +++ b/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.html @@ -2,7 +2,8 @@
    {{ 'builder.form-builder.edit-panel.numberOfColumns' | translate }} - +

    {{ 'builder.form-builder.edit-panel.id' | translate }}: {{ dataVariable.id }} - @@ -61,16 +70,17 @@

    + (change)="notifyGridster()" [disabled]="_builderModeService.readOnly"> {{ 'builder.form-builder.edit-panel.required' | translate }} + (change)="notifyGridster()" [disabled]="_builderModeService.readOnly"> {{ 'builder.form-builder.edit-panel.immediate' | translate }} Behavior - + {{ opt.value }} @@ -81,26 +91,29 @@

    {{ 'builder.form-builder.edit-panel.title' | translate }} - + {{ 'builder.form-builder.edit-panel.placeholder' | translate }} - + {{ 'builder.form-builder.edit-panel.description' | translate }} - + {{ 'builder.form-builder.edit-panel.initialValue' | translate }} + (change)="notifyGridster()" [disabled]="_builderModeService.readOnly"> {{ 'builder.form-builder.edit-panel.initialValue' | translate }} + (selectionChange)="notifyGridster()" [disabled]="_builderModeService.readOnly"> None {{ opt.value?.value }} @@ -108,7 +121,8 @@

    + (selectionChange)="notifyGridster()" multiple + [disabled]="_builderModeService.readOnly"> {{ opt.value?.value }} @@ -116,12 +130,14 @@

    + (change)="setBooleanValue($event); notifyGridster()" + [disabled]="_builderModeService.readOnly"> {{ 'builder.form-builder.edit-panel.initialValue' | translate }} {{ 'builder.form-builder.edit-panel.initialValue' | translate }} - + {{ 'builder.form-builder.edit-panel.initialValue' | translate }} @@ -129,6 +145,7 @@

    @@ -139,6 +156,7 @@

    -
    +
    -
    +
    drag_indicator -
    @@ -179,7 +202,7 @@

    {{ 'builder.form-builder.edit-panel.noOptions' | translate }}

    - @@ -234,12 +260,12 @@

    {{ 'builder.form-builder.edit-panel.noProperties' | translate }}

    - - @@ -267,7 +295,7 @@

    {{ 'builder.form-builder.edit-panel.noIcons' | translate }}

    - @@ -324,12 +355,12 @@

    {{ 'builder.form-builder.edit-panel.noProperties' | translate }}

    - - @@ -373,7 +406,8 @@

    {{ 'builder.form-builder.edit-panel.template' | translate }} - + {{ opt }} @@ -382,7 +416,8 @@

    {{ 'builder.form-builder.edit-panel.appearance' | translate }} - + {{ opt }} @@ -393,6 +428,7 @@

    {{ 'builder.form-builder.edit-panel.fieldOffset' | translate }}

    diff --git a/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.ts b/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.ts index dd5aa8e2a..a20a2d1ce 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.ts +++ b/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.ts @@ -86,7 +86,7 @@ export class EditPanelComponent implements OnInit, AfterViewInit { private _actionMode: ActionsModeService, private _fieldListService: FieldListService, private _actionsMasterDetail: ActionsMasterDetailService, - private _builderModeService: BuilderModeService) { + protected _builderModeService: BuilderModeService) { // this.transitionOptions = []; this.formControlRef = new FormControl(); this.behaviorOptions = [ @@ -99,6 +99,13 @@ export class EditPanelComponent implements OnInit, AfterViewInit { ngOnInit() { this.componentNameFormCtrl = new FormControl(); this.dataRefComponentNameFormCtrl = new FormControl(); + if (this._builderModeService.readOnly) { + this.componentNameFormCtrl.disable(); + this.dataRefComponentNameFormCtrl.disable(); + } else { + this.componentNameFormCtrl.enable(); + this.dataRefComponentNameFormCtrl.enable(); + } this.transId = this.transitionService.id; if (this.transId === null) { this.numOfCols = ModelerConfig.LAYOUT_DEFAULT_COLS; diff --git a/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.html b/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.html index 9562f89c2..8abcd5e48 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.html +++ b/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.html @@ -19,7 +19,7 @@

    {{ 'builder.form-builder.field-list.dataFields' |

- @@ -41,7 +41,7 @@

{{ 'builder.form-builder.field-list.dataFields' | - + {{ 'builder.form-builder.field-list.createNewFields' | translate }} diff --git a/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.ts b/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.ts index 9af259f6d..82c1250fb 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.ts +++ b/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.ts @@ -40,7 +40,7 @@ export class FieldListComponent implements OnInit, AfterViewInit { private fieldListService: FieldListService, private _snackBar: MatSnackBar, private transitionService: SelectedTransitionService, - private _builderModeService: BuilderModeService) { + protected _builderModeService: BuilderModeService) { if (this.modelService.model === undefined) { throw new Error('Model is undefined'); } diff --git a/projects/netgrif-components/src/lib/builder/form-builder/form-builder.component.ts b/projects/netgrif-components/src/lib/builder/form-builder/form-builder.component.ts index 780a8107e..6699ed399 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/form-builder.component.ts +++ b/projects/netgrif-components/src/lib/builder/form-builder/form-builder.component.ts @@ -1,5 +1,4 @@ import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core'; -import {Router} from '@angular/router'; import {DataGroup, LayoutType} from '@netgrif/petriflow'; import {ModelerConfig} from '../modeler/modeler-config'; import {ModelerUtils} from '../modeler/modeler-utils'; @@ -20,10 +19,9 @@ export class FormBuilderComponent implements AfterViewInit, OnDestroy { @ViewChild('rightPanel') rightPanel: ElementRef; private rightPanelResizeObserver: ResizeObserver; - constructor(private router: Router, - private modelService: ModelService, + constructor(private modelService: ModelService, private transitionService: SelectedTransitionService, - private _builderModeService: BuilderModeService, + protected _builderModeService: BuilderModeService, private _gridsterService: GridsterService) { if (!this.modelService.model) { this._builderModeService.mode = BuilderMode.MODELER; diff --git a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts index 1d87fc83a..456230ceb 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts +++ b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts @@ -7,6 +7,7 @@ import {GridsterFieldToEngineFieldService} from '../../../modeler/gridster-field import {FieldListService} from '../../field-list/field-list.service'; import {GridsterDataField} from '../classes/gridster-data-field'; import {GridsterService} from '../gridster.service'; +import {BuilderModeService} from "../../../services/builder-mode.service"; @Component({ selector: 'nc-builder-gridster-datafield', @@ -23,7 +24,8 @@ export class GridsterDataFieldComponent implements OnInit, OnDestroy { constructor(private _gridsterService: GridsterService, private _transformService: GridsterFieldToEngineFieldService, - public fieldListService: FieldListService) { + public fieldListService: FieldListService, + protected _builderModeService: BuilderModeService) { } ngOnDestroy(): void { @@ -32,6 +34,7 @@ export class GridsterDataFieldComponent implements OnInit, OnDestroy { ngOnInit(): void { this.engineField = this._transformService.transformDataField(this.dataField); + this.engineField.block = this._builderModeService.readOnly; this._gridsterSubscription = this._gridsterService.selectedDataFieldChangeStream$().subscribe(this.updateEngineField.bind(this)); this.engineField.valueChanges().subscribe(value => { if (value && value instanceof Array) { diff --git a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.html b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.html index 143a68ba7..75e6175d7 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.html +++ b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.html @@ -6,10 +6,10 @@ class="fill-all-space gridster-item-form">
- -
diff --git a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.ts b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.ts index 38389c1ed..8e1e3877f 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.ts +++ b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.ts @@ -25,7 +25,7 @@ export class GridsterComponent implements OnInit, OnDestroy { private router: Router, private transitionService: SelectedTransitionService, private historyService: HistoryService, - private _builderModeService: BuilderModeService, + protected _builderModeService: BuilderModeService, protected _translateService: TranslateService) { } diff --git a/projects/netgrif-components/src/lib/builder/modeler/components/material-icon-picker/material-icon-picker.component.ts b/projects/netgrif-components/src/lib/builder/modeler/components/material-icon-picker/material-icon-picker.component.ts index c1458f022..9cf989967 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/components/material-icon-picker/material-icon-picker.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/components/material-icon-picker/material-icon-picker.component.ts @@ -11,6 +11,7 @@ import {MatIcon} from "@angular/material/icon"; import {FlexModule} from "@ngbracket/ngx-layout"; import {MatOption} from "@angular/material/core"; import {TranslateModule} from "@ngx-translate/core"; +import {BuilderModeService} from "../../../services/builder-mode.service"; @Component({ selector: 'nc-builder-material-icon-picker', @@ -27,8 +28,13 @@ export class MaterialIconPickerComponent implements OnInit { protected _icon: string; @Output() iconChange: EventEmitter = new EventEmitter(); - constructor() { + constructor(protected _builderModeService: BuilderModeService) { this.formControlRef = new FormControl(this._icon); + if (this._builderModeService.readOnly) { + this.formControlRef.disable(); + } else { + this.formControlRef.enable(); + } } @Input() diff --git a/projects/netgrif-components/src/lib/builder/modeler/control-panel/control-panel.service.ts b/projects/netgrif-components/src/lib/builder/modeler/control-panel/control-panel.service.ts index 7fd544923..7346a6d55 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/control-panel/control-panel.service.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/control-panel/control-panel.service.ts @@ -66,11 +66,13 @@ export class ControlPanelService { this.activate(); if (!this._builderModeService.readOnly) { this._globalToolRegistry.registerItem(this._importModelTool); - this._globalToolRegistry.registerItem(this._undoTool); - this._globalToolRegistry.registerItem(this._redoTool); } this._globalToolRegistry.registerItem(this._exportModelTool); this._globalToolRegistry.registerItem(this._exportSvgTool); + if (!this._builderModeService.readOnly) { + this._globalToolRegistry.registerItem(this._undoTool); + this._globalToolRegistry.registerItem(this._redoTool); + } } protected initializeMode() { diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts index a3c9737b3..ee3ede848 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts @@ -50,7 +50,7 @@ export interface HistoryDataSave { templateUrl: './data-detail.component.html', styleUrl: './data-detail.component.scss' }) -class DataDetailComponent implements OnDestroy { +export class DataDetailComponent implements OnDestroy { counterEnumMap = 0; formControlRef: FormControl; diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.ts b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.ts index 2815b6cb7..6734f5852 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.ts @@ -1,9 +1,9 @@ import {ComponentType} from '@angular/cdk/overlay'; import {Component} from '@angular/core'; -import DataDetailComponent from './data-detail/data-detail.component'; import {DataMasterDetailService} from './data-master-detail.service'; import {DataMasterItemComponent} from './data-master-item/data-master-item.component'; import {BuilderModeService} from "../../services/builder-mode.service"; +import {DataDetailComponent} from "./data-detail/data-detail.component"; export interface TypeArray { viewValue: string; diff --git a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/model/manage-model-permissions-menu-item.ts b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/model/manage-model-permissions-menu-item.ts index 3abd6f0e5..0e9057dcc 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/model/manage-model-permissions-menu-item.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/model/manage-model-permissions-menu-item.ts @@ -25,7 +25,8 @@ export class ManageModelPermissionsMenuItem extends MenuItem { userLists: tool.model.getDataSet().filter(item => item.type === DataType.USER_LIST), modelService: tool.modelService, historyService: tool.editModeService.historyService, - localStorageService: tool.context.localStorageService + localStorageService: tool.context.localStorageService, + builderModeService: tool.context.builderModeService } }); } diff --git a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-form-menu-item.ts b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-form-menu-item.ts index 5d0e470be..dbe980dda 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-form-menu-item.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-form-menu-item.ts @@ -12,7 +12,7 @@ export class EditFormMenuItem extends MenuItem { 'dashboard', () => { tool.transitionService.id = transition.id; - tool.builderModeService.mode = BuilderMode.FORM_BUILDER; + tool._builderModeService.mode = BuilderMode.FORM_BUILDER; } ); } diff --git a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-transition-actions-menu-item.ts b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-transition-actions-menu-item.ts index a171be590..adf8a819e 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-transition-actions-menu-item.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-transition-actions-menu-item.ts @@ -16,7 +16,7 @@ export class EditTransitionActionsMenuItem extends MenuItem { tool.actionMode.activate(tool.actionMode.transitionActionsTool); tool.actionsMasterDetail.select(transition.modelTransition); tool.transitionService.id = transition.id; - tool.builderModeService.mode = BuilderMode.ACTION_MODE; + tool._builderModeService.mode = BuilderMode.ACTION_MODE; } ); } diff --git a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-transition-permissions-menu-item.ts b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-transition-permissions-menu-item.ts index a65008596..b9702a400 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-transition-permissions-menu-item.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/context-menu/menu-items/transition/edit-transition-permissions-menu-item.ts @@ -26,7 +26,8 @@ export class EditTransitionPermissionsMenuItem extends MenuItem { userLists: tool.modelService.model.getDataSet().filter(item => item.type === DataType.USER_LIST), modelService: tool.modelService, historyService: tool.editModeService.historyService, - localStorageService: tool.context.localStorageService + localStorageService: tool.context.localStorageService, + builderModeService: tool.context.builderModeService } }); } diff --git a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/edit-mode.service.ts b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/edit-mode.service.ts index a360aa9ef..a8d482c2d 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/edit-mode.service.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/edit-mode.service.ts @@ -77,7 +77,7 @@ export class EditModeService extends CanvasModeService implements On dialog: MatDialog, router: Router, transitionService: SelectedTransitionService, - _builderModeService: BuilderModeService, + protected _builderModeService: BuilderModeService, private _tutorialService: TutorialService, private _parentInjector: Injector, private _historyService: HistoryService, @@ -105,29 +105,7 @@ export class EditModeService extends CanvasModeService implements On const context = new CanvasToolContext(modelService, dialog, this, router, transitionService, _actionMode, _actionsMasterDetail, _builderModeService, _processActionsTool, _builderIntegrationService, this._ngZone, _localStorageService, _translateService); - this.switchTools = new ToolGroup( - new ClearModelTool(context), - new ResetPositionAndZoomTool(context), - new GridTool(context), - new SwitchLabelTool(context) - ); - this.tools = [ - new ToolGroup( - new SelectTool(context), - new QuickDrawTool(context), - new CreateTransitionTool(context), - new CreatePlaceTool(context), - new AddTokenTool(context), - new RemoveTokenTool(context) - ), - new ToolGroup( - new CreateRegularArcTool(context), - new CreateResetArcTool(context), - new CreateInhibitorArcTool(context), - new CreateReadArcTool(context) - ), - this.switchTools - ]; + this.initializeTools(context); this._modelSubscription = this.modelService.model$().subscribe(_ => this.renderModel()); this._placeSubscription = this.modelService.placeChange.subscribe(value => this.updatePlace(value)); this._transitionSubscription = this.modelService.transitionChange.subscribe(value => this.updateTransition(value)); @@ -146,6 +124,46 @@ export class EditModeService extends CanvasModeService implements On this._arcSubscription?.unsubscribe(); } + protected initializeTools(context: CanvasToolContext) { + if (this._builderModeService.readOnly) { + this.switchTools = new ToolGroup( + new ResetPositionAndZoomTool(context), + new GridTool(context), + new SwitchLabelTool(context) + ); + this.tools = [ + new ToolGroup( + new SelectTool(context), + ), + this.switchTools + ]; + } else { + this.switchTools = new ToolGroup( + new ClearModelTool(context), + new ResetPositionAndZoomTool(context), + new GridTool(context), + new SwitchLabelTool(context) + ); + this.tools = [ + new ToolGroup( + new SelectTool(context), + new QuickDrawTool(context), + new CreateTransitionTool(context), + new CreatePlaceTool(context), + new AddTokenTool(context), + new RemoveTokenTool(context) + ), + new ToolGroup( + new CreateRegularArcTool(context), + new CreateResetArcTool(context), + new CreateInhibitorArcTool(context), + new CreateReadArcTool(context) + ), + this.switchTools + ]; + } + } + activate(tool?: CanvasTool) { if (tool === undefined) { tool = this.defaultTool; diff --git a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/services/modes/canvas-tool.ts b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/services/modes/canvas-tool.ts index 89ca83701..071e08e60 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/services/modes/canvas-tool.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/services/modes/canvas-tool.ts @@ -28,7 +28,6 @@ import {CanvasPlace} from '../../domain/canvas-place'; import {CanvasTransition} from '../../domain/canvas-transition'; import {EditModeService} from '../../edit-mode.service'; import {Hotkey} from './domain/hotkey'; -import {BuilderModeService} from '../../../../services/builder-mode.service'; import {CanvasToolContext} from './canvas-tool-context'; import {TranslateService} from "@ngx-translate/core"; @@ -37,7 +36,6 @@ export abstract class CanvasTool extends CanvasListenerTool { private readonly _editModeService: EditModeService; public actionMode: ActionsModeService; public actionsMasterDetail: ActionsMasterDetailService; - public builderModeService: BuilderModeService; protected _translateService: TranslateService protected constructor( @@ -45,11 +43,11 @@ export abstract class CanvasTool extends CanvasListenerTool { button: ControlPanelButton, protected _context: CanvasToolContext, ) { - super(id, button, _context.modelService, _context.dialog, _context.router, _context.transitionService, _context.ngZone); + super(id, button, _context.modelService, _context.dialog, _context.router, _context.transitionService, + _context.ngZone, _context.builderModeService); this._editModeService = _context.editModeService; this.actionMode = _context.actionMode; this.actionsMasterDetail = _context.actionsMasterDetail; - this.builderModeService = _context.builderModeService; this._translateService = _context.translateService; this.hotkeys.push(new Hotkey('Escape', false, false, false, () => { this.closeContextMenu(); @@ -149,7 +147,7 @@ export abstract class CanvasTool extends CanvasListenerTool { return new ContextMenu( [ new EditPlaceMenuItem(place, this, this._translateService), - new DeletePlaceMenuItem(place, this, this._translateService) + ...(!this._builderModeService.readOnly ? [new DeletePlaceMenuItem(place, this, this._translateService)] : []) ], this.windowMousePosition(event) ); @@ -159,10 +157,10 @@ export abstract class CanvasTool extends CanvasListenerTool { return new ContextMenu( [ new EditTransitionMenuItem(transition, this, this._translateService), - new EditFormMenuItem(transition, this, this._translateService), + ...(this._builderModeService.readOnly && !transition.hasForm() ? [] : [new EditFormMenuItem(transition, this, this._translateService)]), new EditTransitionPermissionsMenuItem(transition, this, this._translateService), new EditTransitionActionsMenuItem(transition, this, this._translateService), - new DeleteTransitionMenuItem(transition, this, this._translateService) + ...(!this._builderModeService.readOnly ? [new DeleteTransitionMenuItem(transition, this, this._translateService)] : []) ], this.windowMousePosition(event) ) @@ -175,10 +173,12 @@ export abstract class CanvasTool extends CanvasListenerTool { const items = []; items.push(new EditArcMenuItem(arc, this, this._translateService)); - if (breakPointIndex !== undefined) { + if (breakPointIndex !== undefined && !this._builderModeService.readOnly) { items.push(new DeleteBreakpointMenuItem(arc, breakPointIndex, this, this._translateService)); } - items.push(new DeleteArcMenuItem(arc, this, this._translateService)); + if (!this._builderModeService.readOnly) { + items.push(new DeleteArcMenuItem(arc, this, this._translateService)); + } return new ContextMenu( items, diff --git a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/services/modes/select-tool.ts b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/services/modes/select-tool.ts index 19a33b3d9..3096a7745 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/services/modes/select-tool.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/services/modes/select-tool.ts @@ -44,13 +44,15 @@ export class SelectTool extends CanvasTool { ); this._selectedElements = new CanvasElementCollection(); this._clipboardElements = new CanvasElementCollection(); - this.hotkeys.push(new Hotkey('c', true, false, false, this.copyElements.bind(this))); - this.hotkeys.push(new Hotkey('v', true, false, false, this.pasteElements.bind(this))); - this.hotkeys.push(new Hotkey('d', true, false, false, this.duplicateElements.bind(this))); - this.hotkeys.push(new Hotkey('a', true, false, false, this.selectAll.bind(this))); - this.hotkeys.push(new Hotkey('z', true, false, true, this.redo.bind(this))); - this.hotkeys.push(new Hotkey('z', true, false, false, this.undo.bind(this))); - this.hotkeys.push(new Hotkey('Delete', false, false, false, this.deleteSelected.bind(this))); + if (!this._builderModeService.readOnly) { + this.hotkeys.push(new Hotkey('c', true, false, false, this.copyElements.bind(this))); + this.hotkeys.push(new Hotkey('v', true, false, false, this.pasteElements.bind(this))); + this.hotkeys.push(new Hotkey('d', true, false, false, this.duplicateElements.bind(this))); + this.hotkeys.push(new Hotkey('a', true, false, false, this.selectAll.bind(this))); + this.hotkeys.push(new Hotkey('z', true, false, true, this.redo.bind(this))); + this.hotkeys.push(new Hotkey('z', true, false, false, this.undo.bind(this))); + this.hotkeys.push(new Hotkey('Delete', false, false, false, this.deleteSelected.bind(this))); + } } bind(): void { @@ -218,7 +220,7 @@ export class SelectTool extends CanvasTool { super.onTransitionUp(event, transition); if (this.isDoubleClick(event) && this.isLeftButtonClick(event)) { this.transitionService.id = transition.id; - this.builderModeService.mode = BuilderMode.FORM_BUILDER; + this._builderModeService.mode = BuilderMode.FORM_BUILDER; return; } this.lastClickTimestamp = event.timeStamp; @@ -280,7 +282,7 @@ export class SelectTool extends CanvasTool { } private onMove(event: PointerEvent): void { - if (!this.isLeftButton(event) || this.ctrlDown) { + if (!this.isLeftButton(event) || this.ctrlDown || this._builderModeService.readOnly) { return; } if (!!this.lasso) { diff --git a/projects/netgrif-components/src/lib/builder/modeler/services/canvas/canvas-listener-tool.ts b/projects/netgrif-components/src/lib/builder/modeler/services/canvas/canvas-listener-tool.ts index 1dfb58f54..aabdfcb67 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/services/canvas/canvas-listener-tool.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/services/canvas/canvas-listener-tool.ts @@ -1,5 +1,5 @@ import {ComponentType} from '@angular/cdk/overlay'; -import {NgZone} from '@angular/core'; +import {Injector, NgZone} from '@angular/core'; import {MatDialog} from '@angular/material/dialog'; import {Router} from '@angular/router'; import {PetriNet} from '@netgrif/petriflow'; @@ -22,6 +22,7 @@ import {MouseListener} from './listeners/mouse-listener'; import {PlaceListener} from './listeners/place-listener'; import {TransitionListener} from './listeners/transition-listener'; import {ToolComponent} from "../../control-panel/tools/tool-component/tool.component"; +import { BuilderModeService } from "../../../services/builder-mode.service"; export abstract class CanvasListenerTool extends Tool implements MouseListener, PlaceListener, TransitionListener, ArcListener, KeyListener { @@ -33,6 +34,7 @@ export abstract class CanvasListenerTool extends Tool implements MouseListener, private readonly _transitionService: SelectedTransitionService; private readonly _hotkeys: Array; private _mouseDown: PointerEvent; + public readonly _builderModeService: BuilderModeService; protected constructor( id: string, @@ -41,13 +43,15 @@ export abstract class CanvasListenerTool extends Tool implements MouseListener, dialog: MatDialog, router: Router, transitionService: SelectedTransitionService, - private readonly _ngZone?: NgZone + private readonly _ngZone?: NgZone, + builderModeService?: BuilderModeService ) { super(id, button, ToolComponent); this._modelService = modelService; this._dialog = dialog; this._router = router; this._transitionService = transitionService; + this._builderModeService = builderModeService; this._hotkeys = new Array(); this.hotkeys.push(new Hotkey('+', false, false, false, this.zoom.bind(this, 1))); this.hotkeys.push(new Hotkey('-', false, false, false, this.zoom.bind(this, -1))); @@ -365,7 +369,15 @@ export abstract class CanvasListenerTool extends Tool implements MouseListener, openDialog(dialog: ComponentType, config: any, afterClose?: (value: any) => void): void { this.beforeDialog(); - this.dialog.open(dialog, config).afterClosed().subscribe(value => { + const finalConfig = this._builderModeService + ? { + ...config, + injector: Injector.create({ + providers: [{provide: BuilderModeService, useValue: this._builderModeService}] + }) + } + : config; + this.dialog.open(dialog, finalConfig).afterClosed().subscribe(value => { if (afterClose) { afterClose(value); } From 7d8a83d22281ef6814ec2b2f0739682b30f298c1 Mon Sep 17 00:00:00 2001 From: chvostek Date: Sun, 11 Oct 2026 15:07:44 +0200 Subject: [PATCH 08/24] [NAE-2489] View only builder - remove margin-bottom from form header - add type to dataRef detail component - fix context menu opening in edit-mode when opened in processRef --- .../edit-panel/edit-panel.component.html | 6 ++++ .../edit-panel/edit-panel.component.ts | 4 ++- .../info-label/info-label.component.scss | 3 +- .../data-detail/data-detail.component.html | 2 +- .../data-detail/data-detail.component.ts | 34 ++---------------- .../modeler/data-mode/data-mode.service.ts | 35 +++++++++++++++++++ .../modeler/edit-mode/edit-mode.component.ts | 27 ++++++++++---- 7 files changed, 70 insertions(+), 41 deletions(-) diff --git a/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.html b/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.html index 537497f4d..3080a1ad7 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.html +++ b/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.html @@ -77,6 +77,12 @@

(change)="notifyGridster()" [disabled]="_builderModeService.readOnly"> {{ 'builder.form-builder.edit-panel.immediate' | translate }} + + {{ 'builder.modeler.data-mode.type' | translate }} + + {{ opt.viewValue }} + + Behavior {{ 'builder.modeler.data-mode.type' | translate }} - {{ opt.viewValue }} + {{ opt.viewValue }} diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts index ee3ede848..720a136a8 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.ts @@ -34,11 +34,8 @@ import {ModelService} from '../../services/model/model.service'; import {DataMasterDetailService} from '../data-master-detail.service'; import {BuilderModeService, BuilderMode} from "../../../services/builder-mode.service"; import {TranslateService} from "@ngx-translate/core"; +import {DataModeService} from "../data-mode.service"; -export interface TypeArray { - viewValue: string; - value: string; -} export interface HistoryDataSave { item: DataVariable, @@ -57,7 +54,6 @@ export class DataDetailComponent implements OnDestroy { componentNameFormCtrl: FormControl; transitionOptions: Array; filteredOptions: Observable>; - typeArray: Array; historyDataSave: HistoryDataSave; public constructor( @@ -70,7 +66,8 @@ export class DataDetailComponent implements OnDestroy { private _actionsMasterDetail: ActionsMasterDetailService, private _historyService: HistoryService, protected _builderModeService: BuilderModeService, - private _translateService: TranslateService + private _translateService: TranslateService, + protected _dataModeService: DataModeService ) { this.formControlRef = new FormControl(); this.componentNameFormCtrl = new FormControl(); @@ -114,31 +111,6 @@ export class DataDetailComponent implements OnDestroy { startWith(''), map(value => this._filter(value)) ); - this.typeArray = [ - {viewValue: this._translateService.instant('builder.modeler.data-mode.boolean'), value: DataType.BOOLEAN}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.button'), value: DataType.BUTTON}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.caseRef'), value: DataType.CASE_REF}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.processRef'), value: DataType.PROCESS_REF}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.date'), value: DataType.DATE}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.datetime'), value: DataType.DATETIME}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.enumeration'), value: DataType.ENUMERATION}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.enumerationMap'), value: DataType.ENUMERATION_MAP}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.file'), value: DataType.FILE}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.fileList'), value: DataType.FILE_LIST}, - {viewValue: 'Filter (deprecated)', value: DataType.FILTER}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.caseFilter'), value: DataType.CASE_FILTER}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.taskFilter'), value: DataType.TASK_FILTER}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.processFilter'), value: DataType.PROCESS_FILTER}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.i18n'), value: DataType.I18N}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.multichoice'), value: DataType.MULTICHOICE}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.multichoiceMap'), value: DataType.MULTICHOICE_MAP}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.number'), value: DataType.NUMBER}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.user'), value: DataType.USER}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.userList'), value: DataType.USER_LIST}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.stringCollection'), value: DataType.STRING_COLLECTION}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.taskRef'), value: DataType.TASK_REF}, - {viewValue: this._translateService.instant('builder.modeler.data-mode.text'), value: DataType.TEXT} - ]; } ngOnDestroy() { diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.service.ts b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.service.ts index 25e8e0069..d5d835250 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.service.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.service.ts @@ -9,10 +9,16 @@ import {ModeService} from '../control-panel/modes/mode-component/mode.service'; import {Tool} from '../control-panel/tools/tool'; import {TranslateService} from "@ngx-translate/core"; +export interface TypeArray { + viewValue: string; + value: string; +} + @Injectable() export class DataModeService extends ModeService { event: EventEmitter; itemData: BehaviorSubject; + _typeArray: Array; constructor( private _tutorialService: TutorialService, @@ -34,5 +40,34 @@ export class DataModeService extends ModeService { this._parentInjector ); this.tools = []; + this._typeArray = [ + {viewValue: this._translateService.instant('builder.modeler.data-mode.boolean'), value: DataType.BOOLEAN}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.button'), value: DataType.BUTTON}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.caseRef'), value: DataType.CASE_REF}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.processRef'), value: DataType.PROCESS_REF}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.date'), value: DataType.DATE}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.datetime'), value: DataType.DATETIME}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.enumeration'), value: DataType.ENUMERATION}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.enumerationMap'), value: DataType.ENUMERATION_MAP}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.file'), value: DataType.FILE}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.fileList'), value: DataType.FILE_LIST}, + {viewValue: 'Filter (deprecated)', value: DataType.FILTER}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.caseFilter'), value: DataType.CASE_FILTER}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.taskFilter'), value: DataType.TASK_FILTER}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.processFilter'), value: DataType.PROCESS_FILTER}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.i18n'), value: DataType.I18N}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.multichoice'), value: DataType.MULTICHOICE}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.multichoiceMap'), value: DataType.MULTICHOICE_MAP}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.number'), value: DataType.NUMBER}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.user'), value: DataType.USER}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.userList'), value: DataType.USER_LIST}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.stringCollection'), value: DataType.STRING_COLLECTION}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.taskRef'), value: DataType.TASK_REF}, + {viewValue: this._translateService.instant('builder.modeler.data-mode.text'), value: DataType.TEXT} + ]; + } + + public get typeArray(): Array { + return this._typeArray; } } diff --git a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/edit-mode.component.ts b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/edit-mode.component.ts index 7f752d0f6..b1f406cbc 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/edit-mode.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/edit-mode.component.ts @@ -9,6 +9,7 @@ import {ContextMenu} from './context-menu/context-menu'; import {ContextMenuComponent} from './context-menu/context-menu.component'; import {EditModeService} from './edit-mode.service'; import {TranslateService} from "@ngx-translate/core"; +import {Subscription} from "rxjs"; @Component({ selector: 'nc-builder-edit-mode', @@ -21,6 +22,8 @@ export class EditModeComponent implements AfterViewInit, OnDestroy { @ViewChild('contextMenu', {read: ElementRef}) contextMenu: ElementRef; @ViewChild('contextMenu') contextMenuComponent: ContextMenuComponent; + private contextMenuSubscription: Subscription; + constructor( private importService: ModelImportService, private _modelService: ModelService, @@ -39,7 +42,7 @@ export class EditModeComponent implements AfterViewInit, OnDestroy { ngAfterViewInit() { ModelerUtils.clearSelection(); - this._editModeService.contextMenuItems.subscribe(menu => { + this.contextMenuSubscription = this._editModeService.contextMenuItems.subscribe(menu => { if (!menu) { this.contextMenu.nativeElement.style.visibility = 'hidden'; return; @@ -64,15 +67,27 @@ export class EditModeComponent implements AfterViewInit, OnDestroy { } private checkPosition(menu: ContextMenu): void { - const area = document.getElementById('modeler_area'); + const host: HTMLElement = this.contextMenu.nativeElement; + const menuElement = (host.firstElementChild ?? host) as HTMLElement; + const area = (host.closest('#modeler_area') ?? document.getElementById('modeler_area')) as HTMLElement; const areaBounds = area.getBoundingClientRect(); - this.contextMenu.nativeElement.style.top = (((menu.position.y + this.contextMenu.nativeElement.firstChild.offsetHeight - areaBounds.y) > area.offsetHeight) - ? (areaBounds.y + area.offsetHeight - this.contextMenu.nativeElement.firstChild.offsetHeight) : (menu.position.y)) + 'px'; - this.contextMenu.nativeElement.style.left = (((menu.position.x + this.contextMenu.nativeElement.firstChild.offsetWidth - areaBounds.x) > area.offsetWidth) - ? (areaBounds.x + area.offsetWidth - this.contextMenu.nativeElement.firstChild.offsetWidth) : (menu.position.x)) + 'px'; + + host.style.left = '0px'; + host.style.top = '0px'; + const origin = host.getBoundingClientRect(); + + const width = menuElement.offsetWidth; + const height = menuElement.offsetHeight; + + const x = Math.max(areaBounds.left, Math.min(menu.position.x, areaBounds.right - width)); + const y = Math.max(areaBounds.top, Math.min(menu.position.y, areaBounds.bottom - height)); + + host.style.left = (x - origin.left) + 'px'; + host.style.top = (y - origin.top) + 'px'; } ngOnDestroy(): void { + this.contextMenuSubscription?.unsubscribe(); this.editModeService.activeTool.unbind(); } From 85da840cad729aa738d0ea9718e2cd65da678210 Mon Sep 17 00:00:00 2001 From: chvostek Date: Mon, 12 Oct 2026 10:55:25 +0200 Subject: [PATCH 09/24] [NAE-2489] View only builder - remove unused attribute --- .../src/lib/builder/builder.component.ts | 7 ------- .../builder/services/builder-integration.service.ts | 10 ---------- 2 files changed, 17 deletions(-) diff --git a/projects/netgrif-components/src/lib/builder/builder.component.ts b/projects/netgrif-components/src/lib/builder/builder.component.ts index 278ae6d7b..123d9e8b1 100644 --- a/projects/netgrif-components/src/lib/builder/builder.component.ts +++ b/projects/netgrif-components/src/lib/builder/builder.component.ts @@ -194,14 +194,9 @@ 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') { this._builderIntegrationService.editTaskId = this._builderIntegrationService.processCase.tasks.find(taskPair => taskPair.transition === 'edit')?.task; - this._builderIntegrationService.onlyTaskView = false; if (this._builderIntegrationService.dataField?.behavior?.visible) { this.builderModeService.readOnly = true; } @@ -216,7 +211,6 @@ export class BuilderComponent implements OnDestroy { const taskId = this._builderIntegrationService.processCase.tasks.find(taskPair => taskPair.transition === 'view')?.task; this.builderModeService.readOnly = true; this._builderIntegrationService.editTaskId = undefined; - this._builderIntegrationService.onlyTaskView = true; this._builderIntegrationService.getXml(taskId).subscribe(value => { this.parseModel(value, BuilderMode.TASK_MODE); this.loading.off(); @@ -227,7 +221,6 @@ export class BuilderComponent implements OnDestroy { } else { this.loading.off(); this._builderIntegrationService.editTaskId = undefined; - this._builderIntegrationService.onlyTaskView = true; } this.builderModeService.mode = BuilderMode.TASK_MODE; } diff --git a/projects/netgrif-components/src/lib/builder/services/builder-integration.service.ts b/projects/netgrif-components/src/lib/builder/services/builder-integration.service.ts index e494f0949..6a6e3345d 100644 --- a/projects/netgrif-components/src/lib/builder/services/builder-integration.service.ts +++ b/projects/netgrif-components/src/lib/builder/services/builder-integration.service.ts @@ -20,7 +20,6 @@ export class BuilderIntegrationService implements OnDestroy { protected _dataField: ProcessRefField; protected _editTaskId: string; protected _isAssigned: boolean; - protected _onlyTaskView: boolean; // todo 2489 uz netreba? protected _reloadCase: Subject; protected _reloadModes: Subject; @@ -31,7 +30,6 @@ export class BuilderIntegrationService implements OnDestroy { protected _taskResourceService: TaskResourceService, protected _exportService: ExportService, protected _log: LoggerService) { - this._onlyTaskView = true; this._reloadCase = new Subject(); this._reloadModes = new Subject(); this._loading = new LoadingEmitter(); @@ -87,14 +85,6 @@ export class BuilderIntegrationService implements OnDestroy { this._editTaskId = value; } - get onlyTaskView(): boolean { - return this._onlyTaskView; - } - - set onlyTaskView(value: boolean) { - this._onlyTaskView = value; - } - get reloadCase(): Observable { return this._reloadCase.asObservable(); } From 2ddc18f2af67b408c13432676d8494b34a6d3a03 Mon Sep 17 00:00:00 2001 From: chvostek Date: Mon, 12 Oct 2026 11:22:49 +0200 Subject: [PATCH 10/24] [NAE-2489] View only builder - fix tests --- .../trigger-tree/trigger-tree.component.spec.ts | 4 +++- .../edit-panel/edit-panel.component.spec.ts | 12 +++++++++++- .../action-editor/action-editor.component.spec.ts | 4 +++- .../task-ref-init-field.component.spec.ts | 4 +++- .../modeler/role-mode/role-mode.component.spec.ts | 7 +++++-- 5 files changed, 25 insertions(+), 6 deletions(-) diff --git a/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.spec.ts b/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.spec.ts index 809f0766e..e5673cf27 100644 --- a/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.spec.ts +++ b/projects/netgrif-components/src/lib/builder/dialogs/dialog-transition-edit/trigger-tree/trigger-tree.component.spec.ts @@ -2,12 +2,14 @@ import {NO_ERRORS_SCHEMA} from '@angular/core'; import {TestBed} from '@angular/core/testing'; import {TriggerTreeComponent} from './trigger-tree.component'; import {TranslateService} from "@ngx-translate/core"; +import {BuilderModeService} from "../../../services/builder-mode.service"; describe('TriggerTreeComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [ - {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }} + {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }}, + BuilderModeService ], declarations: [TriggerTreeComponent], schemas: [NO_ERRORS_SCHEMA], diff --git a/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.spec.ts b/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.spec.ts index 32c4b0aba..e7ea84d28 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.spec.ts +++ b/projects/netgrif-components/src/lib/builder/form-builder/edit-panel/edit-panel.component.spec.ts @@ -12,10 +12,16 @@ import {GridsterService} from '../gridster/gridster.service'; import {FieldListService} from '../field-list/field-list.service'; import {EditPanelComponent} from './edit-panel.component'; import {TranslateService} from "@ngx-translate/core"; +import {DataModeService} from "../../modeler/data-mode/data-mode.service"; +import {TutorialService} from "../../tutorial/tutorial-service"; +import {MortgageService} from "../../modeler/mortgage.service"; +import {HttpClientTestingModule} from "@angular/common/http/testing"; +import {ModelImportService} from "../../modeler/model-import-service"; describe('EditPanelComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], declarations: [EditPanelComponent], providers: [ GridsterService, @@ -28,7 +34,11 @@ describe('EditPanelComponent', () => { {provide: ActionsMasterDetailService, useValue: {}}, {provide: MatDialog, useValue: {}}, {provide: Router, useValue: {}}, - {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }} + {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }}, + DataModeService, + TutorialService, + MortgageService, + {provide: ModelImportService, useValue: {}}, ], schemas: [NO_ERRORS_SCHEMA], }); diff --git a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.spec.ts b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.spec.ts index 5be471f46..ce1b9ce67 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.spec.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-editor/action-editor/action-editor.component.spec.ts @@ -8,6 +8,7 @@ import {ActionEditorComponent} from './action-editor.component'; import { TranslateService } from "@ngx-translate/core"; import {HttpClientTestingModule} from "@angular/common/http/testing"; import {TranslateLibModule} from "@netgrif/components-core"; +import {BuilderModeService} from "../../../../services/builder-mode.service"; describe('ActionEditorComponent', () => { beforeEach(() => { @@ -22,7 +23,8 @@ describe('ActionEditorComponent', () => { ModelService, ArcFactory, {provide: MatDialog, useValue: {}}, - {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }} + {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }}, + BuilderModeService ], schemas: [NO_ERRORS_SCHEMA], }); diff --git a/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.spec.ts b/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.spec.ts index 9c01a2b3d..e7eda88d6 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.spec.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.spec.ts @@ -9,6 +9,7 @@ import {TaskRefInitFieldComponent} from './task-ref-init-field.component'; import {TranslateService} from "@ngx-translate/core"; import {HttpClientTestingModule} from "@angular/common/http/testing"; import {TranslateLibModule} from "@netgrif/components-core"; +import {BuilderModeService} from "../../../services/builder-mode.service"; describe('TaskRefInitFieldComponent', () => { beforeEach(() => { @@ -18,7 +19,8 @@ describe('TaskRefInitFieldComponent', () => { TranslateLibModule, HttpClientTestingModule], providers: [{provide: ModelService, useValue: {model: {}}}, - {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }} + {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }}, + BuilderModeService ], schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA], }); diff --git a/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-mode.component.spec.ts b/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-mode.component.spec.ts index 86ebb2fa4..33326a932 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-mode.component.spec.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-mode.component.spec.ts @@ -5,6 +5,7 @@ import {RoleModeComponent} from './role-mode.component'; import {TranslateService} from "@ngx-translate/core"; import {HttpClientTestingModule} from "@angular/common/http/testing"; import {TranslateLibModule} from "@netgrif/components-core"; +import {BuilderModeService} from "../../services/builder-mode.service"; describe('RoleModeComponent', () => { beforeEach(() => { @@ -14,8 +15,10 @@ describe('RoleModeComponent', () => { HttpClientTestingModule, ], declarations: [RoleModeComponent], - providers: [{provide: RoleMasterDetailService, useValue: {}}, - {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }} + providers: [ + {provide: RoleMasterDetailService, useValue: {}}, + {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }}, + BuilderModeService ], schemas: [NO_ERRORS_SCHEMA], }); From 414682f03b04be9bbe6d17bfd00d855fd219dd5f Mon Sep 17 00:00:00 2001 From: chvostek Date: Mon, 12 Oct 2026 13:06:50 +0200 Subject: [PATCH 11/24] [NAE-2489] View only builder - introduce read-only-builder.ts --- .../src/lib/builder/builder.module.ts | 6 ++++-- .../src/lib/builder/read-only-builder.ts | 15 +++++++++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 projects/netgrif-components/src/lib/builder/read-only-builder.ts diff --git a/projects/netgrif-components/src/lib/builder/builder.module.ts b/projects/netgrif-components/src/lib/builder/builder.module.ts index 53e055b06..69135b018 100644 --- a/projects/netgrif-components/src/lib/builder/builder.module.ts +++ b/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(ProcessRefDefaultComponent, null, injector)); + frontActionRegistry.register('readOnlyBuilder', readOnlyBuilder); } } diff --git a/projects/netgrif-components/src/lib/builder/read-only-builder.ts b/projects/netgrif-components/src/lib/builder/read-only-builder.ts new file mode 100644 index 000000000..8f71ac390 --- /dev/null +++ b/projects/netgrif-components/src/lib/builder/read-only-builder.ts @@ -0,0 +1,15 @@ +import {Injector} from "@angular/core"; +import { + FrontActionDefinition, + FrontAction, +} from '@netgrif/components-core'; +import {BuilderModeService} from "./services/builder-mode.service"; + +export const readOnlyBuilder: FrontActionDefinition = { + call: (injector: Injector, frontAction: FrontAction) => { + const builderModeService = injector.get(BuilderModeService); + if (!!builderModeService) { + builderModeService.readOnly = true; + } + } +} From ff2a12b6cf2276a411a6f1b2930f38274761eca1 Mon Sep 17 00:00:00 2001 From: chvostek Date: Tue, 13 Oct 2026 09:52:22 +0200 Subject: [PATCH 12/24] [NAE-2489] View only builder - fix expansion panel collapsing --- .../field-list/field-list.component.html | 123 +++++++++--------- 1 file changed, 62 insertions(+), 61 deletions(-) diff --git a/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.html b/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.html index 8abcd5e48..05fdb98b5 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.html +++ b/projects/netgrif-components/src/lib/builder/form-builder/field-list/field-list.component.html @@ -1,73 +1,74 @@

{{ 'builder.form-builder.field-list.dataFields' | translate }}

- - - - {{ 'builder.form-builder.field-list.existingFields' | translate }} - - -
- - search - - - - -
- - -
- drag_indicator - delete - - {{item.title?.value}} [{{item.id}}] - -
- - - - -
- {{item.title?.value}} [{{item.id}}] -
- - - - - - - - {{ 'builder.form-builder.field-list.createNewFields' | translate }} - - + + + + + {{ 'builder.form-builder.field-list.existingFields' | translate }} + + +
+ + search + + + - - - - - {{typeTitle(fieldType.type)}} - - - + + -
+ (dragstart)="dragStartHandlerExisting($event, item)" + (click)="addExistingField(item)"> +
drag_indicator - {{component.title}} + delete + + {{item.title?.value}} [{{item.id}}] +
- - + + + +
+ {{item.title?.value}} [{{item.id}}] +
+ + + + + + + + {{ 'builder.form-builder.field-list.createNewFields' | translate }} + + - + + + + + {{typeTitle(fieldType.type)}} + + + +
+ drag_indicator + {{component.title}} +
+ + + + +