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 @@ + [for]="field.variable" + dotFieldRequired> + {{ field.name }} + + [attr.data-testId]="'field-' + field.variable" + [field]="field" /> + [attr.data-testId]="'field-' + field.variable" + [field]="field" /> + [attr.data-testId]="'field-' + field.variable" + [field]="field" /> + [attr.data-testId]="'field-' + field.variable" + [field]="field" /> + [attr.data-testId]="'field-' + field.variable" + [field]="field" /> + [attr.data-testId]="'field-' + field.variable" + [field]="field" /> + [attr.data-testId]="'field-' + field.variable" + [field]="field"> + [attr.data-testId]="'field-' + field.variable" + [field]="field" /> + [attr.data-testId]="'field-' + field.variable" + [field]="field" /> + [formControlName]="field.variable" /> + [field]="field" /> + [formControlName]="field.variable" /> + [attr.data-testId]="'field-' + field.variable" + [formControlName]="field.variable" /> + [attr.data-testId]="'field-' + field.variable" + [field]="field" /> + + {{ field.hint }} 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 | 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 @@
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 @@ +
+
Search & category tree
+
+
Selected Categories
+
+ + +
+
+
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; + 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) { +
+ @for (category of values; track category.id) { + + } +
+} + +
+ +
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; + + 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(); + + // 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: '

HELLO

', + 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 Edit Content Beta 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