Add sort toggle

Author: bastianjoel

client/src/app/site/pages/organization/pages/committees/pages/committee-list/committee-list.module.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 import { DirectivesModule } from 'src/app/ui/directives';
 import { ChipComponent } from 'src/app/ui/modules/chip';
@@ -32,6 +33,7 @@ import { CommitteeListServiceModule } from './services/committee-list-service.mo
         OpenSlidesTranslationModule.forChild(),
         MatDividerModule,
         MatMenuModule,
+        MatTooltipModule,
         MatIconModule,
         MatButtonModule,
         DirectivesModule

client/src/app/site/pages/organization/pages/committees/pages/committee-list/components/committee-list/committee-list.component.html

@@ -22,6 +22,20 @@ <h2>{{ 'Committees' | translate }}</h2>
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
         <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
     </ng-container>
+
+    <div class="extra-controls-slot">
+        <div>
+            @if (selectedView === 'hierarchy') {
+                <button mat-button matTooltip="{{ 'Hierarchy view' | translate }}" (click)="onChangeView('list')">
+                    <mat-icon>format_align_justify</mat-icon>
+                </button>
+            } @else {
+                <button mat-button matTooltip="{{ 'List view' | translate }}" (click)="onChangeView('hierarchy')">
+                    <mat-icon>format_align_right</mat-icon>
+                </button>
+            }
+        </div>
+    </div>
 </os-head-bar>
 
 <os-list
@@ -37,7 +51,7 @@ <h2>{{ 'Committees' | translate }}</h2>
     <div
         *osScrollingTableCell="'name'; row as committee"
         class="cell-slot fill"
-        [style.padding-left]="(committee.all_parent_ids?.length || 0) * 25 + 'px'"
+        [style.padding-left]="(selectedView === 'hierarchy' ? (committee.all_parent_ids?.length || 0) : 0) * 25 + 'px'"
     >
         @if (!isMultiSelect && committee.canAccess()) {
             <a class="stretch-to-fill-parent" [attr.aria-label]="ariaLabel(committee)" [routerLink]="committee.id"></a>

client/src/app/site/pages/organization/pages/committees/pages/committee-list/components/committee-list/committee-list.component.ts

@@ -33,6 +33,8 @@ export class CommitteeListComponent extends BaseListViewComponent<ViewCommittee>
         return this.translate.instant(`Agenda items are in process. Please wait ...`);
     }
 
+    public selectedView = `list`;
+
     public constructor(
         protected override translate: TranslateService,
         public committeeController: CommitteeControllerService,
@@ -50,6 +52,12 @@ export class CommitteeListComponent extends BaseListViewComponent<ViewCommittee>
         super.setTitle(`Committees`);
         this.canMultiSelect = true;
         this.listStorageIndex = COMMITTEE_LIST_STORAGE_INDEX;
+        this.selectedView = this.sortService.hierarchySort ? `hierarchy` : `list`;
+    }
+
+    public onChangeView(type: string): void {
+        this.selectedView = type;
+        this.sortService.hierarchySort = this.selectedView === `hierarchy`;
     }
 
     public editSingle(committee: ViewCommittee): void {

client/src/app/site/pages/organization/pages/committees/pages/committee-list/services/committee-list-sort.service/committee-sort.service.ts

@@ -1,9 +1,10 @@
 import { Injectable, ProviderToken } from '@angular/core';
 import { _ } from '@ngx-translate/core';
+import { BehaviorSubject, map, Observable, withLatestFrom } from 'rxjs';
 import { Id } from 'src/app/domain/definitions/key-types';
 import { BaseRepository } from 'src/app/gateways/repositories/base-repository';
 import { CommitteeRepositoryService } from 'src/app/gateways/repositories/committee-repository.service';
-import { BaseSortListService, OsSortingOption } from 'src/app/site/base/base-sort.service';
+import { BaseSortListService, OsSortingDefinition, OsSortingOption } from 'src/app/site/base/base-sort.service';
 
 import { ViewCommittee } from '../../../../view-models';
 
@@ -13,7 +14,14 @@ import { ViewCommittee } from '../../../../view-models';
 export class CommitteeSortService extends BaseSortListService<ViewCommittee> {
     protected storageKey = `CommitteeList`;
 
-    private hierarchySort = true;
+    private _hierarchySort = new BehaviorSubject(true);
+    public get hierarchySort(): boolean {
+        return this._hierarchySort.value;
+    }
+
+    public set hierarchySort(value: boolean) {
+        this._hierarchySort.next(value);
+    }
 
     protected repositoryToken: ProviderToken<BaseRepository<any, any>> = CommitteeRepositoryService;
 
@@ -34,6 +42,16 @@ export class CommitteeSortService extends BaseSortListService<ViewCommittee> {
         return this.staticSortOptions;
     }
 
+    /**
+     * Updates every time when there's a new sortDefinition. Emits said sortDefinition.
+     */
+    public override get sortingUpdatedObservable(): Observable<OsSortingDefinition<ViewCommittee>> {
+        return super.sortingUpdatedObservable.pipe(
+            withLatestFrom(this._hierarchySort),
+            map(([sort, _]) => sort)
+        );
+    }
+
     /**
      * Sorts the given array according to this services sort settings and returns it.
      */