Merge pull request #4414 from mirumee/add-number-rows-product-list

Add number rows product list
saleor · Jul 23, 2019 · 0a28e71 · 0a28e71
2 parents 7738985 + 588b039
commit 0a28e71
Show file tree

Hide file tree

Showing 44 changed files with 1,940 additions and 185 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix navigation rwd - #4511 by @benekex2
 - Create general abstraction for object metadata - #4447 by @salwator
 - Contrast improvements - #4508 by @benekex2
+- Allow selecting the number of rows displayed in dashboard's list views - #4414 by @benekex2
 
 ## 2.8.0
 

diff --git a/saleor/static/dashboard-next/categories/components/CategoryList/CategoryList.tsx b/saleor/static/dashboard-next/categories/components/CategoryList/CategoryList.tsx
@@ -18,9 +18,9 @@ import Checkbox from "@saleor/components/Checkbox";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
-import i18n from "../../../i18n";
-import { renderCollection } from "../../../misc";
-import { ListActions, ListProps } from "../../../types";
+import i18n from "@saleor/i18n";
+import { renderCollection } from "@saleor/misc";
+import { ListActions, ListProps } from "@saleor/types";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -72,6 +72,7 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
     categories,
     classes,
     disabled,
+    settings,
     isRoot,
     pageInfo,
     isChecked,
@@ -82,6 +83,7 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
     onAdd,
     onNextPage,
     onPreviousPage,
+    onUpdateListSettings,
     onRowClick
   }: CategoryListProps) => (
     <Card>
@@ -117,8 +119,10 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
           <TableRow>
             <TablePagination
               colSpan={4}
+              settings={settings}
               hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}
+              onUpdateListSettings={onUpdateListSettings}
               hasPreviousPage={
                 pageInfo && !disabled ? pageInfo.hasPreviousPage : false
               }

diff --git a/saleor/static/dashboard-next/categories/components/CategoryListPage/CategoryListPage.tsx b/saleor/static/dashboard-next/categories/components/CategoryListPage/CategoryListPage.tsx
@@ -4,8 +4,8 @@ import React from "react";
 
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
-import i18n from "../../../i18n";
-import { ListActions, PageListProps } from "../../../types";
+import i18n from "@saleor/i18n";
+import { ListActions, PageListProps } from "@saleor/types";
 import CategoryList from "../CategoryList";
 
 export interface CategoryTableProps extends PageListProps, ListActions {
@@ -24,9 +24,11 @@ export interface CategoryTableProps extends PageListProps, ListActions {
 export const CategoryListPage: React.StatelessComponent<CategoryTableProps> = ({
   categories,
   disabled,
+  settings,
   onAdd,
   onNextPage,
   onPreviousPage,
+  onUpdateListSettings,
   onRowClick,
   pageInfo,
   isChecked,
@@ -46,9 +48,11 @@ export const CategoryListPage: React.StatelessComponent<CategoryTableProps> = ({
       onAdd={onAdd}
       onRowClick={onRowClick}
       disabled={disabled}
+      settings={settings}
       isRoot={true}
       onNextPage={onNextPage}
       onPreviousPage={onPreviousPage}
+      onUpdateListSettings={onUpdateListSettings}
       pageInfo={pageInfo}
       isChecked={isChecked}
       selected={selected}

diff --git a/saleor/static/dashboard-next/categories/views/CategoryList.tsx b/saleor/static/dashboard-next/categories/views/CategoryList.tsx
@@ -5,13 +5,14 @@ import React from "react";
 
 import ActionDialog from "@saleor/components/ActionDialog";
 import useBulkActions from "@saleor/hooks/useBulkActions";
+import useListSettings from "@saleor/hooks/useListSettings";
 import useNavigator from "@saleor/hooks/useNavigator";
 import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
-import { PAGINATE_BY } from "../../config";
-import i18n from "../../i18n";
-import { getMutationState, maybe } from "../../misc";
+import i18n from "@saleor/i18n";
+import { getMutationState, maybe } from "@saleor/misc";
+import { ListViews } from "@saleor/types";
 import { CategoryListPage } from "../components/CategoryListPage/CategoryListPage";
 import { TypedCategoryBulkDeleteMutation } from "../mutations";
 import { TypedRootCategoriesQuery } from "../queries";
@@ -35,8 +36,10 @@ export const CategoryList: React.StatelessComponent<CategoryListProps> = ({
   const { isSelected, listElements, toggle, toggleAll, reset } = useBulkActions(
     params.ids
   );
-
-  const paginationState = createPaginationState(PAGINATE_BY, params);
+  const { updateListSettings, settings } = useListSettings(
+    ListViews.CATEGORY_LIST
+  );
+  const paginationState = createPaginationState(settings.rowNumber, params);
   return (
     <TypedRootCategoriesQuery displayLoader variables={paginationState}>
       {({ data, loading, refetch }) => {
@@ -73,11 +76,13 @@ export const CategoryList: React.StatelessComponent<CategoryListProps> = ({
                       () => data.categories.edges.map(edge => edge.node),
                       []
                     )}
+                    settings={settings}
                     onAdd={() => navigate(categoryAddUrl())}
                     onRowClick={id => () => navigate(categoryUrl(id))}
                     disabled={loading}
                     onNextPage={loadNextPage}
                     onPreviousPage={loadPreviousPage}
+                    onUpdateListSettings={updateListSettings}
                     pageInfo={pageInfo}
                     isChecked={isSelected}
                     selected={listElements.length}

diff --git a/saleor/static/dashboard-next/collections/components/CollectionList/CollectionList.tsx b/saleor/static/dashboard-next/collections/components/CollectionList/CollectionList.tsx
@@ -17,9 +17,9 @@ import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
-import i18n from "../../../i18n";
-import { maybe, renderCollection } from "../../../misc";
-import { ListActions, ListProps } from "../../../types";
+import i18n from "@saleor/i18n";
+import { maybe, renderCollection } from "@saleor/misc";
+import { ListActions, ListProps } from "@saleor/types";
 import { CollectionList_collections_edges_node } from "../../types/CollectionList";
 
 const styles = (theme: Theme) =>
@@ -55,8 +55,10 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
     classes,
     collections,
     disabled,
+    settings,
     onNextPage,
     onPreviousPage,
+    onUpdateListSettings,
     onRowClick,
     pageInfo,
     isChecked,
@@ -90,8 +92,10 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
           <TableRow>
             <TablePagination
               colSpan={5}
+              settings={settings}
               hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}
+              onUpdateListSettings={onUpdateListSettings}
               hasPreviousPage={
                 pageInfo && !disabled ? pageInfo.hasPreviousPage : false
               }

diff --git a/...or/static/dashboard-next/collections/components/CollectionListPage/CollectionListPage.tsx b/...or/static/dashboard-next/collections/components/CollectionListPage/CollectionListPage.tsx
@@ -4,8 +4,8 @@ import React from "react";
 
 import { Container } from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
-import i18n from "../../../i18n";
-import { ListActions, PageListProps } from "../../../types";
+import i18n from "@saleor/i18n";
+import { ListActions, PageListProps } from "@saleor/types";
 import { CollectionList_collections_edges_node } from "../../types/CollectionList";
 import CollectionList from "../CollectionList/CollectionList";
 

diff --git a/saleor/static/dashboard-next/collections/views/CollectionList.tsx b/saleor/static/dashboard-next/collections/views/CollectionList.tsx
@@ -6,14 +6,15 @@ import React from "react";
 
 import ActionDialog from "@saleor/components/ActionDialog";
 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 { PAGINATE_BY } from "../../config";
-import i18n from "../../i18n";
-import { getMutationState, maybe } from "../../misc";
+import i18n from "@saleor/i18n";
+import { getMutationState, maybe } from "@saleor/misc";
+import { ListViews } from "@saleor/types";
 import CollectionListPage from "../components/CollectionListPage/CollectionListPage";
 import {
   TypedCollectionBulkDelete,
@@ -43,6 +44,9 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
+  const { updateListSettings, settings } = useListSettings(
+    ListViews.COLLECTION_LIST
+  );
 
   const closeModal = () =>
     navigate(
@@ -62,7 +66,7 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
       })
     );
 
-  const paginationState = createPaginationState(PAGINATE_BY, params);
+  const paginationState = createPaginationState(settings.rowNumber, params);
   return (
     <TypedCollectionListQuery displayLoader variables={paginationState}>
       {({ data, loading, refetch }) => {
@@ -129,8 +133,10 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
                         collections={maybe(() =>
                           data.collections.edges.map(edge => edge.node)
                         )}
+                        settings={settings}
                         onNextPage={loadNextPage}
                         onPreviousPage={loadPreviousPage}
+                        onUpdateListSettings={updateListSettings}
                         pageInfo={pageInfo}
                         onRowClick={id => () => navigate(collectionUrl(id))}
                         toolbar={

diff --git a/saleor/static/dashboard-next/components/ProductList/ProductList.tsx b/saleor/static/dashboard-next/components/ProductList/ProductList.tsx
@@ -12,10 +12,10 @@ import TableRow from "@material-ui/core/TableRow";
 import React from "react";
 
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
+import i18n from "@saleor/i18n";
+import { maybe, renderCollection } from "@saleor/misc";
+import { ListActions, ListProps } from "@saleor/types";
 import { CategoryDetails_category_products_edges_node } from "../../categories/types/CategoryDetails";
-import i18n from "../../i18n";
-import { maybe, renderCollection } from "../../misc";
-import { ListActions, ListProps } from "../../types";
 import Checkbox from "../Checkbox";
 import Money from "../Money";
 import Skeleton from "../Skeleton";
@@ -71,6 +71,7 @@ interface ProductListProps
 export const ProductList = withStyles(styles, { name: "ProductList" })(
   ({
     classes,
+    settings,
     disabled,
     isChecked,
     pageInfo,
@@ -81,6 +82,7 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
     toolbar,
     onNextPage,
     onPreviousPage,
+    onUpdateListSettings,
     onRowClick
   }: ProductListProps) => (
     <Table>
@@ -109,8 +111,10 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
         <TableRow>
           <TablePagination
             colSpan={6}
+            settings={settings}
             hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
             onNextPage={onNextPage}
+            onUpdateListSettings={onUpdateListSettings}
             hasPreviousPage={
               pageInfo && !disabled ? pageInfo.hasPreviousPage : false
             }

diff --git a/saleor/static/dashboard-next/components/RowNumberSelect/RowNumberSelect.tsx b/saleor/static/dashboard-next/components/RowNumberSelect/RowNumberSelect.tsx
@@ -0,0 +1,71 @@
+import MenuItem from "@material-ui/core/MenuItem";
+import Select from "@material-ui/core/Select";
+import { Theme } from "@material-ui/core/styles";
+import { createStyles, makeStyles, useTheme } from "@material-ui/styles";
+import React from "react";
+
+import i18n from "../../i18n";
+import { ListSettings } from "../../types";
+
+const useStyles = makeStyles(
+  (theme: Theme) =>
+    createStyles({
+      label: {
+        fontSize: 14
+      },
+      select: {
+        "& div": {
+          "&:focus": {
+            background: "none"
+          },
+          color: theme.palette.primary.main,
+          padding: "0 10px 0 5px"
+        },
+        "& svg": {
+          color: theme.palette.primary.main
+        },
+        "&:after, &:before, &:hover": {
+          border: "none !important"
+        }
+      }
+    }),
+  {
+    name: "RowNumberSelect"
+  }
+);
+
+interface RowNumberSelectProps {
+  choices: number[];
+  className?: string;
+  settings: ListSettings;
+  onChange(key: keyof ListSettings, value: any);
+}
+
+const RowNumberSelect: React.FC<RowNumberSelectProps> = ({
+  className,
+  choices,
+  settings,
+  onChange
+}) => {
+  const theme = useTheme();
+  const classes = useStyles({ theme });
+  return (
+    <div className={className}>
+      <span className={classes.label}>{i18n.t("No of Rows:")}</span>
+      <Select
+        className={classes.select}
+        value={settings.rowNumber}
+        onChange={event => onChange("rowNumber", event.target.value)}
+      >
+        {choices.length > 0 &&
+          choices.map(choice => (
+            <MenuItem value={choice} key={choice}>
+              {choice}
+            </MenuItem>
+          ))}
+      </Select>
+    </div>
+  );
+};
+
+export default RowNumberSelect;
diff --git a/saleor/static/dashboard-next/components/RowNumberSelect/index.ts b/saleor/static/dashboard-next/components/RowNumberSelect/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./RowNumberSelect";
+export * from "./RowNumberSelect";