diff --git a/projects/nae-example-app/src/app/doc/builder-example/builder-tabs-example.component.ts b/projects/nae-example-app/src/app/doc/builder-example/builder-tabs-example.component.ts index d161444d9..26ea824e6 100644 --- a/projects/nae-example-app/src/app/doc/builder-example/builder-tabs-example.component.ts +++ b/projects/nae-example-app/src/app/doc/builder-example/builder-tabs-example.component.ts @@ -11,7 +11,7 @@ import {TranslateService} from "@ngx-translate/core"; templateUrl: './builder-tabs-example.component.html', styleUrls: ['./builder-tabs-example.component.scss'], providers: [ - {provide: NAE_VIEW_ID_SEGMENT, useValue: 'all-cases'}, + {provide: NAE_VIEW_ID_SEGMENT, useValue: 'builder-tabs'}, {provide: NAE_TASK_FORCE_OPEN, useValue: false}, ViewIdService ] 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/builder.component.ts b/projects/netgrif-components/src/lib/builder/builder.component.ts index b8bb4cc7a..450c4ea47 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; }) }); @@ -193,15 +194,16 @@ export class BuilderComponent implements OnDestroy { this._reloadSub?.unsubscribe(); } - public onlyTaskMode() { - return this._builderIntegrationService.isIntegrated && this._builderIntegrationService.onlyTaskView; - } - protected resolveIntegratedMode() { - if (this._builderIntegrationService.processCase.immediateData.find((data: ImmediateData) => data.stringId === 'state')?.value === 'draft') { - const taskId = this._builderIntegrationService.processCase.tasks.find(taskPair => taskPair.transition === 'edit')?.task; + const stateFieldValue: string = this._builderIntegrationService.processCase.immediateData.find((data: ImmediateData) => data.stringId === 'state')?.value; + const taskId = this._builderIntegrationService.processCase.tasks.find(taskPair => taskPair.transition === 'form')?.task; + if (stateFieldValue === 'draft') { this._builderIntegrationService.editTaskId = taskId; - this._builderIntegrationService.onlyTaskView = false; + const isDataFieldVisible: boolean = this._builderIntegrationService.dataField?.behavior?.visible; + this.builderModeService.readOnly$.next(isDataFieldVisible); + if (isDataFieldVisible) { + this._builderIntegrationService.allowedTransIds = ['view']; + } this._builderIntegrationService.getXml().subscribe(value => { this.parseModel(value, BuilderMode.TASK_MODE); this.loading.off(); @@ -209,10 +211,13 @@ export class BuilderComponent implements OnDestroy { console.log(error); this.loading.off(); }) - } else if (this._builderIntegrationService.processCase.immediateData.find((data: ImmediateData) => data.stringId === 'state')?.value === 'deployed') { - const taskId = this._builderIntegrationService.processCase.tasks.find(taskPair => taskPair.transition === 'view')?.task; + } else if (stateFieldValue === 'deployed' || stateFieldValue === 'archived') { + this.builderModeService.readOnly$.next(true); + const isDataFieldVisible: boolean = this._builderIntegrationService.dataField?.behavior?.visible; + if (isDataFieldVisible) { + this._builderIntegrationService.allowedTransIds = ['view']; + } this._builderIntegrationService.editTaskId = undefined; - this._builderIntegrationService.onlyTaskView = true; this._builderIntegrationService.getXml(taskId).subscribe(value => { this.parseModel(value, BuilderMode.TASK_MODE); this.loading.off(); @@ -221,9 +226,9 @@ export class BuilderComponent implements OnDestroy { this.loading.off(); }) } else { + this.builderModeService.readOnly$.next(false); this.loading.off(); this._builderIntegrationService.editTaskId = undefined; - this._builderIntegrationService.onlyTaskView = true; } this.builderModeService.mode = BuilderMode.TASK_MODE; } 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/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..be94659ef 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 @@ -48,18 +49,28 @@ export class DialogArcEditComponent implements OnInit { [XmlArcType.INHIBITOR, 'radio_button_unchecked'], ]); private modelService: ModelService; + protected _builderModeService: BuilderModeService; + protected _translateService: TranslateService; constructor( @Inject(MAT_DIALOG_DATA) public data: ArcEditData, - protected _translateService: TranslateService ) { this.modelService = data.context.modelService; + this._builderModeService = data.context.builderModeService; + this._translateService = data.context.translateService; this.arc = new ChangedArc(undefined, this.modelService.model.getArc(data.arcId).clone()); this.formControlRef = new FormControl(''); this.multiplicityCtrl = new FormControl('', [ Validators.required, this.validMultiplicity() ]); + if (this._builderModeService.readOnly) { + this.multiplicityCtrl.disable(); + this.formControlRef.disable(); + } else { + this.multiplicityCtrl.enable(); + this.formControlRef.enable(); + } } ngOnInit(): void { 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.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/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..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 @@ -2,7 +2,8 @@
    {{ 'builder.form-builder.edit-panel.numberOfColumns' | translate }} - +

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

    + (change)="notifyGridster()" [disabled]="_builderModeService.readOnly"> {{ 'builder.form-builder.edit-panel.required' | translate }} + (change)="notifyGridster()" [disabled]="_builderModeService.readOnly"> {{ 'builder.form-builder.edit-panel.immediate' | translate }} + + {{ 'builder.modeler.data-mode.type' | translate }} + + {{ opt.viewValue }} + + Behavior - + {{ opt.value }} @@ -81,26 +97,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 +127,8 @@

    + (selectionChange)="notifyGridster()" multiple + [disabled]="_builderModeService.readOnly"> {{ opt.value?.value }} @@ -116,12 +136,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 +151,7 @@

    @@ -139,6 +162,7 @@

    -
    +
    -
    +
    drag_indicator -
    @@ -179,7 +208,7 @@

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

    - @@ -234,12 +266,12 @@

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

    - - @@ -267,7 +301,7 @@

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

    - @@ -324,12 +361,12 @@

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

    - - @@ -373,7 +412,8 @@

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

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

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

    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/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..d2cbf0fcc 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 @@ -1,7 +1,7 @@ import {NGX_MAT_DATE_FORMATS} from '@angular-material-components/datetime-picker'; import {animate, state, style, transition, trigger} from '@angular/animations'; import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; -import {AfterViewInit, Component, HostListener, OnInit} from '@angular/core'; +import {AfterViewInit, Component, HostListener, OnDestroy, OnInit} from '@angular/core'; import {FormControl} from '@angular/forms'; import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete'; import {MAT_DATE_FORMATS} from '@angular/material/core'; @@ -25,7 +25,7 @@ import { TransitionEvent, TransitionEventType, } from '@netgrif/petriflow'; -import {Observable} from 'rxjs'; +import {Observable, Subscription} from 'rxjs'; import {map, startWith, tap} from 'rxjs/operators'; import {DialogRefactorComponent} from '../../dialogs/dialog-refactor/dialog-refactor.component'; import {ActionsMasterDetailService} from '../../modeler/actions-mode/actions-master-detail.service'; @@ -37,6 +37,7 @@ import {DataFieldUtils} from '../data-field-utils'; import {ComponentDef, DataRefDef, FieldListService, PropertyDef} from '../field-list/field-list.service'; import {GridsterService} from '../gridster/gridster.service'; import {BuilderModeService, BuilderMode} from "../../services/builder-mode.service"; +import {DataModeService} from "../../modeler/data-mode/data-mode.service"; @Component({ selector: 'nc-builder-edit-panel', @@ -64,7 +65,7 @@ import {BuilderModeService, BuilderMode} from "../../services/builder-mode.servi {provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT} ] }) -export class EditPanelComponent implements OnInit, AfterViewInit { +export class EditPanelComponent implements OnInit, AfterViewInit, OnDestroy { numOfCols: number; minOfCols: number; hover: boolean; @@ -78,6 +79,7 @@ export class EditPanelComponent implements OnInit, AfterViewInit { componentNameFormCtrl: FormControl; dataRefComponentNameFormCtrl: FormControl; + readOnlySub: Subscription; constructor(public gridsterService: GridsterService, public modelService: ModelService, @@ -86,7 +88,8 @@ export class EditPanelComponent implements OnInit, AfterViewInit { private _actionMode: ActionsModeService, private _fieldListService: FieldListService, private _actionsMasterDetail: ActionsMasterDetailService, - private _builderModeService: BuilderModeService) { + protected _builderModeService: BuilderModeService, + protected _dataModeService: DataModeService) { // this.transitionOptions = []; this.formControlRef = new FormControl(); this.behaviorOptions = [ @@ -99,6 +102,15 @@ export class EditPanelComponent implements OnInit, AfterViewInit { ngOnInit() { this.componentNameFormCtrl = new FormControl(); this.dataRefComponentNameFormCtrl = new FormControl(); + this.readOnlySub = this._builderModeService.readOnly$.subscribe(readOnly => { + if (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; @@ -146,6 +158,10 @@ export class EditPanelComponent implements OnInit, AfterViewInit { ); } + ngOnDestroy(): void { + this.readOnlySub.unsubscribe(); + } + get transition(): Transition { return this.modelService.model.getTransition(this.transitionService.id); } 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..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}} +
    +     +     +     + +
    -
    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/form-builder/gridster/gridster.service.spec.ts b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.service.spec.ts index 39502dcdc..7ba18eea0 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.service.spec.ts +++ b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.service.spec.ts @@ -4,14 +4,20 @@ import {ModelService} from '../../modeler/services/model/model.service'; import {SelectedTransitionService} from '../../modeler/selected-transition.service'; import {GridsterService} from './gridster.service'; import {TranslateService} from "@ngx-translate/core"; +import {BuilderModeService} from "../../services/builder-mode.service"; describe('GridsterService', () => { let service: GridsterService; beforeEach(() => { TestBed.configureTestingModule({ - providers: [GridsterService, ModelService, ArcFactory, SelectedTransitionService, - {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }} + providers: [ + GridsterService, + ModelService, + ArcFactory, + SelectedTransitionService, + {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }}, + BuilderModeService ], }); service = TestBed.inject(GridsterService); diff --git a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.service.ts b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.service.ts index 9fa9da7cd..c1586bfb8 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.service.ts +++ b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, OnDestroy} from '@angular/core'; import { Appearance, Component, @@ -22,7 +22,7 @@ import { GridsterItemComponentInterface, GridType, } from 'angular-gridster2'; -import {BehaviorSubject, Observable, ReplaySubject, Subject} from 'rxjs'; +import {BehaviorSubject, Observable, ReplaySubject, Subject, Subscription} from 'rxjs'; import {debounceTime} from 'rxjs/operators'; import {ModelerConfig} from '../../modeler/modeler-config'; import {SelectedTransitionService} from '../../modeler/selected-transition.service'; @@ -30,9 +30,10 @@ import {ModelService} from '../../modeler/services/model/model.service'; import {DataFieldUtils} from '../data-field-utils'; import {FieldListService, PropertyDef} from '../field-list/field-list.service'; import {GridsterDataField} from './classes/gridster-data-field'; +import {BuilderModeService} from "../../services/builder-mode.service"; @Injectable() -export class GridsterService { +export class GridsterService implements OnDestroy { public static readonly EXISTING_FIELD = 'existingField'; private _options: GridsterConfig; @@ -44,8 +45,9 @@ export class GridsterService { private _onNewFieldPlaced: ReplaySubject; private _optionChanged: Subject; private _historySave: boolean; + private _readOnlySub: Subscription; - constructor(private modelService: ModelService, private transitionService: SelectedTransitionService) { + constructor(private modelService: ModelService, private transitionService: SelectedTransitionService, private _builderModeService: BuilderModeService) { this._options = { gridType: GridType.VerticalFixed, compactType: CompactType.None, @@ -78,10 +80,10 @@ export class GridsterService { emptyCellDragMaxRows: 50, ignoreMarginInRow: false, draggable: { - enabled: true, + enabled: !_builderModeService.readOnly, }, resizable: { - enabled: true, + enabled: !_builderModeService.readOnly, }, swap: false, pushItems: true, @@ -111,6 +113,15 @@ export class GridsterService { this._optionChanged.pipe(debounceTime(300)).subscribe(() => { this._options?.api?.optionsChanged(); }); + this._readOnlySub = this._builderModeService.readOnly$.subscribe((readOnly) => { + this._options.draggable.enabled = !readOnly; + this._options.resizable.enabled = !readOnly; + this._options?.api?.optionsChanged() + }); + } + + ngOnDestroy(): void { + this._readOnlySub.unsubscribe(); } get options(): GridsterConfig { return this._options; } diff --git a/projects/netgrif-components/src/lib/builder/form-builder/info-label/info-label.component.scss b/projects/netgrif-components/src/lib/builder/form-builder/info-label/info-label.component.scss index 79b3b4a22..2603a87e7 100644 --- a/projects/netgrif-components/src/lib/builder/form-builder/info-label/info-label.component.scss +++ b/projects/netgrif-components/src/lib/builder/form-builder/info-label/info-label.component.scss @@ -13,10 +13,9 @@ align-items: center; min-height: 53px; padding: 0 24px; - border-radius: 0 0 8px 8px; background: white; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 2px 0px rgba(0, 0, 0, 0.12); - margin-bottom: 8px; + margin-bottom: 0px; } .info-label-group { diff --git a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-detail/action-detail.component.html b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-detail/action-detail.component.html index 2dc4771e6..39d324699 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-detail/action-detail.component.html +++ b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-detail/action-detail.component.html @@ -1,6 +1,5 @@
    - +
    @@ -35,7 +34,7 @@ {{ 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.scss b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-detail/action-detail.component.scss index 353d2d6ad..7d63bdc8d 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-detail/action-detail.component.scss +++ b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-detail/action-detail.component.scss @@ -4,8 +4,8 @@ } .no-overflow { - height: calc(100vh - 42px); - overflow: auto; + min-height: 100%; + overflow: visible; } .tree-node-invisible { @@ -29,7 +29,8 @@ } .mat-tree-node { - overflow-x: hidden !important; + overflow-x: clip !important; + overflow-y: visible !important; } .margin-top6px { 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.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/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.scss b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-master/action-master.component.scss index ac8022760..e30fd6e3e 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-master/action-master.component.scss +++ b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/action-master/action-master.component.scss @@ -33,7 +33,8 @@ mat-paginator { } .height-fix { - height: calc(100vh - 42px); + min-height: 100%; + overflow: visible; } .height-100 { 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); } - }); } diff --git a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/actions-mode.component.scss b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/actions-mode.component.scss index a9488cbe6..11cdb334f 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/actions-mode/actions-mode.component.scss +++ b/projects/netgrif-components/src/lib/builder/modeler/actions-mode/actions-mode.component.scss @@ -1,3 +1,7 @@ +:host { + height: 100%; +} + .border-right { border-right: 2px solid #DDDDDD; overflow: auto; diff --git a/projects/netgrif-components/src/lib/builder/modeler/components/master-detail/main-master/main-master.component.scss b/projects/netgrif-components/src/lib/builder/modeler/components/master-detail/main-master/main-master.component.scss index 57c77cd6b..116d2b239 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/components/master-detail/main-master/main-master.component.scss +++ b/projects/netgrif-components/src/lib/builder/modeler/components/master-detail/main-master/main-master.component.scss @@ -32,5 +32,5 @@ mat-paginator { } .height-fix { - height: calc(100vh - 42px); + height: 100%; } diff --git a/projects/netgrif-components/src/lib/builder/modeler/components/master-detail/master-detail.component.scss b/projects/netgrif-components/src/lib/builder/modeler/components/master-detail/master-detail.component.scss index 502452b83..ad12da940 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/components/master-detail/master-detail.component.scss +++ b/projects/netgrif-components/src/lib/builder/modeler/components/master-detail/master-detail.component.scss @@ -1,3 +1,9 @@ +:host { + display: block; + height: 100%; + min-height: 0; +} + .container { display: flex; width: 100%; @@ -6,6 +12,7 @@ .master, .detail { height: 100%; + min-height: 0; overflow: auto; } 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 6443443f5..08f5f5cf9 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 @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, OnDestroy} from '@angular/core'; import {ActionsModeService} from '../actions-mode/actions-mode.service'; import {DataModeService} from '../data-mode/data-mode.service'; import {EditModeService} from '../edit-mode/edit-mode.service'; @@ -19,13 +19,17 @@ import {Tool} from './tools/tool'; import {BuilderModeService} from "../../services/builder-mode.service"; import {TaskModeService} from "../task-mode/task-mode.service"; import {BuilderIntegrationService} from "../../services/builder-integration.service"; +import {Subscription} from "rxjs"; @Injectable() -export class ControlPanelService { +export class ControlPanelService implements OnDestroy { private _modeRegistry: ModeRegistry; private _activeMode: Mode; private _defaultMode: Mode; + private _modeSubscription: Subscription; + private _reloadModeSubscription: Subscription; + private _readOnlySubscription: Subscription; constructor( private _editModeService: EditModeService, @@ -45,14 +49,16 @@ export class ControlPanelService { private _builderModeService: BuilderModeService, private _builderIntegrationService: BuilderIntegrationService ) { - this.initialize(); - this._builderModeService.mode$().subscribe(mode => { + this._readOnlySubscription = this._builderModeService.readOnly$.subscribe(() => { + this.initialize(); + }); + this._modeSubscription = this._builderModeService.mode$().subscribe(mode => { const navigatedMode = this._modeRegistry.getItem(mode); if (!!navigatedMode) { this.activate(navigatedMode); } }); - this._builderIntegrationService.reloadModes.subscribe(() => { + this._reloadModeSubscription = this._builderIntegrationService.reloadModes.subscribe(() => { this.initialize(); }) } @@ -60,27 +66,22 @@ 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._exportModelTool); + this._globalToolRegistry.registerItem(this._exportSvgTool); + if (!this._builderModeService.readOnly) { this._globalToolRegistry.registerItem(this._undoTool); this._globalToolRegistry.registerItem(this._redoTool); - } else { - this._globalToolRegistry.registerItem(this._exportModelTool); - this._globalToolRegistry.registerItem(this._exportSvgTool); } } - protected initializeNormalMode() { + protected initializeMode() { if (this._builderIntegrationService.isIntegrated) { this.registerMode(this._taskModeService); } @@ -90,20 +91,22 @@ export class ControlPanelService { this.registerMode(this._roleModeService); this.registerMode(this._actionModeService); this.registerMode(this._i18nModeService); - this.registerMode(this._historyModeService); + if (!this._builderModeService.readOnly) { + this.registerMode(this._historyModeService); + } } - protected initializeOnlyTaskMode() { - this.registerMode(this._taskModeService); - this.registerMode(this._simulationModeService); + ngOnDestroy(): void { + this._modeSubscription?.unsubscribe(); + this._reloadModeSubscription?.unsubscribe(); + this._readOnlySubscription?.unsubscribe(); } // TODO: NAB-326 fix tool vs toolgroup and dividers problem private registerMode(modeService: ModeService) { const mode = modeService.mode; - if (!(mode.tools.getToolPortals()?.length > 0)) { - modeService.tools.forEach(g => g.tools.forEach(t => mode.tools.registerItem(t, modeService))); - } + mode.resetTools(); + modeService.tools.forEach(g => g.tools.forEach(t => mode.tools.registerItem(t, modeService))); this._modeRegistry.registerItem(mode); } diff --git a/projects/netgrif-components/src/lib/builder/modeler/control-panel/modes/mode.ts b/projects/netgrif-components/src/lib/builder/modeler/control-panel/modes/mode.ts index 160aa3686..85c9fa589 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/control-panel/modes/mode.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/control-panel/modes/mode.ts @@ -11,15 +11,19 @@ export class Mode extends Identifiable { private _routerLink: string; private _url: string private _tutorialStep: TutorialStep; - private readonly _tools: ToolRegistry; + private _tools: ToolRegistry; - constructor(id: string, button: ControlPanelButton, routerLink: string, url: string, tutorialStep: TutorialStep, injector: Injector) { + constructor(id: string, button: ControlPanelButton, routerLink: string, url: string, tutorialStep: TutorialStep, protected _injector: Injector) { super(id); this._button = button; this._routerLink = routerLink; this._url = url; this._tutorialStep = tutorialStep; - this._tools = new ToolRegistry(injector); + this._tools = new ToolRegistry(_injector); + } + + public resetTools(): void { + this._tools = new ToolRegistry(this._injector); } public activate(): void { 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..8763a4220 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,8 +32,8 @@ {{ 'builder.modeler.data-mode.type' | translate }} - - {{ opt.viewValue }} + + {{ 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.scss b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.scss index 6cb5aa267..084edba60 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.scss +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-detail/data-detail.component.scss @@ -116,7 +116,8 @@ } .height-fix { - height: calc(100vh - 42px); + min-height: 100%; + overflow: visible; } .full-width { 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..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( @@ -69,11 +65,17 @@ export class DataDetailComponent implements OnDestroy { private _actionMode: ActionsModeService, private _actionsMasterDetail: ActionsMasterDetailService, private _historyService: HistoryService, - private _builderModeService: BuilderModeService, - private _translateService: TranslateService + protected _builderModeService: BuilderModeService, + private _translateService: TranslateService, + protected _dataModeService: DataModeService ) { 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) { @@ -109,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-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.scss b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.scss index e69de29bb..a2b6bcc54 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.scss +++ b/projects/netgrif-components/src/lib/builder/modeler/data-mode/data-mode.component.scss @@ -0,0 +1,3 @@ +:host { + height: 100%; +} 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..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,8 +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; @@ -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/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/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.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/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(''); } 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.component.ts b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/edit-mode.component.ts index 7f752d0f6..84290bc3b 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 @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, ElementRef, HostListener, OnDestroy, ViewChild, ChangeDetectionStrategy} from '@angular/core'; +import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, OnDestroy, ViewChild, ChangeDetectionStrategy} from '@angular/core'; import {MatDialog} from '@angular/material/dialog'; import {NgxDropzoneChangeEvent} from 'ngx-dropzone'; import {ModelImportService} from '../model-import-service'; @@ -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,14 +22,19 @@ export class EditModeComponent implements AfterViewInit, OnDestroy { @ViewChild('contextMenu', {read: ElementRef}) contextMenu: ElementRef; @ViewChild('contextMenu') contextMenuComponent: ContextMenuComponent; + private contextMenuSubscription: Subscription; + private gridSubscription: Subscription; + constructor( private importService: ModelImportService, private _modelService: ModelService, private _editModeService: EditModeService, private historyService: HistoryService, public dialog: MatDialog, - private _translateService: TranslateService + private _translateService: TranslateService, + private _cdr: ChangeDetectorRef ) { + this.gridSubscription = this._editModeService.gridChanged$?.subscribe(() => this._cdr.markForCheck()); } @HostListener('contextmenu', ['$event']) @@ -39,7 +45,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 +70,28 @@ 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.gridSubscription?.unsubscribe(); this.editModeService.activeTool.unbind(); } 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..45fe0dbb6 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 @@ -6,7 +6,7 @@ import {Arc, ArcType, NodeElement, Place, Transition} from '@netgrif/petriflow'; import {PetriflowCanvasService, PetriflowNode} from '@netgrif/petriflow.svg'; import {InjectedTabData, NAE_TAB_DATA} from '@netgrif/components-core'; import {PanzoomOptions} from '@panzoom/panzoom'; -import {BehaviorSubject, Subscription} from 'rxjs'; +import {BehaviorSubject, Subject, Subscription} from 'rxjs'; import {ChangedArc} from '../../dialogs/dialog-arc-edit/changed-arc'; import {ChangedTransition} from '../../dialogs/dialog-transition-edit/changed-transition'; import {TutorialService} from '../../tutorial/tutorial-service'; @@ -53,6 +53,7 @@ import {TranslateService} from "@ngx-translate/core"; export class EditModeService extends CanvasModeService implements OnDestroy { public contextMenuItems: BehaviorSubject; + public gridChanged$ = new Subject(); // TODO: NAB-326 refactor public switchTools: ToolGroup; public panzoomConfiguration: PanzoomOptions = { @@ -69,6 +70,7 @@ export class EditModeService extends CanvasModeService implements On private _placeSubscription: Subscription; private _transitionSubscription: Subscription; private _arcSubscription: Subscription; + private _readOnlySubscription: Subscription; constructor( _arcFactory: ArcFactory, @@ -77,7 +79,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 +107,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)); @@ -144,6 +124,49 @@ export class EditModeService extends CanvasModeService implements On this._placeSubscription?.unsubscribe(); this._transitionSubscription?.unsubscribe(); this._arcSubscription?.unsubscribe(); + this._readOnlySubscription?.unsubscribe(); + } + + protected initializeTools(context: CanvasToolContext) { + this._readOnlySubscription = this._builderModeService.readOnly$.subscribe(readOnly => { + if (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) { 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/grid-tool.ts b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/services/modes/grid-tool.ts index 60556957e..b52a39552 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/edit-mode/services/modes/grid-tool.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/edit-mode/services/modes/grid-tool.ts @@ -23,6 +23,7 @@ export class GridTool extends CanvasTool { onClick(): void { super.onClick(); this.editModeService.canvasService.gridOnOff(); + this.editModeService.gridChanged$.next(); let newIcon = GridTool.ICON_OFF; let newTooltip = this._translateService.instant('builder.modeler.edit-mode.services.showGrid'); if (this.editModeService.canvasService.gridConfiguration.enabled) { 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..fd7f7ed6c 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 @@ -32,6 +32,15 @@ export class SelectTool extends CanvasTool { private lastDragPoint: DOMPoint; private arcPointIndex: number; private lastClickTimestamp: number = 0; + private readonly additionalHotKeys: Array = [ + new Hotkey('c', true, false, false, this.copyElements.bind(this)), + new Hotkey('v', true, false, false, this.pasteElements.bind(this)), + new Hotkey('d', true, false, false, this.duplicateElements.bind(this)), + new Hotkey('a', true, false, false, this.selectAll.bind(this)), + new Hotkey('z', true, false, true, this.redo.bind(this)), + new Hotkey('z', true, false, false, this.undo.bind(this)), + new Hotkey('Delete', false, false, false, this.deleteSelected.bind(this)) + ]; constructor(context: CanvasToolContext) { super( @@ -44,13 +53,13 @@ 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))); + this._builderModeService.readOnly$.subscribe((readOnly) => { + if (!readOnly) { + this.hotkeys.push(...this.additionalHotKeys); + } else if (this.hotkeys.includes(this.additionalHotKeys[0])) { + super.initializeHotkeys(); + } + }); } bind(): void { @@ -218,7 +227,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 +289,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) { @@ -462,6 +471,9 @@ export class SelectTool extends CanvasTool { } moveSelected(): void { + if (this._builderModeService.readOnly) { + return; + } this.selectedElements.places.forEach(p => this.editModeService.movePlace(p)); this.selectedElements.transitions.forEach(t => this.editModeService.moveTransition(t)); this.selectedElements.arcs.forEach(a => { diff --git a/projects/netgrif-components/src/lib/builder/modeler/history-mode/history-mode.component.scss b/projects/netgrif-components/src/lib/builder/modeler/history-mode/history-mode.component.scss index 848add9e9..230044206 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/history-mode/history-mode.component.scss +++ b/projects/netgrif-components/src/lib/builder/modeler/history-mode/history-mode.component.scss @@ -1,3 +1,7 @@ +:host { + height: 100%; +} + .container { display: flex; width: 100%; 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..9d95dfd01 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 { @@ -107,6 +114,7 @@ export class LanguagesComponent implements OnInit, OnDestroy { } selectLocale(locale) { + this.i18nControlService.updateI18ns(); this._languageSelect.locale = locale; this.i18nModeService.activate(this.i18nModeService.translationsTool); } 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 { diff --git a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/translations.component.ts b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/translations.component.ts index 90dd278f7..a81ff66b3 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/translations.component.ts +++ b/projects/netgrif-components/src/lib/builder/modeler/i18n-mode/translations/translations.component.ts @@ -85,6 +85,7 @@ export class TranslationsComponent implements OnInit, OnDestroy { } selectLocale() { + this.i18nService.updateI18ns(); this._translation = this.modelService.model.getI18n(this.locale?.languageCode); } 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.scss b/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-detail/role-detail.component.scss index 4101d960b..7d5df62b6 100644 --- a/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-detail/role-detail.component.scss +++ b/projects/netgrif-components/src/lib/builder/modeler/role-mode/role-detail/role-detail.component.scss @@ -3,7 +3,8 @@ } .height-fix { - height: calc(100vh - 42px); + min-height: 100%; + overflow: visible; } .full-width { 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 }}
-
+
-
+