Skip to content

Commit

Permalink
feat(storefront): Use server pagination for facet detail page
Browse files Browse the repository at this point in the history
Fixes #2576
  • Loading branch information
michaelbromley committed Dec 18, 2023
1 parent 4f42cf1 commit 6ca3265
Show file tree
Hide file tree
Showing 28 changed files with 238 additions and 209 deletions.
50 changes: 27 additions & 23 deletions packages/admin-ui/i18n-coverage.json
Original file line number Diff line number Diff line change
@@ -1,46 +1,50 @@
{
"generatedOn": "2023-10-17T19:32:07.745Z",
"lastCommit": "97bc099006adda7449a7b63e72191c2bb7e7b4ed",

"generatedOn": "2023-12-18T15:00:22.906Z",
"lastCommit": "4f42cf168eaee02eb73d6e70a6355265a88c4a05",
"translationStatus": {
"ar": {
"tokenCount": 761,
"translatedCount": 761,
"translatedCount": 760,
"percentage": 100
},
"cs": {
"tokenCount": 761,
"translatedCount": 571,
"translatedCount": 570,
"percentage": 75
},
"de": {
"tokenCount": 761,
"translatedCount": 761,
"translatedCount": 760,
"percentage": 100
},
"en": {
"tokenCount": 761,
"translatedCount": 761,
"translatedCount": 760,
"percentage": 100
},
"es": {
"tokenCount": 761,
"translatedCount": 761,
"translatedCount": 760,
"percentage": 100
},
"fa": {
"tokenCount": 761,
"translatedCount": 736,
"percentage": 97
"translatedCount": 760,
"percentage": 100
},
"fr": {
"tokenCount": 761,
"translatedCount": 758,
"percentage": 100
"translatedCount": 757,
"percentage": 99
},
"he": {
"tokenCount": 761,
"translatedCount": 761,
"translatedCount": 760,
"percentage": 100
},
"hr": {
"tokenCount": 761,
"translatedCount": 759,
"percentage": 100
},
"it": {
Expand All @@ -50,42 +54,42 @@
},
"ne": {
"tokenCount": 761,
"translatedCount": 725,
"percentage": 95
"translatedCount": 749,
"percentage": 98
},
"pl": {
"tokenCount": 761,
"translatedCount": 400,
"percentage": 53
"translatedCount": 399,
"percentage": 52
},
"pt_BR": {
"tokenCount": 761,
"translatedCount": 760,
"translatedCount": 759,
"percentage": 100
},
"pt_PT": {
"tokenCount": 761,
"translatedCount": 609,
"translatedCount": 608,
"percentage": 80
},
"ru": {
"tokenCount": 761,
"translatedCount": 761,
"translatedCount": 760,
"percentage": 100
},
"uk": {
"tokenCount": 761,
"translatedCount": 596,
"translatedCount": 595,
"percentage": 78
},
"zh_Hans": {
"tokenCount": 761,
"translatedCount": 541,
"translatedCount": 540,
"percentage": 71
},
"zh_Hant": {
"tokenCount": 761,
"translatedCount": 387,
"translatedCount": 386,
"percentage": 51
}
}
Expand Down
12 changes: 12 additions & 0 deletions packages/admin-ui/src/lib/catalog/src/catalog.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
PageService,
SharedModule,
} from '@vendure/admin-ui/core';
import { SortOrder } from '@vendure/common/lib/generated-types';

import { createRoutes } from './catalog.routes';
import { ApplyFacetDialogComponent } from './components/apply-facet-dialog/apply-facet-dialog.component';
Expand All @@ -34,6 +35,7 @@ import { CollectionListComponent } from './components/collection-list/collection
import { CollectionTreeNodeComponent } from './components/collection-tree/collection-tree-node.component';
import { CollectionTreeComponent } from './components/collection-tree/collection-tree.component';
import { ConfirmVariantDeletionDialogComponent } from './components/confirm-variant-deletion-dialog/confirm-variant-deletion-dialog.component';
import { CreateFacetValueDialogComponent } from './components/create-facet-value-dialog/create-facet-value-dialog.component';
import { CreateProductOptionGroupDialogComponent } from './components/create-product-option-group-dialog/create-product-option-group-dialog.component';
import { CreateProductVariantDialogComponent } from './components/create-product-variant-dialog/create-product-variant-dialog.component';
import { FacetDetailComponent } from './components/facet-detail/facet-detail.component';
Expand Down Expand Up @@ -101,6 +103,7 @@ const CATALOG_COMPONENTS = [
CreateProductVariantDialogComponent,
CreateProductOptionGroupDialogComponent,
ProductVariantQuickJumpComponent,
CreateFacetValueDialogComponent,
];

@NgModule({
Expand Down Expand Up @@ -207,6 +210,15 @@ export class CatalogModule {
component: detailComponentWithResolver({
component: FacetDetailComponent,
query: GetFacetDetailDocument,
variables: {
facetValueListOptions: {
take: 10,
skip: 0,
sort: {
createdAt: SortOrder.DESC,
},
},
},
entityKey: 'facet',
getBreadcrumbs: entity => [
{
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<ng-template vdrDialogTitle>
{{ 'catalog.create-facet-value' | translate }}
</ng-template>
<div class="form-grid" [formGroup]="form">
<vdr-form-field [label]="'common.name' | translate" for="name">
<input id="name" type="text" formControlName="name" (input)="updateCode()" />
</vdr-form-field>
<vdr-form-field
[label]="'common.code' | translate"
for="code"
>
<input
id="code"
type="text"
formControlName="code"
/>
</vdr-form-field>
</div>
<ng-template vdrDialogButtons>
<button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
<button type="submit" (click)="confirm()" class="btn btn-primary" [disabled]="form.invalid">
{{ 'common.confirm' | translate }}
</button>
</ng-template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { CreateFacetValueInput, Dialog, LanguageCode } from '@vendure/admin-ui/core';

import { normalizeString } from '@vendure/common/lib/normalize-string';

@Component({
selector: 'vdr-create-facet-value-dialog',
templateUrl: './create-facet-value-dialog.component.html',
styleUrls: ['./create-facet-value-dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CreateFacetValueDialogComponent implements Dialog<CreateFacetValueInput> {
resolveWith: (result?: CreateFacetValueInput) => void;
languageCode: LanguageCode;
form = this.formBuilder.group({
name: ['', Validators.required],
code: ['', Validators.required],
});
facetId: string;
constructor(private formBuilder: FormBuilder) {}

updateCode() {
const nameControl = this.form.get('name');
const codeControl = this.form.get('code');
if (nameControl && codeControl && codeControl.pristine) {
codeControl.setValue(normalizeString(`${nameControl.value}`, '-'));
}
}

confirm() {
const { name, code } = this.form.value;
if (!name || !code) {
return;
}
this.resolveWith({
facetId: this.facetId,
code,
translations: [{ languageCode: this.languageCode, name }],
});
}

cancel() {
this.resolveWith();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
[placeholder]="'catalog.filter-by-name' | translate"
/>
</ng-template>
<ng-container *ngIf="filteredValues$ | async as filteredValues">
<ng-container *ngIf="values$ | async as filteredValues">
<table class="facet-values-list table" formArrayName="values">
<thead>
<tr>
Expand All @@ -130,7 +130,7 @@
: {
currentPage: currentPage,
itemsPerPage: itemsPerPage,
totalItems: filteredValues.length
totalItems: totalItems,
};
let i = index
"
Expand Down Expand Up @@ -186,13 +186,13 @@
<div class="pagination-wrapper">
<vdr-items-per-page-controls
[itemsPerPage]="itemsPerPage"
(itemsPerPageChange)="itemsPerPage = $event"
(itemsPerPageChange)="setItemsPerPage($event)"
></vdr-items-per-page-controls>
<vdr-pagination-controls
[currentPage]="currentPage"
[itemsPerPage]="itemsPerPage"
[totalItems]="filteredValues.length"
(pageChange)="currentPage = $event"
[totalItems]="totalItems"
(pageChange)="setCurrentPage($event)"
></vdr-pagination-controls>
</div>
</ng-container>
Expand Down
Loading

0 comments on commit 6ca3265

Please sign in to comment.