feat: 802 combobox

frontend/projects/valtimo/case/src/lib/components/case-detail/tab/progress/progress.component.html

@@ -29,16 +29,17 @@
   }}</span>
 
   <div class="process-info-row">
-    <cds-dropdown
+    <cds-combo-box
       [dropUp]="false"
+      [appendInline]="true"
+      [disabled]="obs.processInstanceItems.isLoading"
       [label]="'progress.process' | translate"
-      [skeleton]="obs.processInstanceItems.isLoading"
-      [style.width.px]="350"
-      (selected)="loadProcessInstance($event.item.processInstanceId)"
+      [placeholder]="'progress.process' | translate"
+      [items]="obs.processInstanceItems.value || []"
+      (selected)="loadProcessInstance($event)"
     >
-      <cds-dropdown-list [items]="obs.processInstanceItems.value || []"></cds-dropdown-list>
-    </cds-dropdown>
-
+      <cds-dropdown-list></cds-dropdown-list>
+    </cds-combo-box>
     <div>
       <v-input-label [title]="'progress.version' | translate"></v-input-label>
 

frontend/projects/valtimo/case/src/lib/components/case-detail/tab/progress/progress.component.ts

@@ -162,7 +162,10 @@ export class CaseDetailTabProgressComponent {
     private readonly destroyRef: DestroyRef
   ) {}
 
-  public loadProcessInstance(processInstanceId: string): void {
+  public loadProcessInstance(selection: ListItem | Array<ListItem>): void {
+    const item = Array.isArray(selection) ? selection[0] : selection;
+    const processInstanceId = item?.processInstanceId;
+
     if (!!processInstanceId) {
       this.selectedProcessInstanceId$.next(processInstanceId);
     }

frontend/projects/valtimo/migration/src/lib/migration.component.html

@@ -26,60 +26,52 @@
     </div>
     <div class="row mb-5">
       <div class="col-4">
-        <label for="sourceDef">Source Definition</label>
-        <select
-          class="form-control"
-          id="sourceDef"
-          [ngModel]="fields.source.definition"
-          (ngModelChange)="loadProcessDefinitionVersions($event, 'source')"
+        <cds-combo-box
+          [dropUp]="false"
+          [appendInline]="true"
+          [label]="'Source Definition'"
+          [placeholder]="'- Source Definition -'"
+          [items]="sourceDefinitionItems"
+          (selected)="onDefinitionSelected($event, 'source')"
         >
-          <option [ngValue]="null" selected>- Source Definition -</option>
-          <option *ngFor="let processDef of processDefinitions" [ngValue]="processDef.key">
-            {{ processDef.name }}
-          </option>
-        </select>
+          <cds-dropdown-list></cds-dropdown-list>
+        </cds-combo-box>
       </div>
       <div class="col-2">
-        <label for="sourceVer">Source Version</label>
-        <select
-          class="form-control"
-          id="sourceVer"
-          [ngModel]="fields.source.version"
-          (ngModelChange)="loadProcess($event, 'source')"
+        <cds-combo-box
+          [dropUp]="false"
+          [appendInline]="true"
+          [label]="'Source Version'"
+          [placeholder]="'- Source Version -'"
+          [items]="sourceVersionItems"
+          (selected)="onVersionSelected($event, 'source')"
         >
-          <option [ngValue]="null" selected>- Source Version -</option>
-          <option *ngFor="let processVer of selectedVersions.source" [ngValue]="processVer.id">
-            {{ processVer.version }}
-          </option>
-        </select>
+          <cds-dropdown-list></cds-dropdown-list>
+        </cds-combo-box>
       </div>
       <div class="col-4">
-        <label for="targetDef">Target Definition</label>
-        <select
-          class="form-control"
-          id="targetDef"
-          [ngModel]="fields.target.definition"
-          (ngModelChange)="loadProcessDefinitionVersions($event, 'target')"
+        <cds-combo-box
+          [dropUp]="false"
+          [appendInline]="true"
+          [label]="'Target Definition'"
+          [placeholder]="'- Target Definition -'"
+          [items]="targetDefinitionItems"
+          (selected)="onDefinitionSelected($event, 'target')"
         >
-          <option [ngValue]="null" selected>- Target Definition -</option>
-          <option *ngFor="let processDef of processDefinitions" [ngValue]="processDef.key">
-            {{ processDef.name }}
-          </option>
-        </select>
+          <cds-dropdown-list></cds-dropdown-list>
+        </cds-combo-box>
       </div>
       <div class="col-2">
-        <label for="targetVer">Target Version</label>
-        <select
-          class="form-control"
-          id="targetVer"
-          [ngModel]="fields.target.version"
-          (ngModelChange)="loadProcess($event, 'target')"
+        <cds-combo-box
+          [dropUp]="false"
+          [appendInline]="true"
+          [label]="'Target Version'"
+          [placeholder]="'- Target Version -'"
+          [items]="targetVersionItems"
+          (selected)="onVersionSelected($event, 'target')"
         >
-          <option [ngValue]="null" selected>- Target Version -</option>
-          <option *ngFor="let processVer of selectedVersions.target" [ngValue]="processVer.id">
-            {{ processVer.version }}
-          </option>
-        </select>
+          <cds-dropdown-list></cds-dropdown-list>
+        </cds-combo-box>
       </div>
     </div>
 
@@ -103,15 +95,15 @@
       <tr *ngFor="let node of uniqueFlowNodeMap">
         <td>{{ node.name ? node.name : node.id }}</td>
         <td>
-          <select class="form-control" (change)="taskMapping[node.id] = $event.target.value">
-            <option [value]="null" disabled selected>- Choose Target -</option>
-            <option
-              *ngFor="let targetFlowNode of getFilteredTargetFlowNodeMap(node.$type)"
-              [value]="targetFlowNode.id"
-            >
-              {{ targetFlowNode.name ? targetFlowNode.name : targetFlowNode.id }}
-            </option>
-          </select>
+          <cds-combo-box
+            [dropUp]="false"
+            [appendInline]="true"
+            [placeholder]="'- Choose Target -'"
+            [items]="getFilteredTargetFlowNodeMapItems(node)"
+            (selected)="onTaskMappingSelected($event, node.id)"
+          >
+            <cds-dropdown-list></cds-dropdown-list>
+          </cds-combo-box>
         </td>
       </tr>
     </table>

frontend/projects/valtimo/migration/src/lib/migration.component.ts

@@ -19,6 +19,7 @@ import {ProcessDefinition, ProcessService} from '@valtimo/process';
 import {MigrationProcessDiagramComponent} from './migration-process-diagram/migration-process-diagram.component';
 import {NGXLogger} from 'ngx-logger';
 import {AlertService} from '@valtimo/components';
+import {ListItem} from 'carbon-components-angular';
 
 @Component({
   standalone: false,
@@ -78,30 +79,89 @@ export class MigrationComponent implements AfterViewInit, AfterViewInit {
     return Object.keys(this.taskMapping).length;
   }
 
+  public sourceDefinitionItems: ListItem[] = [];
+  public targetDefinitionItems: ListItem[] = [];
+  public sourceVersionItems: ListItem[] = [];
+  public targetVersionItems: ListItem[] = [];
+  private readonly targetFlowNodeItemsMap = new Map<string, ListItem[]>();
+
+  private refreshDefinitionItems(): void {
+    this.sourceDefinitionItems = this.processDefinitions.map(processDef => ({
+      key: processDef.key,
+      content: processDef.name,
+      selected: this.fields.source.definition === processDef.key,
+    }));
+    this.targetDefinitionItems = this.processDefinitions.map(processDef => ({
+      key: processDef.key,
+      content: processDef.name,
+      selected: this.fields.target.definition === processDef.key,
+    }));
+  }
+
+  private refreshVersionItems(type: string): void {
+    const items = this.selectedVersions[type].map(processVer => ({
+      id: processVer.id,
+      content: `${processVer.version}`,
+      selected: this.fields[type].version === processVer.id,
+    }));
+    if (type === 'source') {
+      this.sourceVersionItems = items;
+    } else {
+      this.targetVersionItems = items;
+    }
+  }
+
   loadProcessDefinitions() {
     this.processService
       .getProcessDefinitions()
       .subscribe((processDefinitions: ProcessDefinition[]) => {
         this.processDefinitions = processDefinitions;
+        this.refreshDefinitionItems();
       });
   }
 
+  public onDefinitionSelected(selection: ListItem | ListItem[], type: string) {
+    const item = Array.isArray(selection) ? selection[0] : selection;
+    const key = item?.key ?? null;
+    this.loadProcessDefinitionVersions(key, type);
+    if (type === 'source') {
+      this.loadProcessDefinitionVersions(key, 'target');
+    }
+  }
+
+  public onVersionSelected(selection: ListItem | ListItem[], type: string) {
+    const item = Array.isArray(selection) ? selection[0] : selection;
+    this.loadProcess(item?.id ?? null, type);
+  }
+
+  public onTaskMappingSelected(selection: ListItem | ListItem[], nodeId: string) {
+    const item = Array.isArray(selection) ? selection[0] : selection;
+    this.taskMapping[nodeId] = item?.id ?? null;
+  }
+
   loadProcessDefinitionVersions(key: string | null, type: string) {
     this.fields[type].definition = key;
     this.selectedVersions[type] = [];
     this.clearProcess(type);
+    this.refreshDefinitionItems();
+    this.refreshVersionItems(type);
     if (key) {
       this.processService
         .getProcessDefinitionVersions(key)
         .subscribe((processDefinitionVersions: ProcessDefinition[]) => {
+          if (this.fields[type].definition !== key) {
+            return;
+          }
           this.selectedVersions[type] = processDefinitionVersions;
+          this.refreshVersionItems(type);
         });
     }
   }
 
   loadProcess(id: string | null, type: string) {
     this.fields[type].version = id;
     this.clearProcess(type);
+    this.refreshVersionItems(type);
     if (id) {
       this.loadProcessDefinitionXML(id, type);
       if (type === 'source') {
@@ -157,10 +217,25 @@ export class MigrationComponent implements AfterViewInit, AfterViewInit {
     });
   }
 
+  public getFilteredTargetFlowNodeMapItems(node): ListItem[] {
+    if (!this.targetFlowNodeItemsMap.has(node.id)) {
+      this.targetFlowNodeItemsMap.set(
+        node.id,
+        this.getFilteredTargetFlowNodeMap(node.$type).map(targetFlowNode => ({
+          id: targetFlowNode.id,
+          content: targetFlowNode.name || targetFlowNode.id,
+          selected: this.taskMapping[node.id] === targetFlowNode.id,
+        }))
+      );
+    }
+    return this.targetFlowNodeItemsMap.get(node.id);
+  }
+
   diagramLoaded(diagramName: string) {
     this.loaded[diagramName] = true;
     if (this.loaded.source && this.loaded.target) {
       this.taskMapping = {};
+      this.targetFlowNodeItemsMap.clear();
       this.setUniqueFlowNodeMap();
     }
   }
@@ -183,6 +258,9 @@ export class MigrationComponent implements AfterViewInit, AfterViewInit {
               version: null,
             },
           };
+          this.refreshDefinitionItems();
+          this.refreshVersionItems('source');
+          this.refreshVersionItems('target');
         },
         err => {
           this.alertService.error('Process migration failed!');

frontend/projects/valtimo/migration/src/lib/migration.module.ts

@@ -22,6 +22,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MigrationProcessDiagramComponent} from './migration-process-diagram/migration-process-diagram.component';
 import {WidgetModule} from '@valtimo/components';
 import {TranslateModule} from '@ngx-translate/core';
+import {ComboBoxModule} from 'carbon-components-angular';
 
 @NgModule({
   declarations: [MigrationComponent, MigrationProcessDiagramComponent],
@@ -32,6 +33,7 @@ import {TranslateModule} from '@ngx-translate/core';
     WidgetModule,
     FormsModule,
     TranslateModule,
+    ComboBoxModule,
   ],
   exports: [MigrationComponent],
 })