From 517e290802e7e2088c19c38bcfe6af0c4f2a7e8e Mon Sep 17 00:00:00 2001 From: Humberto Morera Date: Tue, 27 Aug 2024 11:44:47 -0500 Subject: [PATCH 1/7] initial progress to a modal --- ...ategory-field-category-list.component.scss | 2 +- ...-category-field-category-list.component.ts | 2 +- .../dot-category-field-sidebar.component.html | 35 +++++++------ .../dot-category-field-sidebar.component.scss | 21 ++++++-- .../dot-category-field-sidebar.component.ts | 19 +++---- ...edit-content-category-field.component.html | 4 +- ...t-edit-content-category-field.component.ts | 3 +- .../content-category-field.store.spec.ts | 2 +- .../store/content-category-field.store.ts | 51 +++++++++++++++++-- 9 files changed, 94 insertions(+), 45 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.scss index 2b99e3217102..a206cc3a8faf 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.scss +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.scss @@ -33,7 +33,7 @@ } .category-list__category-column { - flex: 0 0 30%; + flex: 0 0 38%; border-right: 1px solid $color-palette-gray-400; overflow-y: auto; height: 100%; diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.ts index 66e44429b111..d7de911dd131 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.ts @@ -33,7 +33,7 @@ import { } from '../../models/dot-category-field.models'; import { DotCategoryFieldListSkeletonComponent } from '../dot-category-field-list-skeleton/dot-category-field-list-skeleton.component'; -export const MINIMUM_CATEGORY_COLUMNS = 4; +export const MINIMUM_CATEGORY_COLUMNS = 3; const MINIMUM_CATEGORY_WITHOUT_SCROLLING = 3; 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 25f90123198d..94b491b00c2b 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 @@ -1,20 +1,14 @@ - + data-testId="dialog" + [draggable]="false" + [resizable]="false" + [maximizable]="false" + [modal]="true" + styleClass="category-field__dialog">
-
{{ 'edit.content.category-field.sidebar.header.select-categories' | dm }}
@@ -27,23 +21,20 @@
@if (store.mode() === 'list') { } @else {
- + + + + + 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 bd2516e0db43..6130ac6fff75 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 @@ -71,10 +71,23 @@ scrollbar-gutter: auto; } -:host ::ng-deep .p-sidebar-content { - padding: 0; - height: 100%; - overflow: hidden; +:host ::ng-deep { + .p-sidebar-content { + padding: 0; + height: 100%; + overflow: hidden; + } + + .category-field__dialog.p-dialog { + min-height: 90%; + height: 100%; + width: 75vw; + + .p-dialog-content { + padding: 0; + height: 100%; + } + } } .category-field__empty-state { 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 b396c0b3ce18..cae38c4b90e4 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,4 +1,3 @@ -import { animate, state, style, transition, trigger } from '@angular/animations'; import { NgClass } from '@angular/common'; import { ChangeDetectionStrategy, @@ -50,18 +49,7 @@ import { DotCategoryFieldSelectedComponent } from '../dot-category-field-selecte ], templateUrl: './dot-category-field-sidebar.component.html', styleUrl: './dot-category-field-sidebar.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - animations: [ - trigger('fadeAnimation', [ - state( - 'void', - style({ - opacity: 0 - }) - ), - transition(':enter, :leave', [animate('50ms ease-in-out')]) - ]) - ] + changeDetection: ChangeDetectionStrategy.OnPush }) export class DotCategoryFieldSidebarComponent implements OnInit, OnDestroy { /** @@ -95,4 +83,9 @@ export class DotCategoryFieldSidebarComponent implements OnInit, OnDestroy { ngOnDestroy(): void { this.store.clean(); } + + confirmCategories(): void { + this.store.addConfirmedCategories(); + this.closedSidebar.emit(); + } } 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 94bf4ae7712e..f58a9990907d 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,8 +1,8 @@ @if (store.selected().length) { + [categories]="store.confirmedCategories()" + (remove)="store.removeConfirmedCategories($event)" /> }
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 96df742a848e..b114cbcd749b 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 @@ -100,7 +100,7 @@ export class DotEditContentCategoryFieldComponent implements OnInit { }); effect( () => { - const categoryValues = this.store.selectedCategoriesValues(); + const categoryValues = this.store.confirmedCategoriesValues(); if (this.categoryFieldControl) { this.categoryFieldControl.setValue(categoryValues); @@ -117,6 +117,7 @@ export class DotEditContentCategoryFieldComponent implements OnInit { * @memberof DotEditContentCategoryFieldComponent */ openCategoriesSidebar(): void { + this.store.setSelectedCategories(); this.$showCategoriesSidebar.set(true); } /** diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.spec.ts index e50fca87e255..d17d902ffbcc 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.spec.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.spec.ts @@ -129,7 +129,7 @@ describe('CategoryFieldStore', () => { it('should show item after load the values', () => { const expectedSelectedValues = SELECTED_LIST_MOCK; store.load({ field: CATEGORY_FIELD_MOCK, contentlet: CATEGORY_FIELD_CONTENTLET_MOCK }); - expect(store.selectedCategoriesValues().sort()).toEqual(expectedSelectedValues.sort()); + expect(store.confirmedCategoriesValues().sort()).toEqual(expectedSelectedValues.sort()); expect(store.categoryList()).toEqual(EMPTY_ARRAY); }); 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 cb41e3ef7705..e29146826177 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 @@ -36,6 +36,7 @@ import { export type CategoryFieldState = { field: DotCMSContentTypeField; selected: DotCategoryFieldKeyValueObj[]; // <- source of selected + confirmedCategories: DotCategoryFieldKeyValueObj[]; // <- source of confirmed categories in the modal. categories: DotCategory[][]; keyParentPath: string[]; // Delete when we have the endpoint for this state: ComponentStatus; @@ -48,6 +49,7 @@ export type CategoryFieldState = { export const initialState: CategoryFieldState = { field: {} as DotCMSContentTypeField, selected: [], + confirmedCategories: [], categories: [], keyParentPath: [], state: ComponentStatus.INIT, @@ -65,9 +67,11 @@ export const CategoryFieldStore = signalStore( withState(initialState), withComputed((store) => ({ /** - * Current selected items (key) from the contentlet + * Current confirmed Categories items (key) from the contentlet */ - selectedCategoriesValues: computed(() => store.selected().map((item) => item.key)), + confirmedCategoriesValues: computed(() => + store.confirmedCategories().map((item) => item.key) + ), /** * Categories for render with added properties @@ -159,12 +163,13 @@ export const CategoryFieldStore = signalStore( return categoryService.getSelectedHierarchy(selectedKeys).pipe( tapResponse({ next: (categoryWithParentPath) => { - const selected = + const confirmedCategories = transformToSelectedObject(categoryWithParentPath); patchState(store, { field, - selected, + selected: confirmedCategories, + confirmedCategories, state: ComponentStatus.LOADED }); }, @@ -239,6 +244,44 @@ export const CategoryFieldStore = signalStore( }); }, + /** + * Removes the confirmed categories with the given key(s). + * + * @param {string | string[]} key - The key(s) of the item(s) to be removed. + * @return {void} + */ + removeConfirmedCategories(key: string | string[]): void { + const newConfirmed = removeItemByKey(store.confirmedCategories(), key); + + patchState(store, { + confirmedCategories: newConfirmed + }); + }, + + /** + * Adds the selected categories to the confirmed categories in the store. + * This method is used when the user confirms the selection of categories in the Dialog. + * + * @return {void} + */ + addConfirmedCategories(): void { + patchState(store, { + confirmedCategories: store.selected() + }); + }, + + /** + * Sets the selected categories in the store to the confirmed categories. + * This method is used when the user open the Dialog of categories. + * + * @return {void} + */ + setSelectedCategories(): void { + patchState(store, { + selected: store.confirmedCategories() + }); + }, + /** * Clears all categories from the store, effectively resetting state related to categories and their parent paths. */ From 2072dc3e5c1f500f1967e509c414533777418fd2 Mon Sep 17 00:00:00 2001 From: Humberto Morera Date: Tue, 27 Aug 2024 15:21:13 -0500 Subject: [PATCH 2/7] rename sidebar to dialog --- .../dot-category-field-dialog.component.html} | 12 ++--- .../dot-category-field-dialog.component.scss} | 6 --- ...t-category-field-dialog.component.spec.ts} | 20 ++++----- .../dot-category-field-dialog.component.ts} | 28 ++++++------ ...edit-content-category-field.component.html | 18 ++++---- ...t-content-category-field.component.spec.ts | 45 +++++++++---------- ...t-edit-content-category-field.component.ts | 20 ++++----- .../WEB-INF/messages/Language.properties | 6 +-- 8 files changed, 72 insertions(+), 83 deletions(-) rename core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/{dot-category-field-sidebar/dot-category-field-sidebar.component.html => dot-category-field-dialog/dot-category-field-dialog.component.html} (89%) rename core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/{dot-category-field-sidebar/dot-category-field-sidebar.component.scss => dot-category-field-dialog/dot-category-field-dialog.component.scss} (94%) rename core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/{dot-category-field-sidebar/dot-category-field-sidebar.component.spec.ts => dot-category-field-dialog/dot-category-field-dialog.component.spec.ts} (79%) rename core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/{dot-category-field-sidebar/dot-category-field-sidebar.component.ts => dot-category-field-dialog/dot-category-field-dialog.component.ts} (72%) 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-dialog/dot-category-field-dialog.component.html similarity index 89% rename from core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.html rename to core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.html index 94b491b00c2b..55b008805179 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-dialog/dot-category-field-dialog.component.html @@ -1,5 +1,5 @@
-
- {{ 'edit.content.category-field.sidebar.header.select-categories' | dm }} +
+ {{ 'edit.content.category-field.dialog.header.select-categories' | dm }}
@@ -59,20 +59,20 @@ class="p-button p-button-link" data-testId="clear_all-btn" pButton> - {{ 'edit.content.category-field.sidebar.button.clear-all' | dm }} + {{ 'edit.content.category-field.dialog.button.clear-all' | dm }}
} @else {
-

{{ 'edit.content.category-field.sidebar.empty-state' | dm }}

+

{{ 'edit.content.category-field.dialog.empty-state' | 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-dialog/dot-category-field-dialog.component.scss similarity index 94% rename from core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.scss rename to core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.scss index 6130ac6fff75..30056f0db608 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-dialog/dot-category-field-dialog.component.scss @@ -72,12 +72,6 @@ } :host ::ng-deep { - .p-sidebar-content { - padding: 0; - height: 100%; - overflow: hidden; - } - .category-field__dialog.p-dialog { min-height: 90%; height: 100%; 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.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.spec.ts similarity index 79% rename from core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.spec.ts rename to core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.spec.ts index f63b5d36ce19..31c987c6313a 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.spec.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.spec.ts @@ -2,11 +2,11 @@ import { expect, it } from '@jest/globals'; import { byTestId, createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest'; import { of } from 'rxjs'; -import { Sidebar } from 'primeng/sidebar'; +import { Dialog } from 'primeng/dialog'; import { DotHttpErrorManagerService, DotMessageService } from '@dotcms/data-access'; -import { DotCategoryFieldSidebarComponent } from './dot-category-field-sidebar.component'; +import { DotCategoryFieldDialogComponent } from './dot-category-field-dialog.component'; import { CATEGORY_LIST_MOCK } from '../../mocks/category-field.mocks'; import { CategoriesService } from '../../services/categories.service'; @@ -14,12 +14,12 @@ import { CategoryFieldStore } from '../../store/content-category-field.store'; import { DotCategoryFieldCategoryListComponent } from '../dot-category-field-category-list/dot-category-field-category-list.component'; import { DotCategoryFieldSelectedComponent } from '../dot-category-field-selected/dot-category-field-selected.component'; -describe('DotEditContentCategoryFieldSidebarComponent', () => { - let spectator: Spectator; +describe('DotCategoryFieldDialogComponent', () => { + let spectator: Spectator; let store: InstanceType; const createComponent = createComponentFactory({ - component: DotCategoryFieldSidebarComponent, + component: DotCategoryFieldDialogComponent, providers: [mockProvider(DotMessageService), CategoryFieldStore] }); @@ -47,7 +47,7 @@ describe('DotEditContentCategoryFieldSidebarComponent', () => { it('should have `visible` property set to `true` by default', () => { expect(spectator.component.visible).toBe(true); - expect(spectator.query(Sidebar)).not.toBeNull(); + expect(spectator.query(Dialog)).not.toBeNull(); }); it('should render the selected categories list when there are selected categories', () => { @@ -64,15 +64,15 @@ describe('DotEditContentCategoryFieldSidebarComponent', () => { expect(spectator.query(byTestId('category-field__empty-state'))).not.toBeNull(); }); - it('should emit event to close sidebar when "back" button is clicked', () => { - const closedSidebarSpy = jest.spyOn(spectator.component.closedSidebar, 'emit'); + it('should emit event to close dialog when "back" button is clicked', () => { + const closedDialogSpy = jest.spyOn(spectator.component.closedDialog, 'emit'); const cancelBtn = spectator.query(byTestId('back-btn')); expect(cancelBtn).not.toBeNull(); - expect(closedSidebarSpy).not.toHaveBeenCalled(); + expect(closedDialogSpy).not.toHaveBeenCalled(); spectator.click(cancelBtn); - expect(closedSidebarSpy).toHaveBeenCalled(); + expect(closedDialogSpy).toHaveBeenCalled(); }); it('should render the CategoryFieldCategoryList component', () => { 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-dialog/dot-category-field-dialog.component.ts similarity index 72% rename from core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.ts rename to core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts index cae38c4b90e4..4fecfde466e4 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-dialog/dot-category-field-dialog.component.ts @@ -14,7 +14,6 @@ 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'; @@ -25,21 +24,20 @@ import { DotCategoryFieldSearchListComponent } from '../dot-category-field-searc import { DotCategoryFieldSelectedComponent } from '../dot-category-field-selected/dot-category-field-selected.component'; /** - * The DotCategoryFieldSidebarComponent is a sidebar panel that allows editing of content category field. + * The DotCategoryFieldDialogComponent is a dialog panel that allows editing of content category field. * It provides interfaces for item selection and click handling, and communicates with a store * to fetch and update the categories' data. * - * @property {boolean} visible - Indicates the visibility of the sidebar. Default is `true`. - * @property {EventEmitter} closedSidebar - Event emitted when the sidebar is closed. + * @property {boolean} visible - Indicates the visibility of the dialog. Default is `true`. + * @property {EventEmitter} closedDialog - Event emitted when the dialog is closed. */ @Component({ - selector: 'dot-category-field-sidebar', + selector: 'dot-category-field-dialog', standalone: true, imports: [ DialogModule, ButtonModule, DotMessagePipe, - SidebarModule, DotCategoryFieldCategoryListComponent, InputTextModule, DotCategoryFieldSearchComponent, @@ -47,27 +45,27 @@ import { DotCategoryFieldSelectedComponent } from '../dot-category-field-selecte DotCategoryFieldSelectedComponent, NgClass ], - templateUrl: './dot-category-field-sidebar.component.html', - styleUrl: './dot-category-field-sidebar.component.scss', + templateUrl: './dot-category-field-dialog.component.html', + styleUrl: './dot-category-field-dialog.component.scss', changeDetection: ChangeDetectionStrategy.OnPush }) -export class DotCategoryFieldSidebarComponent implements OnInit, OnDestroy { +export class DotCategoryFieldDialogComponent implements OnInit, OnDestroy { /** - * Indicates the visibility of the sidebar. + * Indicates the visibility of the dialog. * - * @memberof DotCategoryFieldSidebarComponent + * @memberof DotCategoryFieldDialogComponent */ @Input() visible = false; /** - * Output that emit if the sidebar is closed + * Output that emit if the Dialog is closed */ - @Output() closedSidebar = new EventEmitter(); + @Output() closedDialog = new EventEmitter(); /** * Store based on the `CategoryFieldStore`. * - * @memberof DotCategoryFieldSidebarComponent + * @memberof DotCategoryFieldDialogComponent */ readonly store = inject(CategoryFieldStore); @@ -86,6 +84,6 @@ export class DotCategoryFieldSidebarComponent implements OnInit, OnDestroy { confirmCategories(): void { this.store.addConfirmedCategories(); - this.closedSidebar.emit(); + this.closedDialog.emit(); } } 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 f58a9990907d..f96d5746fea3 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 @@ -8,19 +8,19 @@
-@if ($showCategoriesSidebar()) { - @defer (when $showCategoriesSidebar()) { - +@if ($showCategoriesDialog()) { + @defer (when $showCategoriesDialog()) { + } } 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 index 529e8a7e869b..a47f4ad65148 100644 --- 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 @@ -9,7 +9,7 @@ import { ControlContainer, FormControl, FormGroup } from '@angular/forms'; import { DotHttpErrorManagerService, DotMessageService } from '@dotcms/data-access'; import { DotCMSContentlet } from '@dotcms/dotcms-models'; -import { DotCategoryFieldSidebarComponent } from './components/dot-category-field-sidebar/dot-category-field-sidebar.component'; +import { DotCategoryFieldDialogComponent } from './components/dot-category-field-dialog/dot-category-field-dialog.component'; import { DotEditContentCategoryFieldComponent } from './dot-edit-content-category-field.component'; import { CATEGORY_FIELD_CONTENTLET_MOCK, @@ -33,7 +33,7 @@ describe('DotEditContentCategoryFieldComponent', () => { const createComponent = createComponentFactory({ component: DotEditContentCategoryFieldComponent, - imports: [MockComponent(DotCategoryFieldSidebarComponent)], + imports: [MockComponent(DotCategoryFieldDialogComponent)], componentViewProviders: [ { provide: ControlContainer, @@ -71,11 +71,11 @@ describe('DotEditContentCategoryFieldComponent', () => { }); it('should render a button for selecting categories', () => { - expect(spectator.query(byTestId('show-sidebar-btn'))).not.toBeNull(); + expect(spectator.query(byTestId('show-dialog-btn'))).not.toBeNull(); }); it('should the button be type=button', () => { - const selectBtn = spectator.query(byTestId('show-sidebar-btn')); + const selectBtn = spectator.query(byTestId('show-dialog-btn')); expect(selectBtn.type).toBe('button'); }); @@ -130,21 +130,18 @@ describe('DotEditContentCategoryFieldComponent', () => { spectator.detectChanges(); }); - it('should invoke `showCategoriesSidebar` method when the select button is clicked', () => { - const selectBtn = spectator.query(byTestId('show-sidebar-btn')); - const showCategoriesSidebarSpy = jest.spyOn( - spectator.component, - 'openCategoriesSidebar' - ); + it('should invoke `showCategoriesDialog` method when the select button is clicked', () => { + const selectBtn = spectator.query(byTestId('show-dialog-btn')); + const showCategoriesDialogSpy = jest.spyOn(spectator.component, 'openCategoriesDialog'); expect(selectBtn).not.toBeNull(); spectator.click(selectBtn); - expect(showCategoriesSidebarSpy).toHaveBeenCalled(); + expect(showCategoriesDialogSpy).toHaveBeenCalled(); }); - it('should disable the `Select` button after `openCategoriesSidebar` method is invoked', () => { - const selectBtn = spectator.query(byTestId('show-sidebar-btn')) as HTMLButtonElement; + it('should disable the `Select` button after `openCategoriesDialog` method is invoked', () => { + const selectBtn = spectator.query(byTestId('show-dialog-btn')) as HTMLButtonElement; expect(selectBtn).not.toBeNull(); spectator.click(selectBtn); @@ -154,34 +151,34 @@ describe('DotEditContentCategoryFieldComponent', () => { expect(selectBtn.disabled).toBe(true); }); - it('should create a DotEditContentCategoryFieldSidebarComponent instance when the `Select` button is clicked', async () => { - const selectBtn = spectator.query(byTestId('show-sidebar-btn')); + it('should create a DotCategoryFieldDialogComponent instance when the `Select` button is clicked', async () => { + const selectBtn = spectator.query(byTestId('show-dialog-btn')); expect(selectBtn).not.toBeNull(); - expect(spectator.query(DotCategoryFieldSidebarComponent)).toBeNull(); + expect(spectator.query(DotCategoryFieldDialogComponent)).toBeNull(); spectator.click(selectBtn); await spectator.fixture.whenStable(); - expect(spectator.query(DotCategoryFieldSidebarComponent)).not.toBeNull(); + expect(spectator.query(DotCategoryFieldDialogComponent)).not.toBeNull(); }); - it('should remove DotEditContentCategoryFieldSidebarComponent when `closedSidebar` emit', fakeAsync(async () => { - const selectBtn = spectator.query(byTestId('show-sidebar-btn')) as HTMLButtonElement; + it('should remove DotCategoryFieldDialogComponent when `closedDialog` emit', fakeAsync(async () => { + const selectBtn = spectator.query(byTestId('show-dialog-btn')) as HTMLButtonElement; expect(selectBtn).not.toBeNull(); spectator.click(selectBtn); await spectator.fixture.whenStable(); - const sidebarComponentRef = spectator.query(DotCategoryFieldSidebarComponent); - expect(sidebarComponentRef).not.toBeNull(); + const dialogComponentRef = spectator.query(DotCategoryFieldDialogComponent); + expect(dialogComponentRef).not.toBeNull(); - sidebarComponentRef.closedSidebar.emit(); + dialogComponentRef.closedDialog.emit(); spectator.detectComponentChanges(); - // Check if the sidebar component is removed - expect(spectator.query(DotCategoryFieldSidebarComponent)).toBeNull(); + // Check if the dialog component is removed + expect(spectator.query(DotCategoryFieldDialogComponent)).toBeNull(); // Check if the button is enabled again expect(selectBtn.disabled).toBe(false); 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 b114cbcd749b..3c0594f2edc3 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 @@ -18,7 +18,7 @@ import { DotCMSContentlet, DotCMSContentTypeField } from '@dotcms/dotcms-models' import { 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 { DotCategoryFieldDialogComponent } from './components/dot-category-field-dialog/dot-category-field-dialog.component'; import { CategoriesService } from './services/categories.service'; import { CategoryFieldStore } from './store/content-category-field.store'; @@ -39,7 +39,7 @@ import { CategoryFieldStore } from './store/content-category-field.store'; NgClass, DotMessagePipe, DotCategoryFieldChipsComponent, - DotCategoryFieldSidebarComponent + DotCategoryFieldDialogComponent ], templateUrl: './dot-edit-content-category-field.component.html', styleUrl: './dot-edit-content-category-field.component.scss', @@ -61,9 +61,9 @@ export class DotEditContentCategoryFieldComponent implements OnInit { readonly #form = inject(ControlContainer).control as FormGroup; readonly #injector = inject(Injector); /** - * Disable the button to open the sidebar + * Disable the button to open the dialog */ - $showCategoriesSidebar = signal(false); + $showCategoriesDialog = signal(false); /** * The `field` variable is of type `DotCMSContentTypeField` and is a required input. * @description The variable represents a field of a DotCMS content type and is a required input. @@ -112,20 +112,20 @@ export class DotEditContentCategoryFieldComponent implements OnInit { ); } /** - * Open the categories sidebar. + * Open the categories dialog. * * @memberof DotEditContentCategoryFieldComponent */ - openCategoriesSidebar(): void { + openCategoriesDialog(): void { this.store.setSelectedCategories(); - this.$showCategoriesSidebar.set(true); + this.$showCategoriesDialog.set(true); } /** - * Close the categories' sidebar. + * Close the categories dialog. * * @memberof DotEditContentCategoryFieldComponent */ - closeCategoriesSidebar() { - this.$showCategoriesSidebar.set(false); + closeCategoriesDialog() { + this.$showCategoriesDialog.set(false); } } diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties index 98cae197cf4b..1ed724079866 100644 --- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties +++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties @@ -5751,8 +5751,8 @@ 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.sidebar.header.select-categories=Select categories -edit.content.category-field.sidebar.button.clear-all=Clear all +edit.content.category-field.dialog.header.select-categories=Select categories +edit.content.category-field.dialog.button.clear-all=Clear all edit.content.category-field.list.show.more=+ {0} More edit.content.category-field.list.show.less=Less @@ -5765,6 +5765,6 @@ edit.content.category-field.search.not-found.legend=Your search does not match a edit.content.category-field.search.error.title=Something went wrong edit.content.category-field.search.error.legend=Oops! Something went wrong. Please try again later. edit.content.category-field.category.root-name=Root -edit.content.category-field.sidebar.empty-state=Click on the checkbox at the left to add categories. +edit.content.category-field.dialog.empty-state=Click on the checkbox at the left to add categories. edit.content.category-field.search.empty.title=There are no categories yet edit.content.category-field.search.empty.legend=To create a new category, navigate to: Content model > Categories > Click the "+" Plus Button > Add. From ae31fc41b38d33c53d6c073e06130e094a7184c1 Mon Sep 17 00:00:00 2001 From: Humberto Morera Date: Tue, 27 Aug 2024 15:41:01 -0500 Subject: [PATCH 3/7] fixes --- .../dot-edit-content-category-field.component.html | 2 +- .../dot-edit-content-category-field.component.ts | 8 ++++---- .../store/content-category-field.store.ts | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) 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 f96d5746fea3..76308d6bf99a 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,4 +1,4 @@ -@if (store.selected().length) { +@if (store.confirmedCategories().length) { (); /** - * The `$hasSelectedCategories` variable is a computed property that returns a boolean value. + * The `$hasConfirmedCategories` variable is a computed property that returns a boolean value. * * @returns {Boolean} - True if there are selected categories, false otherwise. */ - $hasSelectedCategories = computed(() => !!this.store.hasSelectedCategories()); + $hasConfirmedCategories = computed(() => !!this.store.hasConfirmedCategories()); /** * Getter to retrieve the category field control. * 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 e29146826177..2d2e7b1bf3d8 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 @@ -81,9 +81,9 @@ export const CategoryFieldStore = signalStore( ), /** - * Indicates whether any categories are selected. + * Indicates whether any categories are confirmed. */ - hasSelectedCategories: computed(() => !!store.selected().length), + hasConfirmedCategories: computed(() => !!store.confirmedCategories().length), /** * Get the root category inode. From a90146860cb76ad1e28bced03c3620faae9288ed Mon Sep 17 00:00:00 2001 From: Humberto Morera Date: Tue, 27 Aug 2024 17:00:43 -0500 Subject: [PATCH 4/7] fix tests --- ...ot-category-field-dialog.component.spec.ts | 37 ++++++++++++++++--- ...t-content-category-field.component.spec.ts | 3 +- .../content-category-field.store.spec.ts | 29 +++++++++++++++ 3 files changed, 63 insertions(+), 6 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.spec.ts index 31c987c6313a..62e504bc8735 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.spec.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.spec.ts @@ -64,15 +64,42 @@ describe('DotCategoryFieldDialogComponent', () => { expect(spectator.query(byTestId('category-field__empty-state'))).not.toBeNull(); }); - it('should emit event to close dialog when "back" button is clicked', () => { + it('should have the correct configuration for the dialog.', () => { const closedDialogSpy = jest.spyOn(spectator.component.closedDialog, 'emit'); - const cancelBtn = spectator.query(byTestId('back-btn')); - expect(cancelBtn).not.toBeNull(); + const dialog = spectator.query(Dialog); - expect(closedDialogSpy).not.toHaveBeenCalled(); + expect(dialog.draggable).toBe(false); + expect(dialog.resizable).toBe(false); + expect(dialog.modal).toBe(true); + expect(dialog.modal).toBe(true); - spectator.click(cancelBtn); + dialog.onHide.emit(); + + expect(closedDialogSpy).toHaveBeenCalled(); + }); + + it('should close the dialog when the close button is clicked', () => { + const closedDialogSpy = jest.spyOn(spectator.component.closedDialog, 'emit'); + spectator.click(byTestId('dialog-cancel')); + + expect(closedDialogSpy).toHaveBeenCalled(); + }); + + it('should save the changes and apply the categories when the apply button is clicked', () => { + const closedDialogSpy = jest.spyOn(spectator.component.closedDialog, 'emit'); + const addConfirmedCategoriesSky = jest.spyOn(store, 'addConfirmedCategories'); + const categories = { key: '1234', value: 'test' }; + store.addSelected({ key: '1234', value: 'test' }); + spectator.detectChanges(); + + expect(store.selected()).toEqual([categories]); + expect(store.confirmedCategories()).toEqual([]); + + spectator.click(byTestId('dialog-apply')); + + expect(store.confirmedCategories()).toEqual([categories]); expect(closedDialogSpy).toHaveBeenCalled(); + expect(addConfirmedCategoriesSky).toHaveBeenCalled(); }); it('should render the CategoryFieldCategoryList component', () => { 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 index a47f4ad65148..8783707f3d48 100644 --- 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 @@ -194,6 +194,7 @@ describe('DotEditContentCategoryFieldComponent', () => { key: '1234', value: 'test' }); + store.addConfirmedCategories(); spectator.flushEffects(); const categoryValue = spectator.component.categoryFieldControl.value; @@ -202,7 +203,7 @@ describe('DotEditContentCategoryFieldComponent', () => { }); it('should set categoryFieldControl value when removing a category', () => { - store.removeSelected(SELECTED_LIST_MOCK[0]); + store.removeConfirmedCategories(SELECTED_LIST_MOCK[0]); spectator.flushEffects(); diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.spec.ts index d17d902ffbcc..d5bf4bb23388 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.spec.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.spec.ts @@ -52,6 +52,7 @@ describe('CategoryFieldStore', () => { expect(store.keyParentPath()).toEqual(EMPTY_ARRAY); expect(store.state()).toEqual(ComponentStatus.INIT); expect(store.selected()).toEqual(EMPTY_ARRAY); + expect(store.confirmedCategories()).toEqual(EMPTY_ARRAY); expect(store.mode()).toEqual('list'); }); @@ -123,6 +124,34 @@ describe('CategoryFieldStore', () => { expect(store.categories().length).toBe(2); }); }); + + it('should remove confirmed categories with given key', () => { + store.addSelected([{ key: '1234', value: 'test' }]); + store.addConfirmedCategories(); + + store.removeConfirmedCategories('1234'); + expect(store.confirmedCategories().length).toEqual(0); + }); + + it('should add selected categories to confirmed categories', () => { + store.addSelected([{ key: '1234', value: 'test' }]); + store.addConfirmedCategories(); + + expect(store.confirmedCategories()).toEqual(store.selected()); + }); + + it('should set selected categories based on confirmed categories', () => { + store.addSelected([{ key: '1234', value: 'test' }]); + store.addConfirmedCategories(); + + store.removeSelected('1234'); + + expect(store.selected()).toEqual(EMPTY_ARRAY); + + store.setSelectedCategories(); + + expect(store.selected()).toEqual(store.confirmedCategories()); + }); }); describe('withComputed', () => { From 11f545ec147df597484b0d4ddb91bb295f4e2bec Mon Sep 17 00:00:00 2001 From: Humberto Morera Date: Thu, 29 Aug 2024 08:19:44 -0500 Subject: [PATCH 5/7] feedback move vars to signals --- .../dot-category-field-dialog.component.html | 2 +- .../dot-category-field-dialog.component.spec.ts | 6 ++---- .../dot-category-field-dialog.component.ts | 11 +++++------ .../dot-edit-content-category-field.component.html | 2 +- 4 files changed, 9 insertions(+), 12 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.html index 55b008805179..1263a68f4d1c 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.html +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.html @@ -1,6 +1,6 @@ { beforeEach(() => { spectator = createComponent({ - props: { - visible: true - }, providers: [ mockProvider(CategoriesService, { getChildren: jest.fn().mockReturnValue(of(CATEGORY_LIST_MOCK)) @@ -35,6 +32,7 @@ describe('DotCategoryFieldDialogComponent', () => { mockProvider(DotHttpErrorManagerService) ] }); + spectator.setInput('isVisible', true); store = spectator.inject(CategoryFieldStore, true); @@ -46,7 +44,7 @@ describe('DotCategoryFieldDialogComponent', () => { }); it('should have `visible` property set to `true` by default', () => { - expect(spectator.component.visible).toBe(true); + expect(spectator.component.$isVisible()).toBe(true); expect(spectator.query(Dialog)).not.toBeNull(); }); diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts index 4fecfde466e4..fcd83722631c 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts @@ -3,12 +3,11 @@ import { ChangeDetectionStrategy, Component, computed, - EventEmitter, inject, - Input, + input, OnDestroy, OnInit, - Output + output } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @@ -29,7 +28,7 @@ import { DotCategoryFieldSelectedComponent } from '../dot-category-field-selecte * to fetch and update the categories' data. * * @property {boolean} visible - Indicates the visibility of the dialog. Default is `true`. - * @property {EventEmitter} closedDialog - Event emitted when the dialog is closed. + * @property {output} closedDialog - Output emitted when the dialog is closed. */ @Component({ selector: 'dot-category-field-dialog', @@ -55,12 +54,12 @@ export class DotCategoryFieldDialogComponent implements OnInit, OnDestroy { * * @memberof DotCategoryFieldDialogComponent */ - @Input() visible = false; + $isVisible = input(false, { alias: 'isVisible' }); /** * Output that emit if the Dialog is closed */ - @Output() closedDialog = new EventEmitter(); + closedDialog = output(); /** * Store based on the `CategoryFieldStore`. 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 76308d6bf99a..f485bd225323 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 @@ -19,7 +19,7 @@ @if ($showCategoriesDialog()) { @defer (when $showCategoriesDialog()) { } From 32a4bcfa56a8160e44c681d3c7a9672371d8c160 Mon Sep 17 00:00:00 2001 From: Humberto Morera Date: Thu, 29 Aug 2024 09:24:10 -0500 Subject: [PATCH 6/7] change to model to support two way biding --- .../dot-category-field-dialog.component.html | 11 ++--------- .../dot-category-field-dialog.component.ts | 6 ++++-- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.html index 1263a68f4d1c..fba5bfb6268c 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.html +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.html @@ -1,20 +1,13 @@ - -
-
- {{ 'edit.content.category-field.dialog.header.select-categories' | dm }} -
-
- -
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts index fcd83722631c..efb7c84d8b11 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts @@ -4,7 +4,7 @@ import { Component, computed, inject, - input, + model, OnDestroy, OnInit, output @@ -54,7 +54,7 @@ export class DotCategoryFieldDialogComponent implements OnInit, OnDestroy { * * @memberof DotCategoryFieldDialogComponent */ - $isVisible = input(false, { alias: 'isVisible' }); + $isVisible = model(false, { alias: 'isVisible' }); /** * Output that emit if the Dialog is closed @@ -85,4 +85,6 @@ export class DotCategoryFieldDialogComponent implements OnInit, OnDestroy { this.store.addConfirmedCategories(); this.closedDialog.emit(); } + + protected readonly console = console; } From a88c6373545e7e420312269deb6864b26a5d7a32 Mon Sep 17 00:00:00 2001 From: Humberto Morera Date: Thu, 29 Aug 2024 09:26:11 -0500 Subject: [PATCH 7/7] cleanup --- .../dot-category-field-dialog.component.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts index efb7c84d8b11..eb15e950f4dc 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-dialog/dot-category-field-dialog.component.ts @@ -85,6 +85,4 @@ export class DotCategoryFieldDialogComponent implements OnInit, OnDestroy { this.store.addConfirmedCategories(); this.closedDialog.emit(); } - - protected readonly console = console; }