feat(admin-ui): Enable filtering by custom Order states in list view

Also improved highlighting of states
vendure-ecommerce · Oct 19, 2020 · 76d2d56 · 76d2d56
1 parent f7bffa9
commit 76d2d56
Show file tree

Hide file tree

Showing 7 changed files with 4,147 additions and 4,390 deletions.
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
@@ -6207,6 +6207,13 @@ export type UpdatePaymentMethodMutation = { updatePaymentMethod: (
 export type GlobalSettingsFragment = (
   { __typename?: 'GlobalSettings' }
   & Pick<GlobalSettings, 'id' | 'availableLanguages' | 'trackInventory'>
+  & { serverConfig: (
+    { __typename?: 'ServerConfig' }
+    & { orderProcess: Array<(
+      { __typename?: 'OrderProcessState' }
+      & Pick<OrderProcessState, 'name'>
+    )> }
+  ) }
 );
 
 export type GetGlobalSettingsQueryVariables = Exact<{ [key: string]: never; }>;
@@ -8015,6 +8022,8 @@ export namespace UpdatePaymentMethod {
 
 export namespace GlobalSettings {
   export type Fragment = GlobalSettingsFragment;
+  export type ServerConfig = (NonNullable<GlobalSettingsFragment['serverConfig']>);
+  export type OrderProcess = NonNullable<(NonNullable<(NonNullable<GlobalSettingsFragment['serverConfig']>)['orderProcess']>)[number]>;
 }
 
 export namespace GetGlobalSettings {

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
@@ -422,6 +422,11 @@ export const GLOBAL_SETTINGS_FRAGMENT = gql`
         id
         availableLanguages
         trackInventory
+        serverConfig {
+            orderProcess {
+                name
+            }
+        }
     }
 `;
 

diff --git a/...in-ui/src/lib/core/src/shared/components/order-state-label/order-state-label.component.ts b/...in-ui/src/lib/core/src/shared/components/order-state-label/order-state-label.component.ts
@@ -11,16 +11,20 @@ export class OrderStateLabelComponent {
 
     get chipColorType() {
         switch (this.state) {
+            case 'AddingItems':
+            case 'ArrangingPayment':
+                return '';
+            case 'Delivered':
+                return 'success';
+            case 'Cancelled':
+                return 'error';
             case 'PaymentAuthorized':
             case 'PaymentSettled':
             case 'PartiallyDelivered':
             case 'PartiallyShipped':
             case 'Shipped':
+            default:
                 return 'warning';
-            case 'Delivered':
-                return 'success';
-            case 'Cancelled':
-                return 'error';
         }
     }
 }
diff --git a/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html b/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html
@@ -3,15 +3,9 @@
         <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="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="PartiallyDelivered">
-                    {{ 'order.state-partially-delivered' | translate }}
+                <option *ngFor="let orderState of (orderStates$ | async)" [value]="orderState">
+                    {{ orderState | orderStateI18nToken | translate }}
                 </option>
-                <option value="Delivered">{{ 'order.state-delivered' | translate }}</option>
-                <option value="Cancelled">{{ 'order.state-cancelled' | translate }}</option>
             </select>
             <input
                 type="text"

diff --git a/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.ts b/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.ts
@@ -17,6 +17,7 @@ export class OrderListComponent extends BaseListComponent<GetOrderList.Query, Ge
     implements OnInit {
     searchTerm = new FormControl('');
     stateFilter = new FormControl('all');
+    orderStates$ = this.dataService.settings.getGlobalSettings().mapSingle(data => data.globalSettings.serverConfig.orderProcess.map(item => item.name));
 
     constructor(private dataService: DataService, router: Router, route: ActivatedRoute) {
         super(router, route);