rez-table-listing-mui 1.0.32 → 1.0.34

package/src/components/filter/components/tabs/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Tabs, Tab, TabsProps, Box } from "@mui/material";
 import { CheckBox, CrossBox } from "../../../../assets/svg";
 
@@ -9,21 +9,19 @@ export interface TabItem {
 interface StyledTabsProps extends TabsProps {
   tabItems: TabItem[];
   activeFilterIndex: number;
+  handleCrossClick: (index: number) => void;
 }
 
 const CustomTabs = ({
-  value,
-  onChange,
   tabItems,
   activeFilterIndex = -1,
+  handleCrossClick,
+  value,
+  onChange,
   ...tabsProps
 }: StyledTabsProps) => {
   const [hoveredTab, setHoveredTab] = useState<number | null>(null);
 
-  const handleCrossClick = (idx: number) => (e: React.MouseEvent) => {
-    e.stopPropagation();
-  };
-
   return (
     <Tabs
       value={value}
@@ -57,7 +55,9 @@ const CustomTabs = ({
                       alignItems: "center",
                       cursor: isHovered ? "pointer" : "default",
                     }}
-                    onClick={isHovered ? handleCrossClick(idx) : undefined}
+                    onClick={
+                      isHovered ? () => handleCrossClick(idx) : undefined
+                    }
                   >
                     {isHovered ? <CrossBox /> : <CheckBox />}
                   </Box>

package/src/components/filter/index.tsx

@@ -1,7 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { Box, Drawer, IconButton, Typography } from "@mui/material";
+import { Box, IconButton, Typography } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import { FilterDrawerProps, UpdatedFilterStateProps } from "../../types/filter";
+import {
+  FilterDrawerProps,
+  FilterMasterStateProps,
+  UpdatedFilterStateProps,
+} from "../../types/filter";
 
 import ConfirmModal, { InputField } from "../common/confirm-modal";
 import CustomTabPanel from "./components/tabs/custom-tab-panel";
@@ -9,9 +13,9 @@ import CustomTabs, { TabItem } from "./components/tabs/index";
 import MainFilter from "./components/main-filter";
 import SavedFilter from "./components/saved-filter";
 import AttributesFilter from "./components/attributes-filter";
+import { filterStyles } from "./style";
 
-const FilterDrawer = ({
-  open,
+export function TableFilter({
   onClose,
   columnsData,
   tableStates,
@@ -19,7 +23,7 @@ const FilterDrawer = ({
   onSaveFilter,
   onUpdateFilter,
   dropdownData,
-}: FilterDrawerProps) => {
+}: FilterDrawerProps) {
   const [tabValue, setTabValue] = useState(0);
   const [editMode, setEditMode] = useState(false);
   const [selectedFilters, setSelectedFilters] = useState<
@@ -32,7 +36,8 @@ const FilterDrawer = ({
 
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const { filters, filterToDelete, filterMaster } = tableStates;
+  const { filters, setFilters, filterToDelete, filterMaster, setFilterMaster } =
+    tableStates;
 
   const filterNameInput: InputField = {
     label: "Filter Name",
@@ -47,7 +52,10 @@ const FilterDrawer = ({
       return;
     }
 
+    console.log("main useEffect triggered");
+
     const updated = filters?.map((filter) => {
+      console.log("inside map");
       const matchingColumn = columnsData.column_list.find(
         (column) => column.attribute_key === filter.filter_attribute
       );
@@ -66,7 +74,7 @@ const FilterDrawer = ({
     setSelectedFilters(updated || []);
   }, [filters, columnsData, tabValue]);
 
-  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
     setTabValue(newValue);
     if (newValue !== 1) {
       setEditMode(false);
@@ -81,185 +89,192 @@ const FilterDrawer = ({
     { label: "Attributes" },
   ];
 
+  const handleTabCrossClick = (index: number) => {
+    const commonStateReset = () => {
+      setFilters([]);
+      setSelectedFilters([]);
+      setFilterMaster(
+        (prev) =>
+          ({ ...prev, activeFilterTabIndex: -1 } as FilterMasterStateProps)
+      );
+    };
+
+    const indexMapper: { [key: number]: () => void } = {
+      0: () => commonStateReset(),
+      1: () => {
+        commonStateReset();
+        setEditMode(false);
+        setFilterMaster(
+          (prev) =>
+            ({
+              ...prev,
+              saved_filters: { selectedId: "", selectedName: "" },
+            } as FilterMasterStateProps)
+        );
+      },
+      2: () => {
+        commonStateReset();
+        setFilterMaster(
+          (prev) =>
+            ({
+              ...prev,
+              attributes: {
+                radio: "",
+                selected: "",
+              },
+            } as FilterMasterStateProps)
+        );
+      },
+    };
+
+    indexMapper[index] && indexMapper[index]();
+  };
+
   return (
-    <Drawer
-      anchor="right"
-      open={open}
-      onClose={onClose}
-      ModalProps={{
-        keepMounted: true,
-      }}
-      sx={{
-        "& .MuiPaper-root": {
-          overflowY: "auto",
-        },
-      }}
-    >
-      <Box sx={{ width: "400px" }}>
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            bgcolor: "#EEEEEE",
-            height: "50px",
-            px: 2,
-            borderBottom: "1px solid #ccc",
-            mx: "auto",
+    <Box sx={filterStyles.filterContainer}>
+      <Box sx={filterStyles.filterMainHeader}>
+        <Typography variant="h6" fontWeight="bold" fontSize="18px">
+          Filter
+        </Typography>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose && onClose();
           }}
+          aria-label="close"
         >
-          <Typography variant="h6" fontWeight="bold" fontSize="18px">
-            Filter
-          </Typography>
-          <IconButton
-            onClick={(e) => {
-              e.stopPropagation();
-              onClose && onClose();
-            }}
-            aria-label="close"
-          >
-            <CloseIcon fontSize="small" />
-          </IconButton>
-        </Box>
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </Box>
 
-        <CustomTabs
-          value={tabValue}
-          onChange={handleTabChange}
-          tabItems={tabItems}
-          activeFilterIndex={filterMaster?.activeFilterTabIndex ?? 0}
-        />
+      <CustomTabs
+        value={tabValue}
+        onChange={handleTabChange}
+        tabItems={tabItems}
+        activeFilterIndex={filterMaster?.activeFilterTabIndex ?? 0}
+        handleCrossClick={handleTabCrossClick}
+      />
 
-        <Box>
-          <CustomTabPanel value={tabValue} index={0}>
-            {tabValue === 0 && (
-              <MainFilter
-                columnsData={columnsData}
-                tableStates={tableStates}
-                selectedFilters={selectedFilters}
-                setSelectedFilters={setSelectedFilters}
-                setSavedFilterModalOpen={setSaveFilterModalOpen}
-                dropdownData={dropdownData}
-              />
-            )}
-          </CustomTabPanel>
+      <CustomTabPanel value={tabValue} index={0} sx={{ p: "1.5rem 0.75rem" }}>
+        <MainFilter
+          columnsData={columnsData}
+          tableStates={tableStates}
+          selectedFilters={selectedFilters}
+          setSelectedFilters={setSelectedFilters}
+          setSavedFilterModalOpen={setSaveFilterModalOpen}
+          dropdownData={dropdownData}
+        />
+      </CustomTabPanel>
 
-          <CustomTabPanel value={tabValue} index={1}>
-            {tabValue === 1 && (
-              <SavedFilter
-                columnsData={columnsData}
-                tableStates={tableStates}
-                selectedFilters={selectedFilters}
-                setSelectedFilters={setSelectedFilters}
-                editMode={editMode}
-                setEditMode={setEditMode}
-                setDeleteFilterModalOpen={setDeleteFilterModalOpen}
-                setSavedFilterModalOpen={setSaveFilterModalOpen}
-                dropdownData={dropdownData}
-                tabValue={tabValue}
-              />
-            )}
-          </CustomTabPanel>
+      <CustomTabPanel value={tabValue} index={1} sx={{ p: "1.5rem 0.75rem" }}>
+        <SavedFilter
+          columnsData={columnsData}
+          tableStates={tableStates}
+          selectedFilters={selectedFilters}
+          setSelectedFilters={setSelectedFilters}
+          editMode={editMode}
+          setEditMode={setEditMode}
+          setDeleteFilterModalOpen={setDeleteFilterModalOpen}
+          setSavedFilterModalOpen={setSaveFilterModalOpen}
+          dropdownData={dropdownData}
+          tabValue={tabValue}
+        />
+      </CustomTabPanel>
 
-          <CustomTabPanel value={tabValue} index={2}>
-            {tabValue === 2 && (
-              <AttributesFilter
-                columnsData={columnsData}
-                tableStates={tableStates}
-                dropdownData={dropdownData}
-                searchTerm={searchTerm}
-                setSearchTerm={setSearchTerm}
-                tabValue={tabValue}
-              />
-            )}
-          </CustomTabPanel>
-        </Box>
+      <CustomTabPanel value={tabValue} index={2} sx={{ p: "1.5rem 0.75rem" }}>
+        <AttributesFilter
+          columnsData={columnsData}
+          tableStates={tableStates}
+          dropdownData={dropdownData}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
+          tabValue={tabValue}
+        />
+      </CustomTabPanel>
 
-        <ConfirmModal
-          open={saveFilterModalOpen}
-          onClose={() => setSaveFilterModalOpen(false)}
-          title={editMode ? "Replace Existing Filter ?" : "Save Filter"}
-          description={
-            editMode
-              ? "You already have a filter applied. Applying a new filter will replace the current one. Do you want to continue?"
-              : "Give a name to this filter so you can easily reuse it later."
-          }
-          buttons={[
-            {
-              label: "Cancel",
-              onClick: () => {
-                setSaveFilterModalOpen(false);
-              },
-              variant: "outlined",
-              color: "primary",
-              sx: {
-                color: "#7A5AF8",
-                border: `1px solid #7A5AF8`,
-              },
+      <ConfirmModal
+        open={saveFilterModalOpen}
+        onClose={() => setSaveFilterModalOpen(false)}
+        title={editMode ? "Replace Existing Filter ?" : "Save Filter"}
+        description={
+          editMode
+            ? "You already have a filter applied. Applying a new filter will replace the current one. Do you want to continue?"
+            : "Give a name to this filter so you can easily reuse it later."
+        }
+        buttons={[
+          {
+            label: "Cancel",
+            onClick: () => {
+              setSaveFilterModalOpen(false);
             },
-            {
-              label: editMode ? "Replace Filter" : "Save",
-              onClick: (inputValue) => {
-                if (editMode) {
-                  onUpdateFilter && onUpdateFilter(inputValue || "");
-                  setSaveFilterModalOpen(false);
-                  setEditMode(false);
-                  return;
-                }
-
-                onSaveFilter && onSaveFilter(inputValue || "");
+            variant: "outlined",
+            color: "primary",
+            sx: {
+              color: "#7A5AF8",
+              border: `1px solid #7A5AF8`,
+            },
+          },
+          {
+            label: editMode ? "Replace Filter" : "Save",
+            onClick: (inputValue) => {
+              if (editMode) {
+                onUpdateFilter && onUpdateFilter(inputValue || "");
                 setSaveFilterModalOpen(false);
+                setEditMode(false);
+                return;
+              }
 
-                setTabValue(1);
-              },
-              variant: "contained",
-              color: "primary",
-              sx: {
-                color: "white",
-                backgroundColor: editMode ? "#7A5AF8" : "#7A5AF8",
-              },
+              onSaveFilter && onSaveFilter(inputValue || "");
+              setSaveFilterModalOpen(false);
+
+              setTabValue(1);
             },
-          ]}
-          input={editMode ? undefined : filterNameInput}
-        />
+            variant: "contained",
+            color: "primary",
+            sx: {
+              color: "white",
+              backgroundColor: editMode ? "#7A5AF8" : "#7A5AF8",
+            },
+          },
+        ]}
+        input={editMode ? undefined : filterNameInput}
+      />
 
-        <ConfirmModal
-          open={deleteFilterModalOpen}
-          onClose={() => setDeleteFilterModalOpen(false)}
-          title="Delete Saved Filter?"
-          description={`You're about to delete the saved filter: "${
-            filterToDelete?.label || "[Filter Name]"
-          }". This action cannot be undone. Are you sure you want to continue?`}
-          buttons={[
-            {
-              label: "Cancel",
-              onClick: () => {
-                setDeleteFilterModalOpen(false);
-              },
-              variant: "outlined",
-              color: "primary",
-              sx: { color: "#7A5AF8", border: `1px solid #7A5AF8` },
+      <ConfirmModal
+        open={deleteFilterModalOpen}
+        onClose={() => setDeleteFilterModalOpen(false)}
+        title="Delete Saved Filter?"
+        description={`You're about to delete the saved filter: "${
+          filterToDelete?.label || "[Filter Name]"
+        }". This action cannot be undone. Are you sure you want to continue?`}
+        buttons={[
+          {
+            label: "Cancel",
+            onClick: () => {
+              setDeleteFilterModalOpen(false);
             },
-            {
-              label: "Delete",
+            variant: "outlined",
+            color: "primary",
+            sx: { color: "#7A5AF8", border: `1px solid #7A5AF8` },
+          },
+          {
+            label: "Delete",
 
-              onClick: () => {
-                onDeleteFilter && onDeleteFilter();
-                setDeleteFilterModalOpen(false);
-                setEditMode && setEditMode(false);
-              },
-              variant: "contained",
-              sx: {
-                color: "white",
-                backgroundColor: "#f63d68",
-                "&:hover": { backgroundColor: "#f63d68" },
-              },
+            onClick: () => {
+              onDeleteFilter && onDeleteFilter();
+              setDeleteFilterModalOpen(false);
+              setEditMode && setEditMode(false);
             },
-          ]}
-          maxWidth="xs"
-        />
-      </Box>
-    </Drawer>
+            variant: "contained",
+            sx: {
+              color: "white",
+              backgroundColor: "#f63d68",
+              "&:hover": { backgroundColor: "#f63d68" },
+            },
+          },
+        ]}
+        maxWidth="xs"
+      />
+    </Box>
   );
-};
-
-export default FilterDrawer;
+}

package/src/components/filter/style.ts

@@ -0,0 +1,106 @@
+import { SxProps, Theme } from "@mui/material";
+
+interface StyleProps {
+  filterContainer: SxProps<Theme>;
+  filterMainHeader: SxProps<Theme>;
+  filterMainComponentWrapper: SxProps<Theme>;
+  filterAttributeMainSelect: SxProps<Theme>;
+}
+
+interface filterFormStyleType {
+  formEditModeStyle: SxProps<Theme>;
+  formFlexContainer: SxProps<Theme>;
+  formListItem: SxProps<Theme>;
+  formListItemHeader: SxProps<Theme>;
+  formListItemHeaderName: SxProps<Theme>;
+  formListItemHeaderDropdown: SxProps<Theme>;
+}
+
+export const filterStyles: StyleProps = {
+  filterContainer: {
+    height: "100%",
+    overflowY: "hidden",
+    boxShadow: "0px 3px 8px 0px rgba(34, 48, 62, 0.10)",
+    borderRadius: "0.5rem",
+  },
+
+  filterMainHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    bgcolor: "#EEEEEE",
+    height: "50px",
+    px: 2,
+    borderBottom: "1px solid #ccc",
+    mx: "auto",
+  },
+
+  filterMainComponentWrapper: {
+    height: "calc(100% - 90px)",
+    overflowY: "auto",
+  },
+
+  filterAttributeMainSelect: {
+    "& .MuiOutlinedInput-root": {
+      borderRadius: "6px",
+      fontSize: "14px",
+      bgcolor: "#fafafa",
+      "& fieldset": {
+        borderColor: "#7a5af8 !important",
+      },
+      "&:hover fieldset": {
+        borderColor: "#7a5af8 !important",
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: "#7a5af8 !important",
+        boxShadow: "none",
+      },
+    },
+    "& .MuiSelect-select": {
+      padding: "8px 14px",
+    },
+  },
+};
+
+export const filterFormStyles: filterFormStyleType = {
+  formEditModeStyle: {
+    border: "1px solid #c5c5c5",
+    borderRadius: "6px",
+    padding: "5px 10px 10px 10px",
+  },
+
+  formFlexContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1.25rem",
+  },
+
+  formListItem: {
+    p: 1,
+    borderRadius: 2,
+    backgroundColor: "#FAFAFA",
+    display: "flex",
+    flexDirection: "column",
+    gap: 0.5,
+  },
+
+  formListItemHeader: {
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    gap: 2,
+  },
+
+  formListItemHeaderName: {
+    fontWeight: 500,
+    fontSize: "13px",
+    color: "#797877",
+  },
+
+  formListItemHeaderDropdown: {
+    fontSize: "13px",
+    minWidth: 50,
+    border: "none",
+    boxShadow: "none",
+  },
+};