Changes workflow for sorting speakers

client/src/app/core/repositories/agenda/list-of-speakers-repository.service.ts

@@ -169,8 +169,8 @@ export class ListOfSpeakersRepositoryService extends BaseHasContentObjectReposit
     /**
      * Posts an (manually) sorted speaker list to the server
      *
+     * @param listOfSpeakers the target list of speakers, which speaker-list is changed.
      * @param speakerIds array of speaker id numbers
-     * @param Item the target agenda item
      */
     public async sortSpeakers(listOfSpeakers: ViewListOfSpeakers, speakerIds: number[]): Promise<void> {
         const restUrl = this.getRestUrl(listOfSpeakers.id, 'sort_speakers');

client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.html

@@ -1,9 +1,9 @@
 <os-head-bar
     [nav]="false"
     [goBack]="true"
-    [editMode]="isSortMode"
+    [editMode]="isMobile && isSortMode"
     (cancelEditEvent)="onCancelSorting()"
-    (saveEvent)="onSaveSorting()"
+    (saveEvent)="onMobileSaveSorting()"
 >
     <!-- Title -->
     <div class="title-slot">
@@ -91,7 +91,13 @@
 
     <!-- Waiting speakers -->
     <div class="waiting-list" *ngIf="speakers && speakers.length > 0">
-        <os-sorting-list [input]="speakers" [live]="!isSortMode" [count]="true" [enable]="opCanManage() && isSortMode">
+        <os-sorting-list
+            [live]="true"
+            [input]="speakers"
+            [count]="true"
+            [enable]="opCanManage() && isSortMode"
+            (sortEvent)="onSortingChanged($event)"
+        >
             <!-- implicit speaker references into the component using ng-template slot -->
             <ng-template let-speaker>
                 <span *osPerms="'agenda.can_manage_list_of_speakers'">
@@ -172,7 +178,7 @@
 </mat-card>
 
 <mat-menu #speakerMenu="matMenu">
-    <button mat-menu-item (click)="isSortMode = true">
+    <button *ngIf="isMobile" mat-menu-item (click)="isSortMode = true">
         <mat-icon>sort</mat-icon>
         <span>{{ 'Sort' | translate }}</span>
     </button>

client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.ts

@@ -15,6 +15,8 @@ import { UserRepositoryService } from 'app/core/repositories/users/user-reposito
 import { ConfigService } from 'app/core/ui-services/config.service';
 import { DurationService } from 'app/core/ui-services/duration.service';
 import { PromptService } from 'app/core/ui-services/prompt.service';
+import { ViewportService } from 'app/core/ui-services/viewport.service';
+import { Selectable } from 'app/shared/components/selectable';
 import { SortingListComponent } from 'app/shared/components/sorting-list/sorting-list.component';
 import { BaseViewComponent } from 'app/site/base/base-view';
 import { ProjectorElementBuildDeskriptor } from 'app/site/base/projectable';
@@ -92,6 +94,11 @@ export class ListOfSpeakersComponent extends BaseViewComponent implements OnInit
      */
     public addSpeakerForm: FormGroup;
 
+    /**
+     * Check, if list-view is seen on mobile-device.
+     */
+    public isMobile = false;
+
     /**
      * @returns true if the list of speakers list is currently closed
      */
@@ -122,6 +129,11 @@ export class ListOfSpeakersComponent extends BaseViewComponent implements OnInit
 
     private closSubscription: Subscription | null;
 
+    /**
+     * List of speakers to save temporarily changes made by sorting-list.
+     */
+    private speakerListAsSelectable: Selectable[] = [];
+
     /**
      * Constructor for speaker list component. Generates the forms.
      *
@@ -151,7 +163,8 @@ export class ListOfSpeakersComponent extends BaseViewComponent implements OnInit
         private userRepository: UserRepositoryService,
         private collectionStringMapper: CollectionStringMapperService,
         private currentListOfSpeakersSlideService: CurrentListOfSpeakersSlideService,
-        private config: ConfigService
+        private config: ConfigService,
+        private viewport: ViewportService
     ) {
         super(title, translate, snackBar);
         this.addSpeakerForm = new FormGroup({ user_id: new FormControl() });
@@ -202,6 +215,8 @@ export class ListOfSpeakersComponent extends BaseViewComponent implements OnInit
             })
         );
 
+        this.subscriptions.push(this.viewport.isMobileSubject.subscribe(isMobile => this.checkSortMode(isMobile)));
+
         this.subscriptions.push(
             this.config.get('agenda_present_speakers_only').subscribe(() => {
                 this.filterUsers();
@@ -307,17 +322,22 @@ export class ListOfSpeakersComponent extends BaseViewComponent implements OnInit
     }
 
     /**
-     * send the current order of the sorting list to the server
+     * Saves sorting on mobile devices.
      */
-    public onSaveSorting(): void {
+    public onMobileSaveSorting(): void {
-        if (this.isSortMode) {
+        this.onSaveSorting(this.speakerListAsSelectable);
-            this.isSortMode = false;
+        this.isSortMode = false;
-            this.listOfSpeakersRepo
+    }
-                .sortSpeakers(
+
-                    this.viewListOfSpeakers,
+    /**
-                    this.listElement.sortedItems.map(el => el.id)
+     * Receives an updated list from sorting-event.
-                )
+     *
-                .catch(this.raiseError);
+     * @param sortedSpeakerList The updated list.
+     */
+    public onSortingChanged(sortedSpeakerList: Selectable[]): void {
+        this.speakerListAsSelectable = sortedSpeakerList;
+        if (!this.isMobile) {
+            this.onSaveSorting(sortedSpeakerList);
         }
     }
 
@@ -493,4 +513,30 @@ export class ListOfSpeakersComponent extends BaseViewComponent implements OnInit
             this.filteredUsers.next(users.filter(u => !this.speakers.some(speaker => speaker.user_id === u.id)));
         }
     }
+
+    /**
+     * send the current order of the sorting list to the server
+     *
+     * @param sortedSpeakerList The list to save.
+     */
+    private onSaveSorting(sortedSpeakerList: Selectable[]): void {
+        if (this.isSortMode) {
+            this.listOfSpeakersRepo
+                .sortSpeakers(
+                    this.viewListOfSpeakers,
+                    sortedSpeakerList.map(el => el.id)
+                )
+                .catch(this.raiseError);
+        }
+    }
+
+    /**
+     * Check, that the sorting mode is immediately active, if not in mobile-view.
+     *
+     * @param isMobile If currently a mobile device is used.
+     */
+    private checkSortMode(isMobile: boolean): void {
+        this.isMobile = isMobile;
+        this.isSortMode = !isMobile;
+    }
 }