Merge pull request #5395 from reactioncommerce/feat-5366-show-filter-…

…count Feat #5366 show filter count
reactioncommerce · Aug 1, 2019 · 82069f4 · 82069f4
2 parents e534568 + 3642884
commit 82069f4
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 3 deletions.
diff --git a/imports/plugins/included/product-admin/client/components/ProductTable.js b/imports/plugins/included/product-admin/client/components/ProductTable.js
@@ -20,7 +20,7 @@ function ProductTable({ onCreateProduct }) {
           onClick={onCreateProduct}
           variant="contained"
         >
-          {i18next.t("admin.createProduct") || "Create Product"}
+          {i18next.t("admin.createProduct") || "Create product"}
         </Button>
       </Grid>
       <Grid item sm={12}>

diff --git a/imports/plugins/included/product-admin/server/i18n/en.json b/imports/plugins/included/product-admin/server/i18n/en.json
@@ -43,7 +43,9 @@
             "duplicate": "Duplicate",
             "duplicateTitle": "Duplicate {{count}} product?",
             "duplicateTitle_plural": "Duplicate {{count}} products?",
-            "duplicateMessage": "Duplicate selected products and their variants."
+            "duplicateMessage": "Duplicate selected products and their variants.",
+            "filteredProducts": "Filtered products",
+            "selectedCount": "{{count}} selected"
           }
         },
         "products": "Products",

diff --git a/imports/plugins/included/product-variant/components/productGrid.js b/imports/plugins/included/product-variant/components/productGrid.js
@@ -20,10 +20,24 @@ import TablePagination from "@material-ui/core/TablePagination";
 import TableRow from "@material-ui/core/TableRow";
 import ChevronDownIcon from "mdi-material-ui/ChevronDown";
 import ConfirmDialog from "@reactioncommerce/catalyst/ConfirmDialog";
+import Typography from "@material-ui/core/Typography";
+import withStyles from "@material-ui/core/styles/withStyles";
 
 
+const styles = (theme) => ({
+  filterCountContainer: {
+    paddingLeft: theme.spacing(2),
+    paddingTop: theme.spacing(3)
+  },
+  filterCountText: {
+    paddingLeft: theme.spacing(2),
+    fontWeight: theme.typography.fontWeightRegular
+  }
+});
+
 class ProductGrid extends Component {
   static propTypes = {
+    classes: PropTypes.object,
     onArchiveProducts: PropTypes.func,
     onChangePage: PropTypes.func,
     onChangeRowsPerPage: PropTypes.func,
@@ -81,6 +95,26 @@ class ProductGrid extends Component {
     }
   }
 
+  renderFilteredCount() {
+    const { selectedProductIds, classes } = this.props;
+    const count = selectedProductIds.length;
+    const filterByProductIds = Session.get("filterByProductIds");
+
+    if (filterByProductIds) {
+      return (
+        <div className={classes.filterCountContainer}>
+          <Typography variant="h4" display="inline">
+            {i18next.t("admin.productTable.bulkActions.filteredProducts")}
+          </Typography>
+          <Typography variant="h5" display="inline" className={classes.filterCountText}>
+            {i18next.t("admin.productTable.bulkActions.selectedCount", { count })}
+          </Typography>
+        </div>
+      );
+    }
+    return "";
+  }
+
   renderProductGridItems() {
     const { productMediaById, products } = this.props;
 
@@ -222,6 +256,7 @@ class ProductGrid extends Component {
 
     return (
       <Card>
+        {this.renderFilteredCount()}
         {this.renderToolbar()}
         <CardContent>
           <Table>
@@ -263,4 +298,4 @@ class ProductGrid extends Component {
   }
 }
 
-export default ProductGrid;
+export default withStyles(styles)(ProductGrid);