DEV: signal forms part 2, remove old structural directives

valendinosaurus · Jun 28, 2024 · a33503d · a33503d
1 parent 8eb8871
commit a33503d
Show file tree

Hide file tree

Showing 93 changed files with 1,248 additions and 598 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,8 +25,6 @@
     "@angular/router": "17.3.5",
     "@auth0/auth0-angular": "^2.2.1",
     "@fortawesome/fontawesome-free": "^6.5.1",
-    "@ngx-formly/core": "^6.1.8",
-    "@ngx-formly/material": "^6.1.8",
     "@types/node": "^20.14.2",
     "canvas-confetti": "^1.9.3",
     "confetti-js": "^0.0.18",

diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts
@@ -1,7 +1,7 @@
 import { Component, inject, OnInit, signal } from '@angular/core';
 import { Observable } from 'rxjs';
 import { AuthService, User } from '@auth0/auth0-angular';
-import { AsyncPipe, JsonPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import { BlindLevelTabComponent } from './blind-level/blind-level-tab.component';
 import { SeriesTabComponent } from './series/series-tab.component';
 import { TournamentTabComponent } from './tournament/tournament-tab.component';
@@ -37,16 +37,13 @@ import { TimerStateService } from '../timer/services/timer-state.service';
         AsyncPipe,
         MatSidenavModule,
         MatToolbarModule,
-        NgForOf,
         FormsModule,
         NullsafePrimitivePipe,
         MatCheckboxModule,
         MatButtonModule,
         MatMenuModule,
         RouterOutlet,
         RouterLink,
-        JsonPipe,
-        NgIf,
         NgTemplateOutlet,
         RouterLinkActive
     ]

diff --git a/src/app/admin/blind-level/admin-blind-level/admin-blind-level.component.ts b/src/app/admin/blind-level/admin-blind-level/admin-blind-level.component.ts
@@ -18,9 +18,15 @@ import { CreatePauseComponent } from '../create-pause/create-pause.component';
 
 @Component({
     selector: 'app-admin-blind-level',
+    templateUrl: './admin-blind-level.component.html',
     standalone: true,
-    imports: [CommonModule, AppHeaderComponent, MatButtonModule, UserImageRoundComponent, RouterLink],
-    templateUrl: './admin-blind-level.component.html'
+    imports: [
+        CommonModule,
+        AppHeaderComponent,
+        MatButtonModule,
+        UserImageRoundComponent,
+        RouterLink
+    ]
 })
 export class AdminBlindLevelComponent implements OnInit {
 

diff --git a/src/app/admin/blind-level/blind-level-tab.component.html b/src/app/admin/blind-level/blind-level-tab.component.html
@@ -36,9 +36,10 @@ <h2>Blind Levels</h2>
 
         <mat-radio-group [ngModel]="type" (ngModelChange)="filterDuration($event)">
             <mat-radio-button value="-1">ALL</mat-radio-button>
-            <ng-container *ngFor="let d of durations$ | async">
+
+            @for (d of durations$ | async; track d) {
                 <mat-radio-button [value]="d">{{ d }} min</mat-radio-button>
-            </ng-container>
+            }
         </mat-radio-group>
     </div>
 </div>

diff --git a/src/app/admin/blind-level/blind-level-tab.component.ts b/src/app/admin/blind-level/blind-level-tab.component.ts
@@ -8,7 +8,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { map, shareReplay, switchMap, take, tap } from 'rxjs/operators';
 import { DEFAULT_DIALOG_POSITION } from '../../shared/const/app.const';
 import { CreateBlindLevelComponent } from './create-blind-level/create-blind-level.component';
-import { AsyncPipe, DecimalPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
+import { AsyncPipe, DecimalPipe, NgTemplateOutlet } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { UserImageRoundComponent } from '../../shared/components/user-image-round/user-image-round.component';
 import { RouterLink } from '@angular/router';
@@ -26,8 +26,6 @@ import { FormsModule } from '@angular/forms';
     imports: [
         AsyncPipe,
         MatButtonModule,
-        NgForOf,
-        NgIf,
         UserImageRoundComponent,
         RouterLink,
         DecimalPipe,

diff --git a/src/app/admin/blind-level/create-blind-level/create-blind-level.component.html b/src/app/admin/blind-level/create-blind-level/create-blind-level.component.html
@@ -33,9 +33,11 @@ <h2>
             name="sb"
         />
 
-        <mat-hint *ngIf="model.sb() > model.bb()">
-            Small Blind must be equal or smaller than Big Blind
-        </mat-hint>
+        @if (model.sb() > model.bb()) {
+            <mat-hint>
+                Small Blind must be equal or smaller than Big Blind
+            </mat-hint>
+        }
     </mat-form-field>
 
     <mat-form-field>

diff --git a/src/app/admin/blind-level/create-blind-level/create-blind-level.component.ts b/src/app/admin/blind-level/create-blind-level/create-blind-level.component.ts
@@ -5,7 +5,6 @@ import { catchError, take, tap } from 'rxjs/operators';
 import { BlindLevel, BlindLevelModel } from '../../../shared/interfaces/blind-level.interface';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NgIf } from '@angular/common';
 import { BaseAddDialogComponent } from '../../../shared/components/base-add-dialog/base-add-dialog.component';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -18,7 +17,6 @@ import { of } from 'rxjs';
     imports: [
         FormsModule,
         MatButtonModule,
-        NgIf,
         MatFormFieldModule,
         MatInputModule,
     ]

diff --git a/src/app/admin/blind-level/create-pause/create-pause.component.ts b/src/app/admin/blind-level/create-pause/create-pause.component.ts
@@ -5,7 +5,6 @@ import { catchError, take, tap } from 'rxjs/operators';
 import { BlindLevel, BlindLevelModel } from '../../../shared/interfaces/blind-level.interface';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NgIf } from '@angular/common';
 import { BaseAddDialogComponent } from '../../../shared/components/base-add-dialog/base-add-dialog.component';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -19,7 +18,6 @@ import { of } from 'rxjs';
     imports: [
         FormsModule,
         MatButtonModule,
-        NgIf,
         MatCheckboxModule,
         MatFormFieldModule,
         MatInputModule

diff --git a/src/app/admin/blind-structure/admin-blind-structure/admin-blind-structure.component.ts b/src/app/admin/blind-structure/admin-blind-structure/admin-blind-structure.component.ts
@@ -1,5 +1,5 @@
 import { Component, DestroyRef, inject, OnInit } from '@angular/core';
-import { AsyncPipe, NgFor, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { combineLatest, defer, iif, Observable, of, ReplaySubject } from 'rxjs';
 import { BlindStructure } from '../../../shared/interfaces/blind-structure.interface';
 import { User } from '@auth0/auth0-angular';
@@ -29,10 +29,8 @@ import { BlindLevel } from '../../../shared/interfaces/blind-level.interface';
         RouterLink,
         AppHeaderComponent,
         AsyncPipe,
-        NgFor,
         MatButtonModule,
-        BlindStructureViewComponent,
-        NgIf
+        BlindStructureViewComponent
     ]
 })
 export class AdminBlindStructureComponent implements OnInit {

diff --git a/src/app/admin/blind-structure/blind-structure-tab/blind-structure-tab.component.html b/src/app/admin/blind-structure/blind-structure-tab/blind-structure-tab.component.html
@@ -19,7 +19,8 @@ <h2>Blind Structures</h2>
             <th>No of Blind Levels</th>
             <th>Actions</th>
         </tr>
-        <ng-container *ngFor="let blindStructure of blindStructures$ | async">
+
+        @for (blindStructure of blindStructures$ | async; track blindStructure.id) {
             <a class="contents" [routerLink]="['/admin/blind-structure', blindStructure.id]">
                 <tr>
                     <td>
@@ -42,6 +43,6 @@ <h2>Blind Structures</h2>
                     </td>
                 </tr>
             </a>
-        </ng-container>
+        }
     </table>
 </div>
diff --git a/src/app/admin/blind-structure/blind-structure-tab/blind-structure-tab.component.ts b/src/app/admin/blind-structure/blind-structure-tab/blind-structure-tab.component.ts
@@ -8,10 +8,10 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { shareReplay, switchMap, take, tap } from 'rxjs/operators';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterLink } from '@angular/router';
-import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { ConfirmationDialogComponent } from '../../../dialogs/confirmation-dialog/confirmation-dialog.component';
 import { DEFAULT_DIALOG_POSITION } from '../../../shared/const/app.const';
 import { CreateBlindStructureComponent } from '../create-blind-structure/create-blind-structure.component';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
     selector: 'app-blind-structure-tab',
@@ -20,9 +20,7 @@ import { CreateBlindStructureComponent } from '../create-blind-structure/create-
     imports: [
         MatButtonModule,
         RouterLink,
-        NgFor,
-        AsyncPipe,
-        NgIf
+        AsyncPipe
     ]
 })
 export class BlindStructureTabComponent implements OnInit {

diff --git a/src/app/admin/blind-structure/create-blind-structure/create-blind-structure.component.ts b/src/app/admin/blind-structure/create-blind-structure/create-blind-structure.component.ts
@@ -15,7 +15,15 @@ import { take, tap } from 'rxjs/operators';
     templateUrl: './create-blind-structure.component.html',
     styleUrls: ['./create-blind-structure.component.scss'],
     standalone: true,
-    imports: [CommonModule, FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, UserImageRoundComponent]
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        UserImageRoundComponent
+    ]
 })
 export class CreateBlindStructureComponent implements OnInit {
 

diff --git a/src/app/admin/branding/admin-branding/admin-branding.component.ts b/src/app/admin/branding/admin-branding/admin-branding.component.ts
@@ -17,7 +17,12 @@ import { MatButtonModule } from '@angular/material/button';
 @Component({
     selector: 'app-admin-branding',
     standalone: true,
-    imports: [CommonModule, AppHeaderComponent, MatButtonModule, RouterLink],
+    imports: [
+        CommonModule,
+        AppHeaderComponent,
+        MatButtonModule,
+        RouterLink
+    ],
     templateUrl: './admin-branding.component.html',
 })
 export class AdminBrandingComponent implements OnInit {

diff --git a/src/app/admin/branding/branding-tab.component.html b/src/app/admin/branding/branding-tab.component.html
@@ -19,7 +19,8 @@ <h2>Brandings</h2>
             <th>Name</th>
             <th>Description</th>
         </tr>
-        <ng-container *ngFor="let branding of brandings$ | async">
+
+        @for (branding of brandings$ | async; track branding.id) {
             <a class="contents" [routerLink]="['/admin/branding', branding.id]">
                 <tr>
                     <td>
@@ -48,6 +49,6 @@ <h2>Brandings</h2>
                     </td>
                 </tr>
             </a>
-        </ng-container>
+        }
     </table>
 </div>
diff --git a/src/app/admin/branding/branding-tab.component.ts b/src/app/admin/branding/branding-tab.component.ts
@@ -9,7 +9,7 @@ import { ConfirmationDialogComponent } from '../../dialogs/confirmation-dialog/c
 import { Branding } from '../../shared/interfaces/branding.interface';
 import { BrandingApiService } from '../../shared/services/api/branding-api.service';
 import { CreateBrandingComponent } from './create-branding/create-branding.component';
-import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterLink } from '@angular/router';
 
@@ -21,8 +21,6 @@ import { RouterLink } from '@angular/router';
     imports: [
         AsyncPipe,
         MatButtonModule,
-        NgForOf,
-        NgIf,
         RouterLink
     ]
 })

diff --git a/src/app/admin/branding/create-branding/create-branding.component.ts b/src/app/admin/branding/create-branding/create-branding.component.ts
@@ -1,12 +1,10 @@
 import { Component, computed, inject, OnInit, signal } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FormlyModule } from '@ngx-formly/core';
+import { FormsModule } from '@angular/forms';
 import { Branding, BrandingModel } from '../../../shared/interfaces/branding.interface';
 import { BrandingApiService } from '../../../shared/services/api/branding-api.service';
 import { catchError, take, tap } from 'rxjs/operators';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NgIf } from '@angular/common';
 import { BaseAddDialogComponent } from '../../../shared/components/base-add-dialog/base-add-dialog.component';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -16,7 +14,12 @@ import { of } from 'rxjs';
     selector: 'app-create-branding',
     templateUrl: './create-branding.component.html',
     standalone: true,
-    imports: [FormsModule, ReactiveFormsModule, FormlyModule, MatButtonModule, NgIf, MatFormFieldModule, MatInputModule]
+    imports: [
+        FormsModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule
+    ]
 })
 export class CreateBrandingComponent extends BaseAddDialogComponent<CreateBrandingComponent, BrandingModel> implements OnInit {
 

diff --git a/src/app/admin/location/admin-location/admin-location.component.ts b/src/app/admin/location/admin-location/admin-location.component.ts
@@ -17,7 +17,12 @@ import { MatButtonModule } from '@angular/material/button';
 @Component({
     selector: 'app-admin-location',
     standalone: true,
-    imports: [CommonModule, AppHeaderComponent, MatButtonModule, RouterLink],
+    imports: [
+        CommonModule,
+        AppHeaderComponent,
+        MatButtonModule,
+        RouterLink
+    ],
     templateUrl: './admin-location.component.html',
 })
 export class AdminLocationComponent implements OnInit {

diff --git a/src/app/admin/location/create-location/create-location.component.ts b/src/app/admin/location/create-location/create-location.component.ts
@@ -1,12 +1,10 @@
 import { Component, computed, inject, OnInit, signal } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FormlyModule } from '@ngx-formly/core';
+import { FormsModule } from '@angular/forms';
 import { LocationApiService } from '../../../shared/services/api/location-api.service';
 import { Location, LocationModel } from '../../../shared/interfaces/location.interface';
 import { catchError, take, tap } from 'rxjs/operators';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NgIf } from '@angular/common';
 import { BaseAddDialogComponent } from '../../../shared/components/base-add-dialog/base-add-dialog.component';
 import { CreatePauseComponent } from '../../blind-level/create-pause/create-pause.component';
 import { of } from 'rxjs';
@@ -17,7 +15,12 @@ import { MatInputModule } from '@angular/material/input';
     selector: 'app-create-location',
     templateUrl: './create-location.component.html',
     standalone: true,
-    imports: [FormsModule, ReactiveFormsModule, FormlyModule, MatButtonModule, NgIf, MatFormFieldModule, MatInputModule]
+    imports: [
+        FormsModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule
+    ]
 })
 export class CreateLocationComponent extends BaseAddDialogComponent<CreatePauseComponent, LocationModel> implements OnInit {