Add search to product types

src/productTypes/components/ProductTypeList/ProductTypeList.tsx

@@ -1,4 +1,3 @@
-import Card from "@material-ui/core/Card";
 import {
   createStyles,
   Theme,
@@ -70,138 +69,132 @@ const ProductTypeList = withStyles(styles, { name: "ProductTypeList" })(
     const intl = useIntl();
 
     return (
-      <Card>
-        <Table>
-          <TableHead
-            colSpan={numberOfColumns}
-            selected={selected}
-            disabled={disabled}
-            items={productTypes}
-            toggleAll={toggleAll}
-            toolbar={toolbar}
-          >
-            <TableCell className={classes.colName}>
-              <FormattedMessage
-                defaultMessage="Type Name"
-                description="product type name"
-              />
-            </TableCell>
-            <TableCell className={classes.colType}>
-              <FormattedMessage
-                defaultMessage="Type"
-                description="product type is either simple or configurable"
-              />
-            </TableCell>
-            <TableCell className={classes.colTax}>
-              <FormattedMessage
-                defaultMessage="Tax"
-                description="tax rate for a product type"
-              />
-            </TableCell>
-          </TableHead>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                colSpan={numberOfColumns}
-                hasNextPage={
-                  pageInfo && !disabled ? pageInfo.hasNextPage : false
-                }
-                onNextPage={onNextPage}
-                hasPreviousPage={
-                  pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-                }
-                onPreviousPage={onPreviousPage}
-              />
-            </TableRow>
-          </TableFooter>
-          <TableBody>
-            {renderCollection(
-              productTypes,
-              productType => {
-                const isSelected = productType
-                  ? isChecked(productType.id)
-                  : false;
-                return (
-                  <TableRow
-                    className={!!productType ? classes.link : undefined}
-                    hover={!!productType}
-                    key={productType ? productType.id : "skeleton"}
-                    onClick={
-                      productType ? onRowClick(productType.id) : undefined
-                    }
-                    selected={isSelected}
-                  >
-                    <TableCell padding="checkbox">
-                      <Checkbox
-                        checked={isSelected}
-                        disabled={disabled}
-                        disableClickPropagation
-                        onChange={() => toggle(productType.id)}
-                      />
-                    </TableCell>
-                    <TableCell className={classes.colName}>
-                      {productType ? (
+      <Table>
+        <TableHead
+          colSpan={numberOfColumns}
+          selected={selected}
+          disabled={disabled}
+          items={productTypes}
+          toggleAll={toggleAll}
+          toolbar={toolbar}
+        >
+          <TableCell className={classes.colName}>
+            <FormattedMessage
+              defaultMessage="Type Name"
+              description="product type name"
+            />
+          </TableCell>
+          <TableCell className={classes.colType}>
+            <FormattedMessage
+              defaultMessage="Type"
+              description="product type is either simple or configurable"
+            />
+          </TableCell>
+          <TableCell className={classes.colTax}>
+            <FormattedMessage
+              defaultMessage="Tax"
+              description="tax rate for a product type"
+            />
+          </TableCell>
+        </TableHead>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              colSpan={numberOfColumns}
+              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
+              onNextPage={onNextPage}
+              hasPreviousPage={
+                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
+              }
+              onPreviousPage={onPreviousPage}
+            />
+          </TableRow>
+        </TableFooter>
+        <TableBody>
+          {renderCollection(
+            productTypes,
+            productType => {
+              const isSelected = productType
+                ? isChecked(productType.id)
+                : false;
+              return (
+                <TableRow
+                  className={!!productType ? classes.link : undefined}
+                  hover={!!productType}
+                  key={productType ? productType.id : "skeleton"}
+                  onClick={productType ? onRowClick(productType.id) : undefined}
+                  selected={isSelected}
+                >
+                  <TableCell padding="checkbox">
+                    <Checkbox
+                      checked={isSelected}
+                      disabled={disabled}
+                      disableClickPropagation
+                      onChange={() => toggle(productType.id)}
+                    />
+                  </TableCell>
+                  <TableCell className={classes.colName}>
+                    {productType ? (
+                      <>
+                        {productType.name}
+                        <Typography variant="caption">
+                          {maybe(() => productType.hasVariants)
+                            ? intl.formatMessage({
+                                defaultMessage: "Configurable",
+                                description: "product type"
+                              })
+                            : intl.formatMessage({
+                                defaultMessage: "Simple product",
+                                description: "product type"
+                              })}
+                        </Typography>
+                      </>
+                    ) : (
+                      <Skeleton />
+                    )}
+                  </TableCell>
+                  <TableCell className={classes.colType}>
+                    {maybe(() => productType.isShippingRequired) !==
+                    undefined ? (
+                      productType.isShippingRequired ? (
                         <>
-                          {productType.name}
-                          <Typography variant="caption">
-                            {maybe(() => productType.hasVariants)
-                              ? intl.formatMessage({
-                                  defaultMessage: "Configurable",
-                                  description: "product type"
-                                })
-                              : intl.formatMessage({
-                                  defaultMessage: "Simple product",
-                                  description: "product type"
-                                })}
-                          </Typography>
+                          <FormattedMessage
+                            defaultMessage="Physical"
+                            description="product type"
+                          />
                         </>
                       ) : (
-                        <Skeleton />
-                      )}
-                    </TableCell>
-                    <TableCell className={classes.colType}>
-                      {maybe(() => productType.isShippingRequired) !==
-                      undefined ? (
-                        productType.isShippingRequired ? (
-                          <>
-                            <FormattedMessage
-                              defaultMessage="Physical"
-                              description="product type"
-                            />
-                          </>
-                        ) : (
-                          <>
-                            <FormattedMessage
-                              defaultMessage="Digital"
-                              description="product type"
-                            />
-                          </>
-                        )
-                      ) : (
-                        <Skeleton />
-                      )}
-                    </TableCell>
-                    <TableCell className={classes.colTax}>
-                      {maybe(() => productType.taxType) ? (
-                        productType.taxType.description
-                      ) : (
-                        <Skeleton />
-                      )}
-                    </TableCell>
-                  </TableRow>
-                );
-              },
-              () => (
-                <TableRow>
-                  <TableCell colSpan={numberOfColumns}>
-                    <FormattedMessage defaultMessage="No product types found" />
+                        <>
+                          <FormattedMessage
+                            defaultMessage="Digital"
+                            description="product type"
+                          />
+                        </>
+                      )
+                    ) : (
+                      <Skeleton />
+                    )}
+                  </TableCell>
+                  <TableCell className={classes.colTax}>
+                    {maybe(() => productType.taxType) ? (
+                      productType.taxType.description
+                    ) : (
+                      <Skeleton />
+                    )}
                   </TableCell>
                 </TableRow>
-              )
-            )}
-          </TableBody>
-        </Table>
-      </Card>
+              );
+            },
+            () => (
+              <TableRow>
+                <TableCell colSpan={numberOfColumns}>
+                  <FormattedMessage defaultMessage="No product types found" />
+                </TableCell>
+              </TableRow>
+            )
+          )}
+        </TableBody>
+      </Table>
     );
   }
 );

src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx

@@ -1,23 +1,46 @@
 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 AppHeader from "@saleor/components/AppHeader";
 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 "../../../types";
+import {
+  ListActions,
+  PageListProps,
+  SearchPageProps,
+  TabPageProps
+} from "../../../types";
 import { ProductTypeList_productTypes_edges_node } from "../../types/ProductTypeList";
 import ProductTypeList from "../ProductTypeList";
 
-interface ProductTypeListPageProps extends PageListProps, ListActions {
+interface ProductTypeListPageProps
+  extends PageListProps,
+    ListActions,
+    SearchPageProps,
+    TabPageProps {
   productTypes: ProductTypeList_productTypes_edges_node[];
   onBack: () => void;
 }
 
 const ProductTypeListPage: React.StatelessComponent<
   ProductTypeListPageProps
-> = ({ disabled, onAdd, onBack, ...listProps }) => {
+> = ({
+  currentTab,
+  initialSearch,
+  onAdd,
+  onAll,
+  onBack,
+  onSearchChange,
+  onTabChange,
+  onTabDelete,
+  onTabSave,
+  tabs,
+  ...listProps
+}) => {
   const intl = useIntl();
 
   return (
@@ -26,19 +49,33 @@ const ProductTypeListPage: React.StatelessComponent<
         {intl.formatMessage(sectionNames.configuration)}
       </AppHeader>
       <PageHeader title={intl.formatMessage(sectionNames.productTypes)}>
-        <Button
-          color="primary"
-          variant="contained"
-          disabled={disabled}
-          onClick={onAdd}
-        >
+        <Button color="primary" variant="contained" onClick={onAdd}>
           <FormattedMessage
             defaultMessage="create product type"
             description="button"
           />
         </Button>
       </PageHeader>
-      <ProductTypeList disabled={disabled} {...listProps} />
+      <Card>
+        <SearchBar
+          allTabLabel={intl.formatMessage({
+            defaultMessage: "All Product Types",
+            description: "tab name"
+          })}
+          currentTab={currentTab}
+          initialSearch={initialSearch}
+          searchPlaceholder={intl.formatMessage({
+            defaultMessage: "Search Product Type"
+          })}
+          tabs={tabs}
+          onAll={onAll}
+          onSearchChange={onSearchChange}
+          onTabChange={onTabChange}
+          onTabDelete={onTabDelete}
+          onTabSave={onTabSave}
+        />
+        <ProductTypeList {...listProps} />
+      </Card>
     </Container>
   );
 };

src/productTypes/queries.ts

@@ -51,8 +51,15 @@ export const productTypeListQuery = gql`
     $before: String
     $first: Int
     $last: Int
+    $filter: ProductTypeFilterInput
   ) {
-    productTypes(after: $after, before: $before, first: $first, last: $last) {
+    productTypes(
+      after: $after
+      before: $before
+      first: $first
+      last: $last
+      filter: $filter
+    ) {
       edges {
         node {
           ...ProductTypeFragment

src/productTypes/urls.ts

@@ -1,15 +1,29 @@
 import { stringify as stringifyQs } from "qs";
 import urlJoin from "url-join";
 
-import { BulkAction, Dialog, Pagination, SingleAction } from "../types";
+import {
+  ActiveTab,
+  BulkAction,
+  Dialog,
+  Filters,
+  Pagination,
+  SingleAction,
+  TabActionDialog
+} from "../types";
 
 const productTypeSection = "/product-types/";
 
 export const productTypeListPath = productTypeSection;
-export type ProductTypeListUrlDialog = "remove";
-export type ProductTypeListUrlQueryParams = BulkAction &
+export enum ProductTypeListUrlFiltersEnum {
+  query = "query"
+}
+export type ProductTypeListUrlFilters = Filters<ProductTypeListUrlFiltersEnum>;
+export type ProductTypeListUrlDialog = "remove" | TabActionDialog;
+export type ProductTypeListUrlQueryParams = ActiveTab &
+  BulkAction &
   Dialog<ProductTypeListUrlDialog> &
-  Pagination;
+  Pagination &
+  ProductTypeListUrlFilters;
 export const productTypeListUrl = (params?: ProductTypeListUrlQueryParams) =>
   productTypeListPath + "?" + stringifyQs(params);
 

src/productTypes/views/ProductTypeList/ProductTypeList.tsx

@@ -5,26 +5,41 @@ 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";
 import useNotifier from "@saleor/hooks/useNotifier";
 import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
 import { commonMessages } from "@saleor/intl";
-import { PAGINATE_BY } from "../../config";
-import { configurationMenuUrl } from "../../configuration";
-import { getMutationState, maybe } from "../../misc";
-import ProductTypeListPage from "../components/ProductTypeListPage";
-import { TypedProductTypeBulkDeleteMutation } from "../mutations";
-import { TypedProductTypeListQuery } from "../queries";
-import { ProductTypeBulkDelete } from "../types/ProductTypeBulkDelete";
+import { ListViews } from "@saleor/types";
+import { configurationMenuUrl } from "../../../configuration";
+import { getMutationState, maybe } from "../../../misc";
+import ProductTypeListPage from "../../components/ProductTypeListPage";
+import { TypedProductTypeBulkDeleteMutation } from "../../mutations";
+import { TypedProductTypeListQuery } from "../../queries";
+import { ProductTypeBulkDelete } from "../../types/ProductTypeBulkDelete";
 import {
   productTypeAddUrl,
   productTypeListUrl,
+  ProductTypeListUrlDialog,
+  ProductTypeListUrlFilters,
   ProductTypeListUrlQueryParams,
   productTypeUrl
-} from "../urls";
+} from "../../urls";
+import {
+  areFiltersApplied,
+  deleteFilterTab,
+  getActiveFilters,
+  getFilterTabs,
+  getFilterVariables,
+  saveFilterTab
+} from "./filter";
 
 interface ProductTypeListProps {
   params: ProductTypeListUrlQueryParams;
@@ -39,13 +54,79 @@ export const ProductTypeList: React.StatelessComponent<
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
+  const { settings } = useListSettings(ListViews.PRODUCT_LIST);
   const intl = useIntl();
 
-  const closeModal = () => navigate(productTypeListUrl(), true);
+  const tabs = getFilterTabs();
+
+  const currentTab =
+    params.activeTab === undefined
+      ? areFiltersApplied(params)
+        ? tabs.length + 1
+        : 0
+      : parseInt(params.activeTab, 0);
+
+  const changeFilterField = (filter: ProductTypeListUrlFilters) => {
+    reset();
+    navigate(
+      productTypeListUrl({
+        ...getActiveFilters(params),
+        ...filter,
+        activeTab: undefined
+      })
+    );
+  };
+
+  const closeModal = () =>
+    navigate(
+      productTypeListUrl({
+        ...params,
+        action: undefined,
+        ids: undefined
+      })
+    );
+
+  const openModal = (action: ProductTypeListUrlDialog, ids?: string[]) =>
+    navigate(
+      productTypeListUrl({
+        ...params,
+        action,
+        ids
+      })
+    );
+
+  const handleTabChange = (tab: number) => {
+    reset();
+    navigate(
+      productTypeListUrl({
+        activeTab: tab.toString(),
+        ...getFilterTabs()[tab - 1].data
+      })
+    );
+  };
+
+  const handleTabDelete = () => {
+    deleteFilterTab(currentTab);
+    reset();
+    navigate(productTypeListUrl());
+  };
+
+  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 paginationState = createPaginationState(PAGINATE_BY, params);
   return (
-    <TypedProductTypeListQuery displayLoader variables={paginationState}>
+    <TypedProductTypeListQuery displayLoader variables={queryVariables}>
       {({ data, loading, refetch }) => {
         const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
           maybe(() => data.productTypes.pageInfo),
@@ -93,6 +174,14 @@ export const ProductTypeList: React.StatelessComponent<
               return (
                 <>
                   <ProductTypeListPage
+                    currentTab={currentTab}
+                    initialSearch={params.query || ""}
+                    onSearchChange={query => changeFilterField({ query })}
+                    onAll={() => navigate(productTypeListUrl())}
+                    onTabChange={handleTabChange}
+                    onTabDelete={() => openModal("delete-search")}
+                    onTabSave={() => openModal("save-search")}
+                    tabs={tabs.map(tab => tab.name)}
                     disabled={loading}
                     productTypes={maybe(() =>
                       data.productTypes.edges.map(edge => edge.node)
@@ -150,6 +239,19 @@ export const ProductTypeList: React.StatelessComponent<
                       />
                     </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/productTypes/views/ProductTypeList/filter.ts

@@ -0,0 +1,31 @@
+import { ProductTypeFilterInput } from "@saleor/types/globalTypes";
+import {
+  createFilterTabUtils,
+  createFilterUtils
+} from "../../../utils/filters";
+import {
+  ProductTypeListUrlFilters,
+  ProductTypeListUrlFiltersEnum,
+  ProductTypeListUrlQueryParams
+} from "../../urls";
+
+export const PRODUCT_TYPE_FILTERS_KEY = "productTypeFilters";
+
+export function getFilterVariables(
+  params: ProductTypeListUrlFilters
+): ProductTypeFilterInput {
+  return {
+    search: params.query
+  };
+}
+
+export const {
+  deleteFilterTab,
+  getFilterTabs,
+  saveFilterTab
+} = createFilterTabUtils<ProductTypeListUrlFilters>(PRODUCT_TYPE_FILTERS_KEY);
+
+export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+  ProductTypeListUrlQueryParams,
+  ProductTypeListUrlFilters
+>(ProductTypeListUrlFiltersEnum);

src/productTypes/views/ProductTypeList/index.ts

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

src/types.ts

@@ -24,6 +24,7 @@ export enum ListViews {
   PAGES_LIST = "PAGES_LIST",
   PLUGINS_LIST = "PLUGIN_LIST",
   PRODUCT_LIST = "PRODUCT_LIST",
+  PRODUCT_TYPE_LIST = "PRODUCT_TYPE_LIST",
   SALES_LIST = "SALES_LIST",
   SHIPPING_METHODS_LIST = "SHIPPING_METHODS_LIST",
   STAFF_MEMBERS_LIST = "STAFF_MEMBERS_LIST",