PrimeNG v17: Fix p-dataview breaking change (#29658)

### Parent Issue #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)
dotCMS · Aug 21, 2024 · 6810af6 · 6810af6
1 parent 7ffb116
commit 6810af6
Show file tree

Hide file tree

Showing 10 changed files with 252 additions and 237 deletions.
diff --git a/.../dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.html b/.../dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.html
@@ -1,22 +1,26 @@
-<p-dataView *ngIf="vm$ | async as vm" [value]="vm.fields" layout="list">
-    <ng-template let-field pTemplate="listItem">
-        <div class="dot-add-variable-list__item">
-            <div class="item__info">
-                <h3 [attr.data-testId]="'h3' + field.variable" class="info__title">
-                    {{ field?.name }}
-                </h3>
-                <small class="info__label">
-                    {{ field?.fieldTypeLabel }}
-                </small>
-            </div>
-            <div class="item__action">
-                <button
-                    (click)="addCustomCode(field)"
-                    [attr.data-testId]="field.variable"
-                    [label]="'Add' | dm"
-                    class="p-button-outlined p-button-primary p-button-sm"
-                    pButton></button>
-            </div>
-        </div>
-    </ng-template>
-</p-dataView>
+@if (vm$ | async; as vm) {
+    <p-dataView [value]="vm.fields" layout="list">
+        <ng-template pTemplate="list" let-data>
+            @for (item of data; track $index) {
+                <div class="dot-add-variable-list__item">
+                    <div class="item__info">
+                        <h3 [attr.data-testId]="'h3' + field.variable" class="info__title">
+                            {{ field?.name }}
+                        </h3>
+                        <small class="info__label">
+                            {{ field?.fieldTypeLabel }}
+                        </small>
+                    </div>
+                    <div class="item__action">
+                        <button
+                            (click)="addCustomCode(field)"
+                            [attr.data-testId]="field.variable"
+                            [label]="'Add' | dm"
+                            class="p-button-outlined p-button-primary p-button-sm"
+                            pButton></button>
+                    </div>
+                </div>
+            }
+        </ng-template>
+    </p-dataView>
+}
diff --git a/...cms-ui/src/app/view/components/_common/dot-site-selector/dot-site-selector.component.html b/...cms-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"></dot-searchable-dropdown>
+    cssClassDataList="site_selector__data-list" />
 
 <ng-template #hostName>
     <span class="site-selector__title">{{ currentSite?.hostname }}</span>

diff --git a/.../view/components/_common/searchable-dropdown/component/searchable-dropdown.component.html b/.../view/components/_common/searchable-dropdown/component/searchable-dropdown.component.html
@@ -1,12 +1,16 @@
-<ng-template #defaultItemListTemplate let-item="item" pTemplate="listItem">
-    <span
-        (click)="handleClick(item)"
-        [class.selected]="item[labelPropertyName] === valueString"
-        class="searchable-dropdown__data-list-item"
-        data-testid="searchable-dropdown-data-list-item">
-        <i *ngIf="item[labelPropertyName] === valueString" class="pi pi-check"></i>
-        {{ item.label }}
-    </span>
+<ng-template #defaultListTemplate let-data="data" pTemplate="list">
+    @for (item of data; track $index) {
+        <span
+            (click)="handleClick(item)"
+            [class.selected]="item[getValueLabelPropertyName()] === valueString"
+            class="searchable-dropdown__data-list-item"
+            data-testid="searchable-dropdown-data-list-item">
+            @if (item[getValueLabelPropertyName()] === valueString) {
+                <i class="pi pi-check"></i>
+            }
+            {{ item.label }}
+        </span>
+    }
 </ng-template>
 
 <ng-template #defaultFilterTemplate>
@@ -23,18 +27,19 @@
 </ng-template>
 
 <ng-template #defaultSelectTemplate let-item="item">
-    <button
-        #button
-        (click)="searchPanel.toggle($event)"
-        *ngIf="label"
-        [disabled]="disabled"
-        [label]="label"
-        [ngStyle]="{ width: width }"
-        class="p-button-outlined"
-        icon="pi pi-chevron-down"
-        iconPos="right"
-        pButton
-        type="button"></button>
+    @if (label) {
+        <button
+            #button
+            (click)="searchPanel.toggle($event)"
+            [disabled]="disabled"
+            [label]="label"
+            [ngStyle]="{ width: width }"
+            class="p-button-outlined"
+            icon="pi pi-chevron-down"
+            iconPos="right"
+            pButton
+            type="button"></button>
+    }
 </ng-template>
 
 <p-overlayPanel
@@ -50,12 +55,14 @@
             <ng-container
                 [ngTemplateOutlet]="externalFilterTemplate || defaultFilterTemplate"></ng-container>
         </div>
-        <div *ngIf="action" class="searchable-dropdown__search-action">
-            <p-button
-                (click)="action()"
-                icon="pi pi-plus"
-                styleClass="p-button-text p-button-rounded"></p-button>
-        </div>
+        @if (action) {
+            <div class="searchable-dropdown__search-action">
+                <p-button
+                    (click)="action($event)"
+                    icon="pi pi-plus"
+                    styleClass="p-button-text p-button-rounded"></p-button>
+            </div>
+        }
     </header>
 
     <p-dataView
@@ -70,15 +77,13 @@
         [totalRecords]="totalRecords"
         [value]="options"
         class="searchable-dropdown__data-list">
-        <ng-template let-item pTemplate="listItem">
+        <ng-template let-data pTemplate="list">
             <ng-container
                 [ngTemplateOutletContext]="{
-                    item: item,
+                    data: data,
                     selectedOptionValue: selectedOptionValue
                 }"
-                [ngTemplateOutlet]="
-                    externalItemListTemplate || defaultItemListTemplate
-                "></ng-container>
+                [ngTemplateOutlet]="externalItemListTemplate || defaultListTemplate"></ng-container>
         </ng-template>
     </p-dataView>
 </p-overlayPanel>

diff --git a/.../view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss b/.../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/...components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts b/...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<SearchableDropdownComponent> = {
     title: 'DotCMS/Searchable Dropdown',
@@ -89,6 +51,16 @@ const meta: Meta<SearchableDropdownComponent> = {
             ]
         })
     ],
+    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<SearchableDropdownComponent>;
 
-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: `
         <ng-template let-data="data" #rowTemplate>
-            <div class="w-full" *ngFor="let item of data">
-                <p>{{ item.label }} --</p>
-            </div>
+            @for(item of data; track $index) {
+                <div class="w-full">
+                    <p>{{ item.label }} --</p>
+                </div>
+            }
         </ng-template>
         <dot-searchable-dropdown [externalItemListTemplate]="rowTemplate" ${argsToTemplate(args)} />`
     })

diff --git a/...pp/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.ts b/...pp/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<string, unknown>[];
 
-    @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/.../dot-edit-layout-designer/components/dot-theme-selector/dot-theme-selector.component.html b/.../dot-edit-layout-designer/components/dot-theme-selector/dot-theme-selector.component.html
@@ -40,33 +40,36 @@
             [alwaysShowPaginator]="false"
             #dataView
             layout="grid">
-            <ng-template let-theme pTemplate="gridItem">
-                <div
-                    (click)="selectTheme(theme); $event.stopImmediatePropagation()"
-                    [ngClass]="{ active: theme.inode === current?.inode }"
-                    class="p-col-12 p-lg-3 dot-theme-item">
-                    <svg
-                        *ngIf="!theme?.themeThumbnail"
-                        width="130"
-                        height="130"
-                        viewBox="0 0 130 130"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg">
-                        <path
-                            d="M130 121.56V7.5045C130 -0.439943 129.445 0.00450051 121.514 0.00450051H6.19998C-1.73165 0.00450051 0.209671 0.00450039 0.209671 7.5045V121.56C0.209671 129.505 -1.73165 130.005 6.19998 130.005H121.514C129.445 130.005 130 129.505 130 121.56ZM39.8678 75.8378L57.8943 97.5767L83.1313 65.0045L115.579 108.338H14.6308L39.8678 75.8378Z"
-                            transform="translate(0.789978 0.995499)" />
-                    </svg>
-                    <img
-                        *ngIf="theme?.themeThumbnail"
-                        [src]="
-                            theme.identifier === 'SYSTEM_THEME'
-                                ? theme.themeThumbnail
-                                : '/dA/' + theme.themeThumbnail + '/130w/130h/thumbnail.png'
-                        "
-                        class="dot-theme-iteme__image"
-                        data-testId="themeImage" />
-                    <h5 class="dot-theme-item__name">{{ theme.name }}</h5>
-                </div>
+            <ng-template pTemplate="grid" let-themes>
+                <div class="grid grid-nogutter"></div>
+                @for (theme of themes; track $index) {
+                    <div
+                        (click)="selectTheme(theme); $event.stopImmediatePropagation()"
+                        [ngClass]="{ active: theme.inode === current?.inode }"
+                        class="col-12 lg:col-3 dot-theme-item">
+                        <svg
+                            *ngIf="!theme?.themeThumbnail"
+                            width="130"
+                            height="130"
+                            viewBox="0 0 130 130"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M130 121.56V7.5045C130 -0.439943 129.445 0.00450051 121.514 0.00450051H6.19998C-1.73165 0.00450051 0.209671 0.00450039 0.209671 7.5045V121.56C0.209671 129.505 -1.73165 130.005 6.19998 130.005H121.514C129.445 130.005 130 129.505 130 121.56ZM39.8678 75.8378L57.8943 97.5767L83.1313 65.0045L115.579 108.338H14.6308L39.8678 75.8378Z"
+                                transform="translate(0.789978 0.995499)" />
+                        </svg>
+                        <img
+                            *ngIf="theme?.themeThumbnail"
+                            [src]="
+                                theme.identifier === 'SYSTEM_THEME'
+                                    ? theme.themeThumbnail
+                                    : '/dA/' + theme.themeThumbnail + '/130w/130h/thumbnail.png'
+                            "
+                            class="dot-theme-iteme__image"
+                            data-testId="themeImage" />
+                        <h5 class="dot-theme-item__name">{{ theme.name }}</h5>
+                    </div>
+                }
             </ng-template>
         </p-dataView>
     </div>