feat(admin-ui): Add filter presets to the OrderDetail view

Relates to #477

packages/admin-ui/i18n-coverage.json

@@ -1,46 +1,46 @@
 {
-  "generatedOn": "2020-11-02T18:52:26.628Z",
-  "lastCommit": "345bcbf915abe30eb390ceaa02ce5fdedd1a0ff6",
+  "generatedOn": "2020-11-09T10:05:17.690Z",
+  "lastCommit": "e57386b02d02e678651ac4d0c91caecee4bc3f45",
   "translationStatus": {
     "cs": {
-      "tokenCount": 676,
-      "translatedCount": 674,
-      "percentage": 100
+      "tokenCount": 684,
+      "translatedCount": 664,
+      "percentage": 97
     },
     "de": {
-      "tokenCount": 676,
-      "translatedCount": 601,
-      "percentage": 89
+      "tokenCount": 684,
+      "translatedCount": 597,
+      "percentage": 87
     },
     "en": {
-      "tokenCount": 676,
-      "translatedCount": 672,
+      "tokenCount": 684,
+      "translatedCount": 680,
       "percentage": 99
     },
     "es": {
-      "tokenCount": 676,
-      "translatedCount": 466,
-      "percentage": 69
+      "tokenCount": 684,
+      "translatedCount": 455,
+      "percentage": 67
     },
     "pl": {
-      "tokenCount": 676,
-      "translatedCount": 556,
-      "percentage": 82
+      "tokenCount": 684,
+      "translatedCount": 552,
+      "percentage": 81
     },
     "pt_BR": {
-      "tokenCount": 676,
-      "translatedCount": 647,
-      "percentage": 96
+      "tokenCount": 684,
+      "translatedCount": 643,
+      "percentage": 94
     },
     "zh_Hans": {
-      "tokenCount": 676,
-      "translatedCount": 540,
-      "percentage": 80
+      "tokenCount": 684,
+      "translatedCount": 536,
+      "percentage": 78
     },
     "zh_Hant": {
-      "tokenCount": 676,
-      "translatedCount": 540,
-      "percentage": 80
+      "tokenCount": 684,
+      "translatedCount": 536,
+      "percentage": 78
     }
   }
 }

packages/admin-ui/src/lib/core/src/common/base-list.component.ts

@@ -14,6 +14,7 @@ export type OnPageChangeFn<V> = (skip: number, take: number) => V;
  * a list of data from a query which returns a PaginatedList type.
  */
 @Directive()
+// tslint:disable-next-line:directive-class-suffix
 export class BaseListComponent<ResultType, ItemType, VariableType = any> implements OnInit, OnDestroy {
     result$: Observable<ResultType>;
     items$: Observable<ItemType[]>;
@@ -82,11 +83,11 @@ export class BaseListComponent<ResultType, ItemType, VariableType = any> impleme
     }
 
     setPageNumber(page: number) {
-        this.setQueryParam('page', page);
+        this.setQueryParam('page', page, true);
     }
 
     setItemsPerPage(perPage: number) {
-        this.setQueryParam('perPage', perPage);
+        this.setQueryParam('perPage', perPage, true);
     }
 
     /**
@@ -96,13 +97,20 @@ export class BaseListComponent<ResultType, ItemType, VariableType = any> impleme
         this.refresh$.next(undefined);
     }
 
-    protected setQueryParam(hash: { [key: string]: any });
-    protected setQueryParam(key: string, value: any);
-    protected setQueryParam(keyOrHash: string | { [key: string]: any }, value?: any) {
+    protected setQueryParam(hash: { [key: string]: any }, replaceUrl?: boolean);
+    protected setQueryParam(key: string, value: any, replaceUrl?: boolean);
+    protected setQueryParam(
+        keyOrHash: string | { [key: string]: any },
+        valueOrReplaceUrl?: any,
+        maybeReplaceUrl?: boolean,
+    ) {
+        const paramsObject = typeof keyOrHash === 'string' ? { [keyOrHash]: valueOrReplaceUrl } : keyOrHash;
+        const replaceUrl = (typeof keyOrHash === 'string' ? maybeReplaceUrl : valueOrReplaceUrl) ?? false;
         this.router.navigate(['./'], {
-            queryParams: typeof keyOrHash === 'string' ? { [keyOrHash]: value } : keyOrHash,
+            queryParams: typeof keyOrHash === 'string' ? { [keyOrHash]: valueOrReplaceUrl } : keyOrHash,
             relativeTo: this.route,
             queryParamsHandling: 'merge',
+            replaceUrl,
         });
     }
 }

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -1322,6 +1322,11 @@ export type Order = Node & {
   id: Scalars['ID'];
   createdAt: Scalars['DateTime'];
   updatedAt: Scalars['DateTime'];
+  /**
+   * The date & time that the Order was placed, i.e. the Customer
+   * completed the checkout and the Order is no longer "active"
+   */
+  orderPlacedAt?: Maybe<Scalars['DateTime']>;
   /** A unique code for the Order */
   code: Scalars['String'];
   state: Scalars['String'];
@@ -4026,6 +4031,7 @@ export type JobSortParameter = {
 export type OrderFilterParameter = {
   createdAt?: Maybe<DateOperators>;
   updatedAt?: Maybe<DateOperators>;
+  orderPlacedAt?: Maybe<DateOperators>;
   code?: Maybe<StringOperators>;
   state?: Maybe<StringOperators>;
   active?: Maybe<BooleanOperators>;
@@ -4043,6 +4049,7 @@ export type OrderSortParameter = {
   id?: Maybe<SortOrder>;
   createdAt?: Maybe<SortOrder>;
   updatedAt?: Maybe<SortOrder>;
+  orderPlacedAt?: Maybe<SortOrder>;
   code?: Maybe<SortOrder>;
   state?: Maybe<SortOrder>;
   totalQuantity?: Maybe<SortOrder>;
@@ -5054,7 +5061,7 @@ export type OrderAddressFragment = (
 
 export type OrderFragment = (
   { __typename?: 'Order' }
-  & Pick<Order, 'id' | 'createdAt' | 'updatedAt' | 'code' | 'state' | 'nextStates' | 'total' | 'currencyCode'>
+  & Pick<Order, 'id' | 'createdAt' | 'updatedAt' | 'orderPlacedAt' | 'code' | 'state' | 'nextStates' | 'total' | 'currencyCode'>
   & { customer?: Maybe<(
     { __typename?: 'Customer' }
     & Pick<Customer, 'id' | 'firstName' | 'lastName'>

packages/admin-ui/src/lib/core/src/data/definitions/order-definitions.ts

@@ -42,6 +42,7 @@ export const ORDER_FRAGMENT = gql`
         id
         createdAt
         updatedAt
+        orderPlacedAt
         code
         state
         nextStates

packages/admin-ui/src/lib/core/src/shared/pipes/state-i18n-token.pipe.ts

@@ -6,6 +6,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 })
 export class StateI18nTokenPipe implements PipeTransform {
     private readonly stateI18nTokens = {
+        Created: _('state.created'),
         AddingItems: _('state.adding-items'),
         ArrangingPayment: _('state.arranging-payment'),
         PaymentAuthorized: _('state.payment-authorized'),

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

@@ -1,12 +1,25 @@
 <vdr-action-bar>
     <vdr-ab-left>
         <div class="search-form">
-            <select clrSelect name="state" [formControl]="stateFilter">
-                <option value="all">{{ 'state.all-orders' | translate }}</option>
-                <option *ngFor="let orderState of orderStates" [value]="orderState">
-                    {{ orderState | stateI18nToken | translate }}
-                </option>
-            </select>
+            <div class="btn-group btn-outline-primary" *ngIf="activePreset$ | async as activePreset">
+                <button
+                    class="btn"
+                    *ngFor="let preset of filterPresets"
+                    [class.btn-primary]="activePreset === preset.name"
+                    (click)="selectFilterPreset(preset.name)"
+                >
+                    {{ preset.label | translate }}
+                </button>
+                <button
+                    class="btn"
+                    [class.btn-primary]="activePreset === 'custom'"
+                    (click)="selectFilterPreset('custom')"
+                >
+                    {{ 'order.filter-custom' | translate }}
+                    <clr-icon shape="angle down"></clr-icon>
+                </button>
+            </div>
+
             <input
                 type="text"
                 name="searchTerm"
@@ -15,6 +28,41 @@
                 class="clr-input search-input"
             />
         </div>
+        <div class="custom-filters" [class.expanded]="(activePreset$ | async) === 'custom'">
+            <form [formGroup]="customFilterForm">
+                <div class="flex align-center">
+                    <ng-select
+                        [items]="orderStates"
+                        appendTo="body"
+                        [addTag]="false"
+                        [multiple]="true"
+                        formControlName="states"
+                        [placeholder]="'state.all-orders' | translate"
+                        [clearable]="true"
+                        [searchable]="false"
+                    >
+                    </ng-select>
+                    <button
+                        class="btn btn-secondary"
+                        [disabled]="customFilterForm.pristine"
+                        (click)="applyCustomFilters()"
+                    >
+                        {{ 'order.apply-filters' | translate }}
+                        <clr-icon shape="filter"></clr-icon>
+                    </button>
+                </div>
+                <div class="flex">
+                    <div>
+                        <label>{{ 'order.placed-at-start' | translate }}</label>
+                        <vdr-datetime-picker formControlName="placedAtStart"></vdr-datetime-picker>
+                    </div>
+                    <div>
+                        <label>{{ 'order.placed-at-end' | translate }}</label>
+                        <vdr-datetime-picker formControlName="placedAtEnd"></vdr-datetime-picker>
+                    </div>
+                </div>
+            </form>
+        </div>
     </vdr-ab-left>
     <vdr-ab-right>
         <vdr-action-bar-items locationId="order-list"></vdr-action-bar-items>
@@ -34,6 +82,7 @@
     <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>
+    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-order="item">
         <td class="left align-middle">{{ order.code }}</td>
@@ -44,7 +93,8 @@
             <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
         </td>
         <td class="left align-middle">{{ order.total / 100 | currency: order.currencyCode }}</td>
-        <td class="left align-middle">{{ order.updatedAt | date: 'medium' }}</td>
+        <td class="left align-middle">{{ order.updatedAt | timeAgo }}</td>
+        <td class="left align-middle">{{ order.orderPlacedAt | date: 'medium' }}</td>
         <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="shopping-cart"

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

@@ -1,8 +1,12 @@
-@import "variables";
+@import 'variables';
 
 .search-form {
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    @media screen and (min-width: $breakpoint-small) {
+        flex-direction: row;
+    }
+    align-items: baseline;
     width: 100%;
     margin-bottom: 6px;
 }
@@ -12,3 +16,28 @@
     margin-top: 6px;
     min-width: 300px;
 }
+
+.custom-filters {
+    overflow: hidden;
+    max-height: 0;
+    padding-bottom: 6px;
+    &.expanded {
+        max-height: initial;
+    }
+    > form {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        > div {
+            width: 100%;
+        }
+    }
+}
+ng-select {
+    flex: 1;
+    min-width: 200px;
+    height: 36px;
+    ::ng-deep .ng-select-container {
+        height: 36px;
+    }
+}

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

@@ -1,11 +1,27 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { BaseListComponent, ServerConfigService } from '@vendure/admin-ui/core';
-import { GetOrderList, SortOrder } from '@vendure/admin-ui/core';
-import { DataService } from '@vendure/admin-ui/core';
-import { merge } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import {
+    BaseListComponent,
+    DataService,
+    GetOrderList,
+    ServerConfigService,
+    SortOrder,
+} from '@vendure/admin-ui/core';
+import { merge, Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map, skip, takeUntil } from 'rxjs/operators';
+
+interface OrderFilterConfig {
+    active?: boolean;
+    states?: string[];
+}
+
+interface FilterPreset {
+    name: string;
+    label: string;
+    config: OrderFilterConfig;
+}
 
 @Component({
     selector: 'vdr-order-list',
@@ -17,8 +33,34 @@ export class OrderListComponent
     extends BaseListComponent<GetOrderList.Query, GetOrderList.Items>
     implements OnInit {
     searchTerm = new FormControl('');
-    stateFilter = new FormControl('all');
+    customFilterForm: FormGroup;
     orderStates = this.serverConfigService.getOrderProcessStates().map(item => item.name);
+    filterPresets: FilterPreset[] = [
+        {
+            name: 'open',
+            label: _('order.filter-preset-open'),
+            config: {
+                active: false,
+                states: this.orderStates.filter(s => s !== 'Delivered'),
+            },
+        },
+        {
+            name: 'completed',
+            label: _('order.filter-preset-completed'),
+            config: {
+                active: false,
+                states: ['Delivered'],
+            },
+        },
+        {
+            name: 'active',
+            label: _('order.filter-preset-active'),
+            config: {
+                active: true,
+            },
+        },
+    ];
+    activePreset$: Observable<string>;
 
     constructor(
         private serverConfigService: ServerConfigService,
@@ -30,32 +72,101 @@ export class OrderListComponent
         super.setQueryFn(
             (...args: any[]) => this.dataService.order.getOrders(...args).refetchOnChannelChange(),
             data => data.orders,
-            (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,
-                        },
-                    },
-                };
-            },
+            // tslint:disable-next-line:no-shadowed-variable
+            (skip, take) =>
+                this.createQueryOptions(
+                    skip,
+                    take,
+                    this.searchTerm.value,
+                    this.route.snapshot.queryParamMap.get('filter') || 'open',
+                ),
         );
     }
 
     ngOnInit() {
         super.ngOnInit();
-        merge(this.searchTerm.valueChanges, this.stateFilter.valueChanges)
+        this.activePreset$ = this.route.queryParamMap.pipe(
+            map(qpm => qpm.get('filter') || 'open'),
+            distinctUntilChanged(),
+        );
+        merge(this.searchTerm.valueChanges, this.activePreset$.pipe(skip(1)))
             .pipe(debounceTime(250), takeUntil(this.destroy$))
             .subscribe(() => this.refresh());
+        this.customFilterForm = new FormGroup({
+            states: new FormControl([]),
+            placedAtStart: new FormControl(),
+            placedAtEnd: new FormControl(),
+        });
+    }
+
+    selectFilterPreset(presetName: string) {
+        this.setQueryParam(
+            {
+                filter: presetName,
+                page: 1,
+            },
+            true,
+        );
+    }
+
+    applyCustomFilters() {
+        this.customFilterForm.markAsPristine();
+        this.refresh();
+    }
+
+    // tslint:disable-next-line:no-shadowed-variable
+    private createQueryOptions(skip: number, take: number, searchTerm: string, activeFilterPreset?: string) {
+        const filterConfig = this.filterPresets.find(p => p.name === activeFilterPreset);
+        const filter: any = {};
+        if (filterConfig) {
+            if (filterConfig.config.active != null) {
+                filter.active = {
+                    eq: filterConfig.config.active,
+                };
+            }
+            if (filterConfig.config.states) {
+                filter.state = {
+                    in: filterConfig.config.states,
+                };
+            }
+        } else if (activeFilterPreset === 'custom') {
+            const formValue = this.customFilterForm?.value ?? {};
+            if (formValue.states?.length) {
+                filter.state = {
+                    in: formValue.states,
+                };
+            }
+            if (formValue.placedAtStart && formValue.placedAtEnd) {
+                filter.orderPlacedAt = {
+                    between: {
+                        start: formValue.placedAtStart,
+                        end: formValue.placedAtEnd,
+                    },
+                };
+            } else if (formValue.placedAtStart) {
+                filter.orderPlacedAt = {
+                    after: formValue.placedAtStart,
+                };
+            } else if (formValue.placedAtEnd) {
+                filter.orderPlacedAt = {
+                    before: formValue.placedAtEnd,
+                };
+            }
+        }
+        return {
+            options: {
+                skip,
+                take,
+                filter: {
+                    ...(filter ?? {}),
+                    code: {
+                        contains: searchTerm,
+                    },
+                },
+                sort: {
+                    updatedAt: SortOrder.DESC,
+                },
+            },
+        };
     }
 }

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

@@ -530,6 +530,7 @@
   "order": {
     "add-note": "Přidat poznámku",
     "amount": "Částka",
+    "apply-filters": "",
     "billing-address": "Fakturační adresa",
     "cancel": "Zrušit",
     "cancel-fulfillment": "Zrušit zpracování",
@@ -543,6 +544,10 @@
     "create-fulfillment": "Zpracovat",
     "create-fulfillment-success": "Zpracováno",
     "customer": "Zákazník",
+    "filter-custom": "",
+    "filter-preset-active": "",
+    "filter-preset-completed": "",
+    "filter-preset-open": "",
     "fulfill": "Zpracovat",
     "fulfill-order": "Zpracovat objednávku",
     "fulfillment": "Zpracování",
@@ -577,6 +582,9 @@
     "payment-method": "Platební metoda",
     "payment-state": "Stav",
     "payment-to-refund": "Platba k refundaci",
+    "placed-at": "",
+    "placed-at-end": "",
+    "placed-at-start": "",
     "product-name": "Název produktu",
     "product-sku": "SKU",
     "promotions-applied": "Promotions applied",
@@ -675,9 +683,10 @@
   },
   "state": {
     "adding-items": "Košík",
-    "all-orders": "Všechny objednávky",
+    "all-orders": "",
     "arranging-payment": "Zřizování platby",
     "cancelled": "Zrušeno",
+    "created": "",
     "delivered": "Doručeno",
     "failed": "Selhalo",
     "partially-delivered": "Částečně doručeno",

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

@@ -530,6 +530,7 @@
   "order": {
     "add-note": "Notiz hinzufügen",
     "amount": "Betrag",
+    "apply-filters": "",
     "billing-address": "",
     "cancel": "Abbrechen",
     "cancel-fulfillment": "",
@@ -543,6 +544,10 @@
     "create-fulfillment": "Auftrag ausführen",
     "create-fulfillment-success": "Auftrag ausgeführt",
     "customer": "Kunde",
+    "filter-custom": "",
+    "filter-preset-active": "",
+    "filter-preset-completed": "",
+    "filter-preset-open": "",
     "fulfill": "Ausführen",
     "fulfill-order": "Auftragsausführung",
     "fulfillment": "Ausführung",
@@ -577,6 +582,9 @@
     "payment-method": "Zahlungsart",
     "payment-state": "Status",
     "payment-to-refund": "Zu erstattende Zahlung",
+    "placed-at": "",
+    "placed-at-end": "",
+    "placed-at-start": "",
     "product-name": "Produktname",
     "product-sku": "Artikelnummer",
     "promotions-applied": "Aktivierte Werbeaktionen",
@@ -675,9 +683,10 @@
   },
   "state": {
     "adding-items": "Artikel hinzufügen",
-    "all-orders": "Alle Bestellungen",
+    "all-orders": "",
     "arranging-payment": "Zahlung einrichten",
     "cancelled": "Storniert",
+    "created": "",
     "delivered": "Ausgeführt",
     "failed": "",
     "partially-delivered": "Teilweise ausgeführt",
@@ -706,4 +715,4 @@
     "job-result": "Job-Ergebnis",
     "job-state": "Job-Status"
   }
-}
+}

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

@@ -530,6 +530,7 @@
   "order": {
     "add-note": "Add note",
     "amount": "Amount",
+    "apply-filters": "Apply filters",
     "billing-address": "Billing address",
     "cancel": "Cancel",
     "cancel-fulfillment": "Cancel fulfillment",
@@ -543,6 +544,10 @@
     "create-fulfillment": "Create fulfillment",
     "create-fulfillment-success": "Created fulfillment",
     "customer": "Customer",
+    "filter-custom": "Custom",
+    "filter-preset-active": "Active",
+    "filter-preset-completed": "Completed",
+    "filter-preset-open": "Open",
     "fulfill": "Fulfill",
     "fulfill-order": "Fulfill order",
     "fulfillment": "Fulfillment",
@@ -577,6 +582,9 @@
     "payment-method": "Payment method",
     "payment-state": "State",
     "payment-to-refund": "Payment to refund",
+    "placed-at": "Placed at",
+    "placed-at-end": "Placed at - until",
+    "placed-at-start": "Placed at - from",
     "product-name": "Product name",
     "product-sku": "SKU",
     "promotions-applied": "Promotions applied",
@@ -675,9 +683,10 @@
   },
   "state": {
     "adding-items": "Adding items",
-    "all-orders": "All orders",
+    "all-orders": "All order states",
     "arranging-payment": "Arranging payment",
     "cancelled": "Cancelled",
+    "created": "Created",
     "delivered": "Delivered",
     "failed": "Failed",
     "partially-delivered": "Partially delivered",

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

@@ -530,6 +530,7 @@
   "order": {
     "add-note": "",
     "amount": "Precio",
+    "apply-filters": "",
     "billing-address": "",
     "cancel": "",
     "cancel-fulfillment": "",
@@ -543,6 +544,10 @@
     "create-fulfillment": "",
     "create-fulfillment-success": "",
     "customer": "Cliente",
+    "filter-custom": "",
+    "filter-preset-active": "",
+    "filter-preset-completed": "",
+    "filter-preset-open": "",
     "fulfill": "",
     "fulfill-order": "",
     "fulfillment": "",
@@ -577,6 +582,9 @@
     "payment-method": "método de pago",
     "payment-state": "",
     "payment-to-refund": "",
+    "placed-at": "",
+    "placed-at-end": "",
+    "placed-at-start": "",
     "product-name": "Nombre del producto",
     "product-sku": "SKU",
     "promotions-applied": "",
@@ -678,6 +686,7 @@
     "all-orders": "",
     "arranging-payment": "",
     "cancelled": "",
+    "created": "",
     "delivered": "",
     "failed": "",
     "partially-delivered": "",

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

@@ -530,6 +530,7 @@
   "order": {
     "add-note": "Dodaj notatke",
     "amount": "Ilość",
+    "apply-filters": "",
     "billing-address": "",
     "cancel": "Anuluj",
     "cancel-fulfillment": "",
@@ -543,6 +544,10 @@
     "create-fulfillment": "Utwórz wypełnienie",
     "create-fulfillment-success": "Utworzono wypełnienie pomyślnie",
     "customer": "Klient",
+    "filter-custom": "",
+    "filter-preset-active": "",
+    "filter-preset-completed": "",
+    "filter-preset-open": "",
     "fulfill": "Zrealizuj",
     "fulfill-order": "Zrealizuj zamówienie",
     "fulfillment": "Realizacja",
@@ -577,6 +582,9 @@
     "payment-method": "Metoda płatności",
     "payment-state": "Status",
     "payment-to-refund": "Płatność do zwrotu",
+    "placed-at": "",
+    "placed-at-end": "",
+    "placed-at-start": "",
     "product-name": "Nazwa produktu",
     "product-sku": "SKU",
     "promotions-applied": "Zastosowane promocje",
@@ -675,9 +683,10 @@
   },
   "state": {
     "adding-items": "Dodawanie",
-    "all-orders": "Wszystkie zamówienia",
+    "all-orders": "",
     "arranging-payment": "Oczekiwanie na płatność",
     "cancelled": "Anulowano",
+    "created": "",
     "delivered": "Zrealizowano",
     "failed": "",
     "partially-delivered": "Częściowo zrealizowano",
@@ -706,4 +715,4 @@
     "job-result": "Rezultat zlecenia",
     "job-state": "Status zlecenia"
   }
-}
+}

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

@@ -530,6 +530,7 @@
   "order": {
     "add-note": "Adicionar nota",
     "amount": "Total",
+    "apply-filters": "",
     "billing-address": "Endereço de cobrança",
     "cancel": "Cancelar",
     "cancel-fulfillment": "",
@@ -543,6 +544,10 @@
     "create-fulfillment": "Criar a execução",
     "create-fulfillment-success": "Execução criada",
     "customer": "Cliente",
+    "filter-custom": "",
+    "filter-preset-active": "",
+    "filter-preset-completed": "",
+    "filter-preset-open": "",
     "fulfill": "Executar",
     "fulfill-order": "Executar o pedido",
     "fulfillment": "Execução",
@@ -577,6 +582,9 @@
     "payment-method": "Método de pagamento",
     "payment-state": "Estado",
     "payment-to-refund": "Pagamento para reembolso",
+    "placed-at": "",
+    "placed-at-end": "",
+    "placed-at-start": "",
     "product-name": "Nome do produto",
     "product-sku": "SKU",
     "promotions-applied": "Promoções aplicadas",
@@ -675,9 +683,10 @@
   },
   "state": {
     "adding-items": "Criando itens",
-    "all-orders": "Todos os pedidos",
+    "all-orders": "",
     "arranging-payment": "Organização de pagamento",
     "cancelled": "Cancelado",
+    "created": "",
     "delivered": "Realizado",
     "failed": "",
     "partially-delivered": "Parcialmente realizado",
@@ -706,4 +715,4 @@
     "job-result": "Resultado do trabalho",
     "job-state": "Estado do trabalho"
   }
-}
+}

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

@@ -530,6 +530,7 @@
   "order": {
     "add-note": "添加备注",
     "amount": "金额",
+    "apply-filters": "",
     "billing-address": "",
     "cancel": "取消",
     "cancel-fulfillment": "",
@@ -543,6 +544,10 @@
     "create-fulfillment": "确认配货",
     "create-fulfillment-success": "确认配货成功",
     "customer": "客户",
+    "filter-custom": "",
+    "filter-preset-active": "",
+    "filter-preset-completed": "",
+    "filter-preset-open": "",
     "fulfill": "已配货",
     "fulfill-order": "接受订单",
     "fulfillment": "配货记录",
@@ -577,6 +582,9 @@
     "payment-method": "付款方式",
     "payment-state": "付款状态",
     "payment-to-refund": "退款订单付款信息",
+    "placed-at": "",
+    "placed-at-end": "",
+    "placed-at-start": "",
     "product-name": "产品名称",
     "product-sku": "库存编码",
     "promotions-applied": "已使用代金券",
@@ -675,9 +683,10 @@
   },
   "state": {
     "adding-items": "正在选择商品",
-    "all-orders": "所有订单",
+    "all-orders": "",
     "arranging-payment": "正在付款",
     "cancelled": "已取消",
+    "created": "",
     "delivered": "已完成",
     "failed": "",
     "partially-delivered": "部分配货",
@@ -706,4 +715,4 @@
     "job-result": "",
     "job-state": ""
   }
-}
+}

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

@@ -530,6 +530,7 @@
   "order": {
     "add-note": "新增備注",
     "amount": "金額",
+    "apply-filters": "",
     "billing-address": "",
     "cancel": "取消",
     "cancel-fulfillment": "",
@@ -543,6 +544,10 @@
     "create-fulfillment": "確認配貨",
     "create-fulfillment-success": "確認配貨成功",
     "customer": "客户",
+    "filter-custom": "",
+    "filter-preset-active": "",
+    "filter-preset-completed": "",
+    "filter-preset-open": "",
     "fulfill": "已配貨",
     "fulfill-order": "接受訂單",
     "fulfillment": "配貨記錄",
@@ -577,6 +582,9 @@
     "payment-method": "付款方式",
     "payment-state": "付款狀態",
     "payment-to-refund": "退款訂單付款信息",
+    "placed-at": "",
+    "placed-at-end": "",
+    "placed-at-start": "",
     "product-name": "產品名稱",
     "product-sku": "庫存編碼",
     "promotions-applied": "已使用優惠券",
@@ -675,9 +683,10 @@
   },
   "state": {
     "adding-items": "正在選擇商品",
-    "all-orders": "所有訂單",
+    "all-orders": "",
     "arranging-payment": "正在付款",
     "cancelled": "已取消",
+    "created": "",
     "delivered": "已完成",
     "failed": "",
     "partially-delivered": "部分配貨",
@@ -706,4 +715,4 @@
     "job-result": "",
     "job-state": ""
   }
-}
+}

packages/admin-ui/src/lib/static/styles/theme/_theme.scss

@@ -21,6 +21,10 @@ a:focus, button:focus {
     flex: 1;
 }
 
+.align-center {
+    align-items: center;
+}
+
 .btn-link.btn-warning {
     color: $color-warning-500;
 

packages/asset-server-plugin/e2e/graphql/generated-e2e-asset-server-plugin-types.ts

@@ -1145,6 +1145,11 @@ export type Order = Node & {
     id: Scalars['ID'];
     createdAt: Scalars['DateTime'];
     updatedAt: Scalars['DateTime'];
+    /**
+     * The date & time that the Order was placed, i.e. the Customer
+     * completed the checkout and the Order is no longer "active"
+     */
+    orderPlacedAt?: Maybe<Scalars['DateTime']>;
     /** A unique code for the Order */
     code: Scalars['String'];
     state: Scalars['String'];
@@ -3766,6 +3771,7 @@ export type JobSortParameter = {
 export type OrderFilterParameter = {
     createdAt?: Maybe<DateOperators>;
     updatedAt?: Maybe<DateOperators>;
+    orderPlacedAt?: Maybe<DateOperators>;
     code?: Maybe<StringOperators>;
     state?: Maybe<StringOperators>;
     active?: Maybe<BooleanOperators>;
@@ -3783,6 +3789,7 @@ export type OrderSortParameter = {
     id?: Maybe<SortOrder>;
     createdAt?: Maybe<SortOrder>;
     updatedAt?: Maybe<SortOrder>;
+    orderPlacedAt?: Maybe<SortOrder>;
     code?: Maybe<SortOrder>;
     state?: Maybe<SortOrder>;
     totalQuantity?: Maybe<SortOrder>;

packages/common/src/generated-shop-types.ts

@@ -2015,6 +2015,11 @@ export type Order = Node & {
     id: Scalars['ID'];
     createdAt: Scalars['DateTime'];
     updatedAt: Scalars['DateTime'];
+    /**
+     * The date & time that the Order was placed, i.e. the Customer
+     * completed the checkout and the Order is no longer "active"
+     */
+    orderPlacedAt?: Maybe<Scalars['DateTime']>;
     /** A unique code for the Order */
     code: Scalars['String'];
     state: Scalars['String'];
@@ -2713,6 +2718,7 @@ export type CustomerSortParameter = {
 export type OrderFilterParameter = {
     createdAt?: Maybe<DateOperators>;
     updatedAt?: Maybe<DateOperators>;
+    orderPlacedAt?: Maybe<DateOperators>;
     code?: Maybe<StringOperators>;
     state?: Maybe<StringOperators>;
     active?: Maybe<BooleanOperators>;
@@ -2730,6 +2736,7 @@ export type OrderSortParameter = {
     id?: Maybe<SortOrder>;
     createdAt?: Maybe<SortOrder>;
     updatedAt?: Maybe<SortOrder>;
+    orderPlacedAt?: Maybe<SortOrder>;
     code?: Maybe<SortOrder>;
     state?: Maybe<SortOrder>;
     totalQuantity?: Maybe<SortOrder>;

packages/common/src/generated-types.ts

@@ -1291,6 +1291,11 @@ export type Order = Node & {
   id: Scalars['ID'];
   createdAt: Scalars['DateTime'];
   updatedAt: Scalars['DateTime'];
+  /**
+   * The date & time that the Order was placed, i.e. the Customer
+   * completed the checkout and the Order is no longer "active"
+   */
+  orderPlacedAt?: Maybe<Scalars['DateTime']>;
   /** A unique code for the Order */
   code: Scalars['String'];
   state: Scalars['String'];
@@ -3994,6 +3999,7 @@ export type JobSortParameter = {
 export type OrderFilterParameter = {
   createdAt?: Maybe<DateOperators>;
   updatedAt?: Maybe<DateOperators>;
+  orderPlacedAt?: Maybe<DateOperators>;
   code?: Maybe<StringOperators>;
   state?: Maybe<StringOperators>;
   active?: Maybe<BooleanOperators>;
@@ -4011,6 +4017,7 @@ export type OrderSortParameter = {
   id?: Maybe<SortOrder>;
   createdAt?: Maybe<SortOrder>;
   updatedAt?: Maybe<SortOrder>;
+  orderPlacedAt?: Maybe<SortOrder>;
   code?: Maybe<SortOrder>;
   state?: Maybe<SortOrder>;
   totalQuantity?: Maybe<SortOrder>;

packages/core/e2e/graphql/generated-e2e-admin-types.ts

@@ -1145,6 +1145,11 @@ export type Order = Node & {
     id: Scalars['ID'];
     createdAt: Scalars['DateTime'];
     updatedAt: Scalars['DateTime'];
+    /**
+     * The date & time that the Order was placed, i.e. the Customer
+     * completed the checkout and the Order is no longer "active"
+     */
+    orderPlacedAt?: Maybe<Scalars['DateTime']>;
     /** A unique code for the Order */
     code: Scalars['String'];
     state: Scalars['String'];
@@ -3766,6 +3771,7 @@ export type JobSortParameter = {
 export type OrderFilterParameter = {
     createdAt?: Maybe<DateOperators>;
     updatedAt?: Maybe<DateOperators>;
+    orderPlacedAt?: Maybe<DateOperators>;
     code?: Maybe<StringOperators>;
     state?: Maybe<StringOperators>;
     active?: Maybe<BooleanOperators>;
@@ -3783,6 +3789,7 @@ export type OrderSortParameter = {
     id?: Maybe<SortOrder>;
     createdAt?: Maybe<SortOrder>;
     updatedAt?: Maybe<SortOrder>;
+    orderPlacedAt?: Maybe<SortOrder>;
     code?: Maybe<SortOrder>;
     state?: Maybe<SortOrder>;
     totalQuantity?: Maybe<SortOrder>;

packages/core/e2e/graphql/generated-e2e-shop-types.ts

@@ -1940,6 +1940,11 @@ export type Order = Node & {
     id: Scalars['ID'];
     createdAt: Scalars['DateTime'];
     updatedAt: Scalars['DateTime'];
+    /**
+     * The date & time that the Order was placed, i.e. the Customer
+     * completed the checkout and the Order is no longer "active"
+     */
+    orderPlacedAt?: Maybe<Scalars['DateTime']>;
     /** A unique code for the Order */
     code: Scalars['String'];
     state: Scalars['String'];
@@ -2593,6 +2598,7 @@ export type CustomerSortParameter = {
 export type OrderFilterParameter = {
     createdAt?: Maybe<DateOperators>;
     updatedAt?: Maybe<DateOperators>;
+    orderPlacedAt?: Maybe<DateOperators>;
     code?: Maybe<StringOperators>;
     state?: Maybe<StringOperators>;
     active?: Maybe<BooleanOperators>;
@@ -2610,6 +2616,7 @@ export type OrderSortParameter = {
     id?: Maybe<SortOrder>;
     createdAt?: Maybe<SortOrder>;
     updatedAt?: Maybe<SortOrder>;
+    orderPlacedAt?: Maybe<SortOrder>;
     code?: Maybe<SortOrder>;
     state?: Maybe<SortOrder>;
     totalQuantity?: Maybe<SortOrder>;

packages/core/src/api/schema/type/order.type.graphql

@@ -2,6 +2,11 @@ type Order implements Node {
     id: ID!
     createdAt: DateTime!
     updatedAt: DateTime!
+    """
+    The date & time that the Order was placed, i.e. the Customer
+    completed the checkout and the Order is no longer "active"
+    """
+    orderPlacedAt: DateTime
     "A unique code for the Order"
     code: String!
     state: String!

packages/elasticsearch-plugin/e2e/graphql/generated-e2e-elasticsearch-plugin-types.ts

@@ -1145,6 +1145,11 @@ export type Order = Node & {
     id: Scalars['ID'];
     createdAt: Scalars['DateTime'];
     updatedAt: Scalars['DateTime'];
+    /**
+     * The date & time that the Order was placed, i.e. the Customer
+     * completed the checkout and the Order is no longer "active"
+     */
+    orderPlacedAt?: Maybe<Scalars['DateTime']>;
     /** A unique code for the Order */
     code: Scalars['String'];
     state: Scalars['String'];
@@ -3766,6 +3771,7 @@ export type JobSortParameter = {
 export type OrderFilterParameter = {
     createdAt?: Maybe<DateOperators>;
     updatedAt?: Maybe<DateOperators>;
+    orderPlacedAt?: Maybe<DateOperators>;
     code?: Maybe<StringOperators>;
     state?: Maybe<StringOperators>;
     active?: Maybe<BooleanOperators>;
@@ -3783,6 +3789,7 @@ export type OrderSortParameter = {
     id?: Maybe<SortOrder>;
     createdAt?: Maybe<SortOrder>;
     updatedAt?: Maybe<SortOrder>;
+    orderPlacedAt?: Maybe<SortOrder>;
     code?: Maybe<SortOrder>;
     state?: Maybe<SortOrder>;
     totalQuantity?: Maybe<SortOrder>;