From 5ec5420c1bb6c2236ee42744c98cff2d3e8350f2 Mon Sep 17 00:00:00 2001 From: Maxim Buur Date: Fri, 15 Nov 2024 15:10:24 +0100 Subject: [PATCH] version switch, progress --- .../process-management-editor.component.html | 25 ++++- .../process-management-editor.component.scss | 4 + .../process-management-editor.component.ts | 106 ++++++++++++++---- 3 files changed, 114 insertions(+), 21 deletions(-) diff --git a/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.html b/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.html index 34bb893a1..1f59a29ed 100644 --- a/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.html +++ b/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.html @@ -47,15 +47,38 @@ class="page-header-actions" *ngIf="{ processDefinitionVersionsListItems: processDefinitionVersionsListItems$ | async, + loading: loading$ | async, + changesPending: changesPending$ | async, + isReadOnlyProcess: isReadOnlyProcess$ | async, + compactMode: compactMode$ | async, } as actionsObs" >
- +
+ +
+ +
diff --git a/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.scss b/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.scss index 434888283..c27fb0acf 100644 --- a/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.scss +++ b/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.scss @@ -38,6 +38,10 @@ } .page-header-actions { + display: flex; + width: 100%; + justify-content: space-between; + &__version-dropdown { width: 150px; } diff --git a/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.ts b/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.ts index b95764d6a..7367dc697 100644 --- a/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.ts +++ b/projects/valtimo/process-management/src/lib/process-management-editor/process-management-editor.component.ts @@ -18,17 +18,39 @@ import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angul import {CommonModule} from '@angular/common'; import { FitPageDirectiveModule, + PageHeaderService, PageTitleService, RenderInPageHeaderDirectiveModule, } from '@valtimo/components'; import {ActivatedRoute} from '@angular/router'; -import {BehaviorSubject, combineLatest, filter, map, Observable, switchMap, take, tap} from 'rxjs'; +import { + BehaviorSubject, + combineLatest, + filter, + from, + map, + Observable, + startWith, + Subject, + switchMap, + take, + tap, +} from 'rxjs'; import {ProcessDefinition, ProcessService} from '@valtimo/process'; -import {DropdownModule, ListItem, LoadingModule, SelectModule} from 'carbon-components-angular'; +import { + ButtonModule, + DropdownModule, + IconModule, + IconService, + ListItem, + LoadingModule, + SelectModule, +} from 'carbon-components-angular'; import Modeler from 'bpmn-js/lib/Modeler'; import BpmnViewer from 'bpmn-js'; import {ReactiveFormsModule} from '@angular/forms'; -import {TranslateService} from '@ngx-translate/core'; +import {TranslateModule, TranslateService} from '@ngx-translate/core'; +import {Deploy16} from '@carbon/icons'; @Component({ selector: 'valtimo-process-management-editor', @@ -43,6 +65,9 @@ import {TranslateService} from '@ngx-translate/core'; DropdownModule, ReactiveFormsModule, SelectModule, + ButtonModule, + IconModule, + TranslateModule, ], }) export class ProcessManagementEditorComponent implements AfterViewInit, OnDestroy { @@ -84,11 +109,21 @@ export class ProcessManagementEditorComponent implements AfterViewInit, OnDestro filter(key => !!key) ); - public readonly processDefinitionVersions$ = this._processDefinitionKey$.pipe( - switchMap(processDefinitionKey => + private readonly _reload$ = new Subject(); + + public readonly changesPending$ = new BehaviorSubject(false); + + public readonly processDefinitionVersions$ = combineLatest([ + this._processDefinitionKey$, + this._reload$.pipe(startWith(null)), + ]).pipe( + switchMap(([processDefinitionKey]) => this.processService.getProcessDefinitionVersions(processDefinitionKey) ), - tap(processDefinitions => this.setSelectedProcessDefinitionOnInit(processDefinitions)) + tap(processDefinitions => { + this.changesPending$.next(false); + this.setSelectedProcessDefinitionToLatest(processDefinitions); + }) ); public readonly processDefinitionVersionsListItems$: Observable = combineLatest([ @@ -97,20 +132,29 @@ export class ProcessManagementEditorComponent implements AfterViewInit, OnDestro this.translateService.stream('key'), ]).pipe( map(([processDefinitionVersions, selectionProcessDefinition]) => - processDefinitionVersions.map(processDefinitionVersion => ({ - id: processDefinitionVersion.version, - content: `${this.translateService.instant('processManagementEditor.version')}${processDefinitionVersion.version}`, - selected: selectionProcessDefinition.version === processDefinitionVersion.version, - })) + processDefinitionVersions + .map(processDefinitionVersion => ({ + id: processDefinitionVersion.version, + content: `${this.translateService.instant('processManagementEditor.version')}${processDefinitionVersion.version}`, + selected: selectionProcessDefinition.version === processDefinitionVersion.version, + processDefinitionVersion, + })) + .sort((a, b) => b.id - a.id) ) ); + public readonly compactMode$ = this.pageHeaderService.compactMode$; + constructor( private readonly route: ActivatedRoute, private readonly processService: ProcessService, private readonly pageTitleService: PageTitleService, - private readonly translateService: TranslateService - ) {} + private readonly translateService: TranslateService, + private readonly iconService: IconService, + private readonly pageHeaderService: PageHeaderService + ) { + this.iconService.registerAll([Deploy16]); + } public ngAfterViewInit(): void { this.initModeler(); @@ -122,23 +166,45 @@ export class ProcessManagementEditorComponent implements AfterViewInit, OnDestro this._bpmnViewer?.destroy(); } - private setSelectedProcessDefinitionOnInit(processDefinitions: ProcessDefinition[]): void { - this._selectionProcessDefinition$.pipe(take(1)).subscribe(selectedProcessDefinition => { - if (selectedProcessDefinition) return; + public deployChanges(): void { + from(this._bpmnModeler.saveXML()) + .pipe( + take(1), + switchMap(result => this.processService.deployProcess(result.xml)) + ) + .subscribe(() => { + this.reload(); + }); + } - this._selectionProcessDefinition$.next( - processDefinitions.reduce((acc, version) => (version.version > acc.version ? version : acc)) - ); - }); + public selectedVersionChange(event: {item: {processDefinitionVersion: ProcessDefinition}}): void { + this._selectionProcessDefinition$.next(event?.item?.processDefinitionVersion); + } + + private setSelectedProcessDefinitionToLatest(processDefinitions: ProcessDefinition[]): void { + this._selectionProcessDefinition$.next( + processDefinitions.reduce((acc, version) => (version.version > acc.version ? version : acc)) + ); } private initModeler(): void { this._bpmnModeler = new Modeler(); this._bpmnModeler?.attachTo(this.modelerElementRef.nativeElement); + this.listenToModelerEvents(); + } + + private listenToModelerEvents(): void { + this._bpmnModeler.on('commandStack.changed', () => { + this.changesPending$.next(true); + }); } private initViewer(): void { this._bpmnViewer = new BpmnViewer(); this._bpmnViewer?.attachTo(this.viewerElementRef.nativeElement); } + + private reload(): void { + this._reload$.next(null); + } }