feat(admin-ui): Add filtering to orders list

admin-ui/src/app/order/components/order-list/order-list.component.html

@@ -1,9 +1,30 @@
-<!--
-    <vdr-action-bar>
-        <vdr-ab-right>
-        </vdr-ab-right>
-    </vdr-action-bar>
--->
+<vdr-action-bar>
+    <vdr-ab-left>
+        <div class="search-form">
+            <select clrSelect name="state" [formControl]="stateFilter">
+                <option value="all">{{ 'order.state-all-orders' | translate }}</option>
+                <option value="AddingItems">{{ 'order.state-adding-items' | translate }}</option>
+                <option value="AddingItems">{{ 'order.state-adding-items' | translate }}</option>
+                <option value="ArrangingPayment">{{ 'order.state-arranging-payment' | translate }}</option>
+                <option value="PaymentAuthorized">{{ 'order.state-payment-authorized' | translate }}</option>
+                <option value="PaymentSettled">{{ 'order.state-payment-settled' | translate }}</option>
+                <option value="PartiallyFulfilled">
+                    {{ 'order.state-partially-fulfilled' | translate }}
+                </option>
+                <option value="Fulfilled">{{ 'order.state-fulfilled' | translate }}</option>
+                <option value="Cancelled">{{ 'order.state-cancelled' | translate }}</option>
+            </select>
+            <input
+                type="text"
+                name="searchTerm"
+                [formControl]="searchTerm"
+                [placeholder]="'order.search-by-order-code' | translate"
+                class="clr-input search-input"
+            />
+        </div>
+    </vdr-ab-left>
+    <vdr-ab-right></vdr-ab-right>
+</vdr-action-bar>
 
 <vdr-data-table
     [items]="items$ | async"

admin-ui/src/app/order/components/order-list/order-list.component.scss

@@ -1 +1,14 @@
 @import "variables";
+
+.search-form {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 6px;
+}
+
+.search-input {
+    margin-left: 6px;
+    margin-top: 6px;
+    min-width: 300px;
+}

admin-ui/src/app/order/components/order-list/order-list.component.ts

@@ -1,5 +1,8 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import { merge } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 
 import { BaseListComponent } from '../../../common/base-list.component';
 import { GetOrderList, SortOrder } from '../../../common/generated-types';
@@ -11,21 +14,45 @@ import { DataService } from '../../../data/providers/data.service';
     styleUrls: ['./order-list.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OrderListComponent extends BaseListComponent<GetOrderList.Query, GetOrderList.Items> {
+export class OrderListComponent extends BaseListComponent<GetOrderList.Query, GetOrderList.Items>
+    implements OnInit {
+    searchTerm = new FormControl('');
+    stateFilter = new FormControl('all');
+
     constructor(private dataService: DataService, router: Router, route: ActivatedRoute) {
         super(router, route);
         super.setQueryFn(
             (...args: any[]) => this.dataService.order.getOrders(...args),
             data => data.orders,
-            (skip, take) => ({
-                options: {
-                    skip,
-                    take,
-                    sort: {
-                        updatedAt: SortOrder.DESC,
+            (skip, take) => {
+                const stateFilter = this.stateFilter.value;
+                const state = stateFilter === 'all' ? null : { eq: stateFilter };
+                return {
+                    options: {
+                        skip,
+                        take,
+                        filter: {
+                            code: {
+                                contains: this.searchTerm.value,
+                            },
+                            state,
+                        },
+                        sort: {
+                            updatedAt: SortOrder.DESC,
+                        },
                     },
-                },
-            }),
+                };
+            },
         );
     }
+
+    ngOnInit() {
+        super.ngOnInit();
+        merge(this.searchTerm.valueChanges, this.stateFilter.valueChanges)
+            .pipe(
+                debounceTime(250),
+                takeUntil(this.destroy$),
+            )
+            .subscribe(() => this.refresh());
+    }
 }

admin-ui/src/i18n-messages/en.json

@@ -454,6 +454,7 @@
     "refund-with-amount": "Refund {amount}",
     "refunded-count": "{count} {count, plural, one {item} other {items}} refunded",
     "return-to-stock": "Return to stock",
+    "search-by-order-code": "Search by order code",
     "settle-payment": "Settle payment",
     "settle-payment-error": "Could not settle payment",
     "settle-payment-success": "Sucessfully settled payment",
@@ -465,6 +466,7 @@
     "shipping-method": "Shipping method",
     "state": "State",
     "state-adding-items": "Adding items",
+    "state-all-orders": "All orders",
     "state-arranging-payment": "Arranging payment",
     "state-cancelled": "Cancelled",
     "state-fulfilled": "Fulfilled",