From b7c3bbc3d119e22bd4721d1b490649f4994db82b Mon Sep 17 00:00:00 2001
From: Nicolas Molina <hi@nicobytes.com>
Date: Fri, 18 Oct 2024 13:31:22 -0400
Subject: [PATCH] chore(edit-content): migrate using the new syntax and signals
 #30401

---
 .../dot-nav-icon/dot-nav-icon.component.html  | 11 ++---
 .../dot-sub-nav/dot-sub-nav.component.html    | 22 +++++-----
 .../dot-navigation.component.html             | 22 +++++-----
 .../dot-navigation.component.ts               | 41 ++++++++++---------
 4 files changed, 49 insertions(+), 47 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-icon/dot-nav-icon.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-icon/dot-nav-icon.component.html
index f15f79d2674a..364c908aa567 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-icon/dot-nav-icon.component.html
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-icon/dot-nav-icon.component.html
@@ -1,8 +1,5 @@
-<i
-    *ngIf="isFaIcon(icon); else mdIcon"
-    [style.font-size.px]="18"
-    class="fa fa-th-list {{ icon }}"
-    aria-hidden="true"></i>
-<ng-template #mdIcon>
+@if (isFaIcon(icon)) {
+    <i [style.font-size.px]="18" class="fa fa-th-list {{ icon }}" aria-hidden="true"></i>
+} @else {
     <dot-icon [size]="18" [name]="icon.toLocaleLowerCase()" inverted aria-hidden="true"></dot-icon>
-</ng-template>
+}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-sub-nav/dot-sub-nav.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-sub-nav/dot-sub-nav.component.html
index 69c29bc1cbc7..adfefe8bf208 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-sub-nav/dot-sub-nav.component.html
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-sub-nav/dot-sub-nav.component.html
@@ -1,12 +1,14 @@
 <ul [class.dot-nav-sub__collapsed]="collapsed" #ul class="dot-nav-sub">
-    <li *ngFor="let subItem of data.menuItems" class="dot-nav-sub__item">
-        <a
-            (click)="onItemClick($event, subItem)"
-            [class.dot-nav-sub__link--active]="subItem.active"
-            [routerLink]="subItem.menuLink"
-            [state]="{ menuId: data.id }"
-            class="dot-nav-sub__link">
-            {{ subItem.label }}
-        </a>
-    </li>
+    @for (subItem of data.menuItems; track subItem) {
+        <li class="dot-nav-sub__item">
+            <a
+                (click)="onItemClick($event, subItem)"
+                [class.dot-nav-sub__link--active]="subItem.active"
+                [routerLink]="subItem.menuLink"
+                [state]="{ menuId: data.id }"
+                class="dot-nav-sub__link">
+                {{ subItem.label }}
+            </a>
+        </li>
+    }
 </ul>
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.html
index 29d3a4f5155b..a937ae5f9e26 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.html
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.html
@@ -1,14 +1,14 @@
-<nav [class.collapsed]="dotNavigationService.collapsed$ | async" role="navigation">
+@let isCollapsed = $isCollapsed();
+<nav [class.collapsed]="isCollapsed" role="navigation">
     <ul class="dot-nav">
-        <li
-            *ngFor="let item of menu$ | async"
-            [class.dot-nav__list-item--active]="item.isOpen"
-            class="dot-nav__list-item">
-            <dot-nav-item
-                (menuClick)="onMenuClick($event)"
-                (itemClick)="onItemClick($event)"
-                [data]="item"
-                [collapsed]="dotNavigationService.collapsed$ | async"></dot-nav-item>
-        </li>
+        @for (item of $menu(); track item) {
+            <li [class.dot-nav__list-item--active]="item.isOpen" class="dot-nav__list-item">
+                <dot-nav-item
+                    (menuClick)="onMenuClick($event)"
+                    (itemClick)="onItemClick($event)"
+                    [data]="item"
+                    [collapsed]="isCollapsed" />
+            </li>
+        }
     </ul>
 </nav>
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.ts
index 21cb118a9294..8d5f4a269e45 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.ts
@@ -1,6 +1,7 @@
 import { Observable } from 'rxjs';
 
-import { Component, HostBinding, HostListener, OnInit } from '@angular/core';
+import { Component, HostBinding, HostListener, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 import { IframeOverlayService } from '@components/_common/iframe/service/iframe-overlay.service';
 import { DotMenu, DotMenuItem } from '@dotcms/dotcms-models';
@@ -13,20 +14,22 @@ import { DotNavigationService } from './services/dot-navigation.service';
     styleUrls: ['./dot-navigation.component.scss'],
     templateUrl: 'dot-navigation.component.html'
 })
-export class DotNavigationComponent implements OnInit {
-    menu$: Observable<DotMenu[]>;
+export class DotNavigationComponent {
+    readonly #dotNavigationService = inject(DotNavigationService);
+    readonly #iframeOverlayService = inject(IframeOverlayService);
 
-    @HostBinding('style.overflow-y') get overFlow() {
-        return this.dotNavigationService.collapsed$.getValue() ? '' : 'auto';
-    }
+    $menu = toSignal(this.#dotNavigationService.items$, {
+        requireSync: true
+    });
 
-    constructor(
-        public dotNavigationService: DotNavigationService,
-        public iframeOverlayService: IframeOverlayService
-    ) {}
+    $isCollapsed = toSignal(this.#dotNavigationService.collapsed$, {
+        requireSync: true
+    });
 
-    ngOnInit() {
-        this.menu$ = this.dotNavigationService.items$;
+    menu$: Observable<DotMenu[]>;
+
+    @HostBinding('style.overflow-y') get overFlow() {
+        return this.#dotNavigationService.collapsed$.getValue() ? '' : 'auto';
     }
 
     /**
@@ -40,8 +43,8 @@ export class DotNavigationComponent implements OnInit {
         $event.originalEvent.stopPropagation();
 
         if (!$event.originalEvent.ctrlKey && !$event.originalEvent.metaKey) {
-            this.dotNavigationService.reloadCurrentPortlet($event.data.id);
-            this.iframeOverlayService.hide();
+            this.#dotNavigationService.reloadCurrentPortlet($event.data.id);
+            this.#iframeOverlayService.hide();
         }
     }
 
@@ -53,10 +56,10 @@ export class DotNavigationComponent implements OnInit {
      * @memberof DotNavigationComponent
      */
     onMenuClick(event: { originalEvent: MouseEvent; data: DotMenu }): void {
-        if (this.dotNavigationService.collapsed$.getValue()) {
-            this.dotNavigationService.goTo(event.data.menuItems[0].menuLink);
+        if (this.#dotNavigationService.collapsed$.getValue()) {
+            this.#dotNavigationService.goTo(event.data.menuItems[0].menuLink);
         } else {
-            this.dotNavigationService.setOpen(event.data.id);
+            this.#dotNavigationService.setOpen(event.data.id);
         }
     }
 
@@ -67,8 +70,8 @@ export class DotNavigationComponent implements OnInit {
      */
     @HostListener('document:click')
     handleDocumentClick(): void {
-        if (this.dotNavigationService.collapsed$.getValue()) {
-            this.dotNavigationService.closeAllSections();
+        if (this.#dotNavigationService.collapsed$.getValue()) {
+            this.#dotNavigationService.closeAllSections();
         }
     }
 }