From 6810af674b3aaf2c7f224e6df0c180a1994ec8e0 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Monroy Date: Wed, 21 Aug 2024 10:58:12 -0400 Subject: [PATCH] PrimeNG v17: Fix p-dataview breaking change (#29658) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Parent Issue https://github.com/dotCMS/core/issues/29657 ### Proposed Changes * Fix error with breaking change by PrimeNg V17 upgrade > gridItem and listItem templates are deprecated and will removed in the future, use list and grid templates instead. ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable) ### Screenshots v15 | v17 :-------------------------:|:-------------------------: ![Screenshot 2024-08-20 at 9 25 49 AM](https://github.com/user-attachments/assets/b0c302b6-d9f4-4a52-afc9-203c6da9fba3) | ![Screenshot 2024-08-20 at 9 25 34 AM](https://github.com/user-attachments/assets/a12c2e74-fe1a-499b-a2e7-0a16679c02b4) ![Screenshot 2024-08-09 at 6 39 25 PM](https://github.com/user-attachments/assets/f5996809-2f38-4d77-8de6-6f7edfe8004c) | ![Screenshot 2024-08-09 at 6 10 06 PM](https://github.com/user-attachments/assets/1da9b0d7-82c1-41ec-a56c-4d1da87646d3) DotCMS/ThemeSelector | DotCMS/ThemeSelector ![Screenshot 2024-08-20 at 11 25 41 AM](https://github.com/user-attachments/assets/c622871a-728d-4dba-a58f-cb210c4eaed2) | ![Screenshot 2024-08-20 at 11 25 34 AM](https://github.com/user-attachments/assets/7e0e9c5b-9131-4afb-9ea6-13d824312087) ![Screenshot 2024-08-20 at 5 13 29 PM](https://github.com/user-attachments/assets/09aec08e-c638-4a08-9b12-5559d0c4faf1) | ![Screenshot 2024-08-20 at 5 11 52 PM](https://github.com/user-attachments/assets/6f886b52-ffaf-4a3d-beaa-02dedc0eaf0e) ![Screenshot 2024-08-20 at 5 13 38 PM](https://github.com/user-attachments/assets/1816f4f0-4d62-4390-b613-938390a9eba0) | ![Screenshot 2024-08-20 at 5 12 13 PM](https://github.com/user-attachments/assets/ca9baac9-98fb-4f1b-a8e9-5ce1bcde4c27) --- .../dot-add-variable.component.html | 48 +++++----- .../dot-site-selector.component.html | 2 +- .../searchable-dropdown.component.html | 69 +++++++------- .../searchable-dropdown.component.scss | 4 +- .../searchable-dropdown.component.stories.ts | 90 ++++++------------- .../searchable-dropdown.component.ts | 16 ++-- .../dot-theme-selector.component.html | 57 ++++++------ ...dot-theme-selector-dropdown.component.html | 54 +++++------ .../stories/primeng/data/DataView.stories.ts | 89 ++++++++++++------ ...late-builder-theme-selector.component.html | 60 +++++++------ 10 files changed, 252 insertions(+), 237 deletions(-) diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.html index 93476281a0b9..9da6a16bc3b3 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.html +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.html @@ -1,22 +1,26 @@ - - -
-
-

- {{ field?.name }} -

- - {{ field?.fieldTypeLabel }} - -
-
- -
-
- - +@if (vm$ | async; as vm) { + + + @for (item of data; track $index) { +
+
+

+ {{ field?.name }} +

+ + {{ field?.fieldTypeLabel }} + +
+
+ +
+
+ } + + +} diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-site-selector/dot-site-selector.component.html b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-site-selector/dot-site-selector.component.html index 9121252783f1..57709a2a97e6 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-site-selector/dot-site-selector.component.html +++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-site-selector/dot-site-selector.component.html @@ -14,7 +14,7 @@ [width]="width" #searchableDropdown labelPropertyName="hostname" - cssClassDataList="site_selector__data-list"> + cssClassDataList="site_selector__data-list" /> {{ currentSite?.hostname }} diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.html b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.html index 751a2ad7d876..d9649f80f901 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.html +++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.html @@ -1,12 +1,16 @@ - - - - {{ item.label }} - + + @for (item of data; track $index) { + + @if (item[getValueLabelPropertyName()] === valueString) { + + } + {{ item.label }} + + } @@ -23,18 +27,19 @@ - + @if (label) { + + } -
- -
+ @if (action) { +
+ +
+ } - + + [ngTemplateOutlet]="externalItemListTemplate || defaultListTemplate"> diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss index a42e1e8284d2..092b8edc5e8b 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss +++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss @@ -51,8 +51,8 @@ ::ng-deep { .p-overlaypanel.paginator { - .p-dataview-content { - margin-bottom: $spacing-9; + .p-paginator { + justify-content: center; } .p-paginator-bottom { diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts index f15f66d9ccb7..1a19b2cdb20e 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts +++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts @@ -1,3 +1,5 @@ +import { faker } from '@faker-js/faker'; +import { action } from '@storybook/addon-actions'; import { Meta, moduleMetadata, StoryObj, argsToTemplate } from '@storybook/angular'; import { CommonModule } from '@angular/common'; @@ -14,52 +16,12 @@ import { DotIconModule, DotMessagePipe } from '@dotcms/ui'; import { SearchableDropdownComponent } from '.'; -const data = [ - { - label: 'This is a really long option to test the power of the ellipsis in this component', - value: 'option1' - }, - { - label: 'Hola Mundo', - value: 'option2' - }, - { - label: 'Freddy', - value: 'option3' - }, - { - label: 'DotCMS', - value: 'option4' - }, - { - label: 'Hybrid CMS', - value: 'option5' - }, - { - label: 'Trying a really long long long option to see what happen', - value: 'option6' - }, - { - label: 'Option', - value: 'option' - }, - { - label: 'Be here now', - value: 'beherenow' - }, - { - label: 'And now what?', - value: 'nowwhat' - }, - { - label: 'More and more', - value: 'more' - }, - { - label: 'And the last one', - value: 'lastone' - } -]; +const generateFakeOption = () => ({ + label: faker.lorem.words(3), + value: faker.lorem.slug(2) +}); + +const data = faker.helpers.multiple(generateFakeOption, { count: 10 }); const meta: Meta = { title: 'DotCMS/Searchable Dropdown', @@ -89,6 +51,16 @@ const meta: Meta = { ] }) ], + args: { + rows: 4, + pageLinkSize: 2, + placeholder: 'Select something', + labelPropertyName: 'label', + width: '300px', + cssClass: '', + data: [...data], + action: action('action') + }, argTypes: { width: { name: 'width', @@ -110,30 +82,18 @@ export default meta; type Story = StoryObj; -export const Default: Story = { - args: { - rows: 4, - pageLinkSize: 2, - placeholder: 'Select something', - labelPropertyName: 'label', - width: '300px', - cssClass: '', - data: [...data] - } -}; +export const Default: Story = {}; -export const Secondary: Story = { - args: { - ...Default.args, - cssClass: 'd-secondary' - }, +export const CustomTemplate: Story = { render: (args) => ({ props: args, template: ` -
-

{{ item.label }} --

-
+ @for(item of data; track $index) { +
+

{{ item.label }} --

+
+ } ` }) diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.ts b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.ts index 83bd07d9873f..ba5c1ed408ac 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.ts +++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.ts @@ -22,7 +22,7 @@ import { import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeTemplate } from 'primeng/api'; -import { DataView } from 'primeng/dataview'; +import { DataView, DataViewLazyLoadEvent } from 'primeng/dataview'; import { OverlayPanel } from 'primeng/overlaypanel'; import { debounceTime, tap } from 'rxjs/operators'; @@ -51,7 +51,7 @@ export class SearchableDropdownComponent @Input() data: Record[]; - @Input() action: (action: unknown) => void; + @Input() action: (event: Event) => void; @Input() labelPropertyName: string | string[]; @@ -261,13 +261,17 @@ export class SearchableDropdownComponent * @param {PaginationEvent} event * @memberof SearchableDropdownComponent */ - paginate(event: PaginationEvent): void { - const paginationEvent = Object.assign({}, event); + paginate(event: DataViewLazyLoadEvent): void { + const paginationEvent = { + first: event.first, + rows: event.rows, + filter: '' + }; if (this.searchInput) { paginationEvent.filter = this.searchInput.nativeElement.value; } - this.pageChange.emit(paginationEvent); + this.pageChange.emit(paginationEvent as PaginationEvent); } /** @@ -423,7 +427,7 @@ export class SearchableDropdownComponent this.setLabel(); } - private getValueLabelPropertyName(): string { + public getValueLabelPropertyName(): string { return Array.isArray(this.labelPropertyName) ? this.labelPropertyName[0] : this.labelPropertyName; diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-edit-layout-designer/components/dot-theme-selector/dot-theme-selector.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-edit-layout-designer/components/dot-theme-selector/dot-theme-selector.component.html index 0ed3d9403afc..35c69d948d32 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/dot-edit-layout-designer/components/dot-theme-selector/dot-theme-selector.component.html +++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-edit-layout-designer/components/dot-theme-selector/dot-theme-selector.component.html @@ -40,33 +40,36 @@ [alwaysShowPaginator]="false" #dataView layout="grid"> - -
- - - - -
{{ theme.name }}
-
+ +
+ @for (theme of themes; track $index) { +
+ + + + +
{{ theme.name }}
+
+ } diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-theme-selector-dropdown/dot-theme-selector-dropdown.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-theme-selector-dropdown/dot-theme-selector-dropdown.component.html index 1de2c9d339f4..1ed942364158 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/dot-theme-selector-dropdown/dot-theme-selector-dropdown.component.html +++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-theme-selector-dropdown/dot-theme-selector-dropdown.component.html @@ -1,30 +1,32 @@ - - - + + @for (item of data; track $index) { + + - -
- {{ item.label.charAt(0) }} -
- - - {{ item.label }} - - {{ 'Last-Updated' | dm }}: {{ item.modDate | date: 'MM/dd/yy' }} + +
+ {{ item.label.charAt(0) }} +
+ + + {{ item.label }} + + {{ 'Last-Updated' | dm }}: {{ item.modDate | date: 'MM/dd/yy' }} + - + } @@ -59,10 +61,10 @@ [data]="themes" [totalRecords]="totalRecords" [rows]="paginatorService.paginationPerPage" - [externalItemListTemplate]="externalItemListTemplate" + [externalItemListTemplate]="externalItemsTemplate" [externalFilterTemplate]="externalFilterTemplate" #searchableDropdown labelPropertyName="name" overlayWidth="490px" valuePropertyName="name" - width="100%"> + width="100%" /> diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/data/DataView.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/data/DataView.stories.ts index f0a7f62d1cbb..b087c28bcd98 100644 --- a/core-web/apps/dotcms-ui/src/stories/primeng/data/DataView.stories.ts +++ b/core-web/apps/dotcms-ui/src/stories/primeng/data/DataView.stories.ts @@ -12,14 +12,19 @@ type Data = { category: string; }; -const data: Data[] = Array.from({ length: 100 }, () => ({ +const generateFakeProduct = (): Data => ({ id: faker.commerce.isbn(), name: faker.commerce.productName(), description: faker.commerce.productDescription(), - image: faker.image.url(), + image: faker.image.url({ + width: 200, + height: 200 + }), price: faker.commerce.price(), category: faker.commerce.department() -})); +}); + +const data = faker.helpers.multiple(generateFakeProduct, { count: 50 }); const meta: Meta = { title: 'PrimeNG/Data/DataView', @@ -35,14 +40,53 @@ const meta: Meta = { } } }, - render: (args) => { - return { - props: { ...args }, - template: ` - - -
-
+ args: { + value: [...data], + rows: 3, + paginator: true, + layout: 'list' + }, + render: (args) => ({ + props: { ...args }, + template: ` + + + @for(item of products; track item.id){ +
+
+
+ +
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ } + + ` + }) +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const Grid: Story = { + args: { + layout: 'grid', + rows: 6 + }, + render: (args) => ({ + props: { ...args }, + template: ` + + +
+ @for(item of products; track item.id){ +
@@ -52,21 +96,10 @@ const meta: Meta = {
{{ item.name }}
-
-
- - ` - }; - } -}; -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - args: { - value: [...data], - rows: 3, - paginator: true - } +
+ } +
+ + ` + }) }; diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-theme-selector/template-builder-theme-selector.component.html b/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-theme-selector/template-builder-theme-selector.component.html index 6e83b358b98e..e7853bbc3771 100644 --- a/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-theme-selector/template-builder-theme-selector.component.html +++ b/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-theme-selector/template-builder-theme-selector.component.html @@ -32,34 +32,38 @@ [value]="themes" #dataView layout="grid"> - -
- - - - theme image -
{{ theme.name }}
+ +
+ @for (theme of themes; track $index) { +
+ + + + theme image +
{{ theme.name }}
+
+ }