Add search to collection list

2019-09-11 16:00:02 +02:00 · 2019-09-11 16:00:02 +02:00 · 89e7aa82df
commit 89e7aa82df
parent 53ac48062f
11 changed files with 308 additions and 130 deletions
--- a/src/categories/components/CategoryListPage/CategoryListPage.tsx
+++ b/src/categories/components/CategoryListPage/CategoryListPage.tsx
@ -65,7 +65,7 @@ export const CategoryListPage: React.StatelessComponent<CategoryTableProps> = ({
          currentTab={currentTab}
          initialSearch={initialSearch}
          searchPlaceholder={intl.formatMessage({
-            defaultMessage: "Search Attribute"
+            defaultMessage: "Search Category"
          })}
          tabs={tabs}
          onAll={onAll}
--- a/src/categories/views/CategoryList/filter.ts
+++ b/src/categories/views/CategoryList/filter.ts
@ -9,7 +9,7 @@ import {
  CategoryListUrlQueryParams
 } from "../../urls";

-export const PRODUCT_FILTERS_KEY = "productFilters";
+export const CATEGORY_FILTERS_KEY = "categoryFilters";

 export function getFilterVariables(
  params: CategoryListUrlFilters
@ -23,7 +23,7 @@ export const {
  deleteFilterTab,
  getFilterTabs,
  saveFilterTab
-} = createFilterTabUtils<CategoryListUrlFilters>(PRODUCT_FILTERS_KEY);
+} = createFilterTabUtils<CategoryListUrlFilters>(CATEGORY_FILTERS_KEY);

 export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
  CategoryListUrlQueryParams,
--- a/src/collections/components/CollectionList/CollectionList.tsx
+++ b/src/collections/components/CollectionList/CollectionList.tsx
@ -1,4 +1,3 @@
-import Card from "@material-ui/core/Card";
 import {
  createStyles,
  Theme,
@ -74,118 +73,110 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
    const intl = useIntl();

    return (
-      <Card>
-        <Table>
-          <TableHead
-            colSpan={numberOfColumns}
-            selected={selected}
-            disabled={disabled}
-            items={collections}
-            toggleAll={toggleAll}
-            toolbar={toolbar}
-          >
-            <TableCell className={classes.colName}>
-              <FormattedMessage defaultMessage="Category Name" />
-            </TableCell>
-            <TableCell className={classes.colProducts}>
-              <FormattedMessage defaultMessage="No. of Products" />
-            </TableCell>
-            <TableCell className={classes.colAvailability}>
-              <FormattedMessage
-                defaultMessage="Availability"
-                description="collection availability"
-              />
-            </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(
-              collections,
-              collection => {
-                const isSelected = collection
-                  ? isChecked(collection.id)
-                  : false;
-                return (
-                  <TableRow
-                    className={classes.tableRow}
-                    hover={!!collection}
-                    onClick={collection ? onRowClick(collection.id) : undefined}
-                    key={collection ? collection.id : "skeleton"}
-                    selected={isSelected}
-                  >
-                    <TableCell padding="checkbox">
-                      <Checkbox
-                        checked={isSelected}
-                        disabled={disabled}
-                        disableClickPropagation
-                        onChange={() => toggle(collection.id)}
-                      />
-                    </TableCell>
-                    <TableCell className={classes.colName}>
-                      {maybe<React.ReactNode>(
-                        () => collection.name,
-                        <Skeleton />
-                      )}
-                    </TableCell>
-                    <TableCell className={classes.colProducts}>
-                      {maybe<React.ReactNode>(
-                        () => collection.products.totalCount,
-                        <Skeleton />
-                      )}
-                    </TableCell>
-                    <TableCell className={classes.colAvailability}>
-                      {maybe(
-                        () => (
-                          <StatusLabel
-                            status={
-                              collection.isPublished ? "success" : "error"
-                            }
-                            label={
-                              collection.isPublished
-                                ? intl.formatMessage({
-                                    defaultMessage: "Published",
-                                    description: "collection is published"
-                                  })
-                                : intl.formatMessage({
-                                    defaultMessage: "Not published",
-                                    description: "collection is not published"
-                                  })
-                            }
-                          />
-                        ),
-                        <Skeleton />
-                      )}
-                    </TableCell>
-                  </TableRow>
-                );
-              },
-              () => (
-                <TableRow>
-                  <TableCell colSpan={numberOfColumns}>
-                    <FormattedMessage defaultMessage="No collections found" />
+      <Table>
+        <TableHead
+          colSpan={numberOfColumns}
+          selected={selected}
+          disabled={disabled}
+          items={collections}
+          toggleAll={toggleAll}
+          toolbar={toolbar}
+        >
+          <TableCell className={classes.colName}>
+            <FormattedMessage defaultMessage="Category Name" />
+          </TableCell>
+          <TableCell className={classes.colProducts}>
+            <FormattedMessage defaultMessage="No. of Products" />
+          </TableCell>
+          <TableCell className={classes.colAvailability}>
+            <FormattedMessage
+              defaultMessage="Availability"
+              description="collection availability"
+            />
+          </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(
+            collections,
+            collection => {
+              const isSelected = collection ? isChecked(collection.id) : false;
+              return (
+                <TableRow
+                  className={classes.tableRow}
+                  hover={!!collection}
+                  onClick={collection ? onRowClick(collection.id) : undefined}
+                  key={collection ? collection.id : "skeleton"}
+                  selected={isSelected}
+                >
+                  <TableCell padding="checkbox">
+                    <Checkbox
+                      checked={isSelected}
+                      disabled={disabled}
+                      disableClickPropagation
+                      onChange={() => toggle(collection.id)}
+                    />
+                  </TableCell>
+                  <TableCell className={classes.colName}>
+                    {maybe<React.ReactNode>(
+                      () => collection.name,
+                      <Skeleton />
+                    )}
+                  </TableCell>
+                  <TableCell className={classes.colProducts}>
+                    {maybe<React.ReactNode>(
+                      () => collection.products.totalCount,
+                      <Skeleton />
+                    )}
+                  </TableCell>
+                  <TableCell className={classes.colAvailability}>
+                    {maybe(
+                      () => (
+                        <StatusLabel
+                          status={collection.isPublished ? "success" : "error"}
+                          label={
+                            collection.isPublished
+                              ? intl.formatMessage({
+                                  defaultMessage: "Published",
+                                  description: "collection is published"
+                                })
+                              : intl.formatMessage({
+                                  defaultMessage: "Not published",
+                                  description: "collection is not published"
+                                })
+                          }
+                        />
+                      ),
+                      <Skeleton />
+                    )}
                  </TableCell>
                </TableRow>
-              )
-            )}
-          </TableBody>
-        </Table>
-      </Card>
+              );
+            },
+            () => (
+              <TableRow>
+                <TableCell colSpan={numberOfColumns}>
+                  <FormattedMessage defaultMessage="No collections found" />
+                </TableCell>
+              </TableRow>
+            )
+          )}
+        </TableBody>
+      </Table>
    );
  }
 );
--- a/src/collections/components/CollectionListPage/CollectionListPage.tsx
+++ b/src/collections/components/CollectionListPage/CollectionListPage.tsx
@ -1,22 +1,40 @@
 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 { CollectionList_collections_edges_node } from "../../types/CollectionList";
 import CollectionList from "../CollectionList/CollectionList";

-export interface CollectionListPageProps extends PageListProps, ListActions {
+export interface CollectionListPageProps
+  extends PageListProps,
+    ListActions,
+    SearchPageProps,
+    TabPageProps {
  collections: CollectionList_collections_edges_node[];
 }

 const CollectionListPage: React.StatelessComponent<CollectionListPageProps> = ({
+  currentTab,
  disabled,
+  initialSearch,
  onAdd,
+  onAll,
+  onSearchChange,
+  onTabChange,
+  onTabDelete,
+  onTabSave,
+  tabs,
  ...listProps
 }) => {
  const intl = useIntl();
@ -36,7 +54,22 @@ const CollectionListPage: React.StatelessComponent<CollectionListPageProps> = ({
          />
        </Button>
      </PageHeader>
-      <CollectionList disabled={disabled} {...listProps} />
+      <Card>
+        <SearchBar
+          currentTab={currentTab}
+          initialSearch={initialSearch}
+          searchPlaceholder={intl.formatMessage({
+            defaultMessage: "Search Collection"
+          })}
+          tabs={tabs}
+          onAll={onAll}
+          onSearchChange={onSearchChange}
+          onTabChange={onTabChange}
+          onTabDelete={onTabDelete}
+          onTabSave={onTabSave}
+        />
+        <CollectionList disabled={disabled} {...listProps} />
+      </Card>
    </Container>
  );
 };
--- a/src/collections/queries.ts
+++ b/src/collections/queries.ts
@ -60,8 +60,15 @@ export const collectionList = gql`
    $after: String
    $last: Int
    $before: String
+    $filter: CollectionFilterInput
  ) {
-    collections(first: $first, after: $after, before: $before, last: $last) {
+    collections(
+      first: $first
+      after: $after
+      before: $before
+      last: $last
+      filter: $filter
+    ) {
      edges {
        node {
          ...CollectionFragment
--- a/src/collections/types/CollectionList.ts
+++ b/src/collections/types/CollectionList.ts
@ -2,6 +2,8 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.

+import { CollectionFilterInput } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL query operation: CollectionList
 // ====================================================
@ -47,4 +49,5 @@ export interface CollectionListVariables {
  after?: string | null;
  last?: number | null;
  before?: string | null;
+  filter?: CollectionFilterInput | null;
 }
--- a/src/collections/urls.ts
+++ b/src/collections/urls.ts
@ -1,13 +1,30 @@
 import { stringify as stringifyQs } from "qs";
 import urlJoin from "url-join";

-import { BulkAction, Dialog, Pagination } from "../types";
+import {
+  ActiveTab,
+  BulkAction,
+  Dialog,
+  Filters,
+  Pagination,
+  TabActionDialog
+} from "../types";

 const collectionSectionUrl = "/collections/";

 export const collectionListPath = collectionSectionUrl;
-export type CollectionListUrlDialog = "publish" | "unpublish" | "remove";
-export type CollectionListUrlQueryParams = BulkAction &
+export enum CollectionListUrlFiltersEnum {
+  query = "query"
+}
+export type CollectionListUrlFilters = Filters<CollectionListUrlFiltersEnum>;
+export type CollectionListUrlDialog =
+  | "publish"
+  | "unpublish"
+  | "remove"
+  | TabActionDialog;
+export type CollectionListUrlQueryParams = ActiveTab &
+  BulkAction &
+  CollectionListUrlFilters &
  Dialog<CollectionListUrlDialog> &
  Pagination;
 export const collectionListUrl = (params?: CollectionListUrlQueryParams) =>
--- a/src/collections/views/CollectionList/CollectionList.tsx
+++ b/src/collections/views/CollectionList/CollectionList.tsx
@ -5,7 +5,12 @@ 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, {
+  SaveFilterTabDialogFormData
+} from "@saleor/components/SaveFilterTabDialog";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useListSettings from "@saleor/hooks/useListSettings";
 import useNavigator from "@saleor/hooks/useNavigator";
@ -16,21 +21,29 @@ import usePaginator, {
 import { commonMessages } from "@saleor/intl";
 import { getMutationState, maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
-import CollectionListPage from "../components/CollectionListPage/CollectionListPage";
+import CollectionListPage from "../../components/CollectionListPage/CollectionListPage";
 import {
  TypedCollectionBulkDelete,
  TypedCollectionBulkPublish
-} from "../mutations";
-import { TypedCollectionListQuery } from "../queries";
-import { CollectionBulkDelete } from "../types/CollectionBulkDelete";
-import { CollectionBulkPublish } from "../types/CollectionBulkPublish";
+} from "../../mutations";
+import { TypedCollectionListQuery } from "../../queries";
+import { CollectionBulkDelete } from "../../types/CollectionBulkDelete";
+import { CollectionBulkPublish } from "../../types/CollectionBulkPublish";
 import {
  collectionAddUrl,
  collectionListUrl,
  CollectionListUrlDialog,
  CollectionListUrlQueryParams,
  collectionUrl
-} from "../urls";
+} from "../../urls";
+import {
+  areFiltersApplied,
+  deleteFilterTab,
+  getActiveFilters,
+  getFilterTabs,
+  getFilterVariables,
+  saveFilterTab
+} from "./filter";

 interface CollectionListProps {
  params: CollectionListUrlQueryParams;
@ -50,6 +63,26 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
  );
  const intl = useIntl();

+  const tabs = getFilterTabs();
+
+  const currentTab =
+    params.activeTab === undefined
+      ? areFiltersApplied(params)
+        ? tabs.length + 1
+        : 0
+      : parseInt(params.activeTab, 0);
+
+  const changeFilterField = (filter: CategoryListUrlFilters) => {
+    reset();
+    navigate(
+      collectionListUrl({
+        ...getActiveFilters(params),
+        ...filter,
+        activeTab: undefined
+      })
+    );
+  };
+
  const closeModal = () =>
    navigate(
      collectionListUrl({
@ -60,17 +93,47 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
      true
    );

-  const openModal = (action: CollectionListUrlDialog, ids: string[]) =>
+  const openModal = (action: CollectionListUrlDialog, ids?: string[]) =>
    navigate(
      collectionListUrl({
+        ...params,
        action,
        ids
      })
    );

+  const handleTabChange = (tab: number) => {
+    reset();
+    navigate(
+      collectionListUrl({
+        activeTab: tab.toString(),
+        ...getFilterTabs()[tab - 1].data
+      })
+    );
+  };
+
+  const handleTabDelete = () => {
+    deleteFilterTab(currentTab);
+    reset();
+    navigate(collectionListUrl());
+  };
+
+  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 (
-    <TypedCollectionListQuery displayLoader variables={paginationState}>
+    <TypedCollectionListQuery displayLoader variables={queryVariables}>
      {({ data, loading, refetch }) => {
        const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
          maybe(() => data.collections.pageInfo),
@ -130,7 +193,15 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
                  return (
                    <>
                      <CollectionListPage
+                        currentTab={currentTab}
+                        initialSearch={params.query || ""}
+                        onSearchChange={query => changeFilterField({ query })}
                        onAdd={() => navigate(collectionAddUrl)}
+                        onAll={() => navigate(collectionListUrl())}
+                        onTabChange={handleTabChange}
+                        onTabDelete={() => openModal("delete-search")}
+                        onTabSave={() => openModal("save-search")}
+                        tabs={tabs.map(tab => tab.name)}
                        disabled={loading}
                        collections={maybe(() =>
                          data.collections.edges.map(edge => edge.node)
@ -289,6 +360,19 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
                          />
                        </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, "...")}
+                      />
                    </>
                  );
                }}
--- a/src/collections/views/CollectionList/filter.ts
+++ b/src/collections/views/CollectionList/filter.ts
@ -0,0 +1,31 @@
+import { CollectionFilterInput } from "@saleor/types/globalTypes";
+import {
+  createFilterTabUtils,
+  createFilterUtils
+} from "../../../utils/filters";
+import {
+  CollectionListUrlFilters,
+  CollectionListUrlFiltersEnum,
+  CollectionListUrlQueryParams
+} from "../../urls";
+
+export const COLLECTION_FILTERS_KEY = "collectionFilters";
+
+export function getFilterVariables(
+  params: CollectionListUrlFilters
+): CollectionFilterInput {
+  return {
+    search: params.query
+  };
+}
+
+export const {
+  deleteFilterTab,
+  getFilterTabs,
+  saveFilterTab
+} = createFilterTabUtils<CollectionListUrlFilters>(COLLECTION_FILTERS_KEY);
+
+export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+  CollectionListUrlQueryParams,
+  CollectionListUrlFilters
+>(CollectionListUrlFiltersEnum);
--- a/src/collections/views/CollectionList/index.ts
+++ b/src/collections/views/CollectionList/index.ts
@ -0,0 +1,2 @@
+export { default } from "./CollectionList";
+export * from "./CollectionList";
--- a/src/types/globalTypes.ts
+++ b/src/types/globalTypes.ts
@ -33,6 +33,11 @@ export enum AuthorizationKeyType {
  GOOGLE_OAUTH2 = "GOOGLE_OAUTH2",
 }

+export enum CollectionPublished {
+  HIDDEN = "HIDDEN",
+  PUBLISHED = "PUBLISHED",
+}
+
 export enum ConfigurationTypeFieldEnum {
  BOOLEAN = "BOOLEAN",
  STRING = "STRING",
@ -343,6 +348,11 @@ export interface CollectionCreateInput {
  products?: (string | null)[] | null;
 }

+export interface CollectionFilterInput {
+  published?: CollectionPublished | null;
+  search?: string | null;
+}
+
 export interface CollectionInput {
  isPublished?: boolean | null;
  name?: string | null;