feat(edit-content) change from dialog to sidebar #28764 (#28824)

### Proposed Changes
* Convert from dialog to sidebar the selection of categories in edit
contentlet category-field

### Checklist
- [x] Tests
- [x] Translations
- [ ] Security Implications Contemplated (add notes if applicable)

### Additional Info
** any additional useful context or info **


https://github.com/dotCMS/core/assets/1909643/5e9db5a3-8bb3-4b89-a105-31091d8cd191

---------

Co-authored-by: Freddy Montes <[email protected]>

core-web/.husky/pre-commit

@@ -128,4 +128,4 @@ if [ "$error_occurred" = true ]; then
     exit 1  # Change the exit code to reflect that an error occurred
 else
     exit 0  # No errors, exit normally
-fi
+fi

core-web/.prettierrc

@@ -13,12 +13,5 @@
                 "singleQuote": false
             }
         }
-    ],
-    "plugins": ["prettier-plugin-organize-attributes"],
-    "attributeGroups": [
-        "$ANGULAR_STRUCTURAL_DIRECTIVE",
-        "$ANGULAR_OUTPUT",
-        "$ANGULAR_TWO_WAY_BINDING",
-        "$ANGULAR_INPUT"
     ]
 }

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-sidebar/dot-edit-content-category-field-sidebar.component.html

@@ -0,0 +1,38 @@
+<p-sidebar
+    (onHide)="this.closedSidebar.emit()"
+    [(visible)]="visible"
+    [showCloseIcon]="false"
+    #sidebar
+    data-testId="sidebar"
+    position="right"
+    styleClass="w-9">
+    <ng-template pTemplate="header">
+        <div class="flex flex-row category-field__header">
+            <button
+                (click)="sidebar.close($event)"
+                class="p-button-rounded p-button-text"
+                data-testId="back-btn"
+                icon="pi pi-angle-left"
+                pButton></button>
+            <div class="category-field__header-title" data-testId="sidebar-title">
+                {{ 'edit.content.category-field.sidebar.header.select-categories' | dm }}
+            </div>
+        </div>
+    </ng-template>
+
+    <div class="category-field__content h-full w-full">
+        <div class="category-field__left-pane flex flex-column">
+            <div class="category-field__search">Input Search</div>
+            <div class="flex-grow-1 category-field__categories">Categories</div>
+        </div>
+
+        <div class="category-field__right-pane flex flex-column">
+            <div class="category-field__selected-categories-list flex-1">Selected Categories</div>
+            <div class="category-field__actions flex justify-content-end">
+                <button class="p-button p-button-link" data-testId="clear_all-btn" pButton>
+                    {{ 'edit.content.category-field.button.clear-all' | dm }}
+                </button>
+            </div>
+        </div>
+    </div>
+</p-sidebar>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-sidebar/dot-edit-content-category-field-sidebar.component.scss

@@ -0,0 +1,41 @@
+@use "variables" as *;
+
+.category-field__header {
+    align-items: center;
+    flex-wrap: wrap;
+    gap: $spacing-0;
+    padding: $spacing-1 $spacing-4;
+}
+
+.category-field__header-title {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-medium-bold;
+    margin: 0;
+}
+
+.category-field__content {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    margin: auto;
+    background-color: $color-palette-gray-300;
+    padding: $spacing-4;
+    gap: $spacing-1;
+}
+
+.category-field__left-pane,
+.category-field__right-pane {
+    gap: $spacing-1;
+}
+
+.category-field__search,
+.category-field__categories,
+.category-field__right-pane {
+    border: $field-border-size solid $color-palette-gray-400;
+    border-radius: $border-radius-md;
+    background-color: $white;
+    padding: $spacing-3;
+}
+
+:host ::ng-deep .p-sidebar-content {
+    padding: 0;
+}

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-sidebar/dot-edit-content-category-field-sidebar.component.spec.ts

@@ -0,0 +1,47 @@
+import { expect, it } from '@jest/globals';
+import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator';
+import { mockProvider } from '@ngneat/spectator/jest';
+
+import { DotMessageService } from '@dotcms/data-access';
+
+import { DotEditContentCategoryFieldSidebarComponent } from './dot-edit-content-category-field-sidebar.component';
+
+describe('DotEditContentCategoryFieldSidebarComponent', () => {
+    let spectator: Spectator<DotEditContentCategoryFieldSidebarComponent>;
+
+    const createComponent = createComponentFactory({
+        component: DotEditContentCategoryFieldSidebarComponent,
+        providers: [mockProvider(DotMessageService)]
+    });
+
+    beforeEach(() => {
+        spectator = createComponent();
+    });
+
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it('should have `visible` property by default `true`', () => {
+        expect(spectator.component.visible).toBe(true);
+    });
+
+    it('should have a sidebar', () => {
+        expect(spectator.query(byTestId('sidebar'))).not.toBeNull();
+    });
+
+    it('should have a clear all button', () => {
+        expect(spectator.query(byTestId('clear_all-btn'))).not.toBeNull();
+    });
+
+    it('should close the sidebar when you click back', () => {
+        const closedSidebarSpy = jest.spyOn(spectator.component.closedSidebar, 'emit');
+        const cancelBtn = spectator.query(byTestId('back-btn'));
+        expect(cancelBtn).not.toBeNull();
+
+        expect(closedSidebarSpy).not.toHaveBeenCalled();
+
+        spectator.click(cancelBtn);
+        expect(closedSidebarSpy).toHaveBeenCalled();
+    });
+});

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-sidebar/dot-edit-content-category-field-sidebar.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, EventEmitter } from '@angular/core';
+
+import { ButtonModule } from 'primeng/button';
+import { DialogModule } from 'primeng/dialog';
+import { SidebarModule } from 'primeng/sidebar';
+
+import { DotMessagePipe } from '@dotcms/ui';
+
+/**
+ * Component for the sidebar that appears when editing content category field.
+ */
+@Component({
+    selector: 'dot-edit-content-category-field-sidebar',
+    standalone: true,
+    imports: [DialogModule, ButtonModule, DotMessagePipe, SidebarModule],
+    templateUrl: './dot-edit-content-category-field-sidebar.component.html',
+    styleUrl: './dot-edit-content-category-field-sidebar.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotEditContentCategoryFieldSidebarComponent {
+    /**
+     * Indicates whether the sidebar is visible or not.
+     *
+     */
+    visible = true;
+
+    /**
+     * The event is fired whenever the sidebar is closed either by hitting 'Escape',
+     * clicking on the overlay, or on the back button.
+     *
+     */
+    closedSidebar = new EventEmitter<void>();
+}

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html

@@ -1,21 +1,24 @@
 @if (values.length) {
-    <div class="dot-category-field__categories" data-testId="category-chip-list">
-        @for (category of values; track category.id) {
-            <p-chip
-                [pTooltip]="category.value"
-                [removable]="true"
-                [label]="category.value"
-                tooltipPosition="top"
-                styleClass="p-chip-sm" />
-        }
-    </div>
+<div class="dot-category-field__categories" data-testId="category-chip-list">
+    @for (category of values; track category.id) {
+    <p-chip
+        [pTooltip]="category.value"
+        [removable]="true"
+        [label]="category.value"
+        tooltipPosition="top"
+        styleClass="p-chip-sm" />
+    }
+</div>
 }
 
 <div class="dot-category-field__select">
-    <p-button
-        (onClick)="showCategories()"
-        [label]="'edit.content.category-field.show-categories-dialog' | dm"
-        data-testId="show-dialog-btn"
-        icon="pi pi-pencil"
-        styleClass="p-button-sm p-button-text p-button-secondary" />
+    <button
+        (click)="showCategoriesSidebar()"
+        [disabled]="disableSelectCategoriesButton()"
+        [label]="'edit.content.category-field.button.show-categories' | dm"
+        class="p-button-sm p-button-text p-button-secondary"
+        data-testId="show-sidebar-btn"
+        pButton></button>
 </div>
+
+<ng-container dotDynamic></ng-container>