Skip to content

Commit

Permalink
Fix #25805: Containers Portlet only show containers from current site (…
Browse files Browse the repository at this point in the history 
…#25966)

* refactor (containers portlet): table is showing and partially working

* fix (containers list module): querying and pagination were broken

* fix (containers list styles): table was overflowing

* dev (container list module): add missing functionalities

* copywritting (container list component): fix comment

* fix (container list tests): fixed some tests that were broken

* dev (container list test): add and fix tests

* copywirtting (container list test): delete unnecessary comment

* fix (dot containers store): portlet not initializing on navigation

* fix (dot containers store): pagination service is not cleaning extra params on navigation

* dev (containers list store): small refactor to getbyHost

* fix (containers list test): fix broken tests
  • Loading branch information
@zJaaal
zJaaal committed Sep 7, 2023
1 parent e5ca5e4 commit da4bce8
Show file tree
Hide file tree
Showing 9 changed files with 614 additions and 252 deletions.
181 changes: 108 additions & 73 deletions ...ps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.html
View file
@@ -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"
>-
Expand All @@ -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%">
Expand All @@ -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>
37 changes: 32 additions & 5 deletions ...ps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.scss
View file
@@ -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;
Expand All @@ -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;
}

0 comments on commit da4bce8

Please sign in to comment.