Add search bar to vouchers

src/discounts/components/VoucherList/VoucherList.tsx

@@ -1,4 +1,3 @@
-import Card from "@material-ui/core/Card";
 import {
   createStyles,
   Theme,
@@ -98,7 +97,6 @@ const VoucherList = withStyles(styles, {
     toggleAll,
     toolbar
   }: VoucherListProps & WithStyles<typeof styles>) => (
-    <Card>
     <Table>
       <TableHead
         colSpan={numberOfColumns}
@@ -109,10 +107,7 @@ const VoucherList = withStyles(styles, {
         toolbar={toolbar}
       >
         <TableCell className={classes.colName}>
-            <FormattedMessage
+          <FormattedMessage defaultMessage="Code" description="voucher code" />
-              defaultMessage="Code"
-              description="voucher code"
-            />
         </TableCell>
         <TableCell className={classes.colMinSpent}>
           <FormattedMessage
@@ -139,10 +134,7 @@ const VoucherList = withStyles(styles, {
           />
         </TableCell>
         <TableCell className={classes.colUses}>
-            <FormattedMessage
+          <FormattedMessage defaultMessage="Uses" description="voucher uses" />
-              defaultMessage="Uses"
-              description="voucher uses"
-            />
         </TableCell>
       </TableHead>
       <TableFooter>
@@ -254,7 +246,6 @@ const VoucherList = withStyles(styles, {
         )}
       </TableBody>
     </Table>
-    </Card>
   )
 );
 VoucherList.displayName = "VoucherList";

src/discounts/components/VoucherListPage/VoucherListPage.tsx

@@ -1,36 +1,41 @@
 import Button from "@material-ui/core/Button";
-
+import Card from "@material-ui/core/Card";
 import React from "react";
 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 { VoucherList_vouchers_edges_node } from "../../types/VoucherList";
 import VoucherList from "../VoucherList";
 
-export interface VoucherListPageProps extends PageListProps, ListActions {
+export interface VoucherListPageProps
+  extends PageListProps,
+    ListActions,
+    SearchPageProps,
+    TabPageProps {
   defaultCurrency: string;
   vouchers: VoucherList_vouchers_edges_node[];
 }
 
 const VoucherListPage: React.StatelessComponent<VoucherListPageProps> = ({
-  defaultCurrency,
+  currentTab,
-  disabled,
+  initialSearch,
-  settings,
   onAdd,
-  onNextPage,
+  onAll,
-  onPreviousPage,
+  onSearchChange,
-  onUpdateListSettings,
+  onTabChange,
-  onRowClick,
+  onTabDelete,
-  pageInfo,
+  onTabSave,
-  vouchers,
+  tabs,
-  isChecked,
+  ...listProps
-  selected,
-  toggle,
-  toggleAll,
-  toolbar
 }) => {
   const intl = useIntl();
 
@@ -44,22 +49,26 @@ const VoucherListPage: React.StatelessComponent<VoucherListPageProps> = ({
           />
         </Button>
       </PageHeader>
-      <VoucherList
+      <Card>
-        defaultCurrency={defaultCurrency}
+        <SearchBar
-        settings={settings}
+          allTabLabel={intl.formatMessage({
-        disabled={disabled}
+            defaultMessage: "All Vouchers",
-        onNextPage={onNextPage}
+            description: "tab name"
-        onPreviousPage={onPreviousPage}
+          })}
-        onUpdateListSettings={onUpdateListSettings}
+          currentTab={currentTab}
-        onRowClick={onRowClick}
+          initialSearch={initialSearch}
-        pageInfo={pageInfo}
+          searchPlaceholder={intl.formatMessage({
-        vouchers={vouchers}
+            defaultMessage: "Search Voucher"
-        isChecked={isChecked}
+          })}
-        selected={selected}
+          tabs={tabs}
-        toggle={toggle}
+          onAll={onAll}
-        toggleAll={toggleAll}
+          onSearchChange={onSearchChange}
-        toolbar={toolbar}
+          onTabChange={onTabChange}
+          onTabDelete={onTabDelete}
+          onTabSave={onTabSave}
         />
+        <VoucherList {...listProps} />
+      </Card>
     </Container>
   );
 };

src/discounts/queries.ts

@@ -196,8 +196,20 @@ export const TypedSaleList = TypedQuery<SaleList, SaleListVariables>(saleList);
 export const voucherList = gql`
   ${pageInfoFragment}
   ${voucherFragment}
-  query VoucherList($after: String, $before: String, $first: Int, $last: Int) {
+  query VoucherList(
-    vouchers(after: $after, before: $before, first: $first, last: $last) {
+    $after: String
+    $before: String
+    $first: Int
+    $last: Int
+    $filter: VoucherFilterInput
+  ) {
+    vouchers(
+      after: $after
+      before: $before
+      first: $first
+      last: $last
+      filter: $filter
+    ) {
       edges {
         node {
           ...VoucherFragment

src/discounts/types/VoucherList.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { DiscountValueTypeEnum } from "./../../types/globalTypes";
+import { VoucherFilterInput, DiscountValueTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL query operation: VoucherList
@@ -62,4 +62,5 @@ export interface VoucherListVariables {
   before?: string | null;
   first?: number | null;
   last?: number | null;
+  filter?: VoucherFilterInput | null;
 }

src/discounts/urls.ts

@@ -48,10 +48,16 @@ export const saleAddUrl = saleAddPath;
 
 export const voucherSection = urlJoin(discountSection, "vouchers");
 export const voucherListPath = voucherSection;
-export type VoucherListUrlDialog = "remove";
+export enum VoucherListUrlFiltersEnum {
-export type VoucherListUrlQueryParams = BulkAction &
+  query = "query"
+}
+export type VoucherListUrlFilters = Filters<VoucherListUrlFiltersEnum>;
+export type VoucherListUrlDialog = "remove" | TabActionDialog;
+export type VoucherListUrlQueryParams = ActiveTab &
+  BulkAction &
   Dialog<VoucherListUrlDialog> &
-  Pagination;
+  Pagination &
+  VoucherListUrlFilters;
 export const voucherListUrl = (params?: VoucherListUrlQueryParams) =>
   voucherListPath + "?" + stringifyQs(params);
 export const voucherPath = (id: string) => urlJoin(voucherSection, id);

src/discounts/views/VoucherList/VoucherList.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 { WindowTitle } from "@saleor/components/WindowTitle";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useListSettings from "@saleor/hooks/useListSettings";
@@ -17,16 +21,26 @@ import useShop from "@saleor/hooks/useShop";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import { getMutationState, maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
-import VoucherListPage from "../components/VoucherListPage";
+import VoucherListPage from "../../components/VoucherListPage";
-import { TypedVoucherBulkDelete } from "../mutations";
+import { TypedVoucherBulkDelete } from "../../mutations";
-import { TypedVoucherList } from "../queries";
+import { TypedVoucherList } from "../../queries";
-import { VoucherBulkDelete } from "../types/VoucherBulkDelete";
+import { VoucherBulkDelete } from "../../types/VoucherBulkDelete";
 import {
   voucherAddUrl,
   voucherListUrl,
+  VoucherListUrlDialog,
+  VoucherListUrlFilters,
   VoucherListUrlQueryParams,
   voucherUrl
-} from "../urls";
+} from "../../urls";
+import {
+  areFiltersApplied,
+  deleteFilterTab,
+  getActiveFilters,
+  getFilterTabs,
+  getFilterVariables,
+  saveFilterTab
+} from "./filter";
 
 interface VoucherListProps {
   params: VoucherListUrlQueryParams;
@@ -47,13 +61,78 @@ export const VoucherList: React.StatelessComponent<VoucherListProps> = ({
   );
   const intl = useIntl();
 
-  const closeModal = () => navigate(voucherListUrl(), true);
+  const tabs = getFilterTabs();
+
+  const currentTab =
+    params.activeTab === undefined
+      ? areFiltersApplied(params)
+        ? tabs.length + 1
+        : 0
+      : parseInt(params.activeTab, 0);
+
+  const changeFilterField = (filter: VoucherListUrlFilters) => {
+    reset();
+    navigate(
+      voucherListUrl({
+        ...getActiveFilters(params),
+        ...filter,
+        activeTab: undefined
+      })
+    );
+  };
+
+  const closeModal = () =>
+    navigate(
+      voucherListUrl({
+        ...params,
+        action: undefined,
+        ids: undefined
+      })
+    );
+
+  const openModal = (action: VoucherListUrlDialog, ids?: string[]) =>
+    navigate(
+      voucherListUrl({
+        ...params,
+        action,
+        ids
+      })
+    );
+
+  const handleTabChange = (tab: number) => {
+    reset();
+    navigate(
+      voucherListUrl({
+        activeTab: tab.toString(),
+        ...getFilterTabs()[tab - 1].data
+      })
+    );
+  };
+
+  const handleTabDelete = () => {
+    deleteFilterTab(currentTab);
+    reset();
+    navigate(voucherListUrl());
+  };
+
+  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]
+  );
+
   const canOpenBulkActionDialog = maybe(() => params.ids.length > 0);
 
   return (
-    <TypedVoucherList displayLoader variables={paginationState}>
+    <TypedVoucherList displayLoader variables={queryVariables}>
       {({ data, loading, refetch }) => {
         const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
           maybe(() => data.vouchers.pageInfo),
@@ -92,6 +171,14 @@ export const VoucherList: React.StatelessComponent<VoucherListProps> = ({
                     title={intl.formatMessage(sectionNames.vouchers)}
                   />
                   <VoucherListPage
+                    currentTab={currentTab}
+                    initialSearch={params.query || ""}
+                    onSearchChange={query => changeFilterField({ query })}
+                    onAll={() => navigate(voucherListUrl())}
+                    onTabChange={handleTabChange}
+                    onTabDelete={() => openModal("delete-search")}
+                    onTabSave={() => openModal("save-search")}
+                    tabs={tabs.map(tab => tab.name)}
                     defaultCurrency={maybe(() => shop.defaultCurrency)}
                     settings={settings}
                     vouchers={maybe(() =>
@@ -153,6 +240,19 @@ export const VoucherList: React.StatelessComponent<VoucherListProps> = ({
                       </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/discounts/views/VoucherList/filter.ts

@@ -0,0 +1,31 @@
+import { VoucherFilterInput } from "@saleor/types/globalTypes";
+import {
+  createFilterTabUtils,
+  createFilterUtils
+} from "../../../utils/filters";
+import {
+  VoucherListUrlFilters,
+  VoucherListUrlFiltersEnum,
+  VoucherListUrlQueryParams
+} from "../../urls";
+
+export const VOUCHER_FILTERS_KEY = "VoucherFilters";
+
+export function getFilterVariables(
+  params: VoucherListUrlFilters
+): VoucherFilterInput {
+  return {
+    search: params.query
+  };
+}
+
+export const {
+  deleteFilterTab,
+  getFilterTabs,
+  saveFilterTab
+} = createFilterTabUtils<VoucherListUrlFilters>(VOUCHER_FILTERS_KEY);
+
+export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+  VoucherListUrlQueryParams,
+  VoucherListUrlFilters
+>(VoucherListUrlFiltersEnum);

src/discounts/views/VoucherList/index.ts

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

src/types/globalTypes.ts

@@ -230,6 +230,12 @@ export enum TaxRateType {
   WINE = "WINE",
 }
 
+export enum VoucherDiscountType {
+  FIXED = "FIXED",
+  PERCENTAGE = "PERCENTAGE",
+  SHIPPING = "SHIPPING",
+}
+
 export enum VoucherTypeEnum {
   ENTIRE_ORDER = "ENTIRE_ORDER",
   SHIPPING = "SHIPPING",
@@ -673,6 +679,14 @@ export interface UserCreateInput {
   redirectUrl?: string | null;
 }
 
+export interface VoucherFilterInput {
+  status?: (DiscountStatusEnum | null)[] | null;
+  timesUsed?: IntRangeInput | null;
+  discountType?: (VoucherDiscountType | null)[] | null;
+  started?: DateTimeRangeInput | null;
+  search?: string | null;
+}
+
 export interface VoucherInput {
   type?: VoucherTypeEnum | null;
   name?: string | null;