From 4872ea2c7a6925c034e5a260d86eb73dc3115c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20DOREAU?= <remi.d45@gmail.com>
Date: Tue, 15 Sep 2020 10:42:04 +0200
Subject: [PATCH] feat(core): add table filters count

---
 .../core/src/components/Select/Select.tsx     |  4 +++-
 .../core/src/components/Table/Filters.tsx     |  7 +-----
 packages/core/src/components/Table/Table.tsx  | 22 ++++++++++++++-----
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/components/Select/Select.tsx b/packages/core/src/components/Select/Select.tsx
index b518b37d6c..0f2bda94ba 100644
--- a/packages/core/src/components/Select/Select.tsx
+++ b/packages/core/src/components/Select/Select.tsx
@@ -122,7 +122,9 @@ export const SelectComponent = (props: SelectProps) => {
   };
 
   const handleDelete = (selectedValue: string | number) => () => {
-    setValue(chips => (chips as any[]).filter(chip => chip !== selectedValue));
+    const newValue = (value as any[]).filter(chip => chip !== selectedValue)
+    setValue(newValue);
+    onChange(newValue);
   };
 
   return (
diff --git a/packages/core/src/components/Table/Filters.tsx b/packages/core/src/components/Table/Filters.tsx
index db8a3a9af2..ad6c8628bb 100644
--- a/packages/core/src/components/Table/Filters.tsx
+++ b/packages/core/src/components/Table/Filters.tsx
@@ -75,12 +75,7 @@ export const Filters = (props: Props) => {
   // Trigger re-rendering
   const handleClick = () => {
     setSelectedFilters({});
-    setFilters([
-      ...props.filters.map(el => ({
-        type: el.type,
-        element: { ...el.element },
-      })),
-    ]);
+    setFilters([...props.filters]);
   };
 
   useEffect(() => {
diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx
index 212e80fcd2..b728db900b 100644
--- a/packages/core/src/components/Table/Table.tsx
+++ b/packages/core/src/components/Table/Table.tsx
@@ -1,4 +1,3 @@
-import classes from '*.css';
 /*
  * Copyright 2020 Spotify AB
  *
@@ -45,7 +44,7 @@ import MTable, {
   MTableToolbar,
   Options,
 } from 'material-table';
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { Filters } from './Filters';
 
 const tableIcons = {
@@ -199,6 +198,7 @@ export function Table<T extends object = {}>({
   const theme = useTheme<BackstageTheme>();
 
   const [filtersOpen, toggleFilters] = useState(false);
+  const [selectedFiltersLength, setSelectedFiltersLength] = useState(0);
   const [tableData, setTableData] = useState(data as any[]);
 
   const MTColumns = convertColumns(columns, theme);
@@ -212,15 +212,25 @@ export function Table<T extends object = {}>({
   const getFieldByTitle = (titleValue: string | keyof T) =>
     columns.find(el => el.title === titleValue)?.field;
 
-  const onChangeFilters = (selectedFilters: any) => {
-    if (Object.values(selectedFilters).length) {
+    
+    const onChangeFilters = (selectedFilters: any) => {
+    const selectedFiltersArray = Object.values(selectedFilters);
+    if (selectedFiltersArray.flat().length) {
       const newData = (props.data as any[]).filter(
         el =>
           !!Object.entries(selectedFilters).find(
-            ([key, value]) => el[getFieldByTitle(key)] === value,
+            ([key, value]) => {
+              if (Array.isArray(value)) {
+                return value.includes(el[getFieldByTitle(key)])
+              }
+              return el[getFieldByTitle(key)] === value
+            },
           ),
       );
       setTableData(newData);
+      setSelectedFiltersLength(selectedFiltersArray.flat().length)
+    } else {
+      setTableData(props.data as any[]);
     }
   };
 
@@ -273,7 +283,7 @@ export function Table<T extends object = {}>({
                   >
                     <FilterList />
                   </IconButton>
-                  <Typography variant="h6">Filters</Typography>
+            <Typography variant="h6">Filters ({ selectedFiltersLength })</Typography>
                 </div>
                 <MTableToolbar classes={toolbarClasses} {...toolbarProps} />
               </div>