From 10da22ade2bb8e60e34600fdcce43682002fb3bb Mon Sep 17 00:00:00 2001
From: Arcadio Quintero <oidacra@gmail.com>
Date: Tue, 4 Jun 2024 22:02:31 -0400
Subject: [PATCH] feat(edit-content) fix comments #28658

---
 .../dot-edit-content-field.component.scss     | 11 +++--
 ...ntent-category-field-dialog.component.html |  1 -
 ...ntent-category-field-dialog.component.scss | 46 ++++++++----------
 ...edit-content-category-field.component.html | 38 +++++++--------
 ...edit-content-category-field.component.scss | 48 +++++++++----------
 ...t-edit-content-category-field.component.ts | 37 ++++++++++++--
 6 files changed, 103 insertions(+), 78 deletions(-)

diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.scss b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.scss
index ab48b49aee1e..ce6d961b6c31 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.scss
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.scss
@@ -1,12 +1,17 @@
 @use "variables" as *;
 
 :host {
-    display: block;
+    display: flex;
+    flex-direction: column;
     height: fit-content;
     margin-bottom: 0;
+    gap: $spacing-1;
+
+    label {
+        margin: 0;
+    }
 
     small {
-        margin-top: $spacing-1;
-        display: block;
+        margin: 0;
     }
 }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-dialog/dot-edit-content-category-field-dialog.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-dialog/dot-edit-content-category-field-dialog.component.html
index 0c4908a75818..39770a11a8ef 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-dialog/dot-edit-content-category-field-dialog.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-dialog/dot-edit-content-category-field-dialog.component.html
@@ -8,7 +8,6 @@
                 (click)="dialogRef.close()"
                 data-testId="cancel-btn"
                 pButton>
-                Cancel
                 {{ 'edit.content.category-field.cancel' | dm }}
             </button>
             <button class="p-button" data-testId="apply-btn">
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-dialog/dot-edit-content-category-field-dialog.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-dialog/dot-edit-content-category-field-dialog.component.scss
index 38dc603410e0..ec948410b733 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-dialog/dot-edit-content-category-field-dialog.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-dialog/dot-edit-content-category-field-dialog.component.scss
@@ -1,35 +1,29 @@
 @use "variables" as *;
 
-:host {
-    display: block;
-    height: 100%;
-
-    .category-field__dialog {
-        display: grid;
-        grid-template-columns: 2fr 1fr;
-        max-width: 1200px;
-        margin: auto;
-    }
+.category-field__dialog {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    margin: auto;
+}
 
-    .category-field__left-pane,
-    .category-field__right-pane {
-        padding: $spacing-3;
-        gap: $spacing-3;
-    }
+.category-field__left-pane,
+.category-field__right-pane {
+    padding: $spacing-3;
+    gap: $spacing-3;
+}
 
-    .category-field__left-pane {
-        background-color: $color-palette-gray-300;
-    }
+.category-field__left-pane {
+    background-color: $color-palette-gray-300;
+}
 
-    .category-field__selected-categories {
-        border: $field-border-size solid $color-palette-gray-400;
-        border-radius: $border-radius-sm;
-        padding: $spacing-3;
-    }
+.category-field__selected-categories {
+    border: $field-border-size solid $color-palette-gray-400;
+    border-radius: $border-radius-sm;
+    padding: $spacing-3;
+}
 
-    .category-field__actions {
-        gap: $spacing-1;
-    }
+.category-field__actions {
+    gap: $spacing-1;
 }
 
 ::ng-deep .category-field__dialog .p-dialog-content {
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html
index f0cac6936c25..c5b4c2c666fc 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html
@@ -1,23 +1,21 @@
-<div class="dot-category-field__wrapper" [ngClass]="{ 'has-categories': values.length }">
-    @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>
+@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__select">
-        <p-button
-            [label]="'edit.content.category-field.show-categories-dialog' | dm"
-            (onClick)="showCategories()"
-            data-testId="show-dialog-btn"
-            icon="pi pi-pencil"
-            styleClass="p-button-sm p-button-text p-button-secondary" />
-    </div>
+<div class="dot-category-field__select">
+    <p-button
+        [label]="'edit.content.category-field.show-categories-dialog' | dm"
+        (onClick)="showCategories()"
+        data-testId="show-dialog-btn"
+        icon="pi pi-pencil"
+        styleClass="p-button-sm p-button-text p-button-secondary" />
 </div>
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss
index e3f46403b26f..397cfe8c5bde 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss
@@ -1,34 +1,32 @@
 @use "variables" as *;
 
-.dot-category-field__wrapper {
-    .dot-category-field__categories,
-    .dot-category-field__select {
-        border: $field-border-size solid $color-palette-gray-400;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
+:host {
+    &.dot-category-field__container--has-categories .dot-category-field__select {
+        border-radius: 0 0 $border-radius-md $border-radius-md;
     }
 
-    .dot-category-field__categories {
-        padding: $spacing-1;
-        gap: $spacing-1;
-        border-radius: $border-radius-md $border-radius-md 0 0;
+    &.dot-category-field__container--has-categories .dot-category-field__categories {
+        border-bottom: none;
     }
+}
 
-    .dot-category-field__select {
-        height: $field-height-md;
-        border-radius: $border-radius-md;
-        padding: 0 $spacing-0;
-        justify-content: flex-end;
-    }
+.dot-category-field__categories,
+.dot-category-field__select {
+    border: $field-border-size solid $color-palette-gray-400;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
 
-    &.has-categories {
-        .dot-category-field__select {
-            border-radius: 0 0 $border-radius-md $border-radius-md;
-        }
+.dot-category-field__categories {
+    padding: $spacing-1;
+    gap: $spacing-1;
+    border-radius: $border-radius-md $border-radius-md 0 0;
+}
 
-        .dot-category-field__categories {
-            border-bottom: none;
-        }
-    }
+.dot-category-field__select {
+    height: $field-height-md;
+    border-radius: $border-radius-md;
+    padding: 0 $spacing-0;
+    justify-content: flex-end;
 }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts
index 89e7ebcce4b5..13074496b49e 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts
@@ -13,6 +13,12 @@ import { DotMessagePipe } from '@dotcms/ui';
 
 import { DotEditContentCategoryFieldDialogComponent } from './components/dot-edit-content-category-field-dialog/dot-edit-content-category-field-dialog.component';
 
+/**
+ * Component for editing content category field.
+ *
+ * @class
+ * @name DotEditContentCategoryFieldComponent
+ */
 @Component({
     selector: 'dot-edit-content-category-field',
     standalone: true,
@@ -34,10 +40,23 @@ import { DotEditContentCategoryFieldDialogComponent } from './components/dot-edi
             useFactory: () => inject(ControlContainer, { skipSelf: true })
         }
     ],
-    providers: [DialogService]
+    providers: [DialogService],
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        '[class.dot-category-field__container--has-categories]': 'hasCategories()',
+        '[class.dot-category-field__container]': '!hasCategories()'
+    }
 })
 export class DotEditContentCategoryFieldComponent {
+    /**
+     * The `field` variable is of type `DotCMSContentTypeField` and is a required input.
+     *
+     * @name field
+     * @description The variable represents a field of a DotCMS content type.
+     */
     field = input.required<DotCMSContentTypeField>();
+
+    // TODO: Replace with the content of the selected categories
     // values = [];
     values = [
         { id: 1, value: 'Streetwear' },
@@ -52,10 +71,22 @@ export class DotEditContentCategoryFieldComponent {
         { id: 2, value: 'Kids' },
         { id: 2, value: 'Kids streetwear' }
     ];
-
     #dialogService = inject(DialogService);
 
-    showCategories() {
+    /**
+     * Checks if the object has categories.
+     * @returns {boolean} - True if the object has categories, false otherwise.
+     */
+    hasCategories(): boolean {
+        return this.values.length > 0;
+    }
+
+    /**
+     * Open the "DotEditContentCategoryFieldDialogComponent" dialog to show categories.
+     *
+     * @returns {void}
+     */
+    showCategories(): void {
         this.#dialogService.open(DotEditContentCategoryFieldDialogComponent, {
             showHeader: false,
             styleClass: 'category-field__dialog',