From bcc71f19972704946eb16064fb9768f3cd53b46c Mon Sep 17 00:00:00 2001
From: reiterl <ludwig.reiter@intevation.de>
Date: Fri, 10 Nov 2023 12:30:01 +0100
Subject: [PATCH] Add sorting to workflow next states (comma-list, menu)
 (#2983)

---
 .../components/workflow-detail/workflow-detail.component.html | 4 ++--
 .../components/workflow-detail/workflow-detail.component.ts   | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.html
index 8d25096c82..19ba4fe674 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.html
@@ -106,7 +106,7 @@ <h2 *ngIf="workflow">
                             <div class="inner-table">
                                 <div *ngIf="!state.next_states.length">-</div>
                                 <div *ngIf="state.next_states.length">
-                                    <os-comma-separated-listing [list]="state.next_states">
+                                    <os-comma-separated-listing [list]="sortedNextStates(state)">
                                         <ng-template let-next>{{ next.name }}</ng-template>
                                     </os-comma-separated-listing>
                                 </div>
@@ -217,7 +217,7 @@ <h1 mat-dialog-title>
 <!-- select next states menu -->
 <mat-menu matMenuContent #nextStatesMenu="matMenu">
     <ng-template let-state="state" matMenuContent>
-        <div *ngFor="let nextState of workflow.states">
+        <div *ngFor="let nextState of getWorkflowStates()">
             <button mat-menu-item *ngIf="nextState.name !== state.name" (click)="onSetNextState(nextState, state)">
                 <mat-icon *ngIf="state.next_state_ids?.includes(nextState.id)">check</mat-icon>
                 <span>{{ nextState.name }}</span>
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.ts b/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.ts
index c8f670595e..d5dd6dce2e 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.ts
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.ts
@@ -534,6 +534,10 @@ Note: Does not affect the visibility of change recommendations.`
         return (<any>state)[perm.selector];
     }
 
+    public sortedNextStates(state: ViewMotionState): ViewMotionState[] {
+        return state.next_states.sort((a, b) => a.weight - b.weight);
+    }
+
     private async deleteWorkflowState(state: ViewMotionState): Promise<void> {
         const title = this.translate.instant(`Are you sure you want to delete this state?`);
         const content = `${state.name}`;