feat(edit-content) refactor to use signal store as store Edit Content

core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.html

@@ -36,7 +36,7 @@ <h2>{{ 'Workflow' | dm }}</h2>
     <div class="content-aside__close">
         <button
             class="p-button p-button-sm p-button-text p-button-rounded p-button-icon-only"
-            (click)="$toggle.emit(!$collapsed())"
+            (click)="$toggle.emit()"
             data-testId="toggle-button">
             <svg
                 width="16"

core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
 
 import { TabViewModule } from 'primeng/tabview';
 
-import { DotCMSContentType, DotCMSContentlet } from '@dotcms/dotcms-models';
+import { DotCMSContentlet, DotCMSContentType } from '@dotcms/dotcms-models';
 import { DotMessagePipe } from '@dotcms/ui';
 
 import { DotContentAsideInformationComponent } from './components/dot-content-aside-information/dot-content-aside-information.component';
@@ -37,13 +37,8 @@ export class DotEditContentAsideComponent {
      */
     $loading = input.required<boolean>({ alias: 'loading' });
 
-    /**
-     * A variable to control the collapsed state
-     */
-    $collapsed = input.required<boolean>({ alias: 'collapsed' });
-
     /**
      * A variable to control the toggle state
      */
-    $toggle = output<boolean>({ alias: 'toggle' });
+    $toggle = output<void>({ alias: 'toggle' });
 }

core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.ts

@@ -31,7 +31,7 @@ import {
 } from '../../models/dot-edit-content-field.constant';
 import { FIELD_TYPES } from '../../models/dot-edit-content-field.enum';
 import { FILTERED_TYPES } from '../../models/dot-edit-content-form.enum';
-import { EditContentPayload } from '../../models/dot-edit-content-form.interface';
+import { EditContentForm } from '../../models/dot-edit-content-form.interface';
 import { getFinalCastedValue, transformLayoutToTabs } from '../../utils/functions.util';
 import { DotEditContentAsideComponent } from '../dot-edit-content-aside/dot-edit-content-aside.component';
 import { DotEditContentFieldComponent } from '../dot-edit-content-field/dot-edit-content-field.component';
@@ -54,8 +54,10 @@ import { DotEditContentFieldComponent } from '../dot-edit-content-field/dot-edit
 })
 export class DotEditContentFormComponent implements OnInit {
     @Input()
-    formData!: EditContentPayload;
+    formData!: EditContentForm;
+
     @Output() changeValue = new EventEmitter();
+
     form!: FormGroup;
     readonly fieldTypes = FIELD_TYPES;
     readonly filteredTypes = FILTERED_TYPES;

core-web/libs/edit-content/src/lib/edit-content.routes.ts

@@ -13,7 +13,11 @@ export const DotEditContentRoutes: Route[] = [
                 title: 'Create Content',
                 component: EditContentLayoutComponent
             },
-            { path: ':id', title: 'Edit Content', component: EditContentLayoutComponent }
+            {
+                path: ':id',
+                title: 'Edit Content',
+                component: EditContentLayoutComponent
+            }
         ]
     }
 ];

core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html

@@ -1,16 +1,25 @@
-@if (vm$ | async; as vm) {
-    @if (vm?.contentType?.metadata?.[$featuredFlagContentKEY()]) {
+<!--Todo: handle Loading and Saving state-->
+@if ($store.isLoaded()) {
+    @let formData = $store.formData();
+    @let contentType = $store.contentType();
+    @let variable = contentType.variable;
+    @let contentlet = $store.contentlet();
+    @let actionsByContentTypeOrContent = $store.actions();
+    @let showSidebar = $store.showSidebar();
+    @let isLoading = $store.isLoading();
+
+    @if ($store.isEnabledNewContentEditor()) {
         <p-messages
-            class="topBar"
+            class="edit-content-layout__topBar"
             styleClass="p-message-border-y"
             severity="success"
-            data-testId="topBar">
+            data-testId="edit-content-layout__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"
+                        [routerLink]="'/content-types-angular/edit/' + variable"
                         data-testId="content-type">
                         {{ 'edit.content.layout.beta.message.switch' | dm }}
                     </a>
@@ -23,17 +32,17 @@
         (actionFired)="
             fireWorkflowAction({
                 actionId: $event.id,
-                inode: vm.contentlet?.inode,
-                contentType: vm.contentType.variable
+                inode: contentlet?.inode,
+                contentType: variable
             })
         "
-        [actions]="vm.actions"
-        class="header"
-        [class.showSidebar]="vm.layout.showSidebar">
+        [actions]="actionsByContentTypeOrContent"
+        data-testId="edit-content-layout__header"
+        class="edit-content-layout__header">
         <button
-            [class.showSidebar]="vm.layout.showSidebar"
-            class="edit-content-layout__sidebar-btn p-button p-button-sm p-button-text p-button-rounded p-button-icon-only content-aside__closeBtn"
-            (click)="toggleSidebar()"
+            [class.hide]="showSidebar"
+            class="edit-content-layout__sidebar--btn p-button p-button-sm p-button-text p-button-rounded p-button-icon-only"
+            (click)="$store.toggleSidebar()"
             data-testId="sidebar-toggle">
             <svg
                 width="16"
@@ -65,17 +74,29 @@
             </svg>
         </button>
     </dot-edit-content-toolbar>
-    <dot-edit-content-form (changeValue)="setFormValue($event)" [formData]="vm" class="body" />
-    <dot-edit-content-aside
-        [loading]="vm.loading"
-        [contentlet]="vm.contentlet"
-        [contentType]="vm.contentType"
-        [collapsed]="vm.layout.showSidebar"
-        (toggle)="toggleSidebar()"
-        class="sidebar" />
-} @else {
+
+    <dot-edit-content-form
+        (changeValue)="setFormValue($event)"
+        [formData]="formData"
+        data-testId="edit-content-layout__body"
+        class="edit-content-layout__body" />
+
+    @if (showSidebar) {
+        @defer (when showSidebar) {
+            <dot-edit-content-aside
+                [loading]="isLoading"
+                [contentlet]="contentlet"
+                [contentType]="contentType"
+                (toggle)="$store.toggleSidebar()"
+                data-testId="edit-content-layout__sidebar"
+                class="edit-content-layout__sidebar" />
+        }
+    }
+}
+
+@if ($store.hasError()) {
     {{ 'edit.content.layout.no.content.to.show ' | dm }}
 }
 
-<p-toast></p-toast>
+<p-toast />
 <p-confirmDialog />

core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.scss

@@ -6,32 +6,19 @@
         "topBar topBar"
         "header sidebar"
         "body sidebar";
-    grid-template-columns: 1fr 21.875rem;
+    grid-template-columns: 1fr 0;
     grid-template-rows: auto auto 1fr;
     padding-bottom: 0;
     height: 100%;
     width: 100%;
-}
-
-.edit-content-layout__sidebar-btn {
-    rect {
-        stroke: $color-palette-primary;
-    }
+    transition: grid-template-columns $basic-speed ease-in-out;
 
-    path {
-        fill: $color-palette-primary;
-    }
-    transition: all 300ms ease-in-out;
-    &.showSidebar {
-        width: 0;
-        min-width: 0;
-        height: 0;
-        padding: 0;
-        visibility: hidden;
+    &.edit-content--with-sidebar {
+        grid-template-columns: 1fr 21.875rem;
     }
 }
 
-.topBar {
+.edit-content-layout__topBar {
     grid-area: topBar;
 
     .pi {
@@ -40,14 +27,33 @@
     }
 }
 
-.header {
+.edit-content-layout__header {
     grid-area: header;
 }
 
-.body {
+.edit-content-layout__body {
     grid-area: body;
 }
 
-.sidebar {
+.edit-content-layout__sidebar {
     grid-area: sidebar;
 }
+
+.edit-content-layout__sidebar--btn {
+    rect {
+        stroke: $color-palette-primary;
+    }
+
+    path {
+        fill: $color-palette-primary;
+    }
+    transition: all $basic-speed ease-in-out;
+
+    &.hide {
+        width: 0;
+        min-width: 0;
+        height: 0;
+        padding: 0;
+        visibility: hidden;
+    }
+}