From 31f85b4ff6f8e2e7ee3297fd23615a739835b1c1 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Thu, 11 Jul 2024 10:50:06 -0400 Subject: [PATCH 1/9] save --- core-web/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/core-web/package.json b/core-web/package.json index b72eada75410..2710865f1ac5 100644 --- a/core-web/package.json +++ b/core-web/package.json @@ -278,5 +278,6 @@ }, "nx": { "includedScripts": [] - } + }, + "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a" } From 6c99add13b9de4e5d702de54cff0b7c5329fb485 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Thu, 11 Jul 2024 17:18:13 -0400 Subject: [PATCH 2/9] chore: Refactor dot-edit-content-category-field.component to use dot-category-field-chips component --- .../dot-category-field-chips.component.html | 17 +++ .../dot-category-field-chips.component.scss | 0 .../dot-category-field-chips.component.ts | 107 ++++++++++++++++++ .../dot-category-field-sidebar.component.ts | 1 - ...edit-content-category-field.component.html | 13 +-- ...edit-content-category-field.component.scss | 6 +- ...t-edit-content-category-field.component.ts | 12 +- .../dot-edit-content-category-field.const.ts | 2 + core-web/package.json | 3 +- .../WEB-INF/messages/Language.properties | 2 + 10 files changed, 145 insertions(+), 18 deletions(-) create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.html create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.scss create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.html new file mode 100644 index 000000000000..a3bf0f1018ef --- /dev/null +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.html @@ -0,0 +1,17 @@ +
+ @for (category of $categoriesToShow(); track category.key) { + + } @if ($showAllBtn()) { + + } +
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts new file mode 100644 index 000000000000..5e88c4fe5c3f --- /dev/null +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts @@ -0,0 +1,107 @@ +import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core'; + +import { ButtonModule } from 'primeng/button'; +import { ChipModule } from 'primeng/chip'; +import { TooltipModule } from 'primeng/tooltip'; + +import { DotMessageService } from '@dotcms/data-access'; + +import { DotCategoryFieldKeyValueObj } from '../../models/dot-category-field.models'; + +/** + * Represents the Dot Category Field Chips component. + * + * @export + * @class DotCategoryFieldChipsComponent + */ +@Component({ + selector: 'dot-category-field-chips', + standalone: true, + imports: [ButtonModule, ChipModule, TooltipModule], + templateUrl: './dot-category-field-chips.component.html', + styleUrl: './dot-category-field-chips.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DotCategoryFieldChipsComponent { + readonly #dotMessageService = inject(DotMessageService); + + /** + * Represents the variable 'showAll' which is of type 'signal'. + * + * @memberof DotCategoryFieldChipsComponent + */ + $showAll = signal(false); + /** + * Represents the variable 'max' which is of type 'number'. + * + * @memberof DotCategoryFieldChipsComponent + */ + $max = input.required({ alias: 'max' }); + /** + * Represents the variable 'categories' which is of type 'DotCategoryFieldKeyValueObj[]'. + * + * @memberof DotCategoryFieldChipsComponent + */ + $categories = input.required({ alias: 'categories' }); + /** + * Represents the variable 'label' which is of type 'string'. + * + * @memberof DotCategoryFieldChipsComponent + */ + $categoriesToShow = computed(() => { + const categories = this.$categories(); + const max = this.$max(); + const showAll = this.$showAll(); + + if (showAll) { + return categories; + } + + return categories.slice(0, max); + }); + /** + * Represents the variable '$showAllBtn' which is of type 'computed'. + * + * @memberof DotCategoryFieldChipsComponent + */ + $showAllBtn = computed(() => { + const size = this.$categories().length; + + if (size > this.$max()) { + return true; + } + + return false; + }); + /** + * Represents the variable 'btnLabel' which is of type 'computed'. + * + * @memberof DotCategoryFieldChipsComponent + */ + $btnLabel = computed(() => { + const size = this.$categories().length; + const max = this.$max(); + + if (this.$showAll()) { + return this.#dotMessageService.get('edit.content.category-field.list.show.less'); + } + + if (size > max) { + return this.#dotMessageService.get( + 'edit.content.category-field.list.show.more', + `${size - max}` + ); + } + + return null; + }); + + /** + * Method to toogle the show all categories. + * + * @memberof DotCategoryFieldChipsComponent + */ + toogleShowAll(): void { + this.$showAll.update((showAll) => !showAll); + } +} 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..c208650423c5 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 @@ -16,7 +16,6 @@ import { DotMessagePipe } from '@dotcms/ui'; import { CategoryFieldStore } from '../../store/content-category-field.store'; import { DotCategoryFieldCategoryListComponent } from '../dot-category-field-category-list/dot-category-field-category-list.component'; - /** * The DotCategoryFieldSidebarComponent is a sidebar panel that allows editing of content category field. * It provides interfaces for item selection and click handling, and communicates with a store 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..8642ef21855e 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,7 @@ @if (store.selected().length) { -
- @for (category of store.selected(); track category.key) { - - } -
+
+ +
}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss index 64d5a700a738..16d1d0759b95 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss @@ -5,13 +5,13 @@ border-radius: 0 0 $border-radius-md $border-radius-md; } - &.dot-category-field__container--has-categories .dot-category-field__categories { + &.dot-category-field__container--has-categories dot-category-field-chips { border-bottom: none; padding: $spacing-1; } } -.dot-category-field__categories, +dot-category-field-chips, .dot-category-field__select { border: $field-border-size solid $color-palette-gray-400; display: flex; @@ -19,7 +19,7 @@ align-items: center; } -.dot-category-field__categories { +dot-category-field-chips { gap: $spacing-1; border-radius: $border-radius-md $border-radius-md 0 0; } diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts index c4150c2f4271..3518e19e15f2 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts @@ -23,8 +23,9 @@ import { delay } from 'rxjs/operators'; import { DotCMSContentlet, DotCMSContentTypeField } from '@dotcms/dotcms-models'; import { DotDynamicDirective, DotMessagePipe } from '@dotcms/ui'; +import { DotCategoryFieldChipsComponent } from './components/dot-category-field-chips/dot-category-field-chips.component'; import { DotCategoryFieldSidebarComponent } from './components/dot-category-field-sidebar/dot-category-field-sidebar.component'; -import { CLOSE_SIDEBAR_CSS_DELAY_MS } from './dot-edit-content-category-field.const'; +import { CLOSE_SIDEBAR_CSS_DELAY_MS, MAX_CHIPS } from './dot-edit-content-category-field.const'; import { CategoriesService } from './services/categories.service'; import { CategoryFieldStore } from './store/content-category-field.store'; @@ -47,7 +48,8 @@ import { CategoryFieldStore } from './store/content-category-field.store'; NgClass, TooltipModule, DotMessagePipe, - DotDynamicDirective + DotDynamicDirective, + DotCategoryFieldChipsComponent ], templateUrl: './dot-edit-content-category-field.component.html', styleUrl: './dot-edit-content-category-field.component.scss', @@ -69,6 +71,12 @@ export class DotEditContentCategoryFieldComponent implements OnInit { * Disable the button to open the sidebar */ disableSelectCategoriesButton = signal(false); + /** + * Represents the variable '$maxChips' which is of type 'signal'. + * + * @memberof DotEditContentCategoryFieldComponent + */ + $maxChips = signal(MAX_CHIPS); @ViewChild(DotDynamicDirective, { static: true }) sidebarHost!: DotDynamicDirective; diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts index d6b69030a7be..ff8b9133a46a 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts @@ -1 +1,3 @@ export const CLOSE_SIDEBAR_CSS_DELAY_MS = 300; + +export const MAX_CHIPS = 8; diff --git a/core-web/package.json b/core-web/package.json index 2710865f1ac5..b72eada75410 100644 --- a/core-web/package.json +++ b/core-web/package.json @@ -278,6 +278,5 @@ }, "nx": { "includedScripts": [] - }, - "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a" + } } diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties index 2a07847b5276..26af8f1c4684 100644 --- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties +++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties @@ -5746,3 +5746,5 @@ content.type.form.banner.message= Enable Edit Content Beta 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.list.show.more={0} More +edit.content.category-field.list.show.less=Less From d92549f87862b957ad3f69f129f2c21d7e3825f7 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Thu, 11 Jul 2024 17:20:40 -0400 Subject: [PATCH 3/9] chore: Remove unused modules --- .../dot-edit-content-category-field.component.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts index 3518e19e15f2..8c80d265d25f 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts @@ -14,9 +14,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { ControlContainer, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; -import { ChipModule } from 'primeng/chip'; -import { ChipsModule } from 'primeng/chips'; -import { TooltipModule } from 'primeng/tooltip'; import { delay } from 'rxjs/operators'; @@ -41,12 +38,9 @@ import { CategoryFieldStore } from './store/content-category-field.store'; selector: 'dot-edit-content-category-field', standalone: true, imports: [ - ChipsModule, ReactiveFormsModule, ButtonModule, - ChipModule, NgClass, - TooltipModule, DotMessagePipe, DotDynamicDirective, DotCategoryFieldChipsComponent From c4b6beaff0009cf6db4b24889d00db2bac7a076e Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Thu, 11 Jul 2024 17:23:02 -0400 Subject: [PATCH 4/9] chore: Update MAX_CHIPS constant to allow for 10 chips in dot-edit-content-category-field --- .../dot-edit-content-category-field.const.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts index ff8b9133a46a..1165e2b74363 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts @@ -1,3 +1,3 @@ export const CLOSE_SIDEBAR_CSS_DELAY_MS = 300; -export const MAX_CHIPS = 8; +export const MAX_CHIPS = 10; From 1008ef79658dd231324da15128f1bf1c98cb5932 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Thu, 11 Jul 2024 17:43:50 -0400 Subject: [PATCH 5/9] chore: Config basic setup to test DotCategoryFieldChipsComponent --- ...dot-category-field-chips.component.spec.ts | 35 +++++++++++++++++++ .../dot-category-field-chips.component.ts | 6 +++- ...edit-content-category-field.component.html | 2 +- .../mocks/category-field.mocks.ts | 18 +++++++++- 4 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts new file mode 100644 index 000000000000..8f228e57ea6a --- /dev/null +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts @@ -0,0 +1,35 @@ +import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest'; + +import { DotMessageService } from '@dotcms/data-access'; + +import { DotCategoryFieldChipsComponent } from './dot-category-field-chips.component'; + +import { CATEGORIES_KEY_VALUE } from '../../mocks/category-field.mocks'; + +describe('DotCategoryFieldChipsComponent', () => { + let spectator: Spectator; + + const createComponent = createComponentFactory({ + component: DotCategoryFieldChipsComponent, + providers: [mockProvider(DotMessageService)] + }); + + beforeEach(() => { + spectator = createComponent({ + props: { + $max: 8, + $categories: CATEGORIES_KEY_VALUE + } + }); + + spectator.detectChanges(); + }); + + afterEach(() => { + jest.resetAllMocks(); + }); + + it('should be created', () => { + expect(spectator.component).toBeTruthy(); + }); +}); diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts index 5e88c4fe5c3f..9eb56209dec5 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts @@ -23,8 +23,12 @@ import { DotCategoryFieldKeyValueObj } from '../../models/dot-category-field.mod changeDetection: ChangeDetectionStrategy.OnPush }) export class DotCategoryFieldChipsComponent { + /** + * Represents the variable 'dotMessageService' which is of type 'DotMessageService'. + * + * @memberof DotCategoryFieldChipsComponent + */ readonly #dotMessageService = inject(DotMessageService); - /** * Represents the variable 'showAll' which is of type 'signal'. * 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 8642ef21855e..6b983c9af654 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,5 +1,5 @@ @if (store.selected().length) { -
+
} diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts index 5374f048bbb3..2c6128ec2d7f 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts @@ -1,6 +1,9 @@ import { DotCMSContentlet, DotCMSContentTypeField } from '@dotcms/dotcms-models'; -import { DotCategoryFieldCategory } from '../models/dot-category-field.models'; +import { + DotCategoryFieldCategory, + DotCategoryFieldKeyValueObj +} from '../models/dot-category-field.models'; export const CATEGORY_FIELD_VARIABLE_NAME = 'categorias'; @@ -203,3 +206,16 @@ export const CATEGORY_LIST_MOCK: DotCategoryFieldCategory[][] = [ * Represent the selected categories */ export const SELECTED_LIST_MOCK = [CATEGORY_LEVEL_1[1].inode, CATEGORY_LEVEL_1[2].inode]; + +export const CATEGORIES_KEY_VALUE: DotCategoryFieldKeyValueObj[] = [ + { + key: '0ab5e687775e4793679970e561380560', + value: 'Electrical', + path: 'Electrical' + }, + { + key: 'cb83dc32c0a198fd0ca427b3b587f4ce', + value: 'Doors & Windows', + path: 'Doors & Windows' + } +]; From a1058cd75e0936a16ac495b22f61e8e903ee3541 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Fri, 12 Jul 2024 10:29:44 -0400 Subject: [PATCH 6/9] chore: Update MAX_CHIPS constant to allow for 4 chips in dot-edit-content-category-field --- .../dot-category-field-chips.component.scss | 0 .../dot-category-field-chips.component.spec.ts | 14 +++++--------- .../dot-category-field-chips.component.ts | 1 - .../dot-edit-content-category-field.const.ts | 2 +- 4 files changed, 6 insertions(+), 11 deletions(-) delete mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.scss diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.scss deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts index 8f228e57ea6a..6a5b3a191cdb 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts @@ -16,20 +16,16 @@ describe('DotCategoryFieldChipsComponent', () => { beforeEach(() => { spectator = createComponent({ + detectChanges: false, props: { - $max: 8, - $categories: CATEGORIES_KEY_VALUE - } + max: 8, + categories: CATEGORIES_KEY_VALUE + } as unknown as DotCategoryFieldChipsComponent }); - - spectator.detectChanges(); - }); - - afterEach(() => { - jest.resetAllMocks(); }); it('should be created', () => { + spectator.detectChanges(); expect(spectator.component).toBeTruthy(); }); }); diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts index 9eb56209dec5..1baaca1d35c4 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts @@ -19,7 +19,6 @@ import { DotCategoryFieldKeyValueObj } from '../../models/dot-category-field.mod standalone: true, imports: [ButtonModule, ChipModule, TooltipModule], templateUrl: './dot-category-field-chips.component.html', - styleUrl: './dot-category-field-chips.component.scss', changeDetection: ChangeDetectionStrategy.OnPush }) export class DotCategoryFieldChipsComponent { diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts index 1165e2b74363..224b40961258 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts @@ -1,3 +1,3 @@ export const CLOSE_SIDEBAR_CSS_DELAY_MS = 300; -export const MAX_CHIPS = 10; +export const MAX_CHIPS = 4; From 63cb91e05f7deab7cea41e38984953b8fd48ed88 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Fri, 12 Jul 2024 10:36:16 -0400 Subject: [PATCH 7/9] chore: Update MAX_CHIPS constant to allow for 10 chips in dot-edit-content-category-field --- .../dot-category-field-chips.component.ts | 10 ++++------ .../dot-edit-content-category-field.component.html | 2 +- .../dot-edit-content-category-field.component.ts | 8 +------- .../dot-edit-content-category-field.const.ts | 2 +- 4 files changed, 7 insertions(+), 15 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts index 1baaca1d35c4..da96027718da 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts @@ -6,6 +6,7 @@ import { TooltipModule } from 'primeng/tooltip'; import { DotMessageService } from '@dotcms/data-access'; +import { MAX_CHIPS } from '../../dot-edit-content-category-field.const'; import { DotCategoryFieldKeyValueObj } from '../../models/dot-category-field.models'; /** @@ -39,7 +40,7 @@ export class DotCategoryFieldChipsComponent { * * @memberof DotCategoryFieldChipsComponent */ - $max = input.required({ alias: 'max' }); + $max = input(MAX_CHIPS, { alias: 'max' }); /** * Represents the variable 'categories' which is of type 'DotCategoryFieldKeyValueObj[]'. * @@ -53,14 +54,11 @@ export class DotCategoryFieldChipsComponent { */ $categoriesToShow = computed(() => { const categories = this.$categories(); - const max = this.$max(); - const showAll = this.$showAll(); - - if (showAll) { + if (this.$showAll()) { return categories; } - return categories.slice(0, max); + return categories.slice(0, this.$max()); }); /** * Represents the variable '$showAllBtn' which is of type 'computed'. 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 6b983c9af654..16fa93ebf57b 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,6 +1,6 @@ @if (store.selected().length) {
- +
} diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts index 8c80d265d25f..5bdbdb811e5c 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts @@ -22,7 +22,7 @@ import { DotDynamicDirective, DotMessagePipe } from '@dotcms/ui'; import { DotCategoryFieldChipsComponent } from './components/dot-category-field-chips/dot-category-field-chips.component'; import { DotCategoryFieldSidebarComponent } from './components/dot-category-field-sidebar/dot-category-field-sidebar.component'; -import { CLOSE_SIDEBAR_CSS_DELAY_MS, MAX_CHIPS } from './dot-edit-content-category-field.const'; +import { CLOSE_SIDEBAR_CSS_DELAY_MS } from './dot-edit-content-category-field.const'; import { CategoriesService } from './services/categories.service'; import { CategoryFieldStore } from './store/content-category-field.store'; @@ -65,12 +65,6 @@ export class DotEditContentCategoryFieldComponent implements OnInit { * Disable the button to open the sidebar */ disableSelectCategoriesButton = signal(false); - /** - * Represents the variable '$maxChips' which is of type 'signal'. - * - * @memberof DotEditContentCategoryFieldComponent - */ - $maxChips = signal(MAX_CHIPS); @ViewChild(DotDynamicDirective, { static: true }) sidebarHost!: DotDynamicDirective; diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts index 224b40961258..1165e2b74363 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts @@ -1,3 +1,3 @@ export const CLOSE_SIDEBAR_CSS_DELAY_MS = 300; -export const MAX_CHIPS = 4; +export const MAX_CHIPS = 10; From 5c9c854998cef142c8a7c47de2eae63fdfd600cf Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Fri, 12 Jul 2024 12:13:24 -0400 Subject: [PATCH 8/9] chore: add uni tests --- core-web/libs/edit-content/jest.config.ts | 1 - ...dot-category-field-chips.component.spec.ts | 76 ++++++++++++++++++- .../dot-category-field-chips.component.ts | 1 - .../mocks/category-field.mocks.ts | 28 +++++++ 4 files changed, 100 insertions(+), 6 deletions(-) diff --git a/core-web/libs/edit-content/jest.config.ts b/core-web/libs/edit-content/jest.config.ts index d9cfaa6d4e51..2728432e8776 100644 --- a/core-web/libs/edit-content/jest.config.ts +++ b/core-web/libs/edit-content/jest.config.ts @@ -4,7 +4,6 @@ export default { preset: '../../jest.preset.js', setupFilesAfterEnv: ['/src/test-setup.ts'], globals: {}, - coverageDirectory: '../../coverage/libs/edit-content', transform: { '^.+\\.(ts|mjs|js|html)$': [ 'jest-preset-angular', diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts index 6a5b3a191cdb..a454ab2c0f7b 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts @@ -1,24 +1,33 @@ -import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest'; +import { createComponentFactory, Spectator } from '@ngneat/spectator/jest'; + +import { ButtonModule, ButtonDirective } from 'primeng/button'; +import { ChipModule, Chip } from 'primeng/chip'; import { DotMessageService } from '@dotcms/data-access'; import { DotCategoryFieldChipsComponent } from './dot-category-field-chips.component'; -import { CATEGORIES_KEY_VALUE } from '../../mocks/category-field.mocks'; +import { MAX_CHIPS } from '../../dot-edit-content-category-field.const'; +import { CATEGORIES_KEY_VALUE, CATEGORY_MESSAGE_MOCK } from '../../mocks/category-field.mocks'; describe('DotCategoryFieldChipsComponent', () => { let spectator: Spectator; const createComponent = createComponentFactory({ component: DotCategoryFieldChipsComponent, - providers: [mockProvider(DotMessageService)] + providers: [ + { + provide: DotMessageService, + useValue: CATEGORY_MESSAGE_MOCK + } + ], + imports: [ChipModule, ButtonModule] }); beforeEach(() => { spectator = createComponent({ detectChanges: false, props: { - max: 8, categories: CATEGORIES_KEY_VALUE } as unknown as DotCategoryFieldChipsComponent }); @@ -28,4 +37,63 @@ describe('DotCategoryFieldChipsComponent', () => { spectator.detectChanges(); expect(spectator.component).toBeTruthy(); }); + + it('should the max input be equal to constant by default', () => { + spectator.detectChanges(); + expect(spectator.component.$max()).toBe(MAX_CHIPS); + }); + + it('should be show a max of categories', () => { + spectator.setInput('max', 2); + spectator.detectChanges(); + const chips = spectator.queryAll(Chip); + expect(chips.length).toBe(2); + }); + + it('should be show all categories', () => { + spectator.setInput('max', 2); + spectator.component.$showAll.set(true); + spectator.detectChanges(); + const chips = spectator.queryAll(Chip); + expect(chips.length).toBe(CATEGORIES_KEY_VALUE.length); + }); + + it('should be show the more btn with the proper label', () => { + spectator.setInput('max', 2); + spectator.detectChanges(); + const showBtn = spectator.query(ButtonDirective); + const size = spectator.component.$categories().length - spectator.component.$max(); + expect(showBtn.label).toBe(`${size} More`); + }); + + it('should be show the less btn with the proper label', () => { + spectator.setInput('max', 2); + spectator.component.$showAll.set(true); + spectator.detectChanges(); + const showBtn = spectator.query(ButtonDirective); + expect(showBtn.label).toBe(`Less`); + }); + + it('should not show a btn and the label be null', () => { + spectator.setInput('max', CATEGORIES_KEY_VALUE.length + 1); + spectator.detectChanges(); + const showBtn = spectator.query(ButtonDirective); + const label = spectator.component.$btnLabel(); + expect(showBtn).toBeNull(); + expect(label).toBeNull(); + }); + + describe('toogleShowAll', () => { + it('should set showAll to true', () => { + spectator.component.$showAll.set(false); + spectator.component.toogleShowAll(); + expect(spectator.component.$showAll()).toBe(true); + }); + + it('should set showAll to false', () => { + spectator.component.$showAll.set(true); + spectator.component.toogleShowAll(); + expect(spectator.component.$showAll()).toBe(false); + }); + }); }); diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts index da96027718da..a1dbc3611338 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts @@ -96,7 +96,6 @@ export class DotCategoryFieldChipsComponent { return null; }); - /** * Method to toogle the show all categories. * diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts index 2c6128ec2d7f..c1d9b67f6aae 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts @@ -1,4 +1,5 @@ import { DotCMSContentlet, DotCMSContentTypeField } from '@dotcms/dotcms-models'; +import { MockDotMessageService } from '@dotcms/utils-testing'; import { DotCategoryFieldCategory, @@ -217,5 +218,32 @@ export const CATEGORIES_KEY_VALUE: DotCategoryFieldKeyValueObj[] = [ key: 'cb83dc32c0a198fd0ca427b3b587f4ce', value: 'Doors & Windows', path: 'Doors & Windows' + }, + { + key: '1f208488057007cedda0e0b5d52ee3b3', + value: 'Cleaning Supplies', + path: 'Cleaning Supplies' + }, + { + key: 'd2fb8e67c390e3b84cd613fa15aad5d4', + value: 'Concrete & Cement', + path: 'Concrete & Cement' + }, + { + key: '3a3effac9f26593810c8687e692817a6', + value: 'Flooring', + path: 'Flooring' + }, + { + key: '977ba2c4e2af65e303c748ec39f0f1ca', + value: 'Garage Organization', + path: 'Garage Organization' } ]; + +const MESSAGES_MOCK = { + 'edit.content.category-field.list.show.less': 'Less', + 'edit.content.category-field.list.show.more': '{0} More' +}; + +export const CATEGORY_MESSAGE_MOCK = new MockDotMessageService(MESSAGES_MOCK); From 2b38a824afd1d2eea62e4d595d5d2222b47bc116 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Fri, 12 Jul 2024 12:20:32 -0400 Subject: [PATCH 9/9] chore: use BEM convention --- .../dot-edit-content-category-field.component.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss index 16d1d0759b95..64d5a700a738 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.scss @@ -5,13 +5,13 @@ border-radius: 0 0 $border-radius-md $border-radius-md; } - &.dot-category-field__container--has-categories dot-category-field-chips { + &.dot-category-field__container--has-categories .dot-category-field__categories { border-bottom: none; padding: $spacing-1; } } -dot-category-field-chips, +.dot-category-field__categories, .dot-category-field__select { border: $field-border-size solid $color-palette-gray-400; display: flex; @@ -19,7 +19,7 @@ dot-category-field-chips, align-items: center; } -dot-category-field-chips { +.dot-category-field__categories { gap: $spacing-1; border-radius: $border-radius-md $border-radius-md 0 0; }