-
Notifications
You must be signed in to change notification settings - Fork 467
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(editor-content): Limit the amount categories (#29208)
### Parent Issue #29183 ### Proposed Changes * Create a new component to handle the category list as chips. * Add the necessary logic to display a btn with a maximum number of chips. ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable) ### Screenshots https://github.com/user-attachments/assets/c2f20ec9-c420-4336-8cf4-8f01c6af55b4
- Loading branch information
Showing
10 changed files
with
278 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 17 additions & 0 deletions
17
...ategory-field/components/dot-category-field-chips/dot-category-field-chips.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <div class="flex gap-3 align-items-center flex-wrap" data-testId="category-list"> | ||
| @for (category of $categoriesToShow(); track category.key) { | ||
| <p-chip | ||
| [pTooltip]="category.value" | ||
| [removable]="true" | ||
| [label]="category.value" | ||
| tooltipPosition="top" | ||
| styleClass="p-chip-sm" /> | ||
| } @if ($showAllBtn()) { | ||
| <button | ||
| (click)="toogleShowAll()" | ||
| [label]="$btnLabel()" | ||
| class="p-button-sm p-button-text p-button-secondary" | ||
| data-testId="show-btn" | ||
| pButton></button> | ||
| } | ||
| </div> |
99 changes: 99 additions & 0 deletions
99
...gory-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| 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 { 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<DotCategoryFieldChipsComponent>; | ||
|
|
||
| const createComponent = createComponentFactory({ | ||
| component: DotCategoryFieldChipsComponent, | ||
| providers: [ | ||
| { | ||
| provide: DotMessageService, | ||
| useValue: CATEGORY_MESSAGE_MOCK | ||
| } | ||
| ], | ||
| imports: [ChipModule, ButtonModule] | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| spectator = createComponent({ | ||
| detectChanges: false, | ||
| props: { | ||
| categories: CATEGORIES_KEY_VALUE | ||
| } as unknown as DotCategoryFieldChipsComponent | ||
| }); | ||
| }); | ||
|
|
||
| it('should be created', () => { | ||
| 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); | ||
| }); | ||
| }); | ||
| }); |
107 changes: 107 additions & 0 deletions
107
...-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 { MAX_CHIPS } from '../../dot-edit-content-category-field.const'; | ||
| 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', | ||
| 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<boolean>'. | ||
| * | ||
| * @memberof DotCategoryFieldChipsComponent | ||
| */ | ||
| $showAll = signal(false); | ||
| /** | ||
| * Represents the variable 'max' which is of type 'number'. | ||
| * | ||
| * @memberof DotCategoryFieldChipsComponent | ||
| */ | ||
| $max = input<number>(MAX_CHIPS, { alias: 'max' }); | ||
| /** | ||
| * Represents the variable 'categories' which is of type 'DotCategoryFieldKeyValueObj[]'. | ||
| * | ||
| * @memberof DotCategoryFieldChipsComponent | ||
| */ | ||
| $categories = input.required<DotCategoryFieldKeyValueObj[]>({ alias: 'categories' }); | ||
| /** | ||
| * Represents the variable 'label' which is of type 'string'. | ||
| * | ||
| * @memberof DotCategoryFieldChipsComponent | ||
| */ | ||
| $categoriesToShow = computed(() => { | ||
| const categories = this.$categories(); | ||
| if (this.$showAll()) { | ||
| return categories; | ||
| } | ||
|
|
||
| return categories.slice(0, this.$max()); | ||
| }); | ||
| /** | ||
| * Represents the variable '$showAllBtn' which is of type 'computed<boolean>'. | ||
| * | ||
| * @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<string>'. | ||
| * | ||
| * @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); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 3 additions & 10 deletions
13
...lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
...t/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.const.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,3 @@ | ||
| export const CLOSE_SIDEBAR_CSS_DELAY_MS = 300; | ||
|
|
||
| export const MAX_CHIPS = 10; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters