feat: Added control flow

https://angular.io/guide/control_flow
unipoll · Dec 1, 2023 · 7ecbdcd · 7ecbdcd
1 parent 65dbe67
commit 7ecbdcd
Show file tree

Hide file tree

Showing 21 changed files with 601 additions and 504 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,8 +1,12 @@
 <div>
-  <div *ngIf="(this.hideSidebar == false)">
-    <app-sidebar></app-sidebar>
-  </div>
-  <div *ngIf="(this.hideSidebar == true)">
-    <router-outlet></router-outlet>
-  </div>
+  @if ((this.hideSidebar == false)) {
+    <div>
+      <app-sidebar></app-sidebar>
+    </div>
+  }
+  @if ((this.hideSidebar == true)) {
+    <div>
+      <router-outlet></router-outlet>
+    </div>
+  }
 </div>
diff --git a/src/app/components/auth/login/login.component.html b/src/app/components/auth/login/login.component.html
@@ -12,23 +12,33 @@ <h2 class="page-name">Sign In</h2>
     <mat-form-field class="form-field field">
       <mat-label>Email</mat-label>
       <input matInput [errorStateMatcher]="matcher" type="email" placeholder="[email protected]" formControlName="email">
-      <mat-error *ngIf="form.hasError('wrongCredentials') && !email?.hasError('required') && !email?.hasError('email')">
-        Wrong credentials
-      </mat-error>
-      <mat-error *ngIf="email?.hasError('email') && !email?.hasError('required')">
-        Please enter a valid email address
-      </mat-error>
-      <mat-error *ngIf="email?.hasError('required')">
-        Email is <strong>required</strong>
-      </mat-error>
+      @if (form.hasError('wrongCredentials') && !email?.hasError('required') && !email?.hasError('email')) {
+        <mat-error>
+          Wrong credentials
+        </mat-error>
+      }
+      @if (email?.hasError('email') && !email?.hasError('required')) {
+        <mat-error>
+          Please enter a valid email address
+        </mat-error>
+      }
+      @if (email?.hasError('required')) {
+        <mat-error>
+          Email is <strong>required</strong>
+        </mat-error>
+      }
     </mat-form-field>
     <mat-form-field class="form-field field">
-      <mat-error *ngIf="form.hasError('wrongCredentials') && !form.hasError('required')">
-        Wrong credentials
-      </mat-error>
-      <mat-error *ngIf="password?.hasError('required')">
-        Password is <strong>required</strong>
-      </mat-error>
+      @if (form.hasError('wrongCredentials') && !form.hasError('required')) {
+        <mat-error>
+          Wrong credentials
+        </mat-error>
+      }
+      @if (password?.hasError('required')) {
+        <mat-error>
+          Password is <strong>required</strong>
+        </mat-error>
+      }
       <input matInput [errorStateMatcher]="matcher" placeholder="Password" formControlName="password" type="password" />
     </mat-form-field>
     <div class="button-container">

diff --git a/src/app/components/auth/register/register.component.html b/src/app/components/auth/register/register.component.html
@@ -13,38 +13,47 @@ <h2 class="page-name">Create New Account</h2>
       <mat-label>First Name</mat-label>
       <input matInput type="text" formControlName="first_name" placeholder="First Name">
     </mat-form-field>
-
     <mat-form-field class="form-field field">
       <mat-label>Last Name</mat-label>
       <input matInput type="text" formControlName="last_name" placeholder="Last Name">
     </mat-form-field>
-
     <mat-form-field class="form-field field">
       <mat-label>Email</mat-label>
       <input matInput type="email" name="email" formControlName="email" placeholder="Email">
-      <mat-error class="field-message" *ngIf="email.hasError('required')">Email is required</mat-error>
-      <mat-error class="field-message" *ngIf="email.hasError('email')">Please enter a valid email</mat-error>
+      @if (email.hasError('required')) {
+        <mat-error class="field-message">Email is required</mat-error>
+      }
+      @if (email.hasError('email')) {
+        <mat-error class="field-message">Please enter a valid email</mat-error>
+      }
     </mat-form-field>
-
     <mat-form-field class="form-field field">
       <mat-label>Password</mat-label>
       <input matInput type="password" name="password" formControlName="password" placeholder="Password">
-      <mat-error class="field-message" *ngIf="password.hasError('required')">Password is required</mat-error>
-      <mat-error class="field-message" *ngIf="password.hasError('minlength') && !password.hasError('passwordStrength')">Password must have at least 8
+      @if (password.hasError('required')) {
+        <mat-error class="field-message">Password is required</mat-error>
+      }
+      @if (password.hasError('minlength') && !password.hasError('passwordStrength')) {
+        <mat-error class="field-message">Password must have at least 8
         characters</mat-error>
-      <mat-error class="field-message" *ngIf="password.hasError('passwordStrength')">Password must have at least 1
+      }
+      @if (password.hasError('passwordStrength')) {
+        <mat-error class="field-message">Password must have at least 1
         uppercase, 1 lowercase, 1 number and 1 special character</mat-error>
+      }
     </mat-form-field>
-
     <mat-form-field class="form-field field">
       <mat-label>Password</mat-label>
       <input matInput [errorStateMatcher]="matcher" type="password" name="confirm_password"
         formControlName="confirm_password" placeholder="Confirm Password">
-      <mat-error class="field-message" *ngIf="form.hasError('nomatch')"> The passwords do not match</mat-error>
-      <mat-error class="field-message" *ngIf="confirm_password.hasError('required')">This field is
+      @if (form.hasError('nomatch')) {
+        <mat-error class="field-message"> The passwords do not match</mat-error>
+      }
+      @if (confirm_password.hasError('required')) {
+        <mat-error class="field-message">This field is
         required</mat-error>
+      }
     </mat-form-field>
-
     <div class="button-container">
       <button mat-flat-button type="submit" class="button" color="primary" [disabled]="!form.valid">
         Sign Up

diff --git a/src/app/components/dialogs/add-question/add-question.component.html b/src/app/components/dialogs/add-question/add-question.component.html
@@ -1,26 +1,29 @@
 <div mat-dialog-title class="title">
-    <h1 class="mat-h1">Set Policy</h1>
+  <h1 class="mat-h1">Set Policy</h1>
 </div>
-    <div mat-dialog-content class="content">
-        <mat-form-field class="form-select">
-            <mat-label>Question Type</mat-label>
-            <mat-select [formControl]="questionTypeControl">
-                <mat-option *ngFor="let type of question_types" [value]="type">
-                    {{ type.name }}
-                </mat-option>
-            </mat-select>
-            <mat-error *ngIf="questionTypeControl.hasError('required')">Please choose the question type</mat-error>
-            <!-- <mat-hint>{{ questionTypeControl.value?.name }}</mat-hint> -->
-
-        </mat-form-field>
-        <p>
-            {{ questionTypeControl.value?.description }}
-        </p>
-    </div>
-    <!-- Submit Button -->
-    <div mat-dialog-actions class="action">
-        <button mat-flat-button [mat-dialog-close] class="button">Cancel</button>
-        <button mat-flat-button color="primary" [mat-dialog-close]="questionTypeControl.value?.returnValue" class="button">
-            Update
-        </button>
-    </div>
+<div mat-dialog-content class="content">
+  <mat-form-field class="form-select">
+    <mat-label>Question Type</mat-label>
+    <mat-select [formControl]="questionTypeControl">
+      @for (type of question_types; track type) {
+        <mat-option [value]="type">
+          {{ type.name }}
+        </mat-option>
+      }
+    </mat-select>
+    @if (questionTypeControl.hasError('required')) {
+      <mat-error>Please choose the question type</mat-error>
+    }
+    <!-- <mat-hint>{{ questionTypeControl.value?.name }}</mat-hint> -->
+  </mat-form-field>
+  <p>
+    {{ questionTypeControl.value?.description }}
+  </p>
+</div>
+<!-- Submit Button -->
+<div mat-dialog-actions class="action">
+  <button mat-flat-button [mat-dialog-close] class="button">Cancel</button>
+  <button mat-flat-button color="primary" [mat-dialog-close]="questionTypeControl.value?.returnValue" class="button">
+    Update
+  </button>
+</div>
diff --git a/src/app/components/dialogs/dialog-add-member/dialog-add-member.component.html b/src/app/components/dialogs/dialog-add-member/dialog-add-member.component.html
@@ -4,28 +4,31 @@ <h1 class="mat-h1">Add New Member</h1>
 <!-- <form [formGroup]="form" (ngSubmit)="onFormSubmit()"> -->
 <form>
   <div mat-dialog-content class="content">
-  <mat-form-field class="chip-list">
-    <mat-label>Account to add</mat-label>
-    <mat-chip-grid #chipGrid aria-label="Account selection">
-      <mat-chip-row *ngFor="let account of accounts" (removed)="remove(account)" highlighted>
-        {{account.first_name}} {{account.last_name}} ({{account.email}})
-        <button matChipRemove [attr.aria-label]="'remove ' + account">
-          <mat-icon>cancel</mat-icon>
-        </button>
-      </mat-chip-row>
-    </mat-chip-grid>
-    <input placeholder="Select Account..." #accountInput [formControl]="accountCtrl"
-      [matChipInputFor]="chipGrid" [matAutocomplete]="auto"
-      [matChipInputSeparatorKeyCodes]="separatorKeysCodes" />
+    <mat-form-field class="chip-list">
+      <mat-label>Account to add</mat-label>
+      <mat-chip-grid #chipGrid aria-label="Account selection">
+        @for (account of accounts; track account) {
+          <mat-chip-row (removed)="remove(account)" highlighted>
+            {{account.first_name}} {{account.last_name}} ({{account.email}})
+            <button matChipRemove [attr.aria-label]="'remove ' + account">
+              <mat-icon>cancel</mat-icon>
+            </button>
+          </mat-chip-row>
+        }
+      </mat-chip-grid>
+      <input placeholder="Select Account..." #accountInput [formControl]="accountCtrl"
+        [matChipInputFor]="chipGrid" [matAutocomplete]="auto"
+        [matChipInputSeparatorKeyCodes]="separatorKeysCodes" />
       <!-- (matChipInputTokenEnd)="add($event)"/> -->
-    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [displayWith]="displayFn">
-      <mat-option *ngFor="let account of filteredAccounts | async" [value]="account">
-        {{account.first_name}} {{account.last_name}} ({{account.email}})
-      </mat-option>
-    </mat-autocomplete>
-  </mat-form-field>
+      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [displayWith]="displayFn">
+        @for (account of filteredAccounts | async; track account) {
+          <mat-option [value]="account">
+            {{account.first_name}} {{account.last_name}} ({{account.email}})
+          </mat-option>
+        }
+      </mat-autocomplete>
+    </mat-form-field>
   </div>
-
   <!-- Submit Button -->
   <div mat-dialog-actions class="action">
     <button mat-flat-button type="button" [mat-dialog-close]="false" class="button">Cancel</button>

diff --git a/src/app/components/dialogs/dialog-add-member/dialog-add-member.component.ts b/src/app/components/dialogs/dialog-add-member/dialog-add-member.component.ts
@@ -7,7 +7,7 @@ import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { MatIconModule } from '@angular/material/icon';
-import { NgFor, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 

diff --git a/src/app/components/dialogs/dialog-set-policy/dialog-set-policy.component.html b/src/app/components/dialogs/dialog-set-policy/dialog-set-policy.component.html
@@ -1,33 +1,36 @@
 <div mat-dialog-title class="title">
-    <h1 class="mat-h1">Set Policy</h1>
-  </div>
-  <!-- <form [formGroup]="form" (ngSubmit)="onFormSubmit()"> -->
-  <form>
-    <div mat-dialog-content class="content">
-      <mat-form-field class="chip-list">
-        <mat-label>Allowed actions</mat-label>
-        <mat-chip-grid #chipGrid aria-label="Permission selection">
-          <mat-chip-row *ngFor="let permission of permissions" (removed)="remove(permission)" highlighted>
+  <h1 class="mat-h1">Set Policy</h1>
+</div>
+<!-- <form [formGroup]="form" (ngSubmit)="onFormSubmit()"> -->
+<form>
+  <div mat-dialog-content class="content">
+    <mat-form-field class="chip-list">
+      <mat-label>Allowed actions</mat-label>
+      <mat-chip-grid #chipGrid aria-label="Permission selection">
+        @for (permission of permissions; track permission) {
+          <mat-chip-row (removed)="remove(permission)" highlighted>
             {{ permission.replaceAll('_', ' ') | titlecase }}
             <button matChipRemove [attr.aria-label]="'remove ' + permission">
               <mat-icon>cancel</mat-icon>
             </button>
           </mat-chip-row>
-        </mat-chip-grid>
-        <input placeholder="Select Permission..." #permissionInput [formControl]="permissionCtrl"
-          [matChipInputFor]="chipGrid" [matAutocomplete]="auto" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" />
-        <!-- (matChipInputTokenEnd)="add($event)"/> -->
-        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
-          <mat-option *ngFor="let permission of filteredPermissions | async" [value]="permission">
+        }
+      </mat-chip-grid>
+      <input placeholder="Select Permission..." #permissionInput [formControl]="permissionCtrl"
+        [matChipInputFor]="chipGrid" [matAutocomplete]="auto" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" />
+      <!-- (matChipInputTokenEnd)="add($event)"/> -->
+      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+        @for (permission of filteredPermissions | async; track permission) {
+          <mat-option [value]="permission">
             {{ permission.replaceAll('_', ' ') | titlecase }}
           </mat-option>
-        </mat-autocomplete>
-      </mat-form-field>
-    </div>
-
-    <!-- Submit Button -->
-    <div mat-dialog-actions class="action">
-      <button mat-flat-button type="button" [mat-dialog-close]="false" class="button">Cancel</button>
-      <button mat-flat-button color="primary" type="submit" class="button" (click)="onFormSubmit()">Update</button>
-    </div>
-  </form>
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+  </div>
+  <!-- Submit Button -->
+  <div mat-dialog-actions class="action">
+    <button mat-flat-button type="button" [mat-dialog-close]="false" class="button">Cancel</button>
+    <button mat-flat-button color="primary" type="submit" class="button" (click)="onFormSubmit()">Update</button>
+  </div>
+</form>
diff --git a/src/app/components/group-list/group-list.component.html b/src/app/components/group-list/group-list.component.html
@@ -1,14 +1,15 @@
 <div class="tab-title">
   <h1>Groups</h1>
-  <button class="add-button" *ngIf="can_create_groups" mat-flat-button color="primary" (click)="createGroup()">Create Group</button>
+  @if (can_create_groups) {
+    <button class="add-button" mat-flat-button color="primary" (click)="createGroup()">Create Group</button>
+  }
 </div>
 <div>
   <!-- Filter Field -->
   <mat-form-field class="filter-field">
     <mat-label>Filter</mat-label>
     <input matInput (keyup)="applyFilter($event)" placeholder="Filter members" #input>
   </mat-form-field>
-
   <!-- Table  -->
   <table class="table" mat-table [dataSource]="dataSource" matSort>
     <!-- Column definitions -->
@@ -30,28 +31,30 @@ <h1>Groups</h1>
         </mat-menu>
       </td>
     </ng-container>
-
     <!-- Header row -->
     <!-- <tr mat-header-row *matHeaderRowDef="['name', 'options']"></tr> -->
-
     <!-- Data row -->
     <tr mat-row *matRowDef="let group; columns: ['name', 'options'];" class="group-row" (click)="openGroup(group)"></tr>
-
     <!-- Row shown when there is no matching data. -->
     <tr class="mat-row" *matNoDataRow>
       <td class="mat-cell" colspan="2">
         <p>No data matching the filter "{{input.value}}"</p>
       </td>
     </tr>
   </table>
-
   <mat-paginator class="paginator" [pageSize]="10" [pageSizeOptions]="[1, 2, 5, 10, 25, 100]"
-    aria-label="Select page of users"></mat-paginator>
+  aria-label="Select page of users"></mat-paginator>
 </div>
-<div class="error" *ngIf="dataSource == null">
-  <mat-spinner *ngIf="isLoading"></mat-spinner>
-  <div *ngIf="!isLoading">
-    <h1 class="title">Error</h1>
-    <h2>Workspace was not loaded.</h2>
+@if (dataSource == null) {
+  <div class="error">
+    @if (isLoading) {
+      <mat-spinner></mat-spinner>
+    }
+    @if (!isLoading) {
+      <div>
+        <h1 class="title">Error</h1>
+        <h2>Workspace was not loaded.</h2>
+      </div>
+    }
   </div>
-</div>
+}
diff --git a/src/app/components/group/group.component.html b/src/app/components/group/group.component.html
@@ -1,4 +1,5 @@
-<div *ngIf="group">
+@if (group) {
+  <div>
     <div class="page-title">
       <h1>{{ group.name }}</h1>
     </div>
@@ -9,11 +10,16 @@ <h1>{{ group.name }}</h1>
         </div>
       </mat-tab>
       <mat-tab label="Members">
-        <app-member-list *ngIf="isAllowed('get_members')" [group]="group" [memberList]="group.members"></app-member-list>
+        @if (isAllowed('get_members')) {
+          <app-member-list [group]="group" [memberList]="group.members"></app-member-list>
+        }
       </mat-tab>
       <mat-tab label="Policies">
-        <app-policy-list *ngIf="isAllowed('get_policies')" [group]="group" [policyList]="group.policies"></app-policy-list>
+        @if (isAllowed('get_policies')) {
+          <app-policy-list [group]="group" [policyList]="group.policies"></app-policy-list>
+        }
       </mat-tab>
       <mat-tab label="Setting">Permissions and other settings</mat-tab>
     </mat-tab-group>
-  </div>
+  </div>
+}