chore(content-drive): Add Base Type filter (dotCMS#33029)

This PR introduces the new filter by Base Type.
Also have some code from Content Type filter.

And fix some UI issues from PrimeNG MultiSelects around the all project


Base Type filter:

https://github.com/user-attachments/assets/51650b02-c6ad-41b2-834e-c967c8553bd9

Multi Select before:


https://github.com/user-attachments/assets/e4d82812-d2f9-4660-bfd8-79901c480818

Multi Select now:



https://github.com/user-attachments/assets/047fd1b6-695d-4e6f-b454-67d386665b31


This PR fixes: dotCMS#32600

---------

Co-authored-by: Rafael Velazco <[email protected]>
Co-authored-by: Jalinson Diaz <[email protected]>
Co-authored-by: Kevin <[email protected]>
Co-authored-by: Nicolas Molina Monroy <[email protected]>

Author: 5 people

core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_multiselect.scss

@@ -4,10 +4,11 @@
 
 .p-multiselect {
     @extend #form-field-base;
-    min-width: 13rem;
+    min-width: 14rem;
     padding-right: 0;
     min-height: $field-height-md;
-    height: auto;
+    height: 2.5em;
+    width: 100%;
 
     &:not(.p-multiselect-open):hover {
         @extend #form-field-hover;
@@ -31,7 +32,7 @@
                 padding: $spacing-1 0;
                 height: auto;
                 flex-wrap: wrap;
-                overflow: visible;
+                overflow: hidden;
             }
         }
     }
@@ -64,6 +65,10 @@
 
         .p-multiselect-label {
             gap: $spacing-0;
+            display: block;
+            cursor: pointer;
+            overflow: hidden;
+            // max-width: 10.70em;
         }
 
         .p-multiselect-token {
@@ -74,6 +79,7 @@
 
 .p-multiselect-panel {
     @extend #field-panel;
+    min-width: 20rem;
 
     .p-multiselect-header {
         @extend #field-panel-header;
@@ -103,6 +109,10 @@
         .p-multiselect-item {
             @extend #field-panel-item;
 
+            &[data-p-highlight="true"] {
+                @extend #field-panel-item-highlight;
+            }
+
             &.p-highlight {
                 @extend #field-panel-item-highlight;
             }

core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss

@@ -178,11 +178,12 @@ $select-border-size: 2px;
     border-radius: $border-radius-sm;
     color: $color-palette-primary;
     font-size: $font-size-sm;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: $spacing-0;
     flex-direction: row-reverse;
+    margin-right: $spacing-0;
 }
 
 #field-chip-token {

core-web/libs/portlets/dot-content-drive/portlet/src/lib.routes.ts

@@ -1,5 +1,6 @@
 import { Route } from '@angular/router';
 
+import { DotContentTypeService } from '@dotcms/data-access';
 import { GlobalStore } from '@dotcms/store';
 
 import { DotContentDriveShellComponent } from './lib/dot-content-drive-shell/dot-content-drive-shell.component';
@@ -8,6 +9,6 @@ export const DotContentDriveRoutes: Route[] = [
     {
         path: '',
         component: DotContentDriveShellComponent,
-        providers: [GlobalStore]
+        providers: [GlobalStore, DotContentTypeService]
     }
 ];

core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/components/dot-content-drive-base-type-selector/dot-content-drive-base-type-selector.component.html

@@ -0,0 +1,9 @@
+<p-multiSelect
+    [(ngModel)]="$selectedBaseTypes"
+    [options]="$state.baseTypes()"
+    optionLabel="label"
+    display="chip"
+    optionValue="name"
+    [placeholder]="'content-drive.base-type.placeholder' | dm"
+    [showToggleAll]="true"
+    (onChange)="onChange()" />

core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/components/dot-content-drive-base-type-selector/dot-content-drive-base-type-selector.component.scss

@@ -0,0 +1,101 @@
+import { createComponentFactory, mockProvider, Spectator, SpyObject } from '@ngneat/spectator/jest';
+import { of } from 'rxjs';
+
+import { By } from '@angular/platform-browser';
+
+import { MultiSelect, MultiSelectChangeEvent } from 'primeng/multiselect';
+
+import { DotContentTypeService, DotMessageService } from '@dotcms/data-access';
+
+import { DotContentDriveBaseTypeSelectorComponent } from './dot-content-drive-base-type-selector.component';
+
+import { MOCK_BASE_TYPES } from '../../../../shared/mocks';
+import { DotContentDriveStore } from '../../../../store/dot-content-drive.store';
+
+describe('DotContentDriveBaseTypeSelectorComponent', () => {
+    let spectator: Spectator<DotContentDriveBaseTypeSelectorComponent>;
+    let component: DotContentDriveBaseTypeSelectorComponent;
+    let store: SpyObject<InstanceType<typeof DotContentDriveStore>>;
+    let contentTypeService: SpyObject<DotContentTypeService>;
+
+    const createComponent = createComponentFactory({
+        component: DotContentDriveBaseTypeSelectorComponent,
+        providers: [
+            mockProvider(DotMessageService, {
+                get: jest.fn()
+            }),
+            mockProvider(DotContentDriveStore, {
+                patchFilters: jest.fn(),
+                removeFilter: jest.fn(),
+                getFilterValue: jest.fn()
+            }),
+            mockProvider(DotContentTypeService, {
+                getAllContentTypes: jest.fn().mockReturnValue(of(MOCK_BASE_TYPES))
+            })
+        ],
+        detectChanges: false
+    });
+
+    beforeEach(() => {
+        spectator = createComponent();
+        component = spectator.component;
+        store = spectator.inject(DotContentDriveStore, true);
+        contentTypeService = spectator.inject(DotContentTypeService);
+        store.getFilterValue.mockReturnValue([]);
+    });
+
+    it('should fetch content types and filter out FORM type', () => {
+        spectator.detectChanges();
+
+        expect(contentTypeService.getAllContentTypes).toHaveBeenCalled();
+        expect(component.$state().baseTypes).toEqual([
+            { name: 'Content', label: 'Content', types: null },
+            { name: 'Widget', label: 'Widget', types: null },
+            { name: 'FileAsset', label: 'FileAsset', types: null }
+        ]);
+    });
+
+    it('should set selectedBaseTypes when store has baseType filter', () => {
+        store.getFilterValue.mockReturnValue(['1', '2']);
+
+        spectator.detectChanges();
+
+        expect(store.getFilterValue).toHaveBeenCalledWith('baseType');
+        expect(component.$selectedBaseTypes()).toEqual(['CONTENT', 'WIDGET']);
+    });
+
+    it('should patch filters with keys when selectedBaseTypes has values', () => {
+        spectator.detectChanges();
+
+        const multiSelectDebugElement = spectator.fixture.debugElement.query(
+            By.directive(MultiSelect)
+        );
+
+        spectator.triggerEventHandler(multiSelectDebugElement, 'ngModelChange', [
+            'CONTENT',
+            'WIDGET'
+        ]);
+
+        expect(component.$selectedBaseTypes()).toEqual(['CONTENT', 'WIDGET']);
+
+        spectator.triggerEventHandler(MultiSelect, 'onChange', {} as MultiSelectChangeEvent);
+
+        expect(store.patchFilters).toHaveBeenCalledWith({
+            baseType: ['1', '2']
+        });
+    });
+
+    it('should remove filter when selectedBaseTypes is empty', () => {
+        component.$selectedBaseTypes.set([]);
+
+        const multiSelectDebugElement = spectator.fixture.debugElement.query(
+            By.directive(MultiSelect)
+        );
+
+        spectator.triggerEventHandler(multiSelectDebugElement, 'ngModelChange', []);
+
+        spectator.triggerEventHandler(MultiSelect, 'onChange', {} as MultiSelectChangeEvent);
+
+        expect(store.removeFilter).toHaveBeenCalledWith('baseType');
+    });
+});

core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/components/dot-content-drive-base-type-selector/dot-content-drive-base-type-selector.component.spec.ts

@@ -0,0 +1,87 @@
+import { patchState, signalState } from '@ngrx/signals';
+import { of } from 'rxjs';
+
+import { Component, inject, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { CheckboxModule } from 'primeng/checkbox';
+import { MultiSelectModule } from 'primeng/multiselect';
+
+import { debounceTime, distinctUntilChanged, map, take } from 'rxjs/operators';
+
+import { DotContentTypeService } from '@dotcms/data-access';
+import { DotMessagePipe } from '@dotcms/ui';
+
+import { DEBOUNCE_TIME, MAP_NUMBERS_TO_BASE_TYPES } from '../../../../shared/constants';
+import { DotContentDriveStore } from '../../../../store/dot-content-drive.store';
+
+@Component({
+    selector: 'dot-content-drive-base-type-selector',
+    templateUrl: './dot-content-drive-base-type-selector.component.html',
+    styleUrl: './dot-content-drive-base-type-selector.component.scss',
+    imports: [MultiSelectModule, FormsModule, CheckboxModule, DotMessagePipe],
+    standalone: true
+})
+export class DotContentDriveBaseTypeSelectorComponent {
+    $selectedBaseTypes = model<string[]>([]);
+
+    readonly #store = inject(DotContentDriveStore);
+    readonly #dotContentTypeService = inject(DotContentTypeService);
+
+    readonly $state = signalState({
+        baseTypes: []
+    });
+
+    ngOnInit() {
+        this.getCurrentBaseTypes();
+
+        this.#dotContentTypeService
+            .getAllContentTypes()
+            .pipe(
+                take(1),
+                map((response) => response.filter((item) => item.name !== 'FORM'))
+            )
+            .subscribe((response) => {
+                patchState(this.$state, {
+                    baseTypes: response
+                });
+            });
+    }
+
+    getCurrentBaseTypes() {
+        const baseTypes = this.#store.getFilterValue('baseType') as string[];
+
+        if (baseTypes?.length > 0) {
+            const values = baseTypes.map((key) => MAP_NUMBERS_TO_BASE_TYPES[key]).filter(Boolean);
+
+            this.$selectedBaseTypes.set(values);
+        }
+    }
+
+    onChange() {
+        of(this.$selectedBaseTypes() ?? [])
+            .pipe(
+                debounceTime(DEBOUNCE_TIME), // Debounce to avoid spamming the server
+                distinctUntilChanged()
+            )
+            .subscribe((value) => {
+                if (value.length > 0) {
+                    // Get all keys from MAP_NUMBERS_TO_BASE_TYPES where the values match the array
+                    const keys = value
+                        .map(
+                            (val) =>
+                                Object.entries(MAP_NUMBERS_TO_BASE_TYPES).find(
+                                    ([_key, v]) => v === val
+                                )?.[0]
+                        )
+                        .filter(Boolean);
+
+                    this.#store.patchFilters({
+                        baseType: keys
+                    });
+                } else {
+                    this.#store.removeFilter('baseType');
+                }
+            });
+    }
+}

core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/components/dot-content-drive-base-type-selector/dot-content-drive-base-type-selector.component.ts

@@ -0,0 +1,24 @@
+<p-multiSelect
+    [filter]="true"
+    [options]="$state.contentTypes()"
+    [(ngModel)]="$selectedContentTypes"
+    optionLabel="name"
+    display="chip"
+    showClear="false"
+    [lazy]="true"
+    [placeholder]="'content-drive.content-type.placeholder' | dm"
+    [loading]="$state.loading()"
+    (onChange)="onChange()"
+    (onClear)="onChange()"
+    (onFilter)="onFilter($event)">
+    <ng-template pTemplate="empty">
+        @if ($state.loading()) {
+            <p-skeleton
+                height="32px"
+                width="100%"
+                data-testid="content-type-field-skeleton"></p-skeleton>
+        } @else {
+            {{ 'content-drive.content-type-field.empty-state' | dm }}
+        }
+    </ng-template>
+</p-multiSelect>

core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/components/dot-content-drive-content-type-field/dot-content-drive-content-type-field.component.html

@@ -0,0 +1,8 @@
+describe('DotContentDriveContentTypeFieldComponent', () => {
+    // TODO: This will be implemented in the ContentType filter PR.
+    describe('Component Initialization', () => {
+        it('should create', () => {
+            expect(true).toBeTruthy();
+        });
+    });
+});