Add search to draft orders

src/collections/views/CollectionList/CollectionList.tsx

@@ -5,7 +5,6 @@ import DeleteIcon from "@material-ui/icons/Delete";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { CategoryListUrlFilters } from "@saleor/categories/urls";
 import ActionDialog from "@saleor/components/ActionDialog";
 import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
 import SaveFilterTabDialog, {
@@ -33,6 +32,7 @@ import {
   collectionAddUrl,
   collectionListUrl,
   CollectionListUrlDialog,
+  CollectionListUrlFilters,
   CollectionListUrlQueryParams,
   collectionUrl
 } from "../../urls";
@@ -72,7 +72,7 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
         : 0
       : parseInt(params.activeTab, 0);
 
-  const changeFilterField = (filter: CategoryListUrlFilters) => {
+  const changeFilterField = (filter: CollectionListUrlFilters) => {
     reset();
     navigate(
       collectionListUrl({

src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx

@@ -6,18 +6,36 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
+import SearchBar from "@saleor/components/SearchBar";
 import { sectionNames } from "@saleor/intl";
-import { ListActions, PageListProps } from "@saleor/types";
+import {
+  ListActions,
+  PageListProps,
+  SearchPageProps,
+  TabPageProps
+} from "@saleor/types";
 import { OrderDraftList_draftOrders_edges_node } from "../../types/OrderDraftList";
 import OrderDraftList from "../OrderDraftList";
 
-export interface OrderDraftListPageProps extends PageListProps, ListActions {
+export interface OrderDraftListPageProps
+  extends PageListProps,
+    ListActions,
+    SearchPageProps,
+    TabPageProps {
   orders: OrderDraftList_draftOrders_edges_node[];
 }
 
 const OrderDraftListPage: React.StatelessComponent<OrderDraftListPageProps> = ({
+  currentTab,
   disabled,
+  initialSearch,
   onAdd,
+  onAll,
+  onSearchChange,
+  onTabChange,
+  onTabDelete,
+  onTabSave,
+  tabs,
   ...listProps
 }) => {
   const intl = useIntl();
@@ -38,6 +56,19 @@ const OrderDraftListPage: React.StatelessComponent<OrderDraftListPageProps> = ({
         </Button>
       </PageHeader>
       <Card>
+        <SearchBar
+          currentTab={currentTab}
+          initialSearch={initialSearch}
+          searchPlaceholder={intl.formatMessage({
+            defaultMessage: "Search Collection"
+          })}
+          tabs={tabs}
+          onAll={onAll}
+          onSearchChange={onSearchChange}
+          onTabChange={onTabChange}
+          onTabDelete={onTabDelete}
+          onTabSave={onTabSave}
+        />
         <OrderDraftList disabled={disabled} {...listProps} />
       </Card>
     </Container>

src/orders/queries.ts

@@ -221,8 +221,15 @@ export const orderDraftListQuery = gql`
     $after: String
     $last: Int
     $before: String
+    $filter: OrderDraftFilterInput
   ) {
-    draftOrders(before: $before, after: $after, first: $first, last: $last) {
+    draftOrders(
+      before: $before
+      after: $after
+      first: $first
+      last: $last
+      filter: $filter
+    ) {
       edges {
         node {
           __typename

src/orders/types/OrderDraftList.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { PaymentChargeStatusEnum, OrderStatus } from "./../../types/globalTypes";
+import { OrderDraftFilterInput, PaymentChargeStatusEnum, OrderStatus } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL query operation: OrderDraftList
@@ -81,4 +81,5 @@ export interface OrderDraftListVariables {
   after?: string | null;
   last?: number | null;
   before?: string | null;
+  filter?: OrderDraftFilterInput | null;
 }

src/orders/urls.ts

@@ -42,9 +42,15 @@ export const orderListUrl = (params?: OrderListUrlQueryParams): string => {
 };
 
 export const orderDraftListPath = urlJoin(orderSectionUrl, "drafts");
-export type OrderDraftListUrlDialog = "remove";
-export type OrderDraftListUrlQueryParams = BulkAction &
+export enum OrderDraftListUrlFiltersEnum {
+  query = "query"
+}
+export type OrderDraftListUrlFilters = Filters<OrderDraftListUrlFiltersEnum>;
+export type OrderDraftListUrlDialog = "remove" | TabActionDialog;
+export type OrderDraftListUrlQueryParams = ActiveTab &
+  BulkAction &
   Dialog<OrderDraftListUrlDialog> &
+  OrderDraftListUrlFilters &
   Pagination;
 export const orderDraftListUrl = (
   params?: OrderDraftListUrlQueryParams

src/orders/views/OrderDraftList/OrderDraftList.tsx

@@ -5,6 +5,10 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import ActionDialog from "@saleor/components/ActionDialog";
+import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
+import SaveFilterTabDialog, {
+  SaveFilterTabDialogFormData
+} from "@saleor/components/SaveFilterTabDialog";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useListSettings from "@saleor/hooks/useListSettings";
 import useNavigator from "@saleor/hooks/useNavigator";
@@ -14,19 +18,29 @@ import usePaginator, {
 } from "@saleor/hooks/usePaginator";
 import { getMutationState, maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
-import OrderDraftListPage from "../components/OrderDraftListPage";
+import OrderDraftListPage from "../../components/OrderDraftListPage";
 import {
   TypedOrderDraftBulkCancelMutation,
   TypedOrderDraftCreateMutation
-} from "../mutations";
-import { TypedOrderDraftListQuery } from "../queries";
-import { OrderDraftBulkCancel } from "../types/OrderDraftBulkCancel";
-import { OrderDraftCreate } from "../types/OrderDraftCreate";
+} from "../../mutations";
+import { TypedOrderDraftListQuery } from "../../queries";
+import { OrderDraftBulkCancel } from "../../types/OrderDraftBulkCancel";
+import { OrderDraftCreate } from "../../types/OrderDraftCreate";
 import {
   orderDraftListUrl,
+  OrderDraftListUrlDialog,
+  OrderDraftListUrlFilters,
   OrderDraftListUrlQueryParams,
   orderUrl
-} from "../urls";
+} from "../../urls";
+import {
+  areFiltersApplied,
+  deleteFilterTab,
+  getActiveFilters,
+  getFilterTabs,
+  getFilterVariables,
+  saveFilterTab
+} from "./filter";
 
 interface OrderDraftListProps {
   params: OrderDraftListUrlQueryParams;
@@ -46,6 +60,26 @@ export const OrderDraftList: React.StatelessComponent<OrderDraftListProps> = ({
   );
   const intl = useIntl();
 
+  const tabs = getFilterTabs();
+
+  const currentTab =
+    params.activeTab === undefined
+      ? areFiltersApplied(params)
+        ? tabs.length + 1
+        : 0
+      : parseInt(params.activeTab, 0);
+
+  const changeFilterField = (filter: OrderDraftListUrlFilters) => {
+    reset();
+    navigate(
+      orderDraftListUrl({
+        ...getActiveFilters(params),
+        ...filter,
+        activeTab: undefined
+      })
+    );
+  };
+
   const closeModal = () =>
     navigate(
       orderDraftListUrl({
@@ -64,12 +98,49 @@ export const OrderDraftList: React.StatelessComponent<OrderDraftListProps> = ({
     navigate(orderUrl(data.draftOrderCreate.order.id));
   };
 
+  const openModal = (action: OrderDraftListUrlDialog, ids?: string[]) =>
+    navigate(
+      orderDraftListUrl({
+        ...params,
+        action,
+        ids
+      })
+    );
+
+  const handleTabChange = (tab: number) => {
+    reset();
+    navigate(
+      orderDraftListUrl({
+        activeTab: tab.toString(),
+        ...getFilterTabs()[tab - 1].data
+      })
+    );
+  };
+
+  const handleTabDelete = () => {
+    deleteFilterTab(currentTab);
+    reset();
+    navigate(orderDraftListUrl());
+  };
+
+  const handleTabSave = (data: SaveFilterTabDialogFormData) => {
+    saveFilterTab(data.name, getActiveFilters(params));
+    handleTabChange(tabs.length + 1);
+  };
+
   const paginationState = createPaginationState(settings.rowNumber, params);
+  const queryVariables = React.useMemo(
+    () => ({
+      ...paginationState,
+      filter: getFilterVariables(params)
+    }),
+    [params]
+  );
 
   return (
     <TypedOrderDraftCreateMutation onCompleted={handleCreateOrderCreateSuccess}>
       {createOrder => (
-        <TypedOrderDraftListQuery displayLoader variables={paginationState}>
+        <TypedOrderDraftListQuery displayLoader variables={queryVariables}>
           {({ data, loading, refetch }) => {
             const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
               maybe(() => data.draftOrders.pageInfo),
@@ -114,6 +185,14 @@ export const OrderDraftList: React.StatelessComponent<OrderDraftListProps> = ({
                   return (
                     <>
                       <OrderDraftListPage
+                        currentTab={currentTab}
+                        initialSearch={params.query || ""}
+                        onSearchChange={query => changeFilterField({ query })}
+                        onAll={() => navigate(orderDraftListUrl())}
+                        onTabChange={handleTabChange}
+                        onTabDelete={() => openModal("delete-search")}
+                        onTabSave={() => openModal("save-search")}
+                        tabs={tabs.map(tab => tab.name)}
                         disabled={loading}
                         settings={settings}
                         orders={maybe(() =>
@@ -174,6 +253,19 @@ export const OrderDraftList: React.StatelessComponent<OrderDraftListProps> = ({
                           />
                         </DialogContentText>
                       </ActionDialog>
+                      <SaveFilterTabDialog
+                        open={params.action === "save-search"}
+                        confirmButtonState="default"
+                        onClose={closeModal}
+                        onSubmit={handleTabSave}
+                      />
+                      <DeleteFilterTabDialog
+                        open={params.action === "delete-search"}
+                        confirmButtonState="default"
+                        onClose={closeModal}
+                        onSubmit={handleTabDelete}
+                        tabName={maybe(() => tabs[currentTab - 1].name, "...")}
+                      />
                     </>
                   );
                 }}

src/orders/views/OrderDraftList/filter.ts

@@ -0,0 +1,31 @@
+import { OrderDraftFilterInput } from "@saleor/types/globalTypes";
+import {
+  createFilterTabUtils,
+  createFilterUtils
+} from "../../../utils/filters";
+import {
+  OrderDraftListUrlFilters,
+  OrderDraftListUrlFiltersEnum,
+  OrderDraftListUrlQueryParams
+} from "../../urls";
+
+export const ORDER_DRAFT_FILTERS_KEY = "orderDraftFilters";
+
+export function getFilterVariables(
+  params: OrderDraftListUrlFilters
+): OrderDraftFilterInput {
+  return {
+    search: params.query
+  };
+}
+
+export const {
+  deleteFilterTab,
+  getFilterTabs,
+  saveFilterTab
+} = createFilterTabUtils<OrderDraftListUrlFilters>(ORDER_DRAFT_FILTERS_KEY);
+
+export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+  OrderDraftListUrlQueryParams,
+  OrderDraftListUrlFilters
+>(OrderDraftListUrlFiltersEnum);

src/orders/views/OrderDraftList/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./OrderDraftList";
+export * from "./OrderDraftList";

src/types/globalTypes.ts

@@ -452,6 +452,12 @@ export interface OrderAddNoteInput {
   message?: string | null;
 }
 
+export interface OrderDraftFilterInput {
+  customer?: string | null;
+  created?: DateRangeInput | null;
+  search?: string | null;
+}
+
 export interface OrderFilterInput {
   paymentStatus?: (PaymentChargeStatusEnum | null)[] | null;
   status?: (OrderStatusFilter | null)[] | null;