Skip to content

Commit

Permalink
feat(admin-ui): Implement values pagination for Facet detail view
Browse files Browse the repository at this point in the history 
Closes #1257
  • Loading branch information
@michaelbromley
michaelbromley committed Sep 22, 2023
1 parent be37cac commit 4cf1826
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 118 deletions.
163 changes: 95 additions & 68 deletions packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,75 +100,102 @@
[title]="'catalog.facet-values' | translate"
[paddingX]="false"
>
<table
class="facet-values-list table"
formArrayName="values"
*ngIf="0 < getValuesFormArray().length"
>
<thead>
<tr>
<th></th>
<th>{{ 'common.name' | translate }}</th>
<th>{{ 'common.code' | translate }}</th>
<ng-container *ngIf="customValueFields.length">
<th>{{ 'common.custom-fields' | translate }}</th>
</ng-container>
<th></th>
</tr>
</thead>
<tbody>
<tr
class="facet-value"
*ngFor="let value of values; let i = index"
[formGroup]="detailForm.get(['values', i])"
>
<td class="align-middle">
<vdr-entity-info [entity]="value"></vdr-entity-info>
</td>
<td class="align-middle">
<input
type="text"
formControlName="name"
[readonly]="!(updatePermission | hasPermission)"
(input)="updateValueCode(entity?.values[i]?.code, $event.target.value, i)"
/>
</td>
<td class="align-middle">
<input type="text" formControlName="code" />
</td>
<td class="" *ngIf="customValueFields.length">
<vdr-tabbed-custom-fields
entityName="FacetValue"
[customFields]="customValueFields"
[compact]="true"
[customFieldsFormGroup]="detailForm.get(['values', i, 'customFields'])"
[readonly]="!(updatePermission | hasPermission)"
></vdr-tabbed-custom-fields>
</td>
<td class="align-middle">
<vdr-dropdown>
<button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
{{ 'common.actions' | translate }}
<clr-icon shape="caret down"></clr-icon>
</button>
<vdr-dropdown-menu vdrPosition="bottom-right">
<button
type="button"
class="delete-button"
(click)="deleteFacetValue(entity?.values[i]?.id, i)"
[disabled]="!(updatePermission | hasPermission)"
vdrDropdownItem
>
<clr-icon shape="trash" class="is-danger"></clr-icon>
{{ 'common.delete' | translate }}
<ng-template vdrCardControls>
<input
type="text"
class="mr-3"
[formControl]="filterControl"
[placeholder]="'catalog.filter-by-name' | translate"
/>
</ng-template>
<ng-container *ngIf="filteredValues$ | async as filteredValues">
<table class="facet-values-list table" formArrayName="values">
<thead>
<tr>
<th></th>
<th>{{ 'common.name' | translate }}</th>
<th>{{ 'common.code' | translate }}</th>
<ng-container *ngIf="customValueFields.length">
<th>{{ 'common.custom-fields' | translate }}</th>
</ng-container>
<th></th>
</tr>
</thead>
<tbody>
<tr
class="facet-value"
*ngFor="
let value of filteredValues
| paginate
: {
currentPage: currentPage,
itemsPerPage: itemsPerPage,
totalItems: filteredValues.length
};
let i = index
"
[formGroup]="detailForm.get(['values', value.id])"
>
<td class="align-middle">
<vdr-entity-info [entity]="value"></vdr-entity-info>
</td>
<td class="align-middle">
<input
type="text"
formControlName="name"
[readonly]="!(updatePermission | hasPermission)"
(input)="updateValueCode(value.code, $event.target.value, value.id)"
/>
</td>
<td class="align-middle">
<input type="text" formControlName="code" />
</td>
<td class="" *ngIf="customValueFields.length">
<vdr-tabbed-custom-fields
entityName="FacetValue"
[customFields]="customValueFields"
[compact]="true"
[customFieldsFormGroup]="
detailForm.get(['values', value.id, 'customFields'])
"
[readonly]="!(updatePermission | hasPermission)"
></vdr-tabbed-custom-fields>
</td>
<td class="align-middle">
<vdr-dropdown>
<button type="button" class="icon-button" vdrDropdownTrigger>
<clr-icon shape="ellipsis-vertical"></clr-icon>
</button>
</vdr-dropdown-menu>
</vdr-dropdown>
</td>
</tr>
</tbody>
</table>

<vdr-dropdown-menu vdrPosition="bottom-right">
<button
type="button"
class="delete-button"
(click)="deleteFacetValue(value.id)"
[disabled]="!(updatePermission | hasPermission)"
vdrDropdownItem
>
<clr-icon shape="trash" class="is-danger"></clr-icon>
{{ 'common.delete' | translate }}
</button>
</vdr-dropdown-menu>
</vdr-dropdown>
</td>
</tr>
</tbody>
</table>
<div class="pagination-wrapper">
<vdr-items-per-page-controls
[itemsPerPage]="itemsPerPage"
(itemsPerPageChange)="itemsPerPage = $event"
></vdr-items-per-page-controls>
<vdr-pagination-controls
[currentPage]="currentPage"
[itemsPerPage]="itemsPerPage"
[totalItems]="filteredValues.length"
(pageChange)="currentPage = $event"
></vdr-pagination-controls>
</div>
</ng-container>
<div>
<button
type="button"
Expand Down
10 changes: 10 additions & 0 deletions packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,13 @@
.visible-toggle {
margin-top: -3px !important;
}

tr.facet-value td {
vertical-align: middle;
}

.pagination-wrapper {
display: flex;
justify-content: space-between;
padding: var(--card-padding);
}

0 comments on commit 4cf1826

Please sign in to comment.