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,163 +97,155 @@ const VoucherList = withStyles(styles, {
     toggleAll,
     toolbar
   }: VoucherListProps & WithStyles<typeof styles>) => (
-    <Card>
-      <Table>
-        <TableHead
-          colSpan={numberOfColumns}
-          selected={selected}
-          disabled={disabled}
-          items={vouchers}
-          toggleAll={toggleAll}
-          toolbar={toolbar}
-        >
-          <TableCell className={classes.colName}>
-            <FormattedMessage
-              defaultMessage="Code"
-              description="voucher code"
-            />
-          </TableCell>
-          <TableCell className={classes.colMinSpent}>
-            <FormattedMessage
-              defaultMessage="Min. Spent"
-              description="minimum amount of spent money to activate voucher"
-            />
-          </TableCell>
-          <TableCell className={classes.colStart}>
-            <FormattedMessage
-              defaultMessage="Starts"
-              description="voucher is active from date"
-            />
-          </TableCell>
-          <TableCell className={classes.colEnd}>
-            <FormattedMessage
-              defaultMessage="Ends"
-              description="voucher is active until date"
-            />
-          </TableCell>
-          <TableCell className={classes.colValue}>
-            <FormattedMessage
-              defaultMessage="Value"
-              description="voucher value"
-            />
-          </TableCell>
-          <TableCell className={classes.colUses}>
-            <FormattedMessage
-              defaultMessage="Uses"
-              description="voucher uses"
-            />
-          </TableCell>
-        </TableHead>
-        <TableFooter>
-          <TableRow>
-            <TablePagination
-              colSpan={numberOfColumns}
-              settings={settings}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-              onNextPage={onNextPage}
-              onUpdateListSettings={onUpdateListSettings}
-              hasPreviousPage={
-                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-              }
-              onPreviousPage={onPreviousPage}
-            />
-          </TableRow>
-        </TableFooter>
-        <TableBody>
-          {renderCollection(
-            vouchers,
-            voucher => {
-              const isSelected = voucher ? isChecked(voucher.id) : false;
+    <Table>
+      <TableHead
+        colSpan={numberOfColumns}
+        selected={selected}
+        disabled={disabled}
+        items={vouchers}
+        toggleAll={toggleAll}
+        toolbar={toolbar}
+      >
+        <TableCell className={classes.colName}>
+          <FormattedMessage defaultMessage="Code" description="voucher code" />
+        </TableCell>
+        <TableCell className={classes.colMinSpent}>
+          <FormattedMessage
+            defaultMessage="Min. Spent"
+            description="minimum amount of spent money to activate voucher"
+          />
+        </TableCell>
+        <TableCell className={classes.colStart}>
+          <FormattedMessage
+            defaultMessage="Starts"
+            description="voucher is active from date"
+          />
+        </TableCell>
+        <TableCell className={classes.colEnd}>
+          <FormattedMessage
+            defaultMessage="Ends"
+            description="voucher is active until date"
+          />
+        </TableCell>
+        <TableCell className={classes.colValue}>
+          <FormattedMessage
+            defaultMessage="Value"
+            description="voucher value"
+          />
+        </TableCell>
+        <TableCell className={classes.colUses}>
+          <FormattedMessage defaultMessage="Uses" description="voucher uses" />
+        </TableCell>
+      </TableHead>
+      <TableFooter>
+        <TableRow>
+          <TablePagination
+            colSpan={numberOfColumns}
+            settings={settings}
+            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
+            onNextPage={onNextPage}
+            onUpdateListSettings={onUpdateListSettings}
+            hasPreviousPage={
+              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
+            }
+            onPreviousPage={onPreviousPage}
+          />
+        </TableRow>
+      </TableFooter>
+      <TableBody>
+        {renderCollection(
+          vouchers,
+          voucher => {
+            const isSelected = voucher ? isChecked(voucher.id) : false;
 
-              return (
-                <TableRow
-                  className={!!voucher ? classes.tableRow : undefined}
-                  hover={!!voucher}
-                  key={voucher ? voucher.id : "skeleton"}
-                  selected={isSelected}
+            return (
+              <TableRow
+                className={!!voucher ? classes.tableRow : undefined}
+                hover={!!voucher}
+                key={voucher ? voucher.id : "skeleton"}
+                selected={isSelected}
+                onClick={voucher ? onRowClick(voucher.id) : undefined}
+              >
+                <TableCell padding="checkbox">
+                  <Checkbox
+                    checked={isSelected}
+                    disabled={disabled}
+                    disableClickPropagation
+                    onChange={() => toggle(voucher.id)}
+                  />
+                </TableCell>
+                <TableCell className={classes.colName}>
+                  {maybe<React.ReactNode>(() => voucher.code, <Skeleton />)}
+                </TableCell>
+                <TableCell className={classes.colMinSpent}>
+                  {voucher && voucher.minAmountSpent ? (
+                    <Money money={voucher.minAmountSpent} />
+                  ) : voucher && voucher.minAmountSpent === null ? (
+                    "-"
+                  ) : (
+                    <Skeleton />
+                  )}
+                </TableCell>
+                <TableCell className={classes.colStart}>
+                  {voucher && voucher.startDate ? (
+                    <Date date={voucher.startDate} />
+                  ) : (
+                    <Skeleton />
+                  )}
+                </TableCell>
+                <TableCell className={classes.colEnd}>
+                  {voucher && voucher.endDate ? (
+                    <Date date={voucher.endDate} />
+                  ) : voucher && voucher.endDate === null ? (
+                    "-"
+                  ) : (
+                    <Skeleton />
+                  )}
+                </TableCell>
+                <TableCell
+                  className={classes.colValue}
                   onClick={voucher ? onRowClick(voucher.id) : undefined}
                 >
-                  <TableCell padding="checkbox">
-                    <Checkbox
-                      checked={isSelected}
-                      disabled={disabled}
-                      disableClickPropagation
-                      onChange={() => toggle(voucher.id)}
-                    />
-                  </TableCell>
-                  <TableCell className={classes.colName}>
-                    {maybe<React.ReactNode>(() => voucher.code, <Skeleton />)}
-                  </TableCell>
-                  <TableCell className={classes.colMinSpent}>
-                    {voucher && voucher.minAmountSpent ? (
-                      <Money money={voucher.minAmountSpent} />
-                    ) : voucher && voucher.minAmountSpent === null ? (
-                      "-"
+                  {voucher &&
+                  voucher.discountValueType &&
+                  voucher.discountValue ? (
+                    voucher.discountValueType ===
+                    DiscountValueTypeEnum.FIXED ? (
+                      <Money
+                        money={{
+                          amount: voucher.discountValue,
+                          currency: defaultCurrency
+                        }}
+                      />
                     ) : (
-                      <Skeleton />
-                    )}
-                  </TableCell>
-                  <TableCell className={classes.colStart}>
-                    {voucher && voucher.startDate ? (
-                      <Date date={voucher.startDate} />
-                    ) : (
-                      <Skeleton />
-                    )}
-                  </TableCell>
-                  <TableCell className={classes.colEnd}>
-                    {voucher && voucher.endDate ? (
-                      <Date date={voucher.endDate} />
-                    ) : voucher && voucher.endDate === null ? (
-                      "-"
-                    ) : (
-                      <Skeleton />
-                    )}
-                  </TableCell>
-                  <TableCell
-                    className={classes.colValue}
-                    onClick={voucher ? onRowClick(voucher.id) : undefined}
-                  >
-                    {voucher &&
-                    voucher.discountValueType &&
-                    voucher.discountValue ? (
-                      voucher.discountValueType ===
-                      DiscountValueTypeEnum.FIXED ? (
-                        <Money
-                          money={{
-                            amount: voucher.discountValue,
-                            currency: defaultCurrency
-                          }}
-                        />
-                      ) : (
-                        <Percent amount={voucher.discountValue} />
-                      )
-                    ) : (
-                      <Skeleton />
-                    )}
-                  </TableCell>
-                  <TableCell className={classes.colUses}>
-                    {voucher && voucher.usageLimit ? (
-                      voucher.usageLimit
-                    ) : voucher && voucher.usageLimit === null ? (
-                      "-"
-                    ) : (
-                      <Skeleton />
-                    )}
-                  </TableCell>
-                </TableRow>
-              );
-            },
-            () => (
-              <TableRow>
-                <TableCell colSpan={numberOfColumns}>
-                  <FormattedMessage defaultMessage="No vouchers found" />
+                      <Percent amount={voucher.discountValue} />
+                    )
+                  ) : (
+                    <Skeleton />
+                  )}
+                </TableCell>
+                <TableCell className={classes.colUses}>
+                  {voucher && voucher.usageLimit ? (
+                    voucher.usageLimit
+                  ) : voucher && voucher.usageLimit === null ? (
+                    "-"
+                  ) : (
+                    <Skeleton />
+                  )}
                 </TableCell>
               </TableRow>
-            )
-          )}
-        </TableBody>
-      </Table>
-    </Card>
+            );
+          },
+          () => (
+            <TableRow>
+              <TableCell colSpan={numberOfColumns}>
+                <FormattedMessage defaultMessage="No vouchers found" />
+              </TableCell>
+            </TableRow>
+          )
+        )}
+      </TableBody>
+    </Table>
   )
 );
 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,
-  disabled,
-  settings,
+  currentTab,
+  initialSearch,
   onAdd,
-  onNextPage,
-  onPreviousPage,
-  onUpdateListSettings,
-  onRowClick,
-  pageInfo,
-  vouchers,
-  isChecked,
-  selected,
-  toggle,
-  toggleAll,
-  toolbar
+  onAll,
+  onSearchChange,
+  onTabChange,
+  onTabDelete,
+  onTabSave,
+  tabs,
+  ...listProps
 }) => {
   const intl = useIntl();
 
@@ -44,22 +49,26 @@ const VoucherListPage: React.StatelessComponent<VoucherListPageProps> = ({
           />
         </Button>
       </PageHeader>
-      <VoucherList
-        defaultCurrency={defaultCurrency}
-        settings={settings}
-        disabled={disabled}
-        onNextPage={onNextPage}
-        onPreviousPage={onPreviousPage}
-        onUpdateListSettings={onUpdateListSettings}
-        onRowClick={onRowClick}
-        pageInfo={pageInfo}
-        vouchers={vouchers}
-        isChecked={isChecked}
-        selected={selected}
-        toggle={toggle}
-        toggleAll={toggleAll}
-        toolbar={toolbar}
-      />
+      <Card>
+        <SearchBar
+          allTabLabel={intl.formatMessage({
+            defaultMessage: "All Vouchers",
+            description: "tab name"
+          })}
+          currentTab={currentTab}
+          initialSearch={initialSearch}
+          searchPlaceholder={intl.formatMessage({
+            defaultMessage: "Search Voucher"
+          })}
+          tabs={tabs}
+          onAll={onAll}
+          onSearchChange={onSearchChange}
+          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) {
-    vouchers(after: $after, before: $before, first: $first, last: $last) {
+  query VoucherList(
+    $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 type VoucherListUrlQueryParams = BulkAction &
+export enum VoucherListUrlFiltersEnum {
+  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 { TypedVoucherBulkDelete } from "../mutations";
-import { TypedVoucherList } from "../queries";
-import { VoucherBulkDelete } from "../types/VoucherBulkDelete";
+import VoucherListPage from "../../components/VoucherListPage";
+import { TypedVoucherBulkDelete } from "../../mutations";
+import { TypedVoucherList } from "../../queries";
+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;