Merge pull request #195 from reactioncommerce/fix-products-orders-tab…

…les-improvements Product table improvements
reactioncommerce · Feb 3, 2020 · ba43107 · ba43107
2 parents 1bdc243 + 7af34da
commit ba43107
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 249 deletions.
diff --git a/imports/client/ui/startup.js b/imports/client/ui/startup.js
@@ -5,7 +5,7 @@ import { AuthenticationProvider, oidcLog } from "@axa-fr/react-oidc-context";
 import { Meteor } from "meteor/meteor";
 import { Tracker } from "meteor/tracker";
 import { ThemeProvider } from "styled-components";
-import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
+import { ThemeProvider as MuiThemeProvider } from "@material-ui/core/styles";
 import { ApolloProvider } from "react-apollo";
 import { ComponentsProvider } from "@reactioncommerce/components-context";
 import { TranslationProvider } from "/imports/plugins/core/ui/client/providers";

diff --git a/imports/plugins/core/router/client/browserRouter.js b/imports/plugins/core/router/client/browserRouter.js
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 import { ThemeProvider } from "styled-components";
-import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
+import { ThemeProvider as MuiThemeProvider } from "@material-ui/core/styles";
 import { matchPath } from "react-router";
 import { Router as ReactRouter } from "react-router-dom";
 import { ApolloProvider } from "react-apollo";

diff --git a/imports/plugins/core/ui/client/helpers/react-template-helper.js b/imports/plugins/core/ui/client/helpers/react-template-helper.js
@@ -4,7 +4,7 @@ import ReactDOM from "react-dom";
 import { ApolloProvider } from "react-apollo";
 import { ComponentsProvider } from "@reactioncommerce/components-context";
 import { ThemeProvider } from "styled-components";
-import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
+import { ThemeProvider as MuiThemeProvider } from "@material-ui/core/styles";
 import _ from "lodash";
 import { Template } from "meteor/templating";
 import { Blaze } from "meteor/blaze";

diff --git a/imports/plugins/included/product-admin/client/components/FilterByFileCard.js b/imports/plugins/included/product-admin/client/components/FilterByFileCard.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { i18next } from "/client/api";
 import {
   Grid,
-  Grow,
+  Zoom,
   Button,
   Card as MuiCard,
   CardHeader,
@@ -62,11 +62,9 @@ export default function FilterByFileCard(props) {
 
   return (
     <Grid item sm={12} className={cardClasses}>
-      <Grow
+      <Zoom
         in={isFilterByFileVisible}
         mountOnEnter
-        style={{ transformOrigin: "center top" }}
-        timeout={180}
         unmountOnExit
       >
         <MuiCard>
@@ -124,7 +122,7 @@ export default function FilterByFileCard(props) {
             )}
           </CardContent>
         </MuiCard>
-      </Grow>
+      </Zoom>
     </Grid>
   );
 }

diff --git a/imports/plugins/included/product-admin/client/components/ProductsTable.js b/imports/plugins/included/product-admin/client/components/ProductsTable.js
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from "react";
+import React, { Fragment, useState, useMemo, useCallback } from "react";
 import { useApolloClient, useMutation } from "@apollo/react-hooks";
 import i18next from "i18next";
 import { useHistory } from "react-router-dom";
@@ -24,11 +24,18 @@ import PublishedStatusCell from "./DataTable/PublishedStatusCell";
 import FilterByFileCard from "./FilterByFileCard";
 import TagSelector from "./TagSelector";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   card: {
     overflow: "visible"
+  },
+  cardHeader: {
+    paddingBottom: 0
+  },
+  selectedProducts: {
+    fontWeight: 400,
+    marginLeft: theme.spacing(1)
   }
-});
+}));
 
 /**
  * @summary Main products view
@@ -408,6 +415,12 @@ function ProductsTable() {
   }], [apolloClient, enqueueSnackbar, isFilterByFileVisible, isTagSelectorVisible, refetch, selectedRows, shopId]);
 
   const classes = useStyles();
+  const selectedProducts = selectedRows.length ? `${selectedRows.length} selected` : "";
+  const cardTitle = (
+    <Fragment>
+      {i18next.t("admin.products")}<span className={classes.selectedProducts}>{selectedProducts}</span>
+    </Fragment>
+  );
 
   return (
     <Grid container spacing={3}>
@@ -435,7 +448,7 @@ function ProductsTable() {
       }
       <Grid item sm={12}>
         <Card className={classes.card}>
-          <CardHeader title={i18next.t("admin.products")} />
+          <CardHeader classes={{ root: classes.cardHeader }} title={cardTitle} />
           <CardContent>
             <DataTable
               {...dataTableProps}

diff --git a/imports/plugins/included/product-admin/client/components/TagSelector/TagSelector.js b/imports/plugins/included/product-admin/client/components/TagSelector/TagSelector.js
@@ -12,7 +12,7 @@ import {
   CardActions,
   CardHeader,
   CardContent,
-  Grow,
+  Zoom,
   IconButton,
   makeStyles
 } from "@material-ui/core";
@@ -137,12 +137,9 @@ function TagSelector({ isVisible, selectedProductIds, setVisibility, shopId }) {
     <Fragment>
       {isVisible &&
         <Grid item sm={12} >
-
-          <Grow
+          <Zoom
             in={isVisible}
             mountOnEnter
-            style={{ transformOrigin: "center top" }}
-            timeout={180}
             unmountOnExit
           >
             <MuiCard classes={{ root: classes.cardRoot }}>
@@ -178,7 +175,7 @@ function TagSelector({ isVisible, selectedProductIds, setVisibility, shopId }) {
                 />
               </CardActions>
             </MuiCard>
-          </Grow>
+          </Zoom>
         </Grid>
       }
     </Fragment>