feat(admin-ui): Display pending search index updates in product list

Relates to #1137
vendure-ecommerce · Oct 7, 2021 · 6f4a89f · 6f4a89f
1 parent 0eadede
commit 6f4a89f
Show file tree

Hide file tree

Showing 22 changed files with 200 additions and 34 deletions.
diff --git a/packages/admin-ui/i18n-coverage.json b/packages/admin-ui/i18n-coverage.json
@@ -1,71 +1,71 @@
 {
-  "generatedOn": "2021-09-02T21:51:05.244Z",
-  "lastCommit": "76547940282ffb44ab9430d1b7d29c2d3fc3c2ee",
+  "generatedOn": "2021-10-07T12:23:24.068Z",
+  "lastCommit": "0eadedef0bfaacd2838befc67f75c14a5e7a6606",
   "translationStatus": {
     "cs": {
-      "tokenCount": 623,
+      "tokenCount": 627,
       "translatedCount": 591,
-      "percentage": 95
+      "percentage": 94
     },
     "de": {
-      "tokenCount": 623,
+      "tokenCount": 627,
       "translatedCount": 570,
       "percentage": 91
     },
     "en": {
-      "tokenCount": 623,
-      "translatedCount": 623,
+      "tokenCount": 627,
+      "translatedCount": 626,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 623,
-      "translatedCount": 309,
-      "percentage": 50
+      "tokenCount": 627,
+      "translatedCount": 623,
+      "percentage": 99
     },
     "fr": {
-      "tokenCount": 623,
+      "tokenCount": 627,
       "translatedCount": 613,
       "percentage": 98
     },
     "it": {
-      "tokenCount": 623,
+      "tokenCount": 627,
       "translatedCount": 621,
-      "percentage": 100
+      "percentage": 99
     },
     "pl": {
-      "tokenCount": 623,
+      "tokenCount": 627,
       "translatedCount": 405,
       "percentage": 65
     },
     "pt_BR": {
-      "tokenCount": 623,
+      "tokenCount": 627,
       "translatedCount": 588,
       "percentage": 94
     },
     "pt_PT": {
-      "tokenCount": 623,
-      "translatedCount": 0,
-      "percentage": 0
+      "tokenCount": 627,
+      "translatedCount": 622,
+      "percentage": 99
     },
     "ru": {
-      "tokenCount": 623,
+      "tokenCount": 627,
       "translatedCount": 621,
-      "percentage": 100
+      "percentage": 99
     },
     "uk": {
-      "tokenCount": 623,
+      "tokenCount": 627,
       "translatedCount": 621,
-      "percentage": 100
+      "percentage": 99
     },
     "zh_Hans": {
-      "tokenCount": 623,
+      "tokenCount": 627,
       "translatedCount": 558,
-      "percentage": 90
+      "percentage": 89
     },
     "zh_Hant": {
-      "tokenCount": 623,
+      "tokenCount": 627,
       "translatedCount": 385,
-      "percentage": 62
+      "percentage": 61
     }
   }
 }
diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.html
@@ -8,10 +8,28 @@
                 (facetValueChange)="setFacetValueIds($event)"
             ></vdr-product-search-input>
             <vdr-dropdown class="search-settings-menu mr3">
-                <button type="button" class="icon-button" vdrDropdownTrigger>
+                <button type="button"
+                        class="icon-button search-index-button"
+                        [title]="(pendingSearchIndexUpdates ? 'catalog.pending-search-index-updates' : 'catalog.search-index-controls') | translate "
+                        vdrDropdownTrigger>
                     <clr-icon shape="cog"></clr-icon>
+                    <vdr-status-badge *ngIf="pendingSearchIndexUpdates" type="warning"> </vdr-status-badge>
                 </button>
                 <vdr-dropdown-menu vdrPosition="bottom-right">
+                    <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h4>
+                    <ng-container *ngIf="pendingSearchIndexUpdates">
+                        <button
+                            type="button"
+                            class="run-updates-button"
+                            vdrDropdownItem
+                            (click)="runPendingSearchIndexUpdates()"
+                            [disabled]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
+                        >
+                            <vdr-status-badge type="warning"> </vdr-status-badge>
+                            {{ 'catalog.run-pending-search-index-updates' | translate: { count: pendingSearchIndexUpdates } }}
+                        </button>
+                        <div class="dropdown-divider"></div>
+                    </ng-container>
                     <button
                         type="button"
                         vdrDropdownItem
@@ -25,7 +43,7 @@
         </div>
         <div class="flex wrap">
             <clr-checkbox-wrapper class="mt2">
-                <input type="checkbox" clrCheckbox [(ngModel)]="groupByProduct"/>
+                <input type="checkbox" clrCheckbox [(ngModel)]="groupByProduct" />
                 <label>{{ 'catalog.group-by-product' | translate }}</label>
             </clr-checkbox-wrapper>
             <vdr-language-selector
@@ -37,7 +55,11 @@
     </vdr-ab-left>
     <vdr-ab-right>
         <vdr-action-bar-items locationId="product-list"></vdr-action-bar-items>
-        <a class="btn btn-primary" [routerLink]="['./create']" *vdrIfPermissions="['CreateCatalog', 'CreateProduct']">
+        <a
+            class="btn btn-primary"
+            [routerLink]="['./create']"
+            *vdrIfPermissions="['CreateCatalog', 'CreateProduct']"
+        >
             <clr-icon shape="plus"></clr-icon>
             <span class="full-label">{{ 'catalog.create-new-product' | translate }}</span>
         </a>
@@ -62,7 +84,7 @@
                             : result.productVariantAsset || result.productAsset as asset;
                         else imagePlaceholder
                     "
-                    [src]="asset | assetPreview:'tiny'"
+                    [src]="asset | assetPreview: 'tiny'"
                 />
                 <ng-template #imagePlaceholder>
                     <div class="placeholder">

diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.scss b/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.scss
@@ -27,3 +27,17 @@
 td.disabled {
     background-color: var(--color-component-bg-200);
 }
+.search-index-button {
+    position: relative;
+    vdr-status-badge {
+        right: 0;
+        top: 0;
+    }
+}
+.run-updates-button {
+    position: relative;
+    vdr-status-badge {
+        left: 10px;
+        top: 10px;
+    }
+}
diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.ts b/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.ts
@@ -45,6 +45,8 @@ export class ProductListComponent
     facetValues$: Observable<SearchProducts.FacetValues[]>;
     availableLanguages$: Observable<LanguageCode[]>;
     contentLanguage$: Observable<LanguageCode>;
+    pendingSearchIndexUpdates = 0;
+
     @ViewChild('productSearchInputComponent', { static: true })
     private productSearchInput: ProductSearchInputComponent;
     constructor(
@@ -109,6 +111,11 @@ export class ProductListComponent
             .uiState()
             .mapStream(({ uiState }) => uiState.contentLanguage)
             .pipe(tap(() => this.refresh()));
+
+        this.dataService.product
+            .getPendingSearchIndexUpdates()
+            .mapSingle(({ pendingSearchIndexUpdates }) => pendingSearchIndexUpdates)
+            .subscribe(value => (this.pendingSearchIndexUpdates = value));
     }
 
     ngAfterViewInit() {
@@ -147,6 +154,15 @@ export class ProductListComponent
         });
     }
 
+    runPendingSearchIndexUpdates() {
+        this.dataService.product.runPendingSearchIndexUpdates().subscribe(value => {
+            this.notificationService.info(_('catalog.running-search-index-updates'), {
+                count: this.pendingSearchIndexUpdates,
+            });
+            this.pendingSearchIndexUpdates = 0;
+        });
+    }
+
     deleteProduct(productId: string) {
         this.modalService
             .dialog({

diff --git a/packages/admin-ui/src/lib/core/src/common/generated-types.ts b/packages/admin-ui/src/lib/core/src/common/generated-types.ts
@@ -8296,6 +8296,19 @@ export type ReindexMutation = { reindex: (
     & JobInfoFragment
   ) };
 
+export type GetPendingSearchIndexUpdatesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetPendingSearchIndexUpdatesQuery = Pick<Query, 'pendingSearchIndexUpdates'>;
+
+export type RunPendingSearchIndexUpdatesMutationVariables = Exact<{ [key: string]: never; }>;
+
+
+export type RunPendingSearchIndexUpdatesMutation = { runPendingSearchIndexUpdates: (
+    { __typename?: 'Success' }
+    & Pick<Success, 'success'>
+  ) };
+
 export type ConfigurableOperationFragment = (
   { __typename?: 'ConfigurableOperation' }
   & Pick<ConfigurableOperation, 'code'>
@@ -9980,6 +9993,17 @@ export namespace Reindex {
   export type Reindex = (NonNullable<ReindexMutation['reindex']>);
 }
 
+export namespace GetPendingSearchIndexUpdates {
+  export type Variables = GetPendingSearchIndexUpdatesQueryVariables;
+  export type Query = GetPendingSearchIndexUpdatesQuery;
+}
+
+export namespace RunPendingSearchIndexUpdates {
+  export type Variables = RunPendingSearchIndexUpdatesMutationVariables;
+  export type Mutation = RunPendingSearchIndexUpdatesMutation;
+  export type RunPendingSearchIndexUpdates = (NonNullable<RunPendingSearchIndexUpdatesMutation['runPendingSearchIndexUpdates']>);
+}
+
 export namespace ConfigurableOperation {
   export type Fragment = ConfigurableOperationFragment;
   export type Args = NonNullable<(NonNullable<ConfigurableOperationFragment['args']>)[number]>;

diff --git a/packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts b/packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts
@@ -768,3 +768,17 @@ export const REINDEX = gql`
     }
     ${JOB_INFO_FRAGMENT}
 `;
+
+export const GET_PENDING_SEARCH_INDEX_UPDATES = gql`
+    query GetPendingSearchIndexUpdates {
+        pendingSearchIndexUpdates
+    }
+`;
+
+export const RUN_PENDING_SEARCH_INDEX_UPDATES = gql`
+    mutation RunPendingSearchIndexUpdates {
+        runPendingSearchIndexUpdates {
+            success
+        }
+    }
+`;
diff --git a/packages/admin-ui/src/lib/core/src/data/providers/product-data.service.ts b/packages/admin-ui/src/lib/core/src/data/providers/product-data.service.ts
@@ -23,6 +23,7 @@ import {
     DeleteTag,
     GetAsset,
     GetAssetList,
+    GetPendingSearchIndexUpdates,
     GetProductList,
     GetProductOptionGroup,
     GetProductOptionGroups,
@@ -43,6 +44,7 @@ import {
     RemoveProductsFromChannelInput,
     RemoveProductVariantsFromChannelInput,
     RemoveVariantsFromChannel,
+    RunPendingSearchIndexUpdates,
     SearchProducts,
     SortOrder,
     TagListOptions,
@@ -98,7 +100,11 @@ import {
     UPDATE_PRODUCT_VARIANTS,
     UPDATE_TAG,
 } from '../definitions/product-definitions';
-import { REINDEX } from '../definitions/settings-definitions';
+import {
+    GET_PENDING_SEARCH_INDEX_UPDATES,
+    REINDEX,
+    RUN_PENDING_SEARCH_INDEX_UPDATES,
+} from '../definitions/settings-definitions';
 
 import { BaseDataService } from './base-data.service';
 
@@ -130,6 +136,18 @@ export class ProductDataService {
         return this.baseDataService.mutate<Reindex.Mutation>(REINDEX);
     }
 
+    getPendingSearchIndexUpdates() {
+        return this.baseDataService.query<GetPendingSearchIndexUpdates.Query>(
+            GET_PENDING_SEARCH_INDEX_UPDATES,
+        );
+    }
+
+    runPendingSearchIndexUpdates() {
+        return this.baseDataService.mutate<RunPendingSearchIndexUpdates.Mutation>(
+            RUN_PENDING_SEARCH_INDEX_UPDATES,
+        );
+    }
+
     getProducts(options: ProductListOptions) {
         return this.baseDataService.query<GetProductList.Query, GetProductList.Variables>(GET_PRODUCT_LIST, {
             options,

diff --git a/packages/admin-ui/src/lib/static/i18n-messages/cs.json b/packages/admin-ui/src/lib/static/i18n-messages/cs.json
@@ -113,6 +113,7 @@
     "option-values": "Hodnoty volby",
     "out-of-stock-threshold": "Prahová hodnota pro vyprodání zásob",
     "out-of-stock-threshold-tooltip": "Nastaví hodnotu skladu, při které je tato varianta považována za vyprodanou. Použití záporné hodnoty umožňuje objednávat \"na objednávku\".",
+    "pending-search-index-updates": "",
     "price": "Cena",
     "price-conversion-factor": "Přepočítávací koeficient ceny",
     "price-in-channel": "Cena v { channel }",
@@ -131,8 +132,11 @@
     "remove-option": "Odebrat volbu",
     "remove-product-from-channel": "Odebrat produkt z kanálu",
     "remove-product-variant-from-channel": "Odebrat variantu z kanálu",
+    "run-pending-search-index-updates": "",
+    "running-search-index-updates": "",
     "search-asset-name-or-tag": "",
     "search-for-term": "Hledat výraz",
+    "search-index-controls": "",
     "search-product-name-or-code": "Hledat produkt dle jména, nebo kódu",
     "select-product": "",
     "select-product-variant": "",

diff --git a/packages/admin-ui/src/lib/static/i18n-messages/de.json b/packages/admin-ui/src/lib/static/i18n-messages/de.json
@@ -113,6 +113,7 @@
     "option-values": "Optionswerte",
     "out-of-stock-threshold": "Ausverkauft-Grenze",
     "out-of-stock-threshold-tooltip": "Legt fest, ab welcher Untergrenze ein Produkt als ausverkauft angezeigt wird. Ein negativer Wert kann verwendet werden, um mit einer Fehlmenge zu arbeiten.",
+    "pending-search-index-updates": "",
     "price": "Preis",
     "price-conversion-factor": "Preisumwandlungsfaktor",
     "price-in-channel": "Preis in { channel }",
@@ -131,8 +132,11 @@
     "remove-option": "Option entfernen",
     "remove-product-from-channel": "Produkt aus dem Kanal entfernen",
     "remove-product-variant-from-channel": "",
+    "run-pending-search-index-updates": "",
+    "running-search-index-updates": "",
     "search-asset-name-or-tag": "",
     "search-for-term": "Suche nach Begriff",
+    "search-index-controls": "",
     "search-product-name-or-code": "Suche nach Produktname oder Artikelnummer",
     "select-product": "Produkt auswählen",
     "select-product-variant": "Produktvariante auswählen",

diff --git a/packages/admin-ui/src/lib/static/i18n-messages/en.json b/packages/admin-ui/src/lib/static/i18n-messages/en.json
@@ -113,6 +113,7 @@
     "option-values": "Option values",
     "out-of-stock-threshold": "Out-of-stock threshold",
     "out-of-stock-threshold-tooltip": "Sets the stock level at which this variant is considered to be out of stock. Using a negative value enables backorder support.",
+    "pending-search-index-updates": "Search index has pending updates to run",
     "price": "Price",
     "price-conversion-factor": "Price conversion factor",
     "price-in-channel": "Price in { channel }",
@@ -131,8 +132,11 @@
     "remove-option": "Remove option",
     "remove-product-from-channel": "Remove product from channel",
     "remove-product-variant-from-channel": "Remove product variant from channel",
+    "run-pending-search-index-updates": "Run {count, plural, one {1 pending update} other {{count} pending updates}}",
+    "running-search-index-updates": "Running {count, plural, one {1 update} other {{count} updates}} to search index",
     "search-asset-name-or-tag": "Search by asset name or tags",
     "search-for-term": "Search for term",
+    "search-index-controls": "Search index controls",
     "search-product-name-or-code": "Search by product name or code",
     "select-product": "Select product",
     "select-product-variant": "Select product variant",
@@ -654,4 +658,4 @@
     "job-result": "Job result",
     "job-state": "Job state"
   }
-}
+}