Merge pull request #4608 from mirumee/attributes/add-column-settings

Add ability to toggle visible columns in product list
saleor · Aug 8, 2019 · 1b5141e · 1b5141e
2 parents f7c8814 + 8cbc141
commit 1b5141e
Show file tree

Hide file tree

Showing 57 changed files with 9,933 additions and 7,102 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -46,6 +46,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Users cannot add multiple times the same product into a collection anymore - #4518 by @NyanKiyoshi
 - Enterprise-grade attributes management - #4351 by @dominik-zeglen and @NyanKiyoshi
 - Refetch attribute list after closing modal - #4615 by @dominik-zeglen
+- Add ability to toggle visible columns in product list - #4608 by @dominik-zeglen 
 
 ## 2.8.0
 

diff --git a/saleor/static/dashboard-next/attributes/components/AttributeList/AttributeList.tsx b/saleor/static/dashboard-next/attributes/components/AttributeList/AttributeList.tsx
@@ -55,6 +55,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   }
 }));
 
+const numberOfColumns = 6;
+
 const AttributeList: React.StatelessComponent<AttributeListProps> = ({
   attributes,
   disabled,
@@ -73,6 +75,7 @@ const AttributeList: React.StatelessComponent<AttributeListProps> = ({
   return (
     <Table>
       <TableHead
+        colSpan={numberOfColumns}
         selected={selected}
         disabled={disabled}
         items={attributes}
@@ -102,7 +105,7 @@ const AttributeList: React.StatelessComponent<AttributeListProps> = ({
       <TableFooter>
         <TableRow>
           <TablePagination
-            colSpan={6}
+            colSpan={numberOfColumns}
             hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
             onNextPage={onNextPage}
             hasPreviousPage={
@@ -165,7 +168,9 @@ const AttributeList: React.StatelessComponent<AttributeListProps> = ({
           },
           () => (
             <TableRow>
-              <TableCell colSpan={3}>{i18n.t("No attributes found")}</TableCell>
+              <TableCell colSpan={numberOfColumns}>
+                {i18n.t("No attributes found")}
+              </TableCell>
             </TableRow>
           )
         )}

diff --git a/saleor/static/dashboard-next/categories/components/CategoryList/CategoryList.tsx b/saleor/static/dashboard-next/categories/components/CategoryList/CategoryList.tsx
@@ -67,6 +67,8 @@ interface CategoryListProps
   onAdd?();
 }
 
+const numberOfColumns = 4;
+
 const CategoryList = withStyles(styles, { name: "CategoryList" })(
   ({
     categories,
@@ -99,6 +101,7 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
       )}
       <Table>
         <TableHead
+          colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
           items={categories}
@@ -118,7 +121,7 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
         <TableFooter>
           <TableRow>
             <TablePagination
-              colSpan={4}
+              colSpan={numberOfColumns}
               settings={settings}
               hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}
@@ -177,7 +180,7 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
             },
             () => (
               <TableRow>
-                <TableCell colSpan={4}>
+                <TableCell colSpan={numberOfColumns}>
                   {isRoot
                     ? i18n.t("No categories found")
                     : i18n.t("No subcategories found")}

diff --git a/saleor/static/dashboard-next/categories/components/CategoryProducts/CategoryProducts.tsx b/saleor/static/dashboard-next/categories/components/CategoryProducts/CategoryProducts.tsx
diff --git a/saleor/static/dashboard-next/categories/components/CategoryProducts/index.ts b/saleor/static/dashboard-next/categories/components/CategoryProducts/index.ts
diff --git a/...static/dashboard-next/categories/components/CategoryProductsCard/CategoryProductsCard.tsx b/...static/dashboard-next/categories/components/CategoryProductsCard/CategoryProductsCard.tsx
@@ -40,6 +40,10 @@ export const CategoryProductsCard: React.StatelessComponent<
       }
     />
     <ProductList
+      settings={{
+        columns: ["isPublished", "price", "productType"],
+        rowNumber: undefined
+      }}
       products={products}
       disabled={disabled}
       pageInfo={pageInfo}

diff --git a/saleor/static/dashboard-next/collections/components/CollectionList/CollectionList.tsx b/saleor/static/dashboard-next/collections/components/CollectionList/CollectionList.tsx
@@ -50,6 +50,8 @@ interface CollectionListProps
   collections: CollectionList_collections_edges_node[];
 }
 
+const numberOfColumns = 5;
+
 const CollectionList = withStyles(styles, { name: "CollectionList" })(
   ({
     classes,
@@ -70,6 +72,7 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
     <Card>
       <Table>
         <TableHead
+          colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
           items={collections}
@@ -91,7 +94,7 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
         <TableFooter>
           <TableRow>
             <TablePagination
-              colSpan={5}
+              colSpan={numberOfColumns}
               settings={settings}
               hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}
@@ -155,7 +158,7 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
             },
             () => (
               <TableRow>
-                <TableCell colSpan={3}>
+                <TableCell colSpan={numberOfColumns}>
                   {i18n.t("No collections found")}
                 </TableCell>
               </TableRow>

diff --git a/...or/static/dashboard-next/collections/components/CollectionProducts/CollectionProducts.tsx b/...or/static/dashboard-next/collections/components/CollectionProducts/CollectionProducts.tsx
@@ -19,7 +19,9 @@ import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
-import TableCellAvatar from "@saleor/components/TableCellAvatar";
+import TableCellAvatar, {
+  AVATAR_MARGIN
+} from "@saleor/components/TableCellAvatar";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import i18n from "../../../i18n";
@@ -29,12 +31,27 @@ import { CollectionDetails_collection } from "../../types/CollectionDetails";
 
 const styles = (theme: Theme) =>
   createStyles({
-    iconCell: {
+    colActions: {
       "&:last-child": {
         paddingRight: 0
       },
       width: 48 + theme.spacing.unit / 2
     },
+    colName: {
+      width: "auto"
+    },
+    colNameLabel: {
+      marginLeft: AVATAR_MARGIN
+    },
+    colPublished: {
+      width: 200
+    },
+    colType: {
+      width: 200
+    },
+    table: {
+      tableLayout: "fixed"
+    },
     tableRow: {
       cursor: "pointer"
     }
@@ -48,6 +65,8 @@ export interface CollectionProductsProps
   onProductUnassign: (id: string, event: React.MouseEvent<any>) => void;
 }
 
+const numberOfColumns = 5;
+
 const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
   ({
     classes,
@@ -89,24 +108,32 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
           </Button>
         }
       />
-      <Table>
+      <Table className={classes.table}>
         <TableHead
+          colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
           items={maybe(() => collection.products.edges.map(edge => edge.node))}
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
-          <TableCell>{i18n.t("Name", { context: "table header" })}</TableCell>
-          <TableCell>{i18n.t("Type", { context: "table header" })}</TableCell>
-          <TableCell>
+          <TableCell className={classes.colName}>
+            <span className={classes.colNameLabel}>
+              {i18n.t("Name", { context: "table header" })}
+            </span>
+          </TableCell>
+          <TableCell className={classes.colType}>
+            {i18n.t("Type", { context: "table header" })}
+          </TableCell>
+          <TableCell className={classes.colPublished}>
             {i18n.t("Published", { context: "table header" })}
           </TableCell>
+          <TableCell className={classes.colActions} />
         </TableHead>
         <TableFooter>
           <TableRow>
             <TablePagination
-              colSpan={6}
+              colSpan={numberOfColumns}
               hasNextPage={maybe(() => pageInfo.hasNextPage)}
               onNextPage={onNextPage}
               hasPreviousPage={maybe(() => pageInfo.hasPreviousPage)}
@@ -136,18 +163,18 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
                     />
                   </TableCell>
                   <TableCellAvatar
+                    className={classes.colName}
                     thumbnail={maybe(() => product.thumbnail.url)}
-                  />
-                  <TableCell>
+                  >
                     {maybe<React.ReactNode>(() => product.name, <Skeleton />)}
-                  </TableCell>
-                  <TableCell>
+                  </TableCellAvatar>
+                  <TableCell className={classes.colType}>
                     {maybe<React.ReactNode>(
                       () => product.productType.name,
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell>
+                  <TableCell className={classes.colPublished}>
                     {maybe(
                       () => (
                         <StatusLabel
@@ -162,7 +189,7 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.iconCell}>
+                  <TableCell className={classes.colActions}>
                     <IconButton
                       disabled={!product}
                       onClick={event => onProductUnassign(product.id, event)}
@@ -176,7 +203,9 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
             () => (
               <TableRow>
                 <TableCell />
-                <TableCell colSpan={6}>{i18n.t("No products found")}</TableCell>
+                <TableCell colSpan={numberOfColumns}>
+                  {i18n.t("No products found")}
+                </TableCell>
               </TableRow>
             )
           )}