feat(admin-ui): Add ability to filter promotions by name or coupon code

packages/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.html

@@ -1,4 +1,20 @@
 <vdr-action-bar>
+    <vdr-ab-left>
+        <form class="search-form" [formGroup]="searchForm">
+            <input
+                type="text"
+                formControlName="name"
+                [placeholder]="'marketing.search-by-name' | translate"
+                class="search-input"
+            />
+            <input
+                type="text"
+                formControlName="couponCode"
+                [placeholder]="'marketing.search-by-coupon-code' | translate"
+                class="search-input"
+            />
+        </form>
+    </vdr-ab-left>
     <vdr-ab-right>
         <vdr-action-bar-items locationId="promotion-list"></vdr-action-bar-items>
         <a class="btn btn-primary"

packages/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.scss

@@ -0,0 +1,8 @@
+.search-form {
+    padding: 0;
+}
+
+.search-input {
+    margin: 6px 8px 0 0;
+    min-width: 200px;
+}

packages/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.ts

@@ -1,13 +1,19 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { BaseListComponent } from '@vendure/admin-ui/core';
+import { BaseListComponent, PromotionFilterParameter, PromotionListOptions } from '@vendure/admin-ui/core';
 import { GetPromotionList } from '@vendure/admin-ui/core';
 import { NotificationService } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 import { ModalService } from '@vendure/admin-ui/core';
-import { EMPTY } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
+import { EMPTY, merge } from 'rxjs';
+import { debounceTime, switchMap, takeUntil } from 'rxjs/operators';
+
+export type PromotionSearchForm = {
+    name: string;
+    couponCode: string;
+};
 
 @Component({
     selector: 'vdr-promotion-list',
@@ -15,10 +21,14 @@ import { switchMap } from 'rxjs/operators';
     styleUrls: ['./promotion-list.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PromotionListComponent extends BaseListComponent<
-    GetPromotionList.Query,
-    GetPromotionList.Items
-> {
+export class PromotionListComponent
+    extends BaseListComponent<GetPromotionList.Query, GetPromotionList.Items>
+    implements OnInit {
+    searchForm = new FormGroup({
+        name: new FormControl(''),
+        couponCode: new FormControl(''),
+    });
+
     constructor(
         private dataService: DataService,
         router: Router,
@@ -30,9 +40,23 @@ export class PromotionListComponent extends BaseListComponent<
         super.setQueryFn(
             (...args: any[]) => this.dataService.promotion.getPromotions(...args).refetchOnChannelChange(),
             data => data.promotions,
+            (skip, take) => this.createQueryOptions(skip, take, this.searchForm.value),
         );
     }
 
+    ngOnInit(): void {
+        super.ngOnInit();
+
+        merge(this.searchForm.valueChanges.pipe(debounceTime(250)), this.route.queryParamMap)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(val => {
+                if (!val.params) {
+                    this.setPageNumber(1);
+                }
+                this.refresh();
+            });
+    }
+
     deletePromotion(promotionId: string) {
         this.modalService
             .dialog({
@@ -61,4 +85,28 @@ export class PromotionListComponent extends BaseListComponent<
                 },
             );
     }
+
+    private createQueryOptions(
+        skip: number,
+        take: number,
+        searchForm: PromotionSearchForm,
+    ): { options: PromotionListOptions } {
+        const filter: PromotionFilterParameter = {};
+
+        if (searchForm.couponCode) {
+            filter.couponCode = { contains: searchForm.couponCode };
+        }
+
+        if (searchForm.name) {
+            filter.name = { contains: searchForm.name };
+        }
+
+        return {
+            options: {
+                skip,
+                take,
+                filter,
+            },
+        };
+    }
 }

packages/admin-ui/src/lib/static/i18n-messages/cs.json

@@ -537,7 +537,9 @@
     "create-new-promotion": "Nová propagace",
     "ends-at": "Končí",
     "per-customer-limit": "Limit za zákazníka",
-    "starts-at": "Začíná"
+    "starts-at": "Začíná",
+    "search-by-name": "",
+    "search-by-coupon-code": ""
   },
   "nav": {
     "administrators": "Administrátoři",
@@ -808,4 +810,4 @@
     "job-result": "Výsledek úlohy",
     "job-state": "Stav úlohy"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -537,7 +537,9 @@
     "create-new-promotion": "Neue Werbeaktion erstellen",
     "ends-at": "Endet am",
     "per-customer-limit": "Begrenzung pro Kunde",
-    "starts-at": "Beginnt am"
+    "starts-at": "Beginnt am",
+    "search-by-name": "",
+    "search-by-coupon-code": ""
   },
   "nav": {
     "administrators": "Administratoren",
@@ -808,4 +810,4 @@
     "job-result": "Job-Ergebnis",
     "job-state": "Job-Status"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -537,7 +537,9 @@
     "create-new-promotion": "Create new promotion",
     "ends-at": "Ends at",
     "per-customer-limit": "Per-customer limit",
-    "starts-at": "Starts at"
+    "starts-at": "Starts at",
+    "search-by-name": "Search by name",
+    "search-by-coupon-code": "Search by coupon code"
   },
   "nav": {
     "administrators": "Administrators",

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -537,7 +537,9 @@
     "create-new-promotion": "Crear nueva promoción",
     "ends-at": "",
     "per-customer-limit": "",
-    "starts-at": ""
+    "starts-at": "",
+    "search-by-name": "",
+    "search-by-coupon-code": ""
   },
   "nav": {
     "administrators": "Administradores",
@@ -808,4 +810,4 @@
     "job-result": "Resultado",
     "job-state": "Estado"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/fr.json

@@ -537,7 +537,9 @@
     "create-new-promotion": "Creer nouvelle promotion",
     "ends-at": "Termine au",
     "per-customer-limit": "Limite par client",
-    "starts-at": "Débute au"
+    "starts-at": "Débute au",
+    "search-by-name": "",
+    "search-by-coupon-code": ""
   },
   "nav": {
     "administrators": "Administrateurs",

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -537,7 +537,9 @@
     "create-new-promotion": "Utwórz nową promocje",
     "ends-at": "Kończy się",
     "per-customer-limit": "Limit klientów",
-    "starts-at": "Zaczyna się"
+    "starts-at": "Zaczyna się",
+    "search-by-name": "",
+    "search-by-coupon-code": ""
   },
   "nav": {
     "administrators": "Administratorzy",
@@ -808,4 +810,4 @@
     "job-result": "Rezultat zlecenia",
     "job-state": "Status zlecenia"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -537,7 +537,9 @@
     "create-new-promotion": "Criar nova promoção",
     "ends-at": "Termina em",
     "per-customer-limit": "Limite por cliente",
-    "starts-at": "Começa em"
+    "starts-at": "Começa em",
+    "search-by-name": "",
+    "search-by-coupon-code": ""
   },
   "nav": {
     "administrators": "Administradores",
@@ -808,4 +810,4 @@
     "job-result": "Resultado do trabalho",
     "job-state": "Estado do trabalho"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/ru.json

@@ -537,7 +537,9 @@
     "create-new-promotion": "Создать новую акцию",
     "ends-at": "Заканчивается в",
     "per-customer-limit": "Лимит на клиента",
-    "starts-at": "Начинается в"
+    "starts-at": "Начинается в",
+    "search-by-name": "Поиск по имени",
+    "search-by-coupon-code": "Поиск по коду купона"
   },
   "nav": {
     "administrators": "Администраторы",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -537,7 +537,9 @@
     "create-new-promotion": "添加促销产品",
     "ends-at": "有效起始时间",
     "per-customer-limit": "每人限领数",
-    "starts-at": "有效结束时间"
+    "starts-at": "有效结束时间",
+    "search-by-name": "",
+    "search-by-coupon-code": ""
   },
   "nav": {
     "administrators": "登陆管理",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -537,7 +537,9 @@
     "create-new-promotion": "新增促销產品",
     "ends-at": "結束時間",
     "per-customer-limit": "領取上限",
-    "starts-at": "開始時間"
+    "starts-at": "開始時間",
+    "search-by-name": "",
+    "search-by-coupon-code": ""
   },
   "nav": {
     "administrators": "管理員",
@@ -808,4 +810,4 @@
     "job-result": "",
     "job-state": ""
   }
-}
+}