From 9caa2befd69cffd7f2fcd51a18d6fb6bb4f3f13e Mon Sep 17 00:00:00 2001
From: Arcadio Quintero <oidacra@gmail.com>
Date: Wed, 5 Jun 2024 18:01:07 -0400
Subject: [PATCH] feat(edit-content) add category field #28658 (#28690)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Proposed Changes
* add category field to Edit Contentlet

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

### Additional Info


https://github.com/dotCMS/core/assets/1909643/4bb59fe5-22d6-4dd3-9057-78962442a016



### Screenshots
Input
<img width="602" alt="Screenshot 2024-05-30 at 8 30 34 PM"
src="https://github.com/dotCMS/core/assets/1909643/b00f4987-361c-4b27-8bc9-71ac50a45de6">

Dialog
<img width="1090" alt="Screenshot 2024-05-30 at 8 30 39 PM"
src="https://github.com/dotCMS/core/assets/1909643/325d5ab0-98fc-4b4d-b966-6a1b869daf1c">
---
 core-web/libs/edit-content/project.json       |  2 +-
 .../dot-edit-content-field.component.html     | 69 ++++++++-------
 .../dot-edit-content-field.component.scss     | 14 ++-
 .../dot-edit-content-field.component.spec.ts  |  4 +
 .../dot-edit-content-field.component.ts       |  4 +-
 .../dot-edit-content-form.component.html      |  4 +-
 ...ntent-category-field-dialog.component.html | 18 ++++
 ...ntent-category-field-dialog.component.scss | 31 +++++++
 ...nt-category-field-dialog.component.spec.ts | 50 +++++++++++
 ...content-category-field-dialog.component.ts | 19 ++++
 ...edit-content-category-field.component.html | 21 +++++
 ...edit-content-category-field.component.scss | 32 +++++++
 ...t-content-category-field.component.spec.ts | 38 ++++++++
 ...t-edit-content-category-field.component.ts | 86 +++++++++++++++++++
 .../fields/dot-edit-content-fields.module.ts  |  7 +-
 .../lib/models/dot-edit-content-field.enum.ts |  3 +-
 .../libs/edit-content/src/lib/utils/mocks.ts  | 30 ++++++-
 .../WEB-INF/messages/Language.properties      |  4 +
 18 files changed, 394 insertions(+), 42 deletions(-)
 create mode 100644 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
 create mode 100644 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
 create mode 100644 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.spec.ts
 create mode 100644 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.ts
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.spec.ts
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts

diff --git a/core-web/libs/edit-content/project.json b/core-web/libs/edit-content/project.json
index 4a7529437d5f..44746a6fd794 100644
--- a/core-web/libs/edit-content/project.json
+++ b/core-web/libs/edit-content/project.json
@@ -17,5 +17,5 @@
             "outputs": ["{options.outputFile}"]
         }
     },
-    "tags": []
+    "tags": ["type:feature", "scope:dotcms-ui", "portlet:edit-content"]
 }
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
index 0c2d394bbe75..dbfdab8844dc 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
@@ -1,87 +1,92 @@
 <label
     [attr.data-testId]="'label-' + field.variable"
-    [for]="field.variable"
     [checkIsRequiredControl]="field.variable"
-    dotFieldRequired
-    >{{ field.name }}</label
->
+    [for]="field.variable"
+    dotFieldRequired>
+    {{ field.name }}
+</label>
 
 <ng-container [ngSwitch]="field.fieldType">
     <dot-edit-content-select-field
         *ngSwitchCase="fieldTypes.SELECT"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-radio-field
         *ngSwitchCase="fieldTypes.RADIO"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-text-field
         *ngSwitchCase="fieldTypes.TEXT"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-text-area
         *ngSwitchCase="fieldTypes.TEXTAREA"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-checkbox-field
         *ngSwitchCase="fieldTypes.CHECKBOX"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-multi-select-field
         *ngSwitchCase="fieldTypes.MULTI_SELECT"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-calendar-field
         *ngSwitchCase="calendarTypes.includes(field.fieldType) ? field.fieldType : ''"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable">
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field">
     </dot-edit-content-calendar-field>
 
     <dot-edit-content-tag-field
         *ngSwitchCase="fieldTypes.TAG"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-json-field
         *ngSwitchCase="fieldTypes.JSON"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-binary-field
         *ngSwitchCase="fieldTypes.BINARY"
-        [formControlName]="field.variable"
+        [attr.data-testId]="'field-' + field.variable"
         [contentlet]="contentlet"
         [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [formControlName]="field.variable" />
 
     <dot-edit-content-custom-field
         *ngSwitchCase="fieldTypes.CUSTOM_FIELD"
-        [field]="field"
+        [attr.data-testId]="'field-' + field.variable"
         [contentType]="contentType"
-        [attr.data-testId]="'field-' + field.variable" />
+        [field]="field" />
 
     <dot-block-editor
         *ngSwitchCase="fieldTypes.BLOCK_EDITOR"
-        [formControlName]="field.variable"
+        [attr.data-testId]="'field-' + field.variable"
         [contentlet]="contentlet"
         [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [formControlName]="field.variable" />
 
     <dot-edit-content-key-value
         *ngSwitchCase="fieldTypes.KEY_VALUE"
-        [formControlName]="field.variable"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [formControlName]="field.variable" />
 
     <dot-edit-content-wysiwyg-field
         *ngSwitchCase="fieldTypes.WYSIWYG"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
+
+    <dot-edit-content-category-field
+        *ngSwitchCase="fieldTypes.CATEGORY"
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 </ng-container>
 
 <small *ngIf="field.hint" [attr.data-testId]="'hint-' + field.variable">{{ field.hint }}</small>
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 cbc28aeef29a..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,5 +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: 0;
+    }
 }
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts
index 2b43a30a0cb3..e7c9ccef6683 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts
@@ -21,6 +21,7 @@ import { DotEditContentFieldComponent } from './dot-edit-content-field.component
 
 import { DotEditContentBinaryFieldComponent } from '../../fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component';
 import { DotEditContentCalendarFieldComponent } from '../../fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component';
+import { DotEditContentCategoryFieldComponent } from '../../fields/dot-edit-content-category-field/dot-edit-content-category-field.component';
 import { DotEditContentCheckboxFieldComponent } from '../../fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component';
 import { DotEditContentCustomFieldComponent } from '../../fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component';
 import { DotEditContentJsonFieldComponent } from '../../fields/dot-edit-content-json-field/dot-edit-content-json-field.component';
@@ -128,6 +129,9 @@ const FIELD_TYPES_COMPONENTS: Record<FIELD_TYPES, Type<unknown> | DotEditFieldTe
     [FIELD_TYPES.WYSIWYG]: {
         component: DotEditContentWYSIWYGFieldComponent,
         declarations: [MockComponent(EditorComponent)]
+    },
+    [FIELD_TYPES.CATEGORY]: {
+        component: DotEditContentCategoryFieldComponent
     }
 };
 
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts
index 58cd844fc6cb..54ae17f784e9 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts
@@ -1,9 +1,9 @@
 import { NgIf, NgSwitch, NgSwitchCase } from '@angular/common';
-import { ChangeDetectionStrategy, Component, HostBinding, Input, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, inject, Input } from '@angular/core';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
 import { BlockEditorModule } from '@dotcms/block-editor';
-import { DotCMSContentTypeField, DotCMSContentlet } from '@dotcms/dotcms-models';
+import { DotCMSContentlet, DotCMSContentTypeField } from '@dotcms/dotcms-models';
 import { DotFieldRequiredDirective } from '@dotcms/ui';
 
 import { DotEditContentBinaryFieldComponent } from '../../fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component';
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html
index 74815ef7efb9..ab89f9bc3ce3 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html
@@ -17,9 +17,9 @@
                 <div class="column" *ngFor="let column of row.columns" data-testId="column">
                     <dot-edit-content-field
                         *ngFor="let field of column.fields"
-                        [field]="field"
-                        [contentlet]="formData.contentlet"
                         [contentType]="formData.contentType.variable"
+                        [contentlet]="formData.contentlet"
+                        [field]="field"
                         data-testId="field" />
                 </div>
             </div>
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
new file mode 100644
index 000000000000..39770a11a8ef
--- /dev/null
+++ 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
@@ -0,0 +1,18 @@
+<div class="category-field__dialog h-full w-full">
+    <div class="category-field__left-pane flex flex-column">Search & category tree</div>
+    <div class="category-field__right-pane flex flex-column">
+        <div class="category-field__selected-categories flex-1">Selected Categories</div>
+        <div class="category-field__actions flex justify-content-end">
+            <button
+                class="p-button p-button-link"
+                (click)="dialogRef.close()"
+                data-testId="cancel-btn"
+                pButton>
+                {{ 'edit.content.category-field.cancel' | dm }}
+            </button>
+            <button class="p-button" data-testId="apply-btn">
+                {{ 'edit.content.category-field.apply' | dm }}
+            </button>
+        </div>
+    </div>
+</div>
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
new file mode 100644
index 000000000000..ec948410b733
--- /dev/null
+++ 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
@@ -0,0 +1,31 @@
+@use "variables" as *;
+
+.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 {
+    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__actions {
+    gap: $spacing-1;
+}
+
+::ng-deep .category-field__dialog .p-dialog-content {
+    padding: 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.spec.ts 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.spec.ts
new file mode 100644
index 000000000000..306f32403408
--- /dev/null
+++ 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.spec.ts
@@ -0,0 +1,50 @@
+import { expect, it } from '@jest/globals';
+import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator';
+import { mockProvider } from '@ngneat/spectator/jest';
+
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { DotMessageService } from '@dotcms/data-access';
+
+import { DotEditContentCategoryFieldDialogComponent } from './dot-edit-content-category-field-dialog.component';
+
+describe('DotEditContentCategoryFieldDialogComponent', () => {
+    let spectator: Spectator<DotEditContentCategoryFieldDialogComponent>;
+    let dialogRef: DynamicDialogRef;
+
+    const createComponent = createComponentFactory({
+        component: DotEditContentCategoryFieldDialogComponent,
+        providers: [
+            mockProvider(DynamicDialogRef, {
+                close: jest.fn()
+            }),
+            mockProvider(DotMessageService)
+        ]
+    });
+
+    beforeEach(() => {
+        spectator = createComponent();
+        dialogRef = spectator.inject(DynamicDialogRef);
+    });
+
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it('should have a cancel button', () => {
+        expect(spectator.query(byTestId('cancel-btn'))).not.toBeNull();
+    });
+    it('should have a apply button', () => {
+        expect(spectator.query(byTestId('apply-btn'))).not.toBeNull();
+    });
+
+    it('should close the dialog when you click cancel', () => {
+        const cancelBtn = spectator.query(byTestId('cancel-btn'));
+        expect(cancelBtn).not.toBeNull();
+
+        expect(dialogRef.close).not.toHaveBeenCalled();
+
+        spectator.click(cancelBtn);
+        expect(dialogRef.close).toHaveBeenCalled();
+    });
+});
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.ts 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.ts
new file mode 100644
index 000000000000..17778c4b54c3
--- /dev/null
+++ 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.ts
@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+
+import { ButtonModule } from 'primeng/button';
+import { DialogModule } from 'primeng/dialog';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { DotMessagePipe } from '@dotcms/ui';
+
+@Component({
+    selector: 'dot-edit-content-category-field-dialog',
+    standalone: true,
+    imports: [DialogModule, ButtonModule, DotMessagePipe],
+    templateUrl: './dot-edit-content-category-field-dialog.component.html',
+    styleUrl: './dot-edit-content-category-field-dialog.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotEditContentCategoryFieldDialogComponent {
+    protected dialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+}
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
new file mode 100644
index 000000000000..c5b4c2c666fc
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html
@@ -0,0 +1,21 @@
+@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>
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
new file mode 100644
index 000000000000..397cfe8c5bde
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss
@@ -0,0 +1,32 @@
+@use "variables" as *;
+
+:host {
+    &.dot-category-field__container--has-categories .dot-category-field__select {
+        border-radius: 0 0 $border-radius-md $border-radius-md;
+    }
+
+    &.dot-category-field__container--has-categories .dot-category-field__categories {
+        border-bottom: none;
+    }
+}
+
+.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;
+}
+
+.dot-category-field__categories {
+    padding: $spacing-1;
+    gap: $spacing-1;
+    border-radius: $border-radius-md $border-radius-md 0 0;
+}
+
+.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.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.spec.ts
new file mode 100644
index 000000000000..371924f7e70e
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.spec.ts
@@ -0,0 +1,38 @@
+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 { DotEditContentCategoryFieldComponent } from './dot-edit-content-category-field.component';
+
+describe('DotEditContentCategoryFieldComponent', () => {
+    let spectator: Spectator<DotEditContentCategoryFieldComponent>;
+
+    const createComponent = createComponentFactory({
+        component: DotEditContentCategoryFieldComponent,
+        providers: [mockProvider(DotMessageService)]
+    });
+
+    beforeEach(() => {
+        spectator = createComponent();
+    });
+
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it('should have a select categories button', () => {
+        expect(spectator.query(byTestId('show-dialog-btn'))).not.toBeNull();
+    });
+
+    it('should show the category list wrapper', () => {
+        spectator.component.values = [];
+        spectator.detectComponentChanges();
+        expect(spectator.query(byTestId('category-chip-list'))).toBeNull();
+
+        spectator.component.values = [{ id: 1, value: 'Streetwear' }];
+        spectator.detectComponentChanges();
+        expect(spectator.query(byTestId('category-chip-list'))).not.toBeNull();
+    });
+});
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
new file mode 100644
index 000000000000..ecc49e7d7465
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts
@@ -0,0 +1,86 @@
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
+
+import { ButtonModule } from 'primeng/button';
+import { ChipModule } from 'primeng/chip';
+import { ChipsModule } from 'primeng/chips';
+import { DialogService } from 'primeng/dynamicdialog';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
+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,
+    imports: [
+        ChipsModule,
+        ReactiveFormsModule,
+        ButtonModule,
+        ChipModule,
+        NgClass,
+        TooltipModule,
+        DotMessagePipe
+    ],
+    templateUrl: './dot-edit-content-category-field.component.html',
+    styleUrl: './dot-edit-content-category-field.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    viewProviders: [
+        {
+            provide: ControlContainer,
+            useFactory: () => inject(ControlContainer, { skipSelf: true })
+        }
+    ],
+    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 = [];
+
+    #dialogService = inject(DialogService);
+
+    /**
+     * 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',
+            width: '1000px',
+            height: '600px',
+            position: 'center'
+        });
+    }
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-fields.module.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-fields.module.ts
index 42f186a479d5..ba5c5751376c 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-fields.module.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-fields.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 
 import { DotEditContentBinaryFieldComponent } from './dot-edit-content-binary-field/dot-edit-content-binary-field.component';
 import { DotEditContentCalendarFieldComponent } from './dot-edit-content-calendar-field/dot-edit-content-calendar-field.component';
+import { DotEditContentCategoryFieldComponent } from './dot-edit-content-category-field/dot-edit-content-category-field.component';
 import { DotEditContentCheckboxFieldComponent } from './dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component';
 import { DotEditContentCustomFieldComponent } from './dot-edit-content-custom-field/dot-edit-content-custom-field.component';
 import { DotEditContentJsonFieldComponent } from './dot-edit-content-json-field/dot-edit-content-json-field.component';
@@ -27,7 +28,8 @@ import { DotEditContentWYSIWYGFieldComponent } from './dot-edit-content-wysiwyg-
         DotEditContentBinaryFieldComponent,
         DotEditContentJsonFieldComponent,
         DotEditContentCustomFieldComponent,
-        DotEditContentWYSIWYGFieldComponent
+        DotEditContentWYSIWYGFieldComponent,
+        DotEditContentCategoryFieldComponent
     ],
     exports: [
         DotEditContentTextAreaComponent,
@@ -41,7 +43,8 @@ import { DotEditContentWYSIWYGFieldComponent } from './dot-edit-content-wysiwyg-
         DotEditContentBinaryFieldComponent,
         DotEditContentJsonFieldComponent,
         DotEditContentCustomFieldComponent,
-        DotEditContentWYSIWYGFieldComponent
+        DotEditContentWYSIWYGFieldComponent,
+        DotEditContentCategoryFieldComponent
     ]
 })
 export class DotEditContentFieldsModule {}
diff --git a/core-web/libs/edit-content/src/lib/models/dot-edit-content-field.enum.ts b/core-web/libs/edit-content/src/lib/models/dot-edit-content-field.enum.ts
index 7fc7ecfb8683..fef8d1062f74 100644
--- a/core-web/libs/edit-content/src/lib/models/dot-edit-content-field.enum.ts
+++ b/core-web/libs/edit-content/src/lib/models/dot-edit-content-field.enum.ts
@@ -24,5 +24,6 @@ export enum FIELD_TYPES {
     CUSTOM_FIELD = 'Custom-Field',
     JSON = 'JSON-Field',
     KEY_VALUE = 'Key-Value',
-    WYSIWYG = 'WYSIWYG'
+    WYSIWYG = 'WYSIWYG',
+    CATEGORY = 'Category'
 }
diff --git a/core-web/libs/edit-content/src/lib/utils/mocks.ts b/core-web/libs/edit-content/src/lib/utils/mocks.ts
index 43c1e9ad46d4..08a2ac761241 100644
--- a/core-web/libs/edit-content/src/lib/utils/mocks.ts
+++ b/core-web/libs/edit-content/src/lib/utils/mocks.ts
@@ -563,6 +563,30 @@ export const WYSIWYG_MOCK: DotCMSContentTypeField = {
     variable: 'WYSIWYG'
 };
 
+export const CATEGORY_MOCK: DotCMSContentTypeField = {
+    clazz: 'com.dotcms.contenttype.model.field.ImmutableWYSIWYGField',
+    contentTypeId: '93ebaff75f3e3887bea73ecd04588dc9',
+    dataType: 'TEXT',
+    fieldType: 'Category',
+    fieldTypeLabel: 'Category',
+    fieldVariables: [],
+    fixed: false,
+    hint: 'A hint text',
+    iDate: 1698291913000,
+    id: '96909fa20a00497cd3b766b52edac0ec',
+    indexed: false,
+    listed: false,
+    modDate: 1698291913000,
+    name: 'Category',
+    readOnly: false,
+    required: false,
+    searchable: false,
+    sortOrder: 1,
+    unique: false,
+    values: '<p>HELLO</p>',
+    variable: 'Category'
+};
+
 export const FIELDS_MOCK: DotCMSContentTypeField[] = [
     TEXT_FIELD_MOCK,
     TEXT_AREA_FIELD_MOCK,
@@ -585,7 +609,8 @@ export const FIELDS_MOCK: DotCMSContentTypeField[] = [
     CUSTOM_FIELD_MOCK,
     JSON_FIELD_MOCK,
     KEY_VALUE_MOCK,
-    WYSIWYG_MOCK
+    WYSIWYG_MOCK,
+    CATEGORY_MOCK
 ];
 
 export const FIELD_MOCK: DotCMSContentTypeField = TEXT_FIELD_MOCK;
@@ -1121,12 +1146,15 @@ export const MockResizeObserver = class {
     constructor() {
         //
     }
+
     observe() {
         //
     }
+
     unobserve() {
         //
     }
+
     disconnect() {
         //
     }
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index 004477dd3d46..028a948cad09 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -5737,3 +5737,7 @@ edit.content.layout.beta.message.switch=switch back
 edit.content.layout.beta.message.needed=if needed.
 edit.content.layout.no.content.to.show = No content to show.
 content.type.form.banner.message= Enable <b>Edit Content Beta</b> for a fresh editing experience (roll back anytime).
+
+edit.content.category-field.show-categories-dialog=Select
+edit.content.category-field.cancel=Cancel
+edit.content.category-field.apply=Apply