Cleanup controlflow (#3879)

OpenSlides · Jul 23, 2024 · 2f2ce4f · 2f2ce4f
1 parent 0c6cfe8
commit 2f2ce4f
Show file tree

Hide file tree

Showing 20 changed files with 95 additions and 124 deletions.
diff --git a/client/src/app/site/modules/chip-select/components/chip-select/chip-select.component.html b/client/src/app/site/modules/chip-select/components/chip-select/chip-select.component.html
@@ -11,8 +11,7 @@
             </mat-basic-chip>
         }
     </mat-chip-listbox>
-}
-@if (chips.length < 1) {
+} @else {
     <mat-basic-chip
         disableRipple
         [class]="chipClass || 'grey'"

diff --git a/...c/app/site/modules/global-headbar/components/account-button/account-button.component.html b/...c/app/site/modules/global-headbar/components/account-button/account-button.component.html
@@ -72,8 +72,7 @@
                     <span class="menu-text">{{ 'Logout' | translate }}</span>
                 </button>
             </div>
-        }
-        @if (!user) {
+        } @else if (!user) {
             <div>
                 <button mat-menu-item (click)="login()">
                     <mat-icon class="menu-icon">login</mat-icon>

diff --git a/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html b/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html
@@ -6,8 +6,7 @@
         >
             @if (banner.component) {
                 <ng-template [cdkPortalOutlet]="createComponentPortal(banner.component)"></ng-template>
-            }
-            @if (!banner.component) {
+            } @else {
                 <a class="banner-link" [routerLink]="banner.link" [style.cursor]="banner.link ? 'pointer' : 'default'">
                     <mat-icon inline>{{ banner.icon }}</mat-icon>
                     <span>{{ banner.text | translate }}</span>

diff --git a/...eetings-component-collector/detail-view/components/detail-view/detail-view.component.html b/...eetings-component-collector/detail-view/components/detail-view/detail-view.component.html
@@ -1,15 +1,13 @@
 @if (shouldShowContent) {
     <ng-content></ng-content>
-}
-@if (!shouldShowContent && loading) {
+} @else if (loading) {
     <os-head-bar [goBack]="true" [nav]="false"></os-head-bar>
     <div class="spinner-container flex-center">
         <div class="spinner-inner-container">
             <mat-progress-spinner class="example-margin" color="primary" mode="indeterminate"></mat-progress-spinner>
         </div>
     </div>
-}
-@if (!shouldShowContent && !loading) {
+} @else {
     <os-head-bar [goBack]="true" [nav]="false">
         <div class="title-slot">{{ errorMessage | translate }}</div>
     </os-head-bar>

diff --git a/...onent-collector/detail-view/components/projectable-title/projectable-title.component.html b/...onent-collector/detail-view/components/projectable-title/projectable-title.component.html
@@ -1,13 +1,14 @@
 <div class="projectable-title-line">
-    @if (titleStyle === 'h1' && model) {
-        <h1 class="model-title">
-            <ng-container [ngTemplateOutlet]="titleline"></ng-container>
-        </h1>
-    }
-    @if (titleStyle === 'h2' && model) {
-        <h2 class="model-title">
-            <ng-container [ngTemplateOutlet]="titleline"></ng-container>
-        </h2>
+    @if (model) {
+        @if (titleStyle === 'h1') {
+            <h1 class="model-title">
+                <ng-container [ngTemplateOutlet]="titleline"></ng-container>
+            </h1>
+        } @else if (titleStyle === 'h2') {
+            <h2 class="model-title">
+                <ng-container [ngTemplateOutlet]="titleline"></ng-container>
+            </h2>
+        }
     }
     <div class="suffix">
         @if (isProjectedObservable | async) {

diff --git a/...nt-collector/projector-button/components/projector-button/projector-button.component.html b/...nt-collector/projector-button/components/projector-button/projector-button.component.html
@@ -1,10 +1,19 @@
 <ng-container *osPerms="permission.projectorCanManage">
-    @if (!menuItem && !blendIn) {
+    @if (menuItem) {
+        <button mat-menu-item [disabled]="disabled" (click)="onClick()">
+            <mat-icon>videocam</mat-icon>
+            <span #ref><ng-content></ng-content></span>
+            @if (!ref.innerHTML.trim()) {
+                <span>
+                    {{ 'Project' | translate }}
+                </span>
+            }
+        </button>
+    } @else if (!blendIn) {
         <button mat-mini-fab [color]="isProjected ? 'accent' : 'basic'" [disabled]="disabled" (click)="onClick($event)">
             <mat-icon>videocam</mat-icon>
         </button>
-    }
-    @if (!menuItem && blendIn) {
+    } @else {
         <button
             class="blend-in"
             mat-icon-button
@@ -15,15 +24,4 @@
             <mat-icon>videocam</mat-icon>
         </button>
     }
-    @if (menuItem) {
-        <button mat-menu-item [disabled]="disabled" (click)="onClick()">
-            <mat-icon>videocam</mat-icon>
-            <span #ref><ng-content></ng-content></span>
-            @if (!ref.innerHTML.trim()) {
-                <span>
-                    {{ 'Project' | translate }}
-                </span>
-            }
-        </button>
-    }
 </ng-container>
diff --git a/...omponent-collector/speaker-button/components/speaker-button/speaker-button.component.html b/...omponent-collector/speaker-button/components/speaker-button/speaker-button.component.html
@@ -22,8 +22,7 @@
                         {{ listOfSpeakers.closed ? 'voice_over_off' : 'record_voice_over' }}
                     </mat-icon>
                 </button>
-            }
-            @if (menuItem) {
+            } @else {
                 <button mat-menu-item type="button">
                     <mat-icon>{{ listOfSpeakers.closed ? 'voice_over_off' : 'record_voice_over' }}</mat-icon>
                     <span>{{ 'List of speakers' | translate }}</span>

diff --git a/...rc/app/site/pages/meetings/modules/poll/components/check-input/check-input.component.html b/...rc/app/site/pages/meetings/modules/poll/components/check-input/check-input.component.html
@@ -12,8 +12,7 @@
         >
             {{ checkboxLabel }}
         </mat-checkbox>
-    }
-    @if (!checkboxLabel) {
+    } @else {
         <div class="placeholder"></div>
     }
 </div>
diff --git a/...ite/pages/meetings/modules/projector/modules/countdown-time/countdown-time.component.html b/...ite/pages/meetings/modules/projector/modules/countdown-time/countdown-time.component.html
@@ -23,8 +23,7 @@
             </div>
         }
     </div>
-}
-@if (unstyled) {
+} @else {
     <span
         id="countdown"
         [ngClass]="{

diff --git a/...ings/pages/interaction/modules/action-bar/components/action-bar/action-bar.component.html b/...ings/pages/interaction/modules/action-bar/components/action-bar/action-bar.component.html
@@ -31,8 +31,7 @@
                 >
                     <mat-icon color="primary">phone</mat-icon>
                 </button>
-            }
-            @if ((canEnterCall | async) === false) {
+            } @else {
                 <a
                     class="action-bar-shadow fake-disabled"
                     mat-mini-fab

diff --git a/...parated-listing/components/comma-separated-listing/comma-separated-listing.component.html b/...parated-listing/components/comma-separated-listing/comma-separated-listing.component.html
@@ -7,17 +7,16 @@
                     [ngTemplateOutletContext]="{ $implicit: item }"
                 ></ng-template>
             </span>
-        }
-        @if (!templateRef) {
+        } @else {
             <span [innerHtml]="item"></span>
         }
-        @if (!isLast && !useMidpoint) {
-            <span>,&#32;</span>
-        }
-        @if (!isLast && useMidpoint) {
-            <span>&ensp;&middot;&ensp;</span>
-        }
-        @if (isLast && ellipsed) {
+        @if (!isLast) {
+            @if (!useMidpoint) {
+                <span>,&#32;</span>
+            } @else {
+                <span>&ensp;&middot;&ensp;</span>
+            }
+        } @else if (ellipsed) {
             <span>…</span>
         }
     </span>

diff --git a/client/src/app/ui/modules/file-list/components/file-list/file-list.component.html b/client/src/app/ui/modules/file-list/components/file-list/file-list.component.html
@@ -22,8 +22,7 @@
                                 {{ directory.getTitle() }}
                             </span>
                         </button>
-                    }
-                    @if (last && shouldShowFileMenuFn(directory)) {
+                    } @else if (shouldShowFileMenuFn(directory)) {
                         <button
                             class="folder"
                             mat-button
@@ -35,8 +34,7 @@
                                 {{ directory.getTitle() }}
                             </os-icon-container>
                         </button>
-                    }
-                    @if (last && !shouldShowFileMenuFn(directory)) {
+                    } @else {
                         <span class="folder fake-folder folder-text">
                             {{ directory.getTitle() }}
                         </span>

diff --git a/client/src/app/ui/modules/file-upload/components/file-upload/file-upload.component.html b/client/src/app/ui/modules/file-upload/components/file-upload/file-upload.component.html
@@ -35,8 +35,7 @@
         <mat-card-content>
             @if (!parallel) {
                 <mat-progress-bar mode="determinate" [value]="progressObservable | async"></mat-progress-bar>
-            }
-            @if (parallel) {
+            } @else {
                 <mat-progress-bar mode="buffer"></mat-progress-bar>
             }
         </mat-card-content>

diff --git a/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.html b/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.html
@@ -3,29 +3,26 @@
         <div class="toolbar-left">
             @if (!editMode) {
                 @if (!showBackButton) {
-                    <!-- Toggle main nav -->
                     @if (vp.isMobile && !customMenu) {
+                        <!-- Toggle main nav -->
                         <button mat-icon-button (click)="clickHamburgerMenu()">
                             <mat-icon>menu</mat-icon>
                         </button>
                     }
-                    <!-- Custom menu -->
                     @if (customMenu && !multiSelectMode) {
+                        <!-- Custom menu -->
                         <button mat-icon-button [matMenuTriggerFor]="customNavMenu">
                             <mat-icon>menu</mat-icon>
                         </button>
                     }
-                }
-                <!-- Exit / Back button -->
-                @if (showBackButton) {
+                } @else {
+                    <!-- Exit / Back button -->
                     <button data-cy="headbarBackButton" mat-icon-button (click)="onBackButton()">
                         <mat-icon>arrow_back</mat-icon>
                     </button>
                 }
-            }
-
-            <!-- Cancel edit button -->
-            @if (editMode) {
+            } @else {
+                <!-- Cancel edit button -->
                 <button
                     data-cy="headbarCloseButton"
                     mat-icon-button
@@ -45,8 +42,7 @@
         <!-- centered information slot -->
         @if (!multiSelectMode) {
             <div class="spacer"></div>
-        }
-        @if (multiSelectMode) {
+        } @else {
             <ng-content select=".central-info-slot"></ng-content>
         }
         <div class="spacer"></div>

diff --git a/client/src/app/ui/modules/import-list/components/import-list/import-list.component.html b/client/src/app/ui/modules/import-list/components/import-list/import-list.component.html
@@ -23,8 +23,7 @@
                     </mat-tab>
                 }
             </mat-tab-group>
-        }
-        @if (!hasSeveralTabs()) {
+        } @else {
             <br />
             <span>
                 {{
@@ -56,8 +55,7 @@
                         }
                         @if (requiredFields.length === 1) {
                             <span>{{ 'is required' | translate }}.</span>
-                        }
-                        @if (requiredFields.length > 1) {
+                        } @else if (requiredFields.length > 1) {
                             <span>{{ 'are required' | translate }}.</span>
                         }
                         {{ 'All other fields are optional and may be empty.' | translate }}
@@ -259,8 +257,7 @@ <h2>{{ 'Preview' | translate }}</h2>
                 }
                 @if (requiredFields.length === 1) {
                     <span>{{ 'is required' | translate }}.</span>
-                }
-                @if (requiredFields.length > 1) {
+                } @else if (requiredFields.length > 1) {
                     <span>{{ 'are required' | translate }}.</span>
                 }
                 {{ 'All other fields are optional and may be empty.' | translate }}
@@ -361,12 +358,10 @@ <h2>{{ 'Preview' | translate }}</h2>
                 @if (entry[def].length > 1) {
                     <div class="fake-button-no-touch">+{{ entry[def].length - 1 }}</div>
                 }
-            }
-            @if (!isArray(entry[def])) {
+            } @else {
                 @if (!isObject(entry[def]) && type !== 'boolean') {
                     {{ entry[def] | translate }}
-                }
-                @if (type === 'boolean') {
+                } @else if (type === 'boolean') {
                     <mat-checkbox disabled [checked]="isTrue(entry[def])"></mat-checkbox>
                 }
                 @if (isObject(entry[def])) {

diff --git a/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.html b/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.html
@@ -43,33 +43,34 @@
     <!-- Actions -->
     <div class="action-buttons">
         <!-- Sort Button -->
-        @if ((vp.isMobileSubject | async) && hasSorting) {
-            <button mat-button (click)="openSortDropDown()">
-                <mat-icon
-                    matBadge="&#8288;"
-                    matBadgeColor="accent"
-                    matBadgeSize="small"
-                    [matBadgeHidden]="!hasSortOptionSelected"
-                    [matBadgeOverlap]="false"
-                >
-                    sort
-                </mat-icon>
-            </button>
-        }
-        @if ((vp.isMobileSubject | async) === false && hasSorting) {
-            <button mat-button [matMenuTriggerFor]="menu" [matTooltip]="getSortLabel(sortOption) | translate">
-                <mat-icon>sort</mat-icon>
-                <span
-                    class="upper"
-                    matBadge="&#8288;"
-                    matBadgeColor="accent"
-                    matBadgeSize="small"
-                    [matBadgeHidden]="!hasSortOptionSelected"
-                    [matBadgeOverlap]="false"
-                >
-                    {{ 'Sort' | translate }}
-                </span>
-            </button>
+        @if (hasSorting) {
+            @if (vp.isMobileSubject | async) {
+                <button mat-button (click)="openSortDropDown()">
+                    <mat-icon
+                        matBadge="&#8288;"
+                        matBadgeColor="accent"
+                        matBadgeSize="small"
+                        [matBadgeHidden]="!hasSortOptionSelected"
+                        [matBadgeOverlap]="false"
+                    >
+                        sort
+                    </mat-icon>
+                </button>
+            } @else {
+                <button mat-button [matMenuTriggerFor]="menu" [matTooltip]="getSortLabel(sortOption) | translate">
+                    <mat-icon>sort</mat-icon>
+                    <span
+                        class="upper"
+                        matBadge="&#8288;"
+                        matBadgeColor="accent"
+                        matBadgeSize="small"
+                        [matBadgeHidden]="!hasSortOptionSelected"
+                        [matBadgeOverlap]="false"
+                    >
+                        {{ 'Sort' | translate }}
+                    </span>
+                </button>
+            }
         }
 
         <!-- Filter button -->
@@ -100,7 +101,11 @@
         }
 
         <!-- Search bar -->
-        @if (searchService && !showSearchIconOnly) {
+        @if (showSearchIconOnly) {
+            <button mat-button (click)="toggleSearchEdit()">
+                <mat-icon>manage_search</mat-icon>
+            </button>
+        } @else if (searchService) {
             <os-rounded-input
                 #searchField
                 iconName="manage_search"
@@ -111,11 +116,6 @@
                 (clickIcon)="toggleSearchEdit()"
             ></os-rounded-input>
         }
-        @if (showSearchIconOnly) {
-            <button mat-button (click)="toggleSearchEdit()">
-                <mat-icon>manage_search</mat-icon>
-            </button>
-        }
     </div>
 </div>
 
@@ -152,8 +152,6 @@
                 <span>{{ sortService.getSortLabel(defaultOption) | translate }}&emsp;</span>
                 <small class="subtitle">({{ 'Default' | translate }})</small>
             </button>
-        }
-        @if (defaultOption) {
             <mat-divider></mat-divider>
         }
         @for (option of sortOptionsWithoutDefault; track option) {