chore(edit-content): use the new angular syntax (#29626)

### Parent Issue #29625 ### Task Using the command `nx g @angular/core:control-flow `to migrate to the new Angular syntax ### Proposed Objective Use the new Angular syntax to improve performance and code maintainability. ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable)
dotCMS · Aug 19, 2024 · 7212cb8 · 7212cb8
1 parent aba3bd7
commit 7212cb8
Show file tree

Hide file tree

Showing 25 changed files with 212 additions and 208 deletions.
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.ts
@@ -2,7 +2,7 @@ import { fromEvent, merge, Observable, of, Subject } from 'rxjs';
 
 import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { ActivatedRoute, NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 
 import { DialogService } from 'primeng/dynamicdialog';
 
@@ -194,7 +194,7 @@ browse from the page internal links
                 takeUntil(this.destroy$),
                 filter((event) => event instanceof NavigationEnd)
             )
-            .subscribe((_event: NavigationStart) => {
+            .subscribe(() => {
                 this.getExperimentResolverData();
             });
 

diff --git a/...ide/components/dot-content-aside-information/dot-content-aside-information.component.html b/...ide/components/dot-content-aside-information/dot-content-aside-information.component.html
@@ -1,16 +1,16 @@
 <div class="content-aside__information">
     <div class="content-aside__status">
-        <p-chip
-            *ngIf="contentlet | contentletStatus as status"
-            [styleClass]="'p-chip-sm ' + status.classes"
-            [label]="status.label" />
-        <dot-copy-button
-            *ngIf="contentlet?.inode as inode"
-            [copy]="inode"
-            [tooltipText]="'ID: ' + inode"
-            [label]="'ID: ' + (inode | slice: -10)"
-            data-testId="inode"
-            aria-label="Copy ID" />
+        @if (contentlet | contentletStatus; as status) {
+            <p-chip [styleClass]="'p-chip-sm ' + status.classes" [label]="status.label" />
+        }
+        @if (contentlet?.inode; as inode) {
+            <dot-copy-button
+                [copy]="inode"
+                [tooltipText]="'ID: ' + inode"
+                [label]="'ID: ' + (inode | slice: -10)"
+                data-testId="inode"
+                aria-label="Copy ID" />
+        }
     </div>
     <div class="content-aside__metadata">
         <a
@@ -45,9 +45,11 @@
                         data-testId="publish-history"
                         aria-label="Publish History">
                         <span class="content-history__title">{{ 'Published' | dm }}</span>
-                        <span *ngIf="contentlet?.publishUserName" class="content-history__author">
-                            {{ contentlet?.publishUserName }}
-                        </span>
+                        @if (contentlet?.publishUserName) {
+                            <span class="content-history__author">
+                                {{ contentlet?.publishUserName }}
+                            </span>
+                        }
                         <span class="content-history__date">
                             {{ contentlet?.publishDate | dotRelativeDate: 'MM/dd/yyyy' : null }}
                         </span>

diff --git a/...dit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts b/...dit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { DotCMSContentType, DotCMSContentlet } from '@dotcms/dotcms-models';
@@ -13,12 +12,7 @@ import { DotContentAsideWorkflowComponent } from './components/dot-content-aside
     templateUrl: './dot-edit-content-aside.component.html',
     styleUrls: ['./dot-edit-content-aside.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
-        CommonModule,
-        DotMessagePipe,
-        DotContentAsideInformationComponent,
-        DotContentAsideWorkflowComponent
-    ]
+    imports: [DotMessagePipe, DotContentAsideInformationComponent, DotContentAsideWorkflowComponent]
 })
 export class DotEditContentAsideComponent {
     @Input() contentlet!: DotCMSContentlet;

diff --git a/...dit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html b/...dit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html
@@ -1,28 +1,34 @@
-<form *ngIf="form" [formGroup]="form" class="p-fluid">
-    <ng-container *ngIf="areMultipleTabs; else singleForm">
-        <p-tabView [scrollable]="true" data-testId="edit-content-multiple-tabs">
-            <p-tabPanel *ngFor="let tab of tabs" [header]="tab.title">
-                <ng-container *ngTemplateOutlet="tabTemplate; context: { tab: tab }" />
-            </p-tabPanel>
-        </p-tabView>
-    </ng-container>
-
-    <ng-template #singleForm>
-        <ng-container *ngTemplateOutlet="tabTemplate; context: { tab: tabs[0] }" />
-    </ng-template>
-
-    <ng-template #tabTemplate let-tab="tab">
-        <div class="form__layout">
-            <div *ngFor="let row of tab.layout" class="row" data-testId="row">
-                <div *ngFor="let column of row.columns" class="column" data-testId="column">
-                    <dot-edit-content-field
-                        *ngFor="let field of column.fields"
-                        [contentType]="formData.contentType.variable"
-                        [contentlet]="formData.contentlet"
-                        [field]="field"
-                        data-testId="field" />
-                </div>
+@if (form) {
+    <form [formGroup]="form" class="p-fluid">
+        @if (areMultipleTabs) {
+            <p-tabView [scrollable]="true" data-testId="edit-content-multiple-tabs">
+                @for (tab of tabs; track tab) {
+                    <p-tabPanel [header]="tab.title">
+                        <ng-container *ngTemplateOutlet="tabTemplate; context: { tab: tab }" />
+                    </p-tabPanel>
+                }
+            </p-tabView>
+        } @else {
+            <ng-container *ngTemplateOutlet="tabTemplate; context: { tab: tabs[0] }" />
+        }
+        <ng-template #tabTemplate let-tab="tab">
+            <div class="form__layout">
+                @for (row of tab.layout; track row) {
+                    <div class="row" data-testId="row">
+                        @for (column of row.columns; track column) {
+                            <div class="column" data-testId="column">
+                                @for (field of column.fields; track field) {
+                                    <dot-edit-content-field
+                                        [contentType]="formData.contentType.variable"
+                                        [contentlet]="formData.contentlet"
+                                        [field]="field"
+                                        data-testId="field" />
+                                }
+                            </div>
+                        }
+                    </div>
+                }
             </div>
-        </div>
-    </ng-template>
-</form>
+        </ng-template>
+    </form>
+}
diff --git a/core-web/libs/edit-content/src/lib/edit-content.shell.component.html b/core-web/libs/edit-content/src/lib/edit-content.shell.component.html
diff --git a/core-web/libs/edit-content/src/lib/edit-content.shell.component.ts b/core-web/libs/edit-content/src/lib/edit-content.shell.component.ts
@@ -1,12 +1,11 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
     selector: 'dot-edit-content',
     standalone: true,
-    imports: [CommonModule, RouterModule],
-    templateUrl: './edit-content.shell.component.html',
+    imports: [RouterModule],
+    template: '<router-outlet />',
     styleUrls: ['./edit-content.shell.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })

diff --git a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html
@@ -1,24 +1,24 @@
-<ng-container *ngIf="vm$ | async as vm; else noContent">
-    <p-messages
-        *ngIf="vm?.contentType?.metadata?.[featuredFlagContentKEY]"
-        class="topBar"
-        styleClass="p-message-border-y"
-        severity="success"
-        data-testId="topBar">
-        <ng-template pTemplate>
-            <i class="pi pi-info-circle"></i>
-            <div>
-                <span [innerHTML]="('edit.content.layout.beta.message' | dm) + ' '"></span>
-                <a
-                    [routerLink]="'/content-types-angular/edit/' + vm.contentType.variable"
-                    data-testId="content-type">
-                    {{ 'edit.content.layout.beta.message.switch' | dm }}
-                </a>
-                <span>{{ ' ' }}{{ 'edit.content.layout.beta.message.needed' | dm }}</span>
-            </div>
-        </ng-template>
-    </p-messages>
-
+@if (vm$ | async; as vm) {
+    @if (vm?.contentType?.metadata?.[featuredFlagContentKEY]) {
+        <p-messages
+            class="topBar"
+            styleClass="p-message-border-y"
+            severity="success"
+            data-testId="topBar">
+            <ng-template pTemplate>
+                <i class="pi pi-info-circle"></i>
+                <div>
+                    <span [innerHTML]="('edit.content.layout.beta.message' | dm) + ' '"></span>
+                    <a
+                        [routerLink]="'/content-types-angular/edit/' + vm.contentType.variable"
+                        data-testId="content-type">
+                        {{ 'edit.content.layout.beta.message.switch' | dm }}
+                    </a>
+                    <span>{{ ' ' }}{{ 'edit.content.layout.beta.message.needed' | dm }}</span>
+                </div>
+            </ng-template>
+        </p-messages>
+    }
     <dot-edit-content-toolbar
         (actionFired)="
             fireWorkflowAction({
@@ -35,8 +35,8 @@
         [contentlet]="vm.contentlet"
         [contentType]="vm.contentType"
         class="sidebar" />
-</ng-container>
-
-<ng-template #noContent>{{ 'edit.content.layout.no.content.to.show ' | dm }}</ng-template>
+} @else {
+    {{ 'edit.content.layout.no.content.to.show ' | dm }}
+}
 
 <p-toast></p-toast>
diff --git a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.ts b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.ts
@@ -1,6 +1,6 @@
 import { Observable, forkJoin, of } from 'rxjs';
 
-import { AsyncPipe, JsonPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -31,8 +31,6 @@ import { DotEditContentService } from '../../services/dot-edit-content.service';
     selector: 'dot-edit-content-form-layout',
     standalone: true,
     imports: [
-        NgIf,
-        JsonPipe,
         AsyncPipe,
         DotMessagePipe,
         ButtonModule,

diff --git a/...ry-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.spec.ts b/...ry-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.spec.ts
@@ -141,7 +141,7 @@ describe('DotBinaryFieldUrlModeComponent', () => {
 
     describe('template', () => {
         it('should show error message when url is invalid', () => {
-            const input = spectator.query(byTestId('url-input')) as HTMLInputElement;
+            const input = spectator.query<HTMLInputElement>(byTestId('url-input'));
 
             input.focus(); // to trigger touched
             input.value = 'Not a url'; // to trigger invalid

diff --git a/...-binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.ts b/...-binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.ts
@@ -1,6 +1,6 @@
 import { Subject } from 'rxjs';
 
-import { CommonModule } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -34,13 +34,13 @@ import { DotBinaryFieldValidatorService } from '../../service/dot-binary-field-v
     selector: 'dot-binary-field-url-mode',
     standalone: true,
     imports: [
-        CommonModule,
         FormsModule,
         ReactiveFormsModule,
         ButtonModule,
         InputTextModule,
         DotMessagePipe,
-        DotFieldValidationMessageComponent
+        DotFieldValidationMessageComponent,
+        AsyncPipe
     ],
     providers: [DotBinaryFieldUrlModeStore],
     templateUrl: './dot-binary-field-url-mode.component.html',

diff --git a/...lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.html b/...lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.html
@@ -6,4 +6,4 @@
     [inputId]="field.variable"
     [attr.data-testId]="field.variable"
     [showIcon]="true"
-    [icon]="calendarOptions[field.fieldType].icon"></p-calendar>
+    [icon]="calendarOptions[field.fieldType].icon" />
diff --git a/...c/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.ts b/...c/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
@@ -11,7 +10,7 @@ import { CALENDAR_OPTIONS_PER_TYPE } from './utils';
 @Component({
     selector: 'dot-edit-content-calendar-field',
     standalone: true,
-    imports: [CommonModule, CalendarModule, ReactiveFormsModule],
+    imports: [CalendarModule, ReactiveFormsModule],
     templateUrl: 'dot-edit-content-calendar-field.component.html',
     styleUrls: ['./dot-edit-content-calendar-field.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/...components/dot-category-field-list-skeleton/dot-category-field-list-skeleton.component.ts b/...components/dot-category-field-list-skeleton/dot-category-field-list-skeleton.component.ts
@@ -1,12 +1,11 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 import { SkeletonModule } from 'primeng/skeleton';
 
 @Component({
     selector: 'dot-category-field-list-skeleton',
     standalone: true,
-    imports: [CommonModule, SkeletonModule],
+    imports: [SkeletonModule],
     template: `
         <ul class="m-0 p-1 list-none fadein animation-duration-500">
             @for (_ of $rows(); track $index) {

diff --git a/...eld/components/dot-category-field-search-list/dot-category-field-search-list.component.ts b/...eld/components/dot-category-field-search-list/dot-category-field-search-list.component.ts
@@ -1,6 +1,5 @@
 import { Subject } from 'rxjs';
 
-import { CommonModule } from '@angular/common';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
@@ -42,7 +41,6 @@ import { DotTableSkeletonComponent } from '../dot-table-skeleton/dot-table-skele
     selector: 'dot-category-field-search-list',
     standalone: true,
     imports: [
-        CommonModule,
         TableModule,
         SkeletonModule,
         DotTableSkeletonComponent,

diff --git a/...ategory-field/components/dot-category-field-search/dot-category-field-search.component.ts b/...ategory-field/components/dot-category-field-search/dot-category-field-search.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, EventEmitter, input, Output } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -18,7 +17,7 @@ const MINIMUM_CHARACTERS = 3;
 @Component({
     selector: 'dot-category-field-search',
     standalone: true,
-    imports: [CommonModule, DotMessagePipe, InputTextModule, ReactiveFormsModule],
+    imports: [DotMessagePipe, InputTextModule, ReactiveFormsModule],
     templateUrl: './dot-category-field-search.component.html',
     styleUrl: './dot-category-field-search.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush

diff --git a/...ory-field/components/dot-category-field-selected/dot-category-field-selected.component.ts b/...ory-field/components/dot-category-field-selected/dot-category-field-selected.component.ts
@@ -1,5 +1,4 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, EventEmitter, input, Output } from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
@@ -21,7 +20,6 @@ import { DotCategoryFieldSearchListComponent } from '../dot-category-field-searc
     selector: 'dot-category-field-selected',
     standalone: true,
     imports: [
-        CommonModule,
         ButtonModule,
         DotMessagePipe,
         DotCategoryFieldSearchListComponent,

diff --git a/...it-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.html b/...it-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.html
@@ -16,9 +16,9 @@
             @for (col of columns; track $index) {
                 <td>
                     @if (col === '') {
-                        <p-skeleton size="1rem" styleClass="mr-1"></p-skeleton>
+                        <p-skeleton size="1rem" styleClass="mr-1" />
                     } @else {
-                        <p-skeleton></p-skeleton>
+                        <p-skeleton />
                     }
                 </td>
             }

diff --git a/...edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.ts b/...edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 import { SkeletonModule } from 'primeng/skeleton';
@@ -12,7 +11,7 @@ import { TableModule } from 'primeng/table';
 @Component({
     selector: 'dot-table-skeleton',
     standalone: true,
-    imports: [CommonModule, SkeletonModule, TableModule],
+    imports: [SkeletonModule, TableModule],
     templateUrl: './dot-table-skeleton.component.html',
     styleUrl: './dot-table-skeleton.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush

diff --git a/...lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.html b/...lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.html
@@ -1,7 +1,8 @@
-<p-checkbox
-    *ngFor="let option of options; let i = index"
-    [name]="field.variable"
-    [formControl]="formControl"
-    [value]="option.value"
-    [label]="option.label"
-    [inputId]="option.value + i"></p-checkbox>
+@for (option of options; track $index) {
+    <p-checkbox
+        [name]="field.variable"
+        [formControl]="formControl"
+        [value]="option.value"
+        [label]="option.label"
+        [inputId]="option.value + $index"></p-checkbox>
+}
diff --git a/...c/lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.ts b/...c/lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, OnInit, inject } from '@angular/core';
 import { ControlContainer, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
@@ -10,7 +9,7 @@ import { getSingleSelectableFieldOptions } from '../../utils/functions.util';
 @Component({
     selector: 'dot-edit-content-checkbox-field',
     standalone: true,
-    imports: [NgFor, CheckboxModule, ReactiveFormsModule, FormsModule],
+    imports: [CheckboxModule, ReactiveFormsModule, FormsModule],
     templateUrl: './dot-edit-content-checkbox-field.component.html',
     styleUrls: ['./dot-edit-content-checkbox-field.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,