Fix #25805: Containers Portlet only show containers from current site

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.html

@@ -1,63 +1,96 @@
-<div class="container-listing">
-    <dot-portlet-base *ngIf="vm$ | async as vm">
-        <dot-listing-data-table
-            #listing
-            *ngIf="vm.tableColumns && vm.actionHeaderOptions"
-            [actionHeaderOptions]="vm.actionHeaderOptions"
-            [columns]="vm.tableColumns"
-            [actions]="[]"
-            [checkbox]="true"
-            [mapItems]="getContainersWithDisabledEntities"
-            (selectedItems)="updateSelectedContainers($event)"
-            (rowWasClicked)="handleRowClick($event)"
-            url="v1/containers"
-            dataKey="inode"
-        >
-            <div class="container-listing__header-options">
-                <div class="container-listing__filter-controls">
-                    <button
-                        class="p-button-outlined p-button"
-                        [label]="'Search' | dm"
-                        type="button"
-                        pButton
-                    ></button>
-                    <p-checkbox
-                        [label]="'Show-Archived' | dm"
-                        [binary]="true"
-                        (onChange)="handleArchivedFilter($event.checked)"
-                        data-testid="archiveCheckbox"
-                    ></p-checkbox>
-                </div>
-
-                <div>
-                    <button
-                        class="p-button-outlined p-button"
-                        [label]="'Actions' | dm"
-                        [disabled]="!vm.selectedContainers.length"
-                        (click)="actionsMenu.toggle($event)"
-                        type="button"
-                        pButton
-                        icon="pi pi-ellipsis-v"
-                        attr.data-testid="bulkActions"
-                    ></button>
-
-                    <p-menu
-                        #actionsMenu
-                        [popup]="true"
-                        [model]="vm.containerBulkActions"
-                        appendTo="body"
-                    ></p-menu>
-                </div>
+<dot-portlet-base *ngIf="vm$ | async as vm">
+    <dot-action-header [options]="vm.actionHeaderOptions">
+        <dot-content-type-selector
+            (selected)="changeContentTypeSelector($event)"></dot-content-type-selector>
+        <input
+            #gf
+            (input)="handleQueryFilter($event.target.value)"
+            (keydown.arrowdown)="focusFirstRow()"
+            pInputText
+            placeholder="{{ 'global-search' | dm }}"
+            type="text"
+            data-testId="query-input" />
+        <div class="container-listing__header-options">
+            <div class="container-listing__filter-controls">
+                <p-checkbox
+                    [label]="'Show-Archived' | dm"
+                    [binary]="true"
+                    (onChange)="handleArchivedFilter($event.checked)"
+                    data-testId="archiveCheckbox"></p-checkbox>
             </div>
 
-            <ng-template #beforeSearchTemplate>
-                <dot-content-type-selector
-                    (selected)="changeContentTypeSelector($event)"
-                ></dot-content-type-selector>
-            </ng-template>
+            <div>
+                <button
+                    class="p-button-outlined p-button"
+                    [label]="'Actions' | dm"
+                    [disabled]="!selectedContainers.length"
+                    (click)="handleActionMenuOpen($event)"
+                    type="button"
+                    pButton
+                    icon="pi pi-ellipsis-v"
+                    data-testId="bulkActions"></button>
 
-            <ng-template #rowTemplate *ngIf="vm.tableColumns as tableColumns" let-rowData="rowData">
-                <td [ngStyle]="{ 'text-align': tableColumns[0].textAlign }">
+                <p-menu
+                    #actionsMenu
+                    [popup]="true"
+                    [model]="vm.containerBulkActions"
+                    appendTo="body"></p-menu>
+            </div>
+        </div>
+    </dot-action-header>
+    <p-table
+        *ngIf="vm.tableColumns && vm.actionHeaderOptions"
+        [(selection)]="selectedContainers"
+        [columns]="vm.tableColumns"
+        [value]="vm.containers"
+        [rows]="40"
+        [paginator]="true"
+        [pageLinks]="vm.maxPageLinks"
+        [totalRecords]="vm.totalRecords"
+        [responsiveLayout]="'scroll'"
+        (onPage)="loadDataPaginationEvent($event)"
+        selectionMode="multiple"
+        loadingIcon="pi pi-spin pi-spinner"
+        dataKey="inode"
+        data-testId="container-list-table">
+        <ng-template let-columns pTemplate="header">
+            <tr *ngIf="vm.containers?.length">
+                <th style="width: 5%">
+                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                </th>
+                <th
+                    *ngFor="let col of columns"
+                    [ngStyle]="{ width: col.width, 'text-align': col.textAlign }"
+                    [pSortableColumnDisabled]="!col.sortable"
+                    [pSortableColumn]="col.fieldName">
+                    {{ col.header }}
+                    <p-sortIcon *ngIf="col.sortable" [field]="col.fieldName"></p-sortIcon>
+                </th>
+                <th style="width: 5%"></th>
+            </tr>
+        </ng-template>
+        <ng-template let-columns="columns" let-rowData pTemplate="body">
+            <tr
+                #tableRow
+                [ngClass]="{ 'disabled-row': rowData.disableInteraction }"
+                [pSelectableRowDisabled]="rowData.disableInteraction"
+                [pContextMenuRowDisabled]="rowData.disableInteraction"
+                [attr.data-testRowId]="rowData.identifier"
+                [pContextMenuRow]="rowData"
+                [pSelectableRow]="rowData"
+                [attr.data-testId]="rowData?.variable ? 'row-' + rowData.variable : null"
+                [attr.data-disabled]="rowData.disableInteraction"
+                (click)="handleRowClick(rowData)"
+                (keyup.enter)="handleRowClick(rowData)"
+                data-testClass="testTableRow">
+                <td (click)="$event.stopPropagation()">
+                    <p-tableCheckbox
+                        *ngIf="!rowData.disableInteraction"
+                        [value]="rowData"
+                        [attr.test-id]="rowData.friendlyName"
+                        (click)="$event.stopPropagation()"></p-tableCheckbox>
+                </td>
+                <td [ngStyle]="{ 'text-align': vm.tableColumns[0].textAlign }">
                     {{ rowData.name }}
                     <ng-container *ngIf="rowData.path"
                         >-
@@ -66,18 +99,17 @@
                         }}</span></ng-container
                     >
                 </td>
-                <td [ngStyle]="{ 'text-align': tableColumns[1].textAlign }">
+                <td [ngStyle]="{ 'text-align': vm.tableColumns[1].textAlign }">
                     <dot-state-icon
                         [labels]="vm.stateLabels"
                         [state]="getContainerState(rowData)"
-                        size="14px"
-                    >
+                        size="14px">
                     </dot-state-icon>
                 </td>
-                <td [ngStyle]="{ 'text-align': tableColumns[2].textAlign }">
+                <td [ngStyle]="{ 'text-align': vm.tableColumns[2].textAlign }">
                     {{ rowData.friendlyName }}
                 </td>
-                <td [ngStyle]="{ 'text-align': tableColumns[3].textAlign }">
+                <td [ngStyle]="{ 'text-align': vm.tableColumns[3].textAlign }">
                     {{ rowData.modDate | dotRelativeDate }}
                 </td>
                 <td style="width: 5%">
@@ -86,17 +118,20 @@
                         *ngIf="!rowData.disableInteraction"
                         [attr.data-testid]="rowData.identifier"
                         [actions]="setContainerActions(rowData)"
-                        [item]="rowData"
-                    >
+                        [item]="rowData">
                     </dot-action-menu-button>
                 </td>
-            </ng-template>
-        </dot-listing-data-table>
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="emptymessage">
+            <div class="listing-datatable__empty" data-testId="listing-datatable__empty">
+                {{ 'No-Results-Found' | dm }}
+            </div>
+        </ng-template>
+    </p-table>
 
-        <dot-add-to-bundle
-            *ngIf="vm.addToBundleIdentifier"
-            [assetIdentifier]="vm.addToBundleIdentifier"
-            (cancel)="resetBundleIdentifier()"
-        ></dot-add-to-bundle>
-    </dot-portlet-base>
-</div>
+    <dot-add-to-bundle
+        *ngIf="vm.addToBundleIdentifier"
+        [assetIdentifier]="vm.addToBundleIdentifier"
+        (cancel)="resetBundleIdentifier()"></dot-add-to-bundle>
+</dot-portlet-base>

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.scss

@@ -1,5 +1,30 @@
 @use "variables" as *;
 
+:host {
+    height: 100%;
+    overflow-y: auto;
+
+    ::ng-deep {
+        dot-portlet-box {
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+        }
+
+        p-table {
+            flex-grow: 1;
+        }
+
+        .p-datatable,
+        .p-table {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            justify-content: space-between;
+            background: $white;
+        }
+    }
+}
 .container-listing__header-options {
     width: 100%;
     display: flex;
@@ -13,15 +38,17 @@
     }
 }
 
-.container-listing ::ng-deep {
-    overflow-y: auto;
-    height: 100%;
-}
-
 .container-listing__path {
     color: $color-palette-gray-500;
 }
 
 dot-content-type-selector {
     margin-right: $spacing-3;
 }
+
+.listing-datatable__empty {
+    display: flex;
+    justify-content: center;
+    font-size: $font-size-xxl;
+    margin-top: $spacing-4;
+}