wip

projects/valtimo/config/assets/core/de.json

@@ -1494,6 +1494,7 @@
     }
   },
   "processLink": {
+    "create": "Prozesslink erstellen",
     "edit": "Prozesslink bearbeiten",
     "saveChanges": "Änderungen speichern",
     "unlink": "Verknüpfung aufheben",

projects/valtimo/config/assets/core/en.json

@@ -1501,6 +1501,7 @@
     }
   },
   "processLink": {
+    "create": "Create process link",
     "edit": "Edit process link",
     "saveChanges": "Save changes",
     "unlink": "Unlink",

projects/valtimo/config/assets/core/nl.json

@@ -1499,6 +1499,7 @@
     }
   },
   "processLink": {
+    "create": "Proceskoppeling aanmaken",
     "edit": "Proceskoppeling wijzigen",
     "saveChanges": "Wijzigingen opslaan",
     "unlink": "Ontkoppelen",

projects/valtimo/process-link/src/lib/process-link-routing.module.ts

@@ -30,7 +30,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
   declarations: [],
 })

projects/valtimo/process-link/src/lib/services/index.ts

@@ -21,3 +21,5 @@ export * from './process-link-state.service';
 export * from './process-link-step.service';
 export * from './process-link-button.service';
 export * from './form-flow-component.service';
+export * from './url-resolver.service';
+export * from './url-validator.service';

projects/valtimo/process-link/src/public-api.ts

@@ -18,12 +18,8 @@
  * Public API Surface of process-link
  */
 
-export * from './lib/services/form-flow.service';
-export * from './lib/services/process-link.service';
-export * from './lib/services/process-link-state.service';
+export * from './lib/services';
 export * from './lib/services/valtimo-renderer';
-export * from './lib/services/url-resolver.service';
-export * from './lib/services/url-validator.service';
 export * from './lib/components/select-plugin-configuration/select-plugin-configuration.component';
 export * from './lib/components/select-plugin-action/select-plugin-action.component';
 export * from './lib/components/select-url/select-url.component';

projects/valtimo/process-management/src/lib/components/process-management-editor/panel/valtimo-properties-provider.ts

@@ -2,7 +2,9 @@ import {useService} from 'bpmn-js-properties-panel';
 import {html} from 'htm/preact';
 import {is} from 'bpmn-js/lib/util/ModelUtil';
 import {ProcessManagementEditorService} from '../../../services';
-import {ProcessManagementWindow} from '../../../models';
+import {BpmnElement, ProcessManagementWindow} from '../../../models';
+import {ProcessLink} from '@valtimo/process-link';
+import {TranslateService} from '@ngx-translate/core';
 
 class ValtimoPropertiesProvider {
   static $inject = ['propertiesPanel', 'translate'];
@@ -11,12 +13,20 @@ class ValtimoPropertiesProvider {
     return (window as any as ProcessManagementWindow).processManagementEditorService;
   }
 
-  constructor(propertiesPanel: any, translate: any) {
+  private get translateService(): TranslateService {
+    return (window as any as ProcessManagementWindow).translateService;
+  }
+
+  constructor(propertiesPanel: any) {
     propertiesPanel.registerProvider(500, this);
   }
 
-  public getGroups(element: any): (groups: any[]) => any[] {
-    console.log('x', this.processManagementEditorService.processLinksForSelectedDefinition);
+  public getGroups(element: BpmnElement): (groups: any[]) => any[] {
+    const processLink: ProcessLink | null =
+      this.processManagementEditorService.processLinksForSelectedDefinition.find(
+        processLink => processLink.activityId === element.id
+      ) || null;
+
 
     return (groups: any[]) => {
       if (
@@ -27,7 +37,7 @@ class ValtimoPropertiesProvider {
         const customGroup = {
           id: 'customRootGroup',
           label: 'Process link',
-          entries: [this.createCustomButton(element)],
+          entries: [this.createCustomRootElement(element, processLink)],
           groupType: 'root', // Mark this group as root level
         };
         groups.unshift(customGroup); // Add to the top of the panel
@@ -36,27 +46,39 @@ class ValtimoPropertiesProvider {
     };
   }
 
-  public createCustomButton(element: any): any {
+  public createCustomRootElement(element: any, processLink: ProcessLink | null): any {
     return {
-      id: 'customRootButton',
+      translateService: this.translateService,
+      id: 'customRootElement',
+      processLink,
       element,
-      component: CustomButton,
+      component: CustomRootElement,
       isEdited: () => false,
     };
   }
 }
 
-function CustomButton(props: any): any {
-  const {element} = props;
+const CustomRootElement = (props: any): any => {
+  const {element, processLink, translateService} = props;
   const modeling = useService('modeling');
-  const translate = useService('translate');
+  const editProcessLinkText = translateService.instant('interface.edit')
+  const unlinkText = translateService.instant('processLink.unlink')
+  const createText = translateService.instant('processLink.create')
+  console.log("process link", processLink)
 
   const handleClick = () => {
-    console.log(`Custom action triggered for element: ${element.id}`);
-    modeling.updateProperties(element, {customProperty: 'newValue'});
+    // trigger update
+    modeling.updateProperties(element, {});
   };
 
-  return html`<button id="customRootButton" onClick=${handleClick}>test</button> `;
+  return processLink ? html`
+  <div class="process-link-properties-panel">
+    <button class="cds--btn cds--btn--primary cds--btn--md cds--layout--size-md" onClick=${handleClick}>${editProcessLinkText}</button>
+    <button class="cds--btn cds--btn--danger cds--btn--md cds--layout--side-md" onClick=${handleClick}>${unlinkText}</button>
+  </div>` : html`
+  <div class="process-link-properties-panel">
+    <button class="cds--btn cds--btn--primary cds--btn--md cds--layout--size-md" onClick=${handleClick}>${createText}</button>
+  </div>`
 }
 
 const valtimoPropertiesProviderModule = {

projects/valtimo/process-management/src/lib/components/process-management-editor/process-management-editor.component.html

@@ -38,6 +38,8 @@
   <div #viewer class="bpmn__viewer" [style.display]="obs.isReadOnlyProcess ? 'flex' : 'none'"></div>
 </div>
 
+<valtimo-process-link-modal></valtimo-process-link-modal>
+
 <ng-container renderInPageHeader [fullWidth]="true">
   <ng-template>
     <div

projects/valtimo/process-management/src/lib/components/process-management-editor/process-management-editor.component.scss

@@ -79,3 +79,18 @@
     width: 150px;
   }
 }
+
+::ng-deep .process-link-properties-panel {
+  padding: 8px 12px 16px 12px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+
+  .cds--btn {
+    flex-shrink: 1;
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+}

projects/valtimo/process-management/src/lib/components/process-management-editor/process-management-editor.component.ts

@@ -64,6 +64,12 @@ import {distinctUntilChanged} from 'rxjs/operators';
 import {isEqual} from 'lodash';
 import {ProcessManagementEditorService} from '../../services';
 import {ProcessManagementWindow} from '../../models';
+import {
+  ProcessLinkButtonService,
+  ProcessLinkModule,
+  ProcessLinkStateService,
+  ProcessLinkStepService,
+} from '@valtimo/process-link';
 
 @Component({
   selector: 'valtimo-process-management-editor',
@@ -82,8 +88,15 @@ import {ProcessManagementWindow} from '../../models';
     IconModule,
     TranslateModule,
     TagModule,
+    ProcessLinkModule,
+    ProcessLinkModule,
+  ],
+  providers: [
+    ProcessManagementEditorService,
+    ProcessLinkStateService,
+    ProcessLinkStepService,
+    ProcessLinkButtonService,
   ],
-  providers: [ProcessManagementEditorService],
 })
 export class ProcessManagementEditorComponent implements AfterViewInit, OnDestroy {
   @ViewChild('modeler', {static: false}) modelerElementRef!: ElementRef;
@@ -171,6 +184,7 @@ export class ProcessManagementEditorComponent implements AfterViewInit, OnDestro
     this.iconService.registerAll([Deploy16]);
     (window as any as ProcessManagementWindow).processManagementEditorService =
       processManagementEditorService;
+    (window as any as ProcessManagementWindow).translateService = translateService;
   }
 
   public ngAfterViewInit(): void {

projects/valtimo/process-management/src/lib/models/bpmn.model.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+interface BpmnElement {
+  type: string;
+  id: string;
+  di: {id: string};
+}
+
+export {BpmnElement};

projects/valtimo/process-management/src/lib/models/index.ts

@@ -15,3 +15,4 @@
  */
 
 export * from './window.model';
+export * from './bpmn.model';

projects/valtimo/process-management/src/lib/models/window.model.ts

@@ -16,9 +16,11 @@
 
 import {ValtimoWindow} from '@valtimo/config';
 import {ProcessManagementEditorService} from '../services';
+import {TranslateService} from '@ngx-translate/core';
 
 interface ProcessManagementWindow extends ValtimoWindow {
   processManagementEditorService: ProcessManagementEditorService;
+  translateService: TranslateService;
 }
 
 export {ProcessManagementWindow};