NAS-129913 / 24.10 / New Control Flow Syntax (#10308)

truenas · Jul 11, 2024 · 0a36b83 · 0a36b83
1 parent 65670db
commit 0a36b83
Show file tree

Hide file tree

Showing 232 changed files with 6,555 additions and 21,553 deletions.
diff --git a/src/app/modules/charts/components/view-chart-area/view-chart-area.component.ts b/src/app/modules/charts/components/view-chart-area/view-chart-area.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   Component, OnDestroy, ChangeDetectionStrategy,
   input,
@@ -20,7 +19,6 @@ import 'chartjs-adapter-date-fns';
   styleUrls: ['./view-chart-area.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
 })
 export class ViewChartAreaComponent implements OnDestroy {
   // TODO: Replace when ng-mocks get viewChild support

diff --git a/src/app/modules/forms/custom-selects/unused-disk-select/unused-disk-select.component.html b/src/app/modules/forms/custom-selects/unused-disk-select/unused-disk-select.component.html
@@ -1,10 +1,11 @@
-<ix-checkbox
-  *ngIf="nonUniqueSerialDisks().length"
-  [formControl]="allowDuplicateSerials"
-  [label]="'Allow non-unique serialed disks (not recommended)' | translate"
-  [tooltip]="nonUniqueSerialDisksTooltip()"
-  [required]="true"
-></ix-checkbox>
+@if (nonUniqueSerialDisks().length) {
+  <ix-checkbox
+    [formControl]="allowDuplicateSerials"
+    [label]="'Allow non-unique serialed disks (not recommended)' | translate"
+    [tooltip]="nonUniqueSerialDisksTooltip()"
+    [required]="true"
+  ></ix-checkbox>
+}
 
 <ix-combobox
   [label]="label()"

diff --git a/src/app/modules/forms/custom-selects/unused-disk-select/unused-disk-select.component.ts b/src/app/modules/forms/custom-selects/unused-disk-select/unused-disk-select.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -53,7 +52,6 @@ import { WebSocketService } from 'app/services/ws.service';
     IxFormsModule,
     ReactiveFormsModule,
     TranslateModule,
-    NgIf,
   ],
 })
 export class UnusedDiskSelectComponent implements OnInit, AfterViewInit {

diff --git a/...-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.html b/...-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.html
@@ -1,137 +1,166 @@
-<div
-  *ngIf="dynamicSchema"
-  [formGroup]="dynamicForm"
-  [class.indent]="dynamicSchema?.indent"
->
-  <ng-container *ngIf="!(isHidden$ | async)">
-    <ix-scheduler
-      *ngIf="dynamicSchema.type === DynamicFormSchemaType.Cron"
-      [formControlName]="dynamicSchema.controlName"
-      [label]="dynamicSchema.title | translate"
-      [tooltip]="dynamicSchema.tooltip | translate"
-      [required]="dynamicSchema.required"
-    ></ix-scheduler>
+@if (dynamicSchema) {
+  <div
+    [formGroup]="dynamicForm"
+    [class.indent]="dynamicSchema?.indent"
+  >
+    @if (!(isHidden$ | async)) {
+      @switch (dynamicSchema.type) {
+        @case (DynamicFormSchemaType.Cron) {
+          <ix-scheduler
+            [formControlName]="dynamicSchema.controlName"
+            [label]="dynamicSchema.title | translate"
+            [tooltip]="dynamicSchema.tooltip | translate"
+            [required]="dynamicSchema.required"
+          ></ix-scheduler>
+        }
 
-    <ng-container *ngIf="dynamicSchema.type === DynamicFormSchemaType.Dict">
-      <div *ngIf="dynamicSchema.title" class="label">
-        <div class="label-wrapper">
-          {{ dynamicSchema.title }}
-        </div>
+        @case (DynamicFormSchemaType.Dict) {
+          @if (dynamicSchema.title) {
+            <div class="label">
+              <div class="label-wrapper">
+                {{ dynamicSchema.title }}
+              </div>
 
-        <div *ngIf="dynamicSchema.tooltip" class="label-tooltip">
-          <ix-tooltip
-            class="tooltip"
-            [header]="dynamicSchema.title"
-            [message]="dynamicSchema.tooltip"
-          ></ix-tooltip>
-        </div>
-      </div>
+              @if (dynamicSchema.tooltip) {
+                <div class="label-tooltip">
+                  <ix-tooltip
+                    class="tooltip"
+                    [header]="dynamicSchema.title"
+                    [message]="dynamicSchema.tooltip"
+                  ></ix-tooltip>
+                </div>
+              }
+            </div>
+          }
 
-      <ix-dynamic-form-item
-        *ngFor="let attr of dynamicSchema.attrs"
-        [id]="attr.controlName"
-        [dynamicSchema]="attr"
-        [dynamicForm]="dynamicForm.controls[dynamicSchema.controlName] | cast"
-        [isEditMode]="isEditMode"
-        (addListItem)="addControlNext($event)"
-        (deleteListItem)="removeControlNext($event)"
-      ></ix-dynamic-form-item>
-    </ng-container>
+          @for (attr of dynamicSchema.attrs; track attr) {
+            <ix-dynamic-form-item
+              [id]="attr.controlName"
+              [dynamicSchema]="attr"
+              [dynamicForm]="dynamicForm.controls[dynamicSchema.controlName] | cast"
+              [isEditMode]="isEditMode"
+              (addListItem)="addControlNext($event)"
+              (deleteListItem)="removeControlNext($event)"
+            ></ix-dynamic-form-item>
+          }
+        }
 
-    <ix-code-editor
-      *ngIf="dynamicSchema.type === DynamicFormSchemaType.Text"
-      [language]="dynamicSchema.language"
-      [label]="dynamicSchema.title | translate"
-      [formControlName]="dynamicSchema.controlName"
-      [tooltip]="dynamicSchema.tooltip | translate"
-      [placeholder]="dynamicSchema.placeholder | translate"
-      [required]="dynamicSchema.required"
-    ></ix-code-editor>
+        @case (DynamicFormSchemaType.Text) {
+          <ix-code-editor
+            [language]="dynamicSchema.language"
+            [label]="dynamicSchema.title | translate"
+            [formControlName]="dynamicSchema.controlName"
+            [tooltip]="dynamicSchema.tooltip | translate"
+            [placeholder]="dynamicSchema.placeholder | translate"
+            [required]="dynamicSchema.required"
+          ></ix-code-editor>
+        }
 
-    <ix-list
-      *ngIf="dynamicSchema.type === DynamicFormSchemaType.List"
-      [label]="dynamicSchema.title | translate"
-      [empty]="getFormArray.controls.length === 0"
-      [formArrayName]="dynamicSchema.controlName"
-      [default]="dynamicSchema.default"
-      [itemsSchema]="dynamicSchema.itemsSchema"
-      [required]="dynamicSchema.required"
-      [isEditMode]="isEditMode"
-      [canAdd]="!isAllListControlsDisabled"
-      [formArray]="getFormArray"
-      (add)="addControl($event)"
-    >
-      <ix-list-item
-        *ngFor="let element of getFormArray.controls; let i = index"
-        [label]="dynamicSchema.title | translate"
-        [canDelete]="!isAllListControlsDisabled"
-        (delete)="removeControl(i)"
-      >
-        <ix-dynamic-form-item
-          *ngFor="let item of dynamicSchema.items"
-          [dynamicSchema]="item"
-          [dynamicForm]="element | cast"
-          [isEditMode]="isEditMode"
-          (addListItem)="addControlNext($event)"
-          (deleteListItem)="removeControlNext($event)"
-        ></ix-dynamic-form-item>
-      </ix-list-item>
+        @case (DynamicFormSchemaType.List) {
+          <ix-list
+            [label]="dynamicSchema.title | translate"
+            [empty]="getFormArray.controls.length === 0"
+            [formArrayName]="dynamicSchema.controlName"
+            [default]="dynamicSchema.default"
+            [itemsSchema]="dynamicSchema.itemsSchema"
+            [required]="dynamicSchema.required"
+            [isEditMode]="isEditMode"
+            [canAdd]="!isAllListControlsDisabled"
+            [formArray]="getFormArray"
+            (add)="addControl($event)"
+          >
+            @for (element of getFormArray.controls; track element; let i = $index) {
+              <ix-list-item
+                [label]="dynamicSchema.title | translate"
+                [canDelete]="!isAllListControlsDisabled"
+                (delete)="removeControl(i)"
+              >
+                @for (item of dynamicSchema.items; track item) {
+                  <ix-dynamic-form-item
+                    [dynamicSchema]="item"
+                    [dynamicForm]="element | cast"
+                    [isEditMode]="isEditMode"
+                    (addListItem)="addControlNext($event)"
+                    (deleteListItem)="removeControlNext($event)"
+                  ></ix-dynamic-form-item>
+                }
+              </ix-list-item>
+            }
+            <ix-errors [control]="dynamicForm" [label]="dynamicSchema.title | translate"></ix-errors>
+          </ix-list>
+        }
 
-      <ix-errors [control]="dynamicForm" [label]="dynamicSchema.title | translate"></ix-errors>
-    </ix-list>
+        @case (DynamicFormSchemaType.Input) {
+          <ix-input
+            [formControlName]="dynamicSchema.controlName"
+            [label]="dynamicSchema.title | translate"
+            [placeholder]="dynamicSchema.placeholder | translate"
+            [tooltip]="dynamicSchema.tooltip | translate"
+            [required]="dynamicSchema.required"
+            [type]="dynamicSchema.inputType"
+          ></ix-input>
+        }
 
-    <ix-input
-      *ngIf="dynamicSchema.type === DynamicFormSchemaType.Input || dynamicSchema.type === DynamicFormSchemaType.Uri"
-      [formControlName]="dynamicSchema.controlName"
-      [label]="dynamicSchema.title | translate"
-      [placeholder]="dynamicSchema.placeholder | translate"
-      [tooltip]="dynamicSchema.tooltip | translate"
-      [required]="dynamicSchema.required"
-      [type]="dynamicSchema.inputType"
-    ></ix-input>
+        @case (DynamicFormSchemaType.Uri) {
+          <ix-input
+            [formControlName]="dynamicSchema.controlName"
+            [label]="dynamicSchema.title | translate"
+            [placeholder]="dynamicSchema.placeholder | translate"
+            [tooltip]="dynamicSchema.tooltip | translate"
+            [required]="dynamicSchema.required"
+            [type]="dynamicSchema.inputType"
+          ></ix-input>
+        }
 
-    <ix-select
-      *ngIf="dynamicSchema.type === DynamicFormSchemaType.Select"
-      [formControlName]="dynamicSchema.controlName"
-      [label]="dynamicSchema.title | translate"
-      [options]="dynamicSchema.options"
-      [tooltip]="dynamicSchema.tooltip | translate"
-      [required]="dynamicSchema.required"
-      [hideEmpty]="dynamicSchema.hideEmpty"
-    ></ix-select>
+        @case (DynamicFormSchemaType.Select) {
+          <ix-select
+            [formControlName]="dynamicSchema.controlName"
+            [label]="dynamicSchema.title | translate"
+            [options]="dynamicSchema.options"
+            [tooltip]="dynamicSchema.tooltip | translate"
+            [required]="dynamicSchema.required"
+            [hideEmpty]="dynamicSchema.hideEmpty"
+          ></ix-select>
+        }
 
-    <ix-combobox
-      *ngIf="dynamicSchema.type === DynamicFormSchemaType.Enum"
-      [formControlName]="dynamicSchema.controlName"
-      [label]="dynamicSchema.title | translate"
-      [provider]="getEnumTypeProvider(dynamicSchema.options)"
-      [tooltip]="dynamicSchema.tooltip | translate"
-      [required]="dynamicSchema.required"
-    ></ix-combobox>
+        @case (DynamicFormSchemaType.Enum) {
+          <ix-combobox
+            [formControlName]="dynamicSchema.controlName"
+            [label]="dynamicSchema.title | translate"
+            [provider]="getEnumTypeProvider(dynamicSchema.options)"
+            [tooltip]="dynamicSchema.tooltip | translate"
+            [required]="dynamicSchema.required"
+          ></ix-combobox>
+        }
 
-    <ix-explorer
-      *ngIf="dynamicSchema.type === DynamicFormSchemaType.Explorer"
-      [formControlName]="dynamicSchema.controlName"
-      [label]="dynamicSchema.title | translate"
-      [tooltip]="dynamicSchema.tooltip | translate"
-      [required]="dynamicSchema.required"
-      [nodeProvider]="dynamicSchema.nodeProvider"
-    ></ix-explorer>
+        @case (DynamicFormSchemaType.Explorer) {
+          <ix-explorer
+            [formControlName]="dynamicSchema.controlName"
+            [label]="dynamicSchema.title | translate"
+            [tooltip]="dynamicSchema.tooltip | translate"
+            [required]="dynamicSchema.required"
+            [nodeProvider]="dynamicSchema.nodeProvider"
+          ></ix-explorer>
+        }
 
-    <ix-checkbox
-      *ngIf="dynamicSchema.type === DynamicFormSchemaType.Checkbox"
-      [formControlName]="dynamicSchema.controlName"
-      [label]="dynamicSchema.title | translate"
-      [tooltip]="dynamicSchema.tooltip | translate"
-      [required]="dynamicSchema.required"
-    ></ix-checkbox>
+        @case (DynamicFormSchemaType.Checkbox) {
+          <ix-checkbox
+            [formControlName]="dynamicSchema.controlName"
+            [label]="dynamicSchema.title | translate"
+            [tooltip]="dynamicSchema.tooltip | translate"
+            [required]="dynamicSchema.required"
+          ></ix-checkbox>
+        }
 
-    <ix-ip-input-with-netmask
-      *ngIf="dynamicSchema.type === DynamicFormSchemaType.Ipaddr"
-      [formControlName]="dynamicSchema.controlName"
-      [label]="dynamicSchema.title | translate"
-      [tooltip]="dynamicSchema.tooltip | translate"
-      [required]="dynamicSchema.required"
-    ></ix-ip-input-with-netmask>
-  </ng-container>
-</div>
+        @case (DynamicFormSchemaType.Ipaddr) {
+          <ix-ip-input-with-netmask
+            [formControlName]="dynamicSchema.controlName"
+            [label]="dynamicSchema.title | translate"
+            [tooltip]="dynamicSchema.tooltip | translate"
+            [required]="dynamicSchema.required"
+          ></ix-ip-input-with-netmask>
+        }
+      }
+    }
+  </div>
+}
diff --git a/...p/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form.component.html b/...p/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form.component.html
@@ -1,17 +1,18 @@
-<ng-container *ngFor="let section of dynamicSection">
-  <ix-fieldset
-    *ngIf="section.schema.length"
-    [title]="section.name | translate"
-    [tooltip]="section.description | translate"
-  >
-    <ng-container *ngFor="let schema of section.schema">
-      <ix-dynamic-form-item
-        [dynamicSchema]="schema"
-        [dynamicForm]="dynamicForm"
-        [isEditMode]="isEditMode"
-        (addListItem)="addControlNext($event)"
-        (deleteListItem)="removeControlNext($event)"
-      ></ix-dynamic-form-item>
-    </ng-container>
-  </ix-fieldset>
-</ng-container>
+@for (section of dynamicSection; track section) {
+  @if (section.schema.length) {
+    <ix-fieldset
+      [title]="section.name | translate"
+      [tooltip]="section.description | translate"
+    >
+      @for (schema of section.schema; track schema) {
+        <ix-dynamic-form-item
+          [dynamicSchema]="schema"
+          [dynamicForm]="dynamicForm"
+          [isEditMode]="isEditMode"
+          (addListItem)="addControlNext($event)"
+          (deleteListItem)="removeControlNext($event)"
+        ></ix-dynamic-form-item>
+      }
+    </ix-fieldset>
+  }
+}