enable prettier for html files

client/.eslintrc.js

@@ -85,6 +85,14 @@ module.exports = {
             files: ['*.html'],
             extends: ['plugin:@angular-eslint/template/recommended'],
             rules: {}
+        },
+        {
+            files: ['*.html'],
+            excludedFiles: ['*inline-template-*.component.html'],
+            extends: ['plugin:prettier/recommended'],
+            rules: {
+                "prettier/prettier": ["error", { "parser": "angular" }]
+            }
         }
     ]
 };

client/src/app/site/modules/chip-select/components/chip-select/chip-select.component.html

@@ -1,11 +1,10 @@
 <ng-container *ngIf="chips.length">
-    <mat-chip-list class="mat-chip-list-stacked"
+    <mat-chip-list
+        class="mat-chip-list-stacked"
         [matMenuTriggerFor]="canOpen ? menu : null"
-        [ngClass]="{'menu-handle': canOpen}">
-        <mat-basic-chip
-            *ngFor="let chip of chips"
-            [class]="chipClass || 'grey'"
-            disableRipple>
+        [ngClass]="{ 'menu-handle': canOpen }"
+    >
+        <mat-basic-chip *ngFor="let chip of chips" [class]="chipClass || 'grey'" disableRipple>
             <ng-content *ngTemplateOutlet="chip.template"></ng-content>
         </mat-basic-chip>
     </mat-chip-list>
@@ -15,7 +14,7 @@
         disableRipple
         [matMenuTriggerFor]="canOpen ? menu : null"
         [class]="chipClass || 'grey'"
-        [ngClass]="{'menu-handle': canOpen}"
+        [ngClass]="{ 'menu-handle': canOpen }"
     >
         <ng-content></ng-content>
     </mat-basic-chip>

client/src/app/site/modules/info/components/info-actions/info-actions.component.html

@@ -12,7 +12,13 @@ <h3>{{ 'Superadmin actions' | translate }}</h3>
         </button>
     </div>
     <div *osOmlPerms="OML.superadmin" class="superadmin-button">
-        <button type="button" mat-stroked-button (click)="checkDatastore(true)" matTooltip="{{ 'For large instances this may block the server to the point of unusability' | translate }}" matTooltipPosition="right">
+        <button
+            type="button"
+            mat-stroked-button
+            (click)="checkDatastore(true)"
+            matTooltip="{{ 'For large instances this may block the server to the point of unusability' | translate }}"
+            matTooltipPosition="right"
+        >
             {{ 'Thoroughly check datastore (unsafe)' | translate }}
         </button>
     </div>

client/src/app/site/modules/info/components/legal-notice-content/legal-notice-content.component.html

@@ -17,7 +17,7 @@ <h1>{{ 'Legal notice' | translate }}</h1>
     </div>
     <div>
         <ng-container *ngIf="!isEditing">
-            <div *ngIf="legalNotice" class="legal-notice-text" [innerHtml]="legalNotice | trust: 'html'"></div>
+            <div *ngIf="legalNotice" class="legal-notice-text" [innerHtml]="legalNotice | trust : 'html'"></div>
             <div *ngIf="!legalNotice">
                 {{ 'The event manager has not set up a legal notice yet.' | translate }}
             </div>

client/src/app/site/modules/info/components/privacy-policy-content/privacy-policy-content.component.html

@@ -16,7 +16,7 @@ <h1>{{ 'Privacy policy' | translate }}</h1>
         </div>
     </div>
     <ng-container *ngIf="!isEditing">
-        <div *ngIf="privacyPolicy" [innerHtml]="privacyPolicy | trust: 'html'"></div>
+        <div *ngIf="privacyPolicy" [innerHtml]="privacyPolicy | trust : 'html'"></div>
         <div *ngIf="!privacyPolicy">
             {{ 'The event manager has not set up a privacy policy yet.' | translate }}
         </div>

client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.html

@@ -23,7 +23,10 @@
                 <ng-container *ngTemplateOutlet="showTemplate"></ng-container>
             </mat-card>
             <ng-container *ngIf="showView">
-                <mat-card [ngClass]="{'os-card': true, 'margin-bottom-60': isLast}" *ngFor="let showViewElement of showView; last as isLast">
+                <mat-card
+                    [ngClass]="{ 'os-card': true, 'margin-bottom-60': isLast }"
+                    *ngFor="let showViewElement of showView; last as isLast"
+                >
                     <ng-container *ngTemplateOutlet="showViewElement; context: { user: user }"></ng-container>
                 </mat-card>
             </ng-container>

client/src/app/site/modules/wait-for-action-dialog/components/stopped-waiting-for-action-dialog/stopped-waiting-for-action-dialog.component.html

@@ -12,5 +12,8 @@ <h2 mat-dialog-title>
 <div mat-dialog-actions>
     <button mat-button mat-dialog-close>{{ 'OK' | translate }}</button>
     <button mat-button *ngIf="!showSnapshots" (click)="showReport()">{{ 'Show report' | translate }}</button>
-    <button mat-button *ngIf="showSnapshots" (click)="copySnapshots()"><mat-icon>content_copy</mat-icon>{{ 'Copy report to clipboard' | translate }}</button>
+    <button mat-button *ngIf="showSnapshots" (click)="copySnapshots()">
+        <mat-icon>content_copy</mat-icon>
+        {{ 'Copy report to clipboard' | translate }}
+    </button>
 </div>

client/src/app/site/pages/error/components/error-main/error-main.component.html

@@ -1,7 +1,9 @@
 <div class="background-default error-page full-height flex-center-unsafe">
     <h2>{{ 'You are not supposed to be here...' | translate }}</h2>
     <h3 *ngIf="error">{{ error | translate }}</h3>
-    <p *ngIf="error === 'Authorization Error' && msg.length">{{ 'Required permissions to view this page:' | translate }}</p>
+    <p *ngIf="error === 'Authorization Error' && msg.length">
+        {{ 'Required permissions to view this page:' | translate }}
+    </p>
     <ng-container *ngFor="let message of msg">
         <span class="message">{{ message | translate }}</span>
     </ng-container>

client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/list-of-speakers-content/list-of-speakers-content.component.html

@@ -1,7 +1,15 @@
 <mat-card class="os-card speaker-card">
     <!-- Title -->
     <os-projectable-title class="los-title" *ngIf="!explicitTitleContent" [model]="listOfSpeakers">
-        <mat-icon append *ngIf="closed" style="margin-top: 8px" class="primary-accent-by-theme" matTooltip="{{ 'The list of speakers is closed.' | translate }}">lock</mat-icon>
+        <mat-icon
+            append
+            *ngIf="closed"
+            style="margin-top: 8px"
+            class="primary-accent-by-theme"
+            matTooltip="{{ 'The list of speakers is closed.' | translate }}"
+        >
+            lock
+        </mat-icon>
     </os-projectable-title>
     <span *ngIf="explicitTitleContent">
         <ng-container *ngTemplateOutlet="explicitTitleContent"></ng-container>
@@ -222,10 +230,7 @@
     </div>
 
     <!-- Search for speakers -->
-    <div
-        class="search-new-speaker-form"
-        *ngIf="canManage"
-    >
+    <div class="search-new-speaker-form" *ngIf="canManage">
         <os-participant-search-selector
             [nonSelectableUserIds]="nonAvailableUserIds"
             placeholder="{{ 'Select or search new speaker ...' | translate }}"

client/src/app/site/pages/meetings/modules/meetings-component-collector/detail-view/components/detail-view/detail-view.component.html

@@ -5,10 +5,7 @@
     <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>
+            <mat-progress-spinner class="example-margin" color="primary" mode="indeterminate"></mat-progress-spinner>
         </div>
     </div>
 </ng-container>

client/src/app/site/pages/meetings/modules/meetings-component-collector/detail-view/components/projectable-title/projectable-title.component.html

@@ -1,8 +1,19 @@
 <div class="projectable-title-line">
-    <h1 class="model-title" *ngIf="titleStyle === 'h1' && model"><ng-container [ngTemplateOutlet]="titleline"></ng-container></h1>
-    <h2 class="model-title" *ngIf="titleStyle === 'h2' && model"><ng-container [ngTemplateOutlet]="titleline"></ng-container></h2>
+    <h1 class="model-title" *ngIf="titleStyle === 'h1' && model">
+        <ng-container [ngTemplateOutlet]="titleline"></ng-container>
+    </h1>
+    <h2 class="model-title" *ngIf="titleStyle === 'h2' && model">
+        <ng-container [ngTemplateOutlet]="titleline"></ng-container>
+    </h2>
     &nbsp;
-    <mat-icon style="margin-top: 8px" [ngClass]="{'primary-accent-by-theme': titleStyle === 'h1'}" *ngIf="isProjectedObservable | async" matTooltip="{{ 'Is being projected' | translate }}">videocam</mat-icon>
+    <mat-icon
+        style="margin-top: 8px"
+        [ngClass]="{ 'primary-accent-by-theme': titleStyle === 'h1' }"
+        *ngIf="isProjectedObservable | async"
+        matTooltip="{{ 'Is being projected' | translate }}"
+    >
+        videocam
+    </mat-icon>
     <ng-content select="[append]"></ng-content>
 </div>
 

client/src/app/site/pages/meetings/modules/meetings-component-collector/projection-dialog/components/projection-dialog/projection-dialog.component.html

@@ -7,8 +7,11 @@ <h2 mat-dialog-title>
 
 <mat-dialog-content *ngIf="projectors && projectors.length">
     <div class="content-wrapper">
-        <div class="projectors" *ngFor="let projector of projectors"
-            [ngClass]="isProjectedOn(projector) ? 'projected' : ''">
+        <div
+            class="projectors"
+            *ngFor="let projector of projectors"
+            [ngClass]="isProjectedOn(projector) ? 'projected' : ''"
+        >
             <mat-checkbox [checked]="isProjectorSelected(projector)" (change)="toggleProjector(projector)">
                 {{ projector.name }}
             </mat-checkbox>
@@ -27,7 +30,8 @@ <h2 mat-dialog-title>
             <div *ngIf="isDecisionOption(option)" class="spacer-top-10 spacer-left-10">
                 <mat-checkbox
                     [checked]="optionValues[option.key]"
-                    (change)="optionValues[option.key] = !optionValues[option.key]">
+                    (change)="optionValues[option.key] = !optionValues[option.key]"
+                >
                     {{ option.displayName | translate }}
                 </mat-checkbox>
             </div>

client/src/app/site/pages/meetings/modules/meetings-component-collector/projector-button/components/projector-button/projector-button.component.html

@@ -7,20 +7,10 @@
     >
         <ng-container *ngTemplateOutlet="content"></ng-container>
     </button>
-    <button
-        *ngIf="!menuItem && blendIn"
-        mat-icon-button
-        (click)="onClick($event)"
-        class="blend-in"
-    >
+    <button *ngIf="!menuItem && blendIn" mat-icon-button (click)="onClick($event)" class="blend-in">
         <ng-container *ngTemplateOutlet="content"></ng-container>
     </button>
-    <button
-        *ngIf="menuItem"
-        mat-menu-item
-        (click)="onClick()"
-        [ngClass]="{ 'projector-inactive': !isProjected() }"
-    >
+    <button *ngIf="menuItem" mat-menu-item (click)="onClick()" [ngClass]="{ 'projector-inactive': !isProjected() }">
         <ng-container *ngTemplateOutlet="content"></ng-container>
     </button>
 </ng-container>

client/src/app/site/pages/meetings/modules/meetings-navigation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.html

@@ -3,7 +3,13 @@
         <!-- navigation -->
         <mat-nav-list class="main-nav">
             <ng-container *ngIf="showMeetingNav">
-                <a [@navItemAnim] mat-list-item (click)="mobileAutoCloseNav()" [routerLink]="['/']" class="meetingNavRow">
+                <a
+                    [@navItemAnim]
+                    mat-list-item
+                    (click)="mobileAutoCloseNav()"
+                    [routerLink]="['/']"
+                    class="meetingNavRow"
+                >
                     <mat-icon>apps</mat-icon>
                     <span>{{ 'Dashboard' | translate }}</span>
                 </a>

client/src/app/site/pages/meetings/modules/participant-search-selector/components/participant-search-selector/participant-search-selector.component.html

@@ -7,7 +7,8 @@
             [multiple]="false"
             placeholder="{{ placeholder | translate }}"
             [inputListValues]="filteredUsersSubject"
-            (clickNotFound)="createNewSelectedUser($event)">
+            (clickNotFound)="createNewSelectedUser($event)"
+        >
             <ng-template osSearchSelectorNotFoundTemplate *osPerms="permission.userCanManage">
                 <div>
                     <mat-icon class="os-not-found-button-content">add</mat-icon>

client/src/app/site/pages/meetings/modules/poll/components/base-poll-form/base-poll-form.component.html

@@ -50,7 +50,10 @@ <h2 class="poll-preview-title">
                         formControlName="pollmethod"
                         required
                     >
-                        <mat-option *ngFor="let option of filteredPollMethods | keyvalue: keepEntryOrder" [value]="option.key">
+                        <mat-option
+                            *ngFor="let option of filteredPollMethods | keyvalue : keepEntryOrder"
+                            [value]="option.key"
+                        >
                             {{ option.value | translate }}
                         </mat-option>
                     </mat-select>
@@ -92,8 +95,11 @@ <h2 class="poll-preview-title">
                 </ng-container>
 
                 <!-- Second row with span over 2nd and 3rd column if max amount of votes per option is enabled-->
-                <div *ngIf="pollService.isMaxVotesPerOptionEnabled() && isEVotingSelected && showMaxVotesPerOption(data)" class="third-option">
-                    <ng-container formGroupName="votes_amount" >
+                <div
+                    *ngIf="pollService.isMaxVotesPerOptionEnabled() && isEVotingSelected && showMaxVotesPerOption(data)"
+                    class="third-option"
+                >
+                    <ng-container formGroupName="votes_amount">
                         <!-- Max Amount of Votes per Option -->
                         <mat-form-field>
                             <input
@@ -130,8 +136,15 @@ <h2 class="poll-preview-title">
                     formControlName="onehundred_percent_base"
                     required
                 >
-                    <ng-container *ngFor="let option of validPercentBases | keyvalue: keepEntryOrder">
-                        <mat-option [value]="option.key">{{ ((isCreatedList || pollMethod === 'yna') ? alternativePercentBases[option.key] : option.value) | translate }}</mat-option>
+                    <ng-container *ngFor="let option of validPercentBases | keyvalue : keepEntryOrder">
+                        <mat-option [value]="option.key">
+                            {{
+                                (isCreatedList || pollMethod === 'yna'
+                                    ? alternativePercentBases[option.key]
+                                    : option.value
+                                ) | translate
+                            }}
+                        </mat-option>
                     </ng-container>
                 </mat-select>
             </mat-form-field>

client/src/app/site/pages/meetings/modules/poll/components/entitled-users-table/entitled-users-table.component.html

@@ -1,7 +1,10 @@
 <div *osPerms="permission.userCanSee">
     <div *ngIf="isViewingThis">
-        <os-list [listObservable]="entitledUsersObservable" [filterProps]="filterPropsEntitledUsersTable"
-            [fullScreen]="false">
+        <os-list
+            [listObservable]="entitledUsersObservable"
+            [filterProps]="filterPropsEntitledUsersTable"
+            [fullScreen]="false"
+        >
             <!-- Content -->
             <div *osScrollingTableCell="'user_id'; row as entry">
                 <div *osScrollingTableCellLabel>{{ 'Participant' | translate }}</div>
@@ -16,8 +19,7 @@
                         <!-- Delegation -->
                         <div *ngIf="entry.vote_delegated_to_id">
                             <span>
-                                ({{ 'represented by' | translate }}
-                                {{ entry.vote_delegated_to.getShortName().trim() }})
+                                ({{ 'represented by' | translate }} {{ entry.vote_delegated_to.getShortName().trim() }})
                             </span>
                         </div>
                     </div>

client/src/app/site/pages/meetings/modules/poll/components/single-option-chart-table/single-option-chart-table.component.html

@@ -19,7 +19,7 @@
                         <td>
                             <div class="result-cell-definition">
                                 <span *ngIf="row.value[0].showPercent" [class]="textSizeClass">
-                                    {{ getVoteAmount(row.value[0].amount, row) | pollPercentBase: poll }}
+                                    {{ getVoteAmount(row.value[0].amount, row) | pollPercentBase : poll }}
                                 </span>
                             </div>
                         </td>
@@ -47,7 +47,7 @@
                         <!-- Percent numbers -->
                         <td class="result-cell-definition">
                             <span *ngIf="row.value[0].showPercent" [class]="textSizeClass">
-                                {{ row.value[0].amount! | pollPercentBase: poll }}
+                                {{ row.value[0].amount! | pollPercentBase : poll }}
                             </span>
                         </td>
 
@@ -61,7 +61,7 @@
             <tr *ngIf="shouldShowEntitled" class="entitled-users-row">
                 <td>{{ 'Entitled users' | translate }}</td>
                 <td class="result-cell-definition">
-                    {{ poll.entitled_users_at_stop.length | pollPercentBase: poll }}
+                    {{ poll.entitled_users_at_stop.length | pollPercentBase : poll }}
                 </td>
                 <td class="result-cell-definition">
                     {{ poll.entitled_users_at_stop.length }}

client/src/app/site/pages/meetings/modules/poll/components/votes-table/votes-table.component.html

@@ -1,10 +1,6 @@
 <div *osPerms="permission.userCanSee">
     <div *ngIf="isViewingThis">
-        <os-list
-            [listObservable]="votesDataObservable"
-            [filterProps]="filterProps"
-            [fullScreen]="false"
-        >
+        <os-list [listObservable]="votesDataObservable" [filterProps]="filterProps" [fullScreen]="false">
             <!-- Content -->
             <div *osScrollingTableCell="'user'; row as vote">
                 <div *osScrollingTableCellLabel>{{ 'Participant' | translate }}</div>
@@ -34,7 +30,7 @@
                     <i>{{ 'Anonymous' | translate }}</i>
                 </div>
             </div>
-            <div *ngIf="getTemplateType()==='default'">
+            <div *ngIf="getTemplateType() === 'default'">
                 <div *osScrollingTableCell="'vote'; row as vote" class="vote-cell">
                     <div *osScrollingTableCellLabel>{{ 'Vote' | translate }}</div>
                     <div class="vote-cell-icon-container" [ngClass]="getVoteCSS(vote.value)">
@@ -43,7 +39,7 @@
                     <div>{{ vote.valueVerbose | translate }}</div>
                 </div>
             </div>
-            <div *ngIf="getTemplateType()==='assignment'">
+            <div *ngIf="getTemplateType() === 'assignment'">
                 <div *osScrollingTableCell="'votes'; row as vote">
                     <div *osScrollingTableCellLabel>{{ 'Votes' | translate }}</div>
                     <div class="single-vote-result" *ngFor="let candidate of vote.votes">

client/src/app/site/pages/meetings/modules/poll/modules/voting-privacy-dialog/components/voting-privacy-warning-dialog/voting-privacy-warning-dialog.component.html

@@ -7,8 +7,7 @@ <h1 mat-dialog-title>
         {{
             'During non-nominal voting OpenSlides does NOT store the individual user ID of the voter. This in no way means
         that a non-nominal vote is completely anonymous and secure. The votes cannot track their individual votes after
-        the data has been submitted. The validity of the data cannot always be guaranteed.'
-                | translate
+        the data has been submitted. The validity of the data cannot always be guaranteed.' | translate
         }}
     </span>
 </div>

client/src/app/site/pages/meetings/modules/projector/modules/slides/components/assignment-slide/components/assignment-slide/assignment-slide.component.html

@@ -4,7 +4,7 @@ <h1>{{ data.data.title }}</h1>
         <h2>{{ 'Election' | translate }}</h2>
     </div>
 
-    <div *ngIf="data.data.description" [innerHTML]="data.data.description | trust: 'html'"></div>
+    <div *ngIf="data.data.description" [innerHTML]="data.data.description | trust : 'html'"></div>
 
     <h3>{{ 'Candidates' | translate }}</h3>
     <ng-container *ngIf="data.data.candidates && data.data.candidates.length">