From f2ef564b5d8309ffff42a8d21def6a7b1c479b2b Mon Sep 17 00:00:00 2001
From: Luisa <luisa.beerboom@intevation.de>
Date: Mon, 4 Mar 2024 11:38:54 +0100
Subject: [PATCH] Sort motion supporters in motion detail

---
 .../motion-meta-data.component.html           |  2 +-
 .../motion-meta-data.component.ts             | 39 +++++++++++++++++--
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-meta-data/motion-meta-data.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-meta-data/motion-meta-data.component.html
index 943adf600e..ef6f0bcdc4 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-meta-data/motion-meta-data.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-meta-data/motion-meta-data.component.html
@@ -42,7 +42,7 @@ <h4 *ngIf="perms.isAllowed('support', motion) || motion.hasSupporters()">{{ 'Sup
         {{ motion.supporter_users.length }} {{ 'supporters' | translate }}
     </button>
     <p *ngIf="showSupporters" class="supporters">
-        <os-comma-separated-listing [list]="motion.supporter_users">
+        <os-comma-separated-listing [list]="supportersObservable | async">
             <ng-template let-supporter>{{ supporter.full_name }}</ng-template>
         </os-comma-separated-listing>
     </p>
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-meta-data/motion-meta-data.component.ts b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-meta-data/motion-meta-data.component.ts
index a82d8082ce..3d478c6686 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-meta-data/motion-meta-data.component.ts
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-meta-data/motion-meta-data.component.ts
@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { distinctUntilChanged, map, Subscription } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged, map, Observable, Subscription } from 'rxjs';
 import { Permission } from 'src/app/domain/definitions/permission';
 import { Settings } from 'src/app/domain/models/meetings/meeting';
 import { Motion } from 'src/app/domain/models/motions';
@@ -9,8 +9,10 @@ import { ChangeRecoMode } from 'src/app/domain/models/motions/motions.constants'
 import { ViewMotion, ViewMotionCategory, ViewMotionState, ViewTag } from 'src/app/site/pages/meetings/pages/motions';
 import { MeetingControllerService } from 'src/app/site/pages/meetings/services/meeting-controller.service';
 import { ViewMeeting } from 'src/app/site/pages/meetings/view-models/view-meeting';
+import { ViewUser } from 'src/app/site/pages/meetings/view-models/view-user';
 import { OperatorService } from 'src/app/site/services/operator.service';
 
+import { ParticipantListSortService } from '../../../../../participants/pages/participant-list/services/participant-list-sort/participant-list-sort.service';
 import { MotionForwardDialogService } from '../../../../components/motion-forward-dialog/services/motion-forward-dialog.service';
 import { MotionEditorControllerService } from '../../../../modules/editors/services';
 import { MotionSubmitterControllerService } from '../../../../modules/submitters/services';
@@ -24,7 +26,7 @@ import { SearchListDefinition } from '../motion-extension-field/motion-extension
     templateUrl: `./motion-meta-data.component.html`,
     styleUrls: [`./motion-meta-data.component.scss`]
 })
-export class MotionMetaDataComponent extends BaseMotionDetailChildComponent {
+export class MotionMetaDataComponent extends BaseMotionDetailChildComponent implements OnInit, OnDestroy {
     public motionBlocks: MotionBlock[] = [];
 
     public categories: ViewMotionCategory[] = [];
@@ -114,6 +116,12 @@ export class MotionMetaDataComponent extends BaseMotionDetailChildComponent {
 
     private _forwardingAvailable = false;
 
+    public get supportersObservable(): Observable<ViewUser[]> {
+        return this._supportersSubject;
+    }
+
+    private _supportersSubject = new BehaviorSubject<ViewUser[]>([]);
+
     /**
      * The subscription to the recommender config variable.
      */
@@ -127,7 +135,8 @@ export class MotionMetaDataComponent extends BaseMotionDetailChildComponent {
         private meetingController: MeetingControllerService,
         public motionSubmitterRepo: MotionSubmitterControllerService,
         public motionEditorRepo: MotionEditorControllerService,
-        public motionWorkingGroupSpeakerRepo: MotionWorkingGroupSpeakerControllerService
+        public motionWorkingGroupSpeakerRepo: MotionWorkingGroupSpeakerControllerService,
+        private participantSort: ParticipantListSortService
     ) {
         super();
 
@@ -140,6 +149,19 @@ export class MotionMetaDataComponent extends BaseMotionDetailChildComponent {
         }
     }
 
+    public ngOnInit(): void {
+        this.participantSort.initSorting();
+
+        this.subscriptions.push(
+            this.participantSort.getSortedViewModelListObservable().subscribe(() => this.updateSupportersSubject())
+        );
+    }
+
+    public override ngOnDestroy(): void {
+        this.participantSort.exitSortService();
+        super.ngOnDestroy();
+    }
+
     /**
      * Sets the state
      *
@@ -300,6 +322,15 @@ export class MotionMetaDataComponent extends BaseMotionDetailChildComponent {
         return origin?.canAccess();
     }
 
+    protected override onAfterSetMotion(_previous: ViewMotion, _current: ViewMotion): void {
+        super.onAfterSetMotion(_previous, _current);
+        this.updateSupportersSubject();
+    }
+
+    private async updateSupportersSubject(): Promise<void> {
+        this._supportersSubject.next(await this.participantSort.sort(this.motion.supporter_users));
+    }
+
     private isViewMotion(toTest: ViewMotion | ViewMeeting): boolean {
         return toTest.COLLECTION === Motion.COLLECTION;
     }