From 38d1e3438038c88aedd8896adb530ec382ffb516 Mon Sep 17 00:00:00 2001
From: Arcadio Quintero <oidacra@gmail.com>
Date: Mon, 8 Jul 2024 11:23:56 -0400
Subject: [PATCH] feat(edit-content) add search to category-field #28879

---
 .../src/lib/dot-categories.model.ts           |  5 +
 ...-category-field-search-list.component.html | 41 ++++++++
 ...-category-field-search-list.component.scss | 11 +++
 ...tegory-field-search-list.component.spec.ts | 22 +++++
 ...ot-category-field-search-list.component.ts | 68 +++++++++++++
 .../dot-category-field-search.component.html  | 21 ++++
 .../dot-category-field-search.component.scss  | 14 +++
 ...ot-category-field-search.component.spec.ts | 22 +++++
 .../dot-category-field-search.component.ts    | 84 ++++++++++++++++
 .../dot-category-field-sidebar.component.html | 20 +++-
 .../dot-category-field-sidebar.component.scss |  1 -
 .../dot-category-field-sidebar.component.ts   | 29 +++++-
 .../dot-table-skeleton.component.html         | 27 ++++++
 .../dot-table-skeleton.component.scss         |  8 ++
 .../dot-table-skeleton.component.ts           | 37 +++++++
 ...edit-content-category-field.component.html | 20 ++--
 .../models/dot-category-field.models.ts       |  5 +
 .../services/categories.service.ts            | 63 ++++++++++--
 .../store/content-category-field.store.ts     | 97 ++++++++++++++++---
 .../utils/category-field.utils.ts             | 53 ++++++++++
 .../WEB-INF/messages/Language.properties      |  5 +
 21 files changed, 616 insertions(+), 37 deletions(-)
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.html
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.scss
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.spec.ts
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.ts
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.html
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.scss
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.spec.ts
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.ts
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.html
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.scss
 create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.ts

diff --git a/core-web/libs/dotcms-models/src/lib/dot-categories.model.ts b/core-web/libs/dotcms-models/src/lib/dot-categories.model.ts
index 1ce0bc233f5a..f23a57952775 100644
--- a/core-web/libs/dotcms-models/src/lib/dot-categories.model.ts
+++ b/core-web/libs/dotcms-models/src/lib/dot-categories.model.ts
@@ -29,4 +29,9 @@ export interface DotCategory {
     parentPermissionable?: {
         hostname: string;
     };
+    parentList?: Array<{
+        categoryName: string;
+        key: string;
+        inode: string;
+    }>;
 }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.html
new file mode 100644
index 000000000000..8a4a8368eb1f
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.html
@@ -0,0 +1,41 @@
+<div #tableContainer class="category-field__search-list">
+    @if (!isLoading()) {
+    <p-table
+        (selectionChange)="selected.emit($event)"
+        [scrollHeight]="scrollHeight()"
+        [scrollable]="true"
+        [value]="categories()"
+        dataKey="key"
+        selectionMode="multiple"
+        styleClass="dotTable ">
+        <ng-template pTemplate="header">
+            <tr>
+                <th>
+                    <p-tableHeaderCheckbox style="width: 4rem"></p-tableHeaderCheckbox>
+                </th>
+                <th>{{ 'edit.content.category-field.search.name' | dm }}</th>
+                <th>{{ 'edit.content.category-field.search.assignee' | dm }}</th>
+            </tr>
+        </ng-template>
+
+        <ng-template let-category pTemplate="body">
+            <tr>
+                <td>
+                    <p-tableCheckbox [value]="category"></p-tableCheckbox>
+                </td>
+                <td>{{ category.categoryName }}</td>
+                <td>{{ category.path }}</td>
+            </tr>
+        </ng-template>
+    </p-table>
+    } @else {
+
+    <dot-table-skeleton
+        [columns]="[
+            '',
+            'edit.content.category-field.search.name' | dm,
+            'edit.content.category-field.search.assignee' | dm
+        ]" />
+
+    }
+</div>
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.scss
new file mode 100644
index 000000000000..12bf59a0ae80
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.scss
@@ -0,0 +1,11 @@
+.category-field__search-list {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+::ng-deep .dotTable.p-datatable > .p-datatable-wrapper {
+    border-radius: 0;
+    border: none;
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.spec.ts
new file mode 100644
index 000000000000..26ec9cf9ab65
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DotCategoryFieldSearchListComponent } from './dot-category-field-search-list.component';
+
+describe('DotCategoryFieldSearchListComponent', () => {
+    let component: DotCategoryFieldSearchListComponent;
+    let fixture: ComponentFixture<DotCategoryFieldSearchListComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [DotCategoryFieldSearchListComponent]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(DotCategoryFieldSearchListComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.ts
new file mode 100644
index 000000000000..ade87e0662b5
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.ts
@@ -0,0 +1,68 @@
+import { CommonModule } from '@angular/common';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    DestroyRef,
+    ElementRef,
+    EventEmitter,
+    inject,
+    input,
+    Output,
+    signal,
+    ViewChild
+} from '@angular/core';
+
+import { SkeletonModule } from 'primeng/skeleton';
+import { TableModule } from 'primeng/table';
+
+import { DotMessagePipe } from '@dotcms/ui';
+
+import {
+    DotCategoryFieldCategory,
+    DotCategoryFieldCategorySearchedItems
+} from '../../models/dot-category-field.models';
+import { DotTableSkeletonComponent } from '../dot-table-skeleton/dot-table-skeleton.component';
+
+@Component({
+    selector: 'dot-category-field-search-list',
+    standalone: true,
+    imports: [CommonModule, TableModule, SkeletonModule, DotTableSkeletonComponent, DotMessagePipe],
+    templateUrl: './dot-category-field-search-list.component.html',
+    styleUrl: './dot-category-field-search-list.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotCategoryFieldSearchListComponent implements AfterViewInit {
+    @ViewChild('tableContainer', { static: false }) tableContainer!: ElementRef;
+    scrollHeight = signal<string>('0px');
+
+    /**
+     * Represents the required categories input for DotCategoryFieldCategory.
+     *
+     * @typedef {DotCategoryFieldCategory[]} RequiredCategories
+     */
+    categories = input.required<DotCategoryFieldCategorySearchedItems[]>();
+
+    @Output() selected = new EventEmitter<DotCategoryFieldCategorySearchedItems[]>();
+
+    /**
+     * Represents the selected categories in the DotCategoryFieldCategory class.
+     */
+    selectedCategories: DotCategoryFieldCategory;
+    isLoading = input.required<boolean>();
+    #destroyRef = inject(DestroyRef);
+
+    ngAfterViewInit(): void {
+        this.calculateScrollHeight();
+        window.addEventListener('resize', this.calculateScrollHeight.bind(this));
+
+        this.#destroyRef.onDestroy(() => {
+            window.removeEventListener('resize', this.calculateScrollHeight.bind(this));
+        });
+    }
+
+    private calculateScrollHeight(): void {
+        const containerHeight = this.tableContainer.nativeElement.offsetHeight;
+        this.scrollHeight.set(`${containerHeight}px`);
+    }
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.html
new file mode 100644
index 000000000000..3026e470f0db
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.html
@@ -0,0 +1,21 @@
+<div class="p-inputgroup w-full">
+    <input
+        #searchInput
+        class="category-field__search-input"
+        pInputText
+        placeholder="{{ 'edit.content.category-field.search.input.placeholder' | dm }}"
+        type="text" />
+    @if (searchInput.value && !isLoading()) {
+    <span (click)="clearInput()" class="p-inputgroup-addon category-field__search-icon-clear">
+        <i class="pi pi-times cursor-pointer"></i>
+    </span>
+    } @if (isLoading()) {
+    <span class="p-inputgroup-addon category-field__search-icon-loading">
+        <i class="pi pi-spin pi-spinner"></i>
+    </span>
+    }
+
+    <span class="p-inputgroup-addon category-field__search--icon-search">
+        <i class="pi pi-search"></i>
+    </span>
+</div>
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.scss
new file mode 100644
index 000000000000..a61a6f707664
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.scss
@@ -0,0 +1,14 @@
+@use "variables" as *;
+
+.category-field__search-input.p-inputtext.p-element,
+.category-field__search-icon-clear,
+.category-field__search-icon-loading {
+    border-right: none;
+}
+
+.category-field__search--icon-search,
+.category-field__search-icon-clear,
+.category-field__search-icon-loading {
+    color: $color-palette-primary;
+    padding: 0;
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.spec.ts
new file mode 100644
index 000000000000..564d56ce5810
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DotCategoryFieldSearchComponent } from './dot-category-field-search.component';
+
+describe('DotCategoryFieldSearchComponent', () => {
+    let component: DotCategoryFieldSearchComponent;
+    let fixture: ComponentFixture<DotCategoryFieldSearchComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [DotCategoryFieldSearchComponent]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(DotCategoryFieldSearchComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.ts
new file mode 100644
index 000000000000..62a78ab4fa00
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.ts
@@ -0,0 +1,84 @@
+import { fromEvent } from 'rxjs';
+
+import { CommonModule } from '@angular/common';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    DestroyRef,
+    ElementRef,
+    EventEmitter,
+    inject,
+    input,
+    Output,
+    ViewChild
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { InputTextModule } from 'primeng/inputtext';
+
+import { debounceTime, filter, map } from 'rxjs/operators';
+
+import { DotMessagePipe } from '@dotcms/ui';
+
+const DEBOUNCE_TIME = 300;
+const MINIMUM_CHARACTERS = 3;
+
+@Component({
+    selector: 'dot-category-field-search',
+    standalone: true,
+    imports: [CommonModule, DotMessagePipe, InputTextModule],
+    templateUrl: './dot-category-field-search.component.html',
+    styleUrl: './dot-category-field-search.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotCategoryFieldSearchComponent implements AfterViewInit {
+    @ViewChild('searchInput') searchInput!: ElementRef;
+
+    /**
+     * Represent a EventEmitter for the term the user want to filter
+     *
+     */
+    @Output() term = new EventEmitter<string>();
+
+    /**
+     * Represent a EventEmitter to notify we want change the mode to `list`.
+     */
+    @Output() changeMode = new EventEmitter<string>();
+    isLoading = input.required<boolean>();
+    #destroyRef = inject(DestroyRef);
+
+    ngAfterViewInit(): void {
+        this.listenInputChanges();
+    }
+
+    /**
+     * Clears the value of the search input field and emits a change mode event.
+     *
+     * @return {void}
+     */
+    clearInput(): void {
+        this.searchInput.nativeElement.value = '';
+        this.changeMode.emit('list');
+    }
+
+    /**
+     * Sets up the search input observable to listen to input events,
+     * debounce the input, filter by minimum character length,
+     * and emit the search query value.
+     *
+     * @private
+     */
+    private listenInputChanges(): void {
+        fromEvent(this.searchInput.nativeElement, 'input')
+            .pipe(
+                takeUntilDestroyed(this.#destroyRef),
+                map((event: Event) => (event.target as HTMLInputElement).value),
+                debounceTime(DEBOUNCE_TIME),
+                filter((value: string) => value.length >= MINIMUM_CHARACTERS)
+            )
+            .subscribe((value: string) => {
+                this.term.emit(value);
+            });
+    }
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.html
index aaf0042de765..6ec4766df9a4 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.html
@@ -22,18 +22,34 @@
 
     <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="category-field__search">
+                <dot-category-field-search
+                    (changeMode)="store.setMode($event)"
+                    (term)="store.search($event)"
+                    @fadeAnimation
+                    [isLoading]="store.isSearchLoading()" />
+            </div>
             <div class="flex-grow-1 category-field__categories">
+                @if (store.mode() === 'list') {
                 <dot-category-field-category-list
                     (itemChecked)="store.updateSelected($event.selected, $event.item)"
                     (itemClicked)="store.getCategories($event)"
                     [categories]="store.categoryList()"
                     [selected]="store.selectedCategoriesValues()" />
+                } @else {
+                <dot-category-field-search-list
+                    @fadeAnimation
+                    [isLoading]="store.isSearchLoading()"
+                    [categories]="store.getSearchedCategories()"
+                    (selected)="selectedSearch($event)" />
+                }
             </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__selected-categories-list flex-1">
+                Selected Categories Component
+            </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.sidebar.button.clear-all' | dm }}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.scss
index 6b9a0937bd67..fb323f7293ad 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.scss
@@ -42,7 +42,6 @@
     gap: $spacing-1;
 }
 
-.category-field__search,
 .category-field__categories,
 .category-field__right-pane {
     border: $field-border-size solid $color-palette-gray-400;
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.ts
index 452709f087c9..7f522c8a3ad0 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.ts
@@ -1,3 +1,4 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -10,12 +11,18 @@ import {
 
 import { ButtonModule } from 'primeng/button';
 import { DialogModule } from 'primeng/dialog';
+import { InputTextModule } from 'primeng/inputtext';
 import { SidebarModule } from 'primeng/sidebar';
 
 import { DotMessagePipe } from '@dotcms/ui';
 
+import { DotCategoryFieldCategorySearchedItems } from '../../models/dot-category-field.models';
 import { CategoryFieldStore } from '../../store/content-category-field.store';
 import { DotCategoryFieldCategoryListComponent } from '../dot-category-field-category-list/dot-category-field-category-list.component';
+import { DotCategoryFieldSearchComponent } from '../dot-category-field-search/dot-category-field-search.component';
+import { DotCategoryFieldSearchListComponent } from '../dot-category-field-search-list/dot-category-field-search-list.component';
+
+export type CategoryFieldViewMode = 'list' | 'search';
 
 /**
  * The DotCategoryFieldSidebarComponent is a sidebar panel that allows editing of content category field.
@@ -33,11 +40,25 @@ import { DotCategoryFieldCategoryListComponent } from '../dot-category-field-cat
         ButtonModule,
         DotMessagePipe,
         SidebarModule,
-        DotCategoryFieldCategoryListComponent
+        DotCategoryFieldCategoryListComponent,
+        InputTextModule,
+        DotCategoryFieldSearchComponent,
+        DotCategoryFieldSearchListComponent
     ],
     templateUrl: './dot-category-field-sidebar.component.html',
     styleUrl: './dot-category-field-sidebar.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    animations: [
+        trigger('fadeAnimation', [
+            state(
+                'void',
+                style({
+                    opacity: 0
+                })
+            ),
+            transition(':enter, :leave', [animate('50ms ease-in-out')])
+        ])
+    ]
 })
 export class DotCategoryFieldSidebarComponent implements OnInit {
     /**
@@ -61,4 +82,8 @@ export class DotCategoryFieldSidebarComponent implements OnInit {
             this.store.clean();
         });
     }
+
+    selectedSearch($event: DotCategoryFieldCategorySearchedItems[]) {
+        this.store.updateSelectedFromSearch($event);
+    }
 }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.html
new file mode 100644
index 000000000000..be073d121081
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.html
@@ -0,0 +1,27 @@
+<p-table
+    [columns]="columns()"
+    [tableStyle]="{ 'min-width': '50rem' }"
+    [value]="data()"
+    styleClass="dotTable">
+    <ng-template let-columns pTemplate="header">
+        <tr>
+            @for (col of columns; track $index) {
+            <th [style.width.px]="$index === 0 ? 40 : null">{{ col }}</th>
+            }
+        </tr>
+    </ng-template>
+
+    <ng-template let-columns="columns" pTemplate="body">
+        <tr>
+            @for (col of columns; track $index) {
+            <td>
+                @if (col === '') {
+                <p-skeleton size="1rem" styleClass="mr-1"></p-skeleton>
+                } @else {
+                <p-skeleton></p-skeleton>
+                }
+            </td>
+            }
+        </tr>
+    </ng-template>
+</p-table>
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.scss
new file mode 100644
index 000000000000..b91a519eda17
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.scss
@@ -0,0 +1,8 @@
+:host {
+    height: 100%;
+    width: 100%;
+
+    ::ng-deep .dotTable.p-datatable .p-datatable-tbody > tr > td {
+        height: 41px;
+    }
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.ts
new file mode 100644
index 000000000000..155708539261
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.ts
@@ -0,0 +1,37 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+import { SkeletonModule } from 'primeng/skeleton';
+import { TableModule } from 'primeng/table';
+
+/**
+ * @class DotTableSkeletonComponent
+ *
+ * Represents a table component with skeleton loading feature with dynamic columns and rows
+ */
+@Component({
+    selector: 'dot-table-skeleton',
+    standalone: true,
+    imports: [CommonModule, SkeletonModule, TableModule],
+    templateUrl: './dot-table-skeleton.component.html',
+    styleUrl: './dot-table-skeleton.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotTableSkeletonComponent {
+    /**
+     * Represents the name of the header of the table
+     *
+     */
+    columns = input.required<string[]>();
+    /**
+     * Represents the number of rows needed in the table with skeleton.
+     *
+     * @param {number} rows - The number of rows for the input.
+     */
+    rows = input<number>(5);
+
+    data = computed<string[]>(() => {
+        return Array.from({ length: this.rows() }).map((_, i) => `${i}`);
+        // return Array(this.rows()).fill(null);
+    });
+}
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 5236a116a5ec..a6265c188176 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,14 +1,14 @@
 @if (store.selected().length) {
-    <div class="dot-category-field__categories" data-testId="category-chip-list">
-        @for (category of store.selected(); track category.key) {
-            <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 store.selected(); track category.key) {
+    <p-chip
+        [pTooltip]="category.path ? category.path : category.value"
+        [removable]="true"
+        [label]="category.value"
+        tooltipPosition="top"
+        styleClass="p-chip-sm" />
+    }
+</div>
 }
 
 <div class="dot-category-field__select">
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/models/dot-category-field.models.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/models/dot-category-field.models.ts
index e8048b2b97b6..eac713c13f88 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/models/dot-category-field.models.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/models/dot-category-field.models.ts
@@ -24,3 +24,8 @@ export type DotCategoryFieldItem = { index: number; item: DotCategory };
 export interface DotCategoryFieldCategory extends DotCategory {
     checked?: boolean;
 }
+
+export interface DotCategoryFieldCategorySearchedItems
+    extends Pick<DotCategory, 'categoryName' | 'key' | 'inode'> {
+    path: string;
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/services/categories.service.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/services/categories.service.ts
index 477d9bf4cdaa..8e36f9d07096 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/services/categories.service.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/services/categories.service.ts
@@ -13,6 +13,22 @@ export const API_URL = '/api/v1/categories';
 
 export const ITEMS_PER_PAGE = 7000;
 
+export interface GetChildrenParams {
+    inode: string;
+    per_page: number;
+    direction: string;
+    showChildrenCount: boolean;
+    filter?: string;
+    allLevels?: boolean;
+}
+
+const DEFAULT_PARAMS: Omit<GetChildrenParams, 'inode'> = {
+    per_page: 7000,
+    direction: 'ASC',
+    showChildrenCount: true,
+    allLevels: false
+};
+
 /**
  * CategoriesService class.
  *
@@ -26,19 +42,52 @@ export class CategoriesService {
      * Retrieves the children of a given inode.
      *
      * @param {string} inode - The inode of the parent node.
+     * @param params
      * @returns {Observable<DotCategory[]>} - An Observable that emits the children of the given inode as an array of DotCategory objects.
      */
-    getChildren(inode: string): Observable<DotCategoryFieldCategory[]> {
-        const params = new HttpParams()
-            .set('per_page', ITEMS_PER_PAGE)
-            .set('direction', 'ASC')
-            .set('inode', inode)
-            .set('showChildrenCount', 'true');
+    getChildren(
+        inode: string,
+        params: Partial<GetChildrenParams> = {}
+    ): Observable<DotCategoryFieldCategory[]> {
+        const mergedParams = this.mergeParams({ ...params, inode });
+        const httpParams = this.toHttpParams(mergedParams);
 
         return this.#http
             .get<DotCMSResponse<DotCategoryFieldCategory[]>>(`${API_URL}/children`, {
-                params
+                params: httpParams
             })
             .pipe(pluck('entity'));
     }
+
+    /**
+     * Merges default parameters with provided parameters.
+     *
+     * @param {Partial<GetChildrenParams>} params - The provided parameters.
+     * @returns {GetChildrenParams} - The merged parameters.
+     */
+    private mergeParams(params: Partial<GetChildrenParams>): GetChildrenParams {
+        return { ...DEFAULT_PARAMS, ...params } as GetChildrenParams;
+    }
+
+    /**
+     * Converts an object to HttpParams.
+     *
+     * @param {GetChildrenParams} params - The parameters object.
+     * @returns {HttpParams} - The HttpParams object.
+     */
+    private toHttpParams(params: GetChildrenParams): HttpParams {
+        let httpParams = new HttpParams()
+            .set('inode', params.inode)
+            .set('per_page', params.per_page.toString())
+            .set('direction', params.direction);
+
+        if (!params.filter) {
+            // No add showChildrenCount when we use filter
+            httpParams = httpParams.set('showChildrenCount', params.showChildrenCount.toString());
+        } else {
+            httpParams = httpParams.set('filter', params.filter).set('allLevels', 'true');
+        }
+
+        return httpParams;
+    }
 }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.ts
index a62b6b7960ff..10bd7048e182 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.ts
@@ -5,7 +5,7 @@ import { pipe } from 'rxjs';
 
 import { computed, inject } from '@angular/core';
 
-import { filter, switchMap, tap } from 'rxjs/operators';
+import { delay, filter, switchMap, tap } from 'rxjs/operators';
 
 import {
     ComponentStatus,
@@ -14,8 +14,10 @@ import {
     DotCMSContentTypeField
 } from '@dotcms/dotcms-models';
 
+import { CategoryFieldViewMode } from '../components/dot-category-field-sidebar/dot-category-field-sidebar.component';
 import {
     DotCategoryFieldCategory,
+    DotCategoryFieldCategorySearchedItems,
     DotCategoryFieldItem,
     DotCategoryFieldKeyValueObj
 } from '../models/dot-category-field.models';
@@ -26,7 +28,9 @@ import {
     clearCategoriesAfterIndex,
     clearParentPathAfterIndex,
     getSelectedCategories,
-    updateChecked
+    transformedData,
+    updateChecked,
+    updateSelectedFromSearch
 } from '../utils/category-field.utils';
 
 export type CategoryFieldState = {
@@ -35,6 +39,10 @@ export type CategoryFieldState = {
     categories: DotCategoryFieldCategory[][];
     parentPath: string[];
     state: ComponentStatus;
+    // search
+    mode: CategoryFieldViewMode;
+    filter: string;
+    searchCategories: DotCategoryFieldCategory[];
 };
 
 export const initialState: CategoryFieldState = {
@@ -42,7 +50,10 @@ export const initialState: CategoryFieldState = {
     selected: [],
     categories: [],
     parentPath: [],
-    state: ComponentStatus.IDLE
+    state: ComponentStatus.IDLE,
+    mode: 'list',
+    filter: '',
+    searchCategories: []
 };
 
 /**
@@ -52,33 +63,46 @@ export const initialState: CategoryFieldState = {
  */
 export const CategoryFieldStore = signalStore(
     withState(initialState),
-    withComputed(({ field, categories, selected, parentPath }) => ({
+    withComputed((store) => ({
         /**
          * Current selected items (key) from the contentlet
          */
-        selectedCategoriesValues: computed(() => selected().map((item) => item.key)),
+        selectedCategoriesValues: computed(() => store.selected().map((item) => item.key)),
 
         /**
          * Categories for render with added properties
          */
         categoryList: computed(() =>
-            categories().map((column) => addMetadata(column, parentPath()))
+            store.categories().map((column) => addMetadata(column, store.parentPath()))
         ),
 
         /**
          * Indicates whether any categories are selected.
          */
-        hasSelectedCategories: computed(() => !!selected().length),
+        hasSelectedCategories: computed(() => !!store.selected().length),
 
         /**
          * Get the root category inode.
          */
-        rootCategoryInode: computed(() => field().values),
+        rootCategoryInode: computed(() => store.field().values),
 
         /**
          * Retrieves the value of the field variable.
          */
-        fieldVariableName: computed(() => field().variable)
+        fieldVariableName: computed(() => store.field().variable),
+
+        // Search
+        getSearchedCategories: computed(() => transformedData(store.searchCategories())), // remove this one
+
+        isSearchLoading: computed(
+            () => store.mode() === 'search' && store.state() === ComponentStatus.LOADING
+        ),
+        searchCategoriesFound: computed(
+            () =>
+                store.mode() === 'search' &&
+                store.state() === ComponentStatus.LOADED &&
+                store.filter()
+        )
     })),
     withMethods((store, categoryService = inject(CategoriesService)) => ({
         /**
@@ -92,6 +116,14 @@ export const CategoryFieldStore = signalStore(
             });
         },
 
+        setMode(mode: 'list' | 'search'): void {
+            patchState(store, {
+                mode,
+                searchCategories: [],
+                filter: ''
+            });
+        },
+
         /**
          * Updates the selected items based on the provided item.
          */
@@ -107,6 +139,25 @@ export const CategoryFieldStore = signalStore(
             });
         },
 
+        updateSelectedFromSearch(selectedItems: DotCategoryFieldCategorySearchedItems[]): void {
+            const currentChecked: DotCategoryFieldKeyValueObj[] = updateSelectedFromSearch(
+                store.selected(),
+                selectedItems,
+                store.searchCategories()
+            );
+
+            patchState(store, {
+                selected: [...currentChecked]
+            });
+        },
+
+        /**
+         * Clears all categories from the store, effectively resetting state related to categories and their parent paths.
+         */
+        clean() {
+            patchState(store, { categories: [], parentPath: [], mode: 'list', filter: '' });
+        },
+
         /**
          * Fetches categories from a given iNode category parent.
          * This method accepts either void to get the parent, or an index and item returned after clicking an item with children.
@@ -169,11 +220,27 @@ export const CategoryFieldStore = signalStore(
             )
         ),
 
-        /**
-         * Clears all categories from the store, effectively resetting state related to categories and their parent paths.
-         */
-        clean() {
-            patchState(store, { categories: [], parentPath: [] });
-        }
+        search: rxMethod<string>(
+            pipe(
+                tap(() => patchState(store, { mode: 'search', state: ComponentStatus.LOADING })),
+                switchMap((filter) => {
+                    return categoryService.getChildren(store.rootCategoryInode(), { filter }).pipe(
+                        delay(300),
+                        tapResponse({
+                            next: (categories) => {
+                                patchState(store, {
+                                    searchCategories: categories,
+                                    state: ComponentStatus.LOADED
+                                });
+                            },
+                            error: () => {
+                                // TODO: Add Error Handler
+                                patchState(store, { state: ComponentStatus.IDLE });
+                            }
+                        })
+                    );
+                })
+            )
+        )
     }))
 );
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/utils/category-field.utils.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/utils/category-field.utils.ts
index 1af7af5a369a..75adf9569fe0 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/utils/category-field.utils.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/utils/category-field.utils.ts
@@ -2,6 +2,7 @@ import { DotCMSContentlet, DotCMSContentTypeField } from '@dotcms/dotcms-models'
 
 import {
     DotCategoryFieldCategory,
+    DotCategoryFieldCategorySearchedItems,
     DotCategoryFieldKeyValueObj
 } from '../models/dot-category-field.models';
 
@@ -46,6 +47,25 @@ export const addMetadata = (
     });
 };
 
+export const transformedData = (
+    categories: DotCategoryFieldCategory[]
+): DotCategoryFieldCategorySearchedItems[] => {
+    return categories.map((item) => {
+        // const path = item.parentList.map((parent) => parent.categoryName).join(' / ');
+        const path = item.parentList
+            .slice(1)
+            .map((parent) => parent.categoryName)
+            .join(' / ');
+
+        return {
+            categoryName: item.categoryName,
+            key: item.key,
+            inode: item.inode,
+            path: path
+        };
+    });
+};
+
 /**
  * Deep copy of the matrix
  * @param array
@@ -92,6 +112,39 @@ export const checkIfClickedIsLastItem = (
     return index + 1 === categories.length;
 };
 
+/**
+ * Update storedSelected from search results.
+ *
+ * @param {DotCategoryFieldKeyValueObj[]} storedSelected - The array of items currently stored as selected.
+ * @param {DotCategoryFieldCategorySearchedItems[]} selected - The array of items that were selected from the search results.
+ * @param {DotCategoryFieldCategory[]} searchedItems - The array of items obtained from the search.
+ * @returns {DotCategoryFieldKeyValueObj[]} The updated array of selected items.
+ */
+export const updateSelectedFromSearch = (
+    storedSelected: DotCategoryFieldKeyValueObj[],
+    selected: DotCategoryFieldCategorySearchedItems[],
+    searchedItems: DotCategoryFieldCategory[]
+): DotCategoryFieldKeyValueObj[] => {
+    // Create a map for quick lookup of searched items
+    const searchedItemsMap = new Map(searchedItems.map((item) => [item.key, item]));
+
+    // Remove items from storedSelected that are in searchedItems
+    const currentChecked = storedSelected.filter((item) => !searchedItemsMap.has(item.key));
+
+    // Add new selected items to currentChecked
+    for (const item of selected) {
+        if (!currentChecked.some((checkedItem) => checkedItem.key === item.key)) {
+            currentChecked.push({
+                value: item.categoryName,
+                key: item.key,
+                path: item.path
+            });
+        }
+    }
+
+    return currentChecked;
+};
+
 /**
  * Updates the array of selected items based on the current selection and most recently interacted with item.
  *
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index 2a07847b5276..dfd2580af605 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -5746,3 +5746,8 @@ content.type.form.banner.message= Enable <b>Edit Content Beta</b> for a fresh ed
 edit.content.category-field.show-categories-dialog=Select
 edit.content.category-field.sidebar.header.select-categories=Select categories
 edit.content.category-field.sidebar.button.clear-all=Clear all
+
+edit.content.category-field.search.name=Name
+edit.content.category-field.search.assignee=Assignee
+edit.content.category-field.search.input.placeholder=Search
+