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

@@ -13,7 +13,17 @@ import { ViewCommittee } from '../../../../view-models';
 export class CommitteeSortService extends BaseSortListService<ViewCommittee> {
     protected storageKey = `CommitteeList`;
 
-    private hierarchySort = true;
+    private _hierarchySort = true;
+    public get hierarchySort(): boolean {
+        return this._hierarchySort;
+    }
+
+    public set hierarchySort(value: boolean) {
+        this._hierarchySort = value;
+        // TODO: Find way to do a proper list update
+        this.setSorting(this.sortProperty, !this.ascending);
+        this.setSorting(this.sortProperty, !this.ascending);
+    }
 
     protected repositoryToken: ProviderToken<BaseRepository<any, any>> = CommitteeRepositoryService;
 
@@ -38,6 +48,7 @@ export class CommitteeSortService extends BaseSortListService<ViewCommittee> {
      * Sorts the given array according to this services sort settings and returns it.
      */
     public override async sort(array: ViewCommittee[]): Promise<ViewCommittee[]> {
+        console.log(`sort`, this._hierarchySort);
         if (this.hierarchySort) {
             const input = [...array];
             return (await this.doHierarchySort(input, null)).flat(Infinity);