rez-table-listing-mui 1.3.41 → 1.3.43

package/src/listing/components/filter/components/saved-filter.tsx

@@ -5,11 +5,7 @@ import {
   FilterOperationListProps,
 } from "../../../types/filter";
 import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
   Box,
-  Divider,
   IconButton,
   List,
   ListItem,
@@ -19,8 +15,8 @@ import {
 import CustomSearch from "./search";
 import { DeleteIcon, EditIcon } from "../../../../assets/svg";
 import SavedFilterEditComponent from "./saved-edit-filter";
+import { filterStyles } from "../style";
 import { CheckBox } from "../../../../assets/svg";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 const SavedFilter = ({
   columnsData,
@@ -29,77 +25,31 @@ const SavedFilter = ({
   editMode,
   setEditMode,
   setDeleteFilterModalOpen,
-  onSaveFilterButtonClick,
+  setSavedFilterModalOpen,
   tabValue,
   onChangeFunction,
   filterComponentOptions,
 }: FilterFormComponentProps) => {
   const { filters, filterMaster, setFilterMaster, setFilterToDelete } =
     tableStates;
-
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const MyFilter = (f: any): FilterOperationListProps => {
-    return {
-      label: f.name || f.label || "Unnamed Filter",
-      value: f.id || f.value,
-      code: f.code ?? "",
-      is_shared: false,
-      created_by: f.created_by || "",
-      description: f.description || "",
-      is_owner: true, // My filter = always owner
-      is_editable: f.is_editable === true || f.is_editable === "true",
-    };
-  };
-
-  const SharedFilter = (f: any): FilterOperationListProps => {
-    const prefs =
-      f.sharedPreferences || f.preferences || f.meta || f.shared_meta || {};
-
-    return {
-      label: f.name || f.label || "Unnamed Filter",
-      value: f.id || f.value,
-      code: f.code ?? "",
-      is_shared: f.is_shared ?? prefs.is_shared ?? true,
-      created_by: f.created_by || "shared_filter",
-      description: f.description || "",
-      is_owner: f.is_owner === true || prefs.is_owner === "true",
-      is_editable:
-        f.is_editable === true ||
-        f.is_editable === "true" ||
-        prefs.is_editable === true ||
-        prefs.is_editable === "true",
-    };
-  };
-
-  //  SEPARATE DATA MAPPINGS
-
-  const myFilters: FilterOperationListProps[] =
-    columnsData?.saved_filter?.map(MyFilter) ?? [];
-
-  const sharedFilters: FilterOperationListProps[] =
-    columnsData?.shared_filter?.map(SharedFilter) ?? [];
-
-  // Reset on unmount
+  // reset savedFilterEditValue when component unmounts
   useEffect(() => {
     return () => {
-      const editModeFromTab =
+      const editModeFromTabOptions =
         filterComponentOptions?.tabOptions?.savedFilter?.editMode;
-
-      if (!editModeFromTab) {
+      if (!editModeFromTabOptions) {
         setEditMode && setEditMode(false);
         setFilterMaster(
           (prev) =>
             ({
               ...prev,
               saved_filters: {
-                ...(prev?.saved_filters ?? {}),
+                ...prev?.attributes,
                 selectedId: "",
                 selectedName: "",
-                description: "",
                 selectedCode: "",
-                shareWithTeam: undefined,
-                allowTeamEdit: undefined,
               },
             } as FilterMasterStateProps)
         );
@@ -107,20 +57,14 @@ const SavedFilter = ({
     };
   }, []);
 
-  // APPLY FILTER
-
-  const applyFilterStates = (filter: FilterOperationListProps) => {
-    const newFilterMaster = {
+  const handleListItemClick = (filter: FilterOperationListProps) => {
+    const newFilterMasterState = {
       ...filterMaster,
       saved_filters: {
-        ...(filterMaster?.saved_filters ?? {}),
-        selectedId: filter.value,
-        selectedName: filter.label,
-        description: filter.description,
-        selectedCode: filter.code,
-        shareWithTeam: filter.is_shared,
-        allowTeamEdit: filter.is_editable,
-        is_owner: filter.is_owner,
+        ...filterMaster?.attributes,
+        selectedId: filter?.value,
+        selectedName: filter?.label,
+        selectedCode: filter?.code,
       },
       attributes: {
         ...filterMaster?.attributes,
@@ -129,161 +73,125 @@ const SavedFilter = ({
       activeFilterTabIndex: tabValue,
     } as FilterMasterStateProps;
 
-    setFilterMaster(newFilterMaster);
+    setFilterMaster(newFilterMasterState);
 
-    onChangeFunction &&
-      onChangeFunction({
-        filterMaster: newFilterMaster,
-        filters,
-      });
-  };
+    const newState = {
+      filterMaster: newFilterMasterState,
+      filters: filters,
+    };
 
-  const handleListItemClick = (filter: FilterOperationListProps) => {
-    applyFilterStates(filter);
+    onChangeFunction && onChangeFunction(newState);
+
+    // setEditfilter state on edit icon click
     setEditMode && setEditMode(true);
     setFilterToDelete(filter);
   };
 
-  const handleApplyFilter = (filter: FilterOperationListProps) => {
-    applyFilterStates(filter);
-  };
-
-  const [openAccordion, setOpenAccordion] = useState<"my" | "shared" | null>(
-    "my"
-  );
-
-  const toggleAccodion = (accordion: "my" | "shared" | null) => {
-    setOpenAccordion((prev) => (prev === accordion ? null : accordion));
-  };
+  const handleAppyFilter = (filter: FilterOperationListProps) => {
+    const newFilterMasterState = {
+      ...filterMaster,
+      saved_filters: {
+        ...filterMaster?.attributes,
+        selectedId: filter?.value,
+        selectedName: filter?.label,
+        selectedCode: filter?.code,
+      },
+      attributes: {
+        ...filterMaster?.attributes,
+        radio: [],
+      },
+      activeFilterTabIndex: tabValue,
+    } as FilterMasterStateProps;
 
-  //  RENDER: MY FILTERS
+    setFilterMaster(newFilterMasterState);
 
-  const renderMyFilters = (source: FilterOperationListProps[]) =>
-    source.length === 0 ? (
-      <Typography>No My Filters</Typography>
-    ) : (
-      <List sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-        {source
-          .filter((f) =>
-            f.label?.toLowerCase().includes(searchTerm.toLowerCase())
-          )
-          .map((filter) => (
-            <ListItem
-              key={filter.value}
-              sx={{
-                cursor: "pointer",
-                borderRadius: "8px",
-                bgcolor: "#f2f6f8ff",
-                display: "flex",
-                justifyContent: "space-between",
-                gap: 1,
-                alignItems: "center",
-                "&:hover .action-icons": {
-                  opacity: 1,
-                  visibility: "visible",
-                },
-              }}
-              onClick={() => handleApplyFilter(filter)}
-            >
-              {filter.value === filterMaster?.saved_filters?.selectedId && (
-                <Box sx={{ display: "flex", alignItems: "center" }}>
-                  <CheckBox />
-                </Box>
-              )}
+    const newState = {
+      filterMaster: newFilterMasterState,
+      filters: filters,
+    };
 
-              <ListItemText primary={filter.label} />
+    onChangeFunction && onChangeFunction(newState);
+  };
 
-              <Box
-                onClick={(e) => e.stopPropagation()}
-                className="action-icons"
+  const renderList = () => (
+    <>
+      <CustomSearch
+        value={searchTerm}
+        onChange={setSearchTerm}
+        className="search-input"
+      />
+
+      {columnsData?.saved_filter?.length === 0 ? (
+        <Typography sx={{ mt: 2 }}>No saved filters yet.</Typography>
+      ) : (
+        <List
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+            mt: 2,
+          }}
+        >
+          {columnsData?.saved_filter
+            ?.filter((filter) =>
+              filter.label?.toLowerCase().includes(searchTerm.toLowerCase())
+            )
+            ?.map((filter) => (
+              <ListItem
+                key={filter?.value}
                 sx={{
+                  cursor: "pointer",
+                  border:
+                    filter?.value ===
+                    tableStates?.filterMaster?.saved_filters?.selectedId
+                      ? `3px solid #7a5af8`
+                      : "1px solid #C5C5C5",
+                  borderRadius: "8px",
                   display: "flex",
+                  justifyContent: "space-between",
                   gap: 1,
-                  opacity: 0,
-                  visibility: "hidden",
-                  transition: "opacity 0.2s ease, visibility 0.2s ease",
+                  alignItems: "center",
+                  "&:hover .action-icons": {
+                    opacity: 1,
+                    visibility: "visible",
+                  },
                 }}
+                onClick={() => handleAppyFilter(filter)}
               >
-                <IconButton
-                  size="large"
-                  onClick={() => handleListItemClick(filter)}
-                >
-                  <EditIcon />
-                </IconButton>
-
-                <IconButton
-                  size="small"
-                  onClick={() => {
-                    setFilterToDelete(filter);
-                    setDeleteFilterModalOpen?.(true);
+                {filter?.value ===
+                  tableStates?.filterMaster?.saved_filters?.selectedId && (
+                  <Box
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      cursor: "pointer",
+                      color: "green",
+                      rounded: "full",
+                    }}
+                  >
+                    <CheckBox />
+                  </Box>
+                )}
+                <ListItemText primary={filter?.label} />
+
+                <Box
+                  onClick={(e) => e.stopPropagation()}
+                  className="action-icons"
+                  sx={{
+                    display: "flex",
+                    gap: 1,
+                    opacity: 0,
+                    visibility: "hidden",
+                    transition: "opacity 0.2s ease, visibility 0.2s ease",
                   }}
                 >
-                  <DeleteIcon />
-                </IconButton>
-              </Box>
-            </ListItem>
-          ))}
-      </List>
-    );
-
-  // ----------------------------------------
-  //  RENDER: SHARED FILTERS
-  // ----------------------------------------
-  const renderSharedFilters = (source: FilterOperationListProps[]) =>
-    source.length === 0 ? (
-      <Typography>No Shared Filters</Typography>
-    ) : (
-      <List sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-        {source
-          .filter((f) =>
-            f.label?.toLowerCase().includes(searchTerm.toLowerCase())
-          )
-          .map((filter) => (
-            <ListItem
-              key={filter.value}
-              sx={{
-                cursor: "pointer",
-                borderRadius: "8px",
-                bgcolor: "#f2f6f8ff",
-                display: "flex",
-                justifyContent: "space-between",
-                gap: 1,
-                alignItems: "center",
-                "&:hover .action-icons": {
-                  opacity: 1,
-                  visibility: "visible",
-                },
-              }}
-              onClick={() => handleApplyFilter(filter)}
-            >
-              {filter.value === filterMaster?.saved_filters?.selectedId && (
-                <Box sx={{ display: "flex", alignItems: "center" }}>
-                  <CheckBox />
-                </Box>
-              )}
-
-              <ListItemText primary={filter.label} />
-
-              <Box
-                onClick={(e) => e.stopPropagation()}
-                className="action-icons"
-                sx={{
-                  display: "flex",
-                  gap: 1,
-                  opacity: 0,
-                  visibility: "hidden",
-                  transition: "opacity 0.2s ease, visibility 0.2s ease",
-                }}
-              >
-                {(filter.is_editable || filter.is_owner) && (
                   <IconButton
                     size="large"
                     onClick={() => handleListItemClick(filter)}
                   >
                     <EditIcon />
                   </IconButton>
-                )}
-                {filter.is_owner && (
+
                   <IconButton
                     size="small"
                     onClick={() => {
@@ -293,108 +201,24 @@ const SavedFilter = ({
                   >
                     <DeleteIcon />
                   </IconButton>
-                )}
-              </Box>
-            </ListItem>
-          ))}
-      </List>
-    );
-
-  // ----------------------------------------
-  //  RENDER MAIN COMPONENT
-  // ----------------------------------------
-  return (
-    <Box className="saved-filter-component-wrapper">
-      {!editMode && (
-        <>
-          {/* Search */}
-          <Box sx={{ mb: 2 }}>
-            <CustomSearch
-              value={searchTerm}
-              onChange={setSearchTerm}
-              className="search-input"
-            />
-          </Box>
+                </Box>
+              </ListItem>
+            ))}
+        </List>
+      )}
+    </>
+  );
 
-          {/* ---- My Filters ---- */}
-          <Box
-            sx={{
-              background: "#fff",
-              borderRadius: "12px",
-              border: "1px solid #eee",
-              mb: 2,
-              overflow: "hidden",
-            }}
-          >
-            <Accordion
-              disableGutters
-              elevation={0}
-              expanded={openAccordion === "my"}
-              onChange={() =>
-                // setOpenAccordion(openAccordion === "my" ? "shared" : "my")
-                toggleAccodion("my")
-              }
-            >
-              <AccordionSummary
-                expandIcon={<ExpandMoreIcon fontSize="small" />}
-              >
-                <Typography fontWeight={600}>My Filters</Typography>
-              </AccordionSummary>
-              <Divider sx={{ width: "100%" }} />
-              <AccordionDetails
-                sx={{
-                  p: "9px",
-                  maxHeight: "230px",
-                  overflowY: "auto",
-                  scrollbarWidth: "thin",
-                }}
-              >
-                {renderMyFilters(myFilters)}
-              </AccordionDetails>
-            </Accordion>
-          </Box>
+  const mainBoxStyles = {
+    ...filterStyles.filterMainComponentWrapper,
+    ...filterStyles.scrollbarCustom,
+  };
 
-          {/* ---- Shared Filters ---- */}
-          <Box
-            sx={{
-              background: "#fff",
-              borderRadius: "12px",
-              border: "1px solid #eee",
-              mb: 2,
-              overflow: "hidden",
-            }}
-          >
-            <Accordion
-              disableGutters
-              elevation={0}
-              expanded={openAccordion === "shared"}
-              onChange={() =>
-                // setOpenAccordion(openAccordion === "shared" ? "my" : "shared")
-                toggleAccodion("shared")
-              }
-            >
-              <AccordionSummary
-                expandIcon={<ExpandMoreIcon fontSize="small" />}
-              >
-                <Typography fontWeight={600}>Shared Filters</Typography>
-              </AccordionSummary>
-              <Divider sx={{ width: "100%" }} />
-              <AccordionDetails
-                sx={{
-                  p: "9px",
-                  maxHeight: "230px",
-                  overflowY: "auto",
-                  scrollbarWidth: "thin",
-                }}
-              >
-                {renderSharedFilters(sharedFilters)}
-              </AccordionDetails>
-            </Accordion>
-          </Box>
-        </>
-      )}
+  return (
+    <Box sx={mainBoxStyles} className="saved-filter-component-wrapper">
+      {/* Render search input and list */}
+      {!editMode && renderList()}
 
-      {/* Edit Component */}
       {editMode && (
         <SavedFilterEditComponent
           columnsData={columnsData}
@@ -404,7 +228,7 @@ const SavedFilter = ({
           setEditMode={setEditMode}
           searchTerm={searchTerm}
           setSearchTerm={setSearchTerm}
-          onSaveFilterButtonClick={onSaveFilterButtonClick}
+          setSavedFilterModalOpen={setSavedFilterModalOpen}
           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
           onChangeFunction={onChangeFunction}
           filterComponentOptions={filterComponentOptions}

package/src/listing/components/filter/components/search/index.tsx

@@ -51,7 +51,6 @@ const CustomSearch = ({
               edge="end"
               onClick={handleClear}
               sx={{ color: "#888888", fontSize: "20px" }}
-              className="cross-icon"
             >
               <CloseIcon />
             </IconButton>

package/src/listing/components/filter/components/single-filter-rendering.tsx

@@ -13,7 +13,7 @@ const SingleFilterRendering = ({
   columnsData,
   dropdownData,
   tableStates,
-  onSaveFilterButtonClick,
+  setSavedFilterModalOpen,
   onChangeFunction,
   filterComponentOptions,
   editMode,
@@ -50,7 +50,7 @@ const SingleFilterRendering = ({
       {showFilter === "main" && (
         <MainFilter
           {...commonProps}
-          onSaveFilterButtonClick={onSaveFilterButtonClick}
+          setSavedFilterModalOpen={setSavedFilterModalOpen}
           filterComponentOptions={filterComponentOptions}
         />
       )}
@@ -59,7 +59,7 @@ const SingleFilterRendering = ({
         <SavedFilter
           {...commonProps}
           {...editProps}
-          onSaveFilterButtonClick={onSaveFilterButtonClick}
+          setSavedFilterModalOpen={setSavedFilterModalOpen}
           filterComponentOptions={filterComponentOptions}
         />
       )}