rez-table-listing-mui 1.3.30 → 1.3.32

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

@@ -5,7 +5,11 @@ import {
   FilterOperationListProps,
 } from "../../../types/filter";
 import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
   Box,
+  Divider,
   IconButton,
   List,
   ListItem,
@@ -15,8 +19,9 @@ import {
 import CustomSearch from "./search";
 import { DeleteIcon, EditIcon } from "../../../../assets/svg";
 import SavedFilterEditComponent from "./saved-edit-filter";
-import { filterStyles } from "../style";
+// import { filterStyles } from "../style";
 import { CheckBox } from "../../../../assets/svg";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 const SavedFilter = ({
   columnsData,
@@ -25,31 +30,60 @@ const SavedFilter = ({
   editMode,
   setEditMode,
   setDeleteFilterModalOpen,
-  setSavedFilterModalOpen,
+  onSaveFilterButtonClick,
   tabValue,
   onChangeFunction,
   filterComponentOptions,
 }: FilterFormComponentProps) => {
   const { filters, filterMaster, setFilterMaster, setFilterToDelete } =
     tableStates;
+
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  // reset savedFilterEditValue when component unmounts
+  const normalizeFilter = (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 ?? false,
+
+      // 🔥 STRING ko BOOLEAN banaya
+      is_editable:
+        f.is_editable === true ||
+        f.is_editable === "true" ||
+        prefs.is_editable === true ||
+        prefs.is_editable === "true",
+    };
+  };
+
+  const mappedSavedFilter: FilterOperationListProps[] =
+    columnsData?.saved_filter?.map(normalizeFilter) ?? [];
+
+  const mappedSharedFilter: FilterOperationListProps[] =
+    columnsData?.shared_filter?.map(normalizeFilter) ?? [];
+
+  // Reset on unmount
   useEffect(() => {
     return () => {
-      const editModeFromTabOptions =
+      const editModeFromTab =
         filterComponentOptions?.tabOptions?.savedFilter?.editMode;
-      if (!editModeFromTabOptions) {
+
+      if (!editModeFromTab) {
         setEditMode && setEditMode(false);
         setFilterMaster(
           (prev) =>
             ({
               ...prev,
               saved_filters: {
-                ...prev?.attributes,
+                ...(prev?.saved_filters ?? {}),
                 selectedId: "",
                 selectedName: "",
                 selectedCode: "",
+                shareWithTeam: undefined,
+                allowTeamEdit: undefined,
               },
             } as FilterMasterStateProps)
         );
@@ -57,14 +91,16 @@ const SavedFilter = ({
     };
   }, []);
 
-  const handleListItemClick = (filter: FilterOperationListProps) => {
-    const newFilterMasterState = {
+  const applyFilterStates = (filter: FilterOperationListProps) => {
+    const newFilterMaster = {
       ...filterMaster,
       saved_filters: {
-        ...filterMaster?.attributes,
-        selectedId: filter?.value,
-        selectedName: filter?.label,
-        selectedCode: filter?.code,
+        ...(filterMaster?.saved_filters ?? {}),
+        selectedId: filter.value,
+        selectedName: filter.label,
+        selectedCode: filter.code,
+        shareWithTeam: filter.is_shared,
+        allowTeamEdit: filter.is_editable,
       },
       attributes: {
         ...filterMaster?.attributes,
@@ -73,125 +109,109 @@ const SavedFilter = ({
       activeFilterTabIndex: tabValue,
     } as FilterMasterStateProps;
 
-    setFilterMaster(newFilterMasterState);
-
-    const newState = {
-      filterMaster: newFilterMasterState,
-      filters: filters,
-    };
+    setFilterMaster(newFilterMaster);
 
-    onChangeFunction && onChangeFunction(newState);
+    onChangeFunction &&
+      onChangeFunction({
+        filterMaster: newFilterMaster,
+        filters,
+      });
+  };
 
-    // setEditfilter state on edit icon click
+  const handleListItemClick = (filter: FilterOperationListProps) => {
+    applyFilterStates(filter);
     setEditMode && setEditMode(true);
     setFilterToDelete(filter);
   };
 
-  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;
-
-    setFilterMaster(newFilterMasterState);
+  const handleApplyFilter = (filter: FilterOperationListProps) => {
+    applyFilterStates(filter);
+  };
 
-    const newState = {
-      filterMaster: newFilterMasterState,
-      filters: filters,
-    };
+  /**
+   * renderList
+   * @param source - list to render
+   * @param isSharedList - true when rendering Shared Filters (default false)
+   *
+   * Behavior:
+   * - If isSharedList === true -> show Edit icon ONLY when filter.is_editable === true
+   * - If isSharedList === false -> show Edit icon always (or as per filter.is_editable if you prefer)
+   */
+  const renderList = (
+    source: FilterOperationListProps[],
+    isSharedList: boolean = false,
+    { emptyMessage = "No saved filters yet." } = {}
+  ) =>
+    source.length === 0 ? (
+      <Typography>{emptyMessage}</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",
+                // border:
+                //   filter.value ===
+                //   tableStates?.filterMaster?.saved_filters?.selectedId
+                //     ? `3px solid #7a5af8`
+                //     : "1px solid #C5C5C5",
+                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 ===
+                tableStates?.filterMaster?.saved_filters?.selectedId && (
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <CheckBox />
+                </Box>
+              )}
 
-    onChangeFunction && onChangeFunction(newState);
-  };
+              <ListItemText primary={filter.label} />
 
-  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}
+              <Box
+                onClick={(e) => e.stopPropagation()}
+                className="action-icons"
                 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,
-                  alignItems: "center",
-                  "&:hover .action-icons": {
-                    opacity: 1,
-                    visibility: "visible",
-                  },
+                  opacity: 0,
+                  visibility: "hidden",
+                  transition: "all 0.2s ease",
                 }}
-                onClick={() => handleAppyFilter(filter)}
               >
-                {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",
-                  }}
-                >
+                {/** Show edit icon:
+                 * - For shared lists: only if filter.is_editable === true
+                 * - For non-shared lists: show (keeps previous behavior)
+                 */}
+                {(!isSharedList || filter.is_editable === true) && (
                   <IconButton
                     size="large"
                     onClick={() => handleListItemClick(filter)}
                   >
                     <EditIcon />
                   </IconButton>
-
+                )}
+                {(!isSharedList || filter.is_editable === true) && (
                   <IconButton
                     size="small"
                     onClick={() => {
@@ -201,24 +221,96 @@ const SavedFilter = ({
                   >
                     <DeleteIcon />
                   </IconButton>
-                </Box>
-              </ListItem>
-            ))}
-        </List>
-      )}
-    </>
-  );
-
-  const mainBoxStyles = {
-    ...filterStyles.filterMainComponentWrapper,
-    ...filterStyles.scrollbarCustom,
-  };
+                )}
+              </Box>
+            </ListItem>
+          ))}
+      </List>
+    );
 
   return (
-    <Box sx={mainBoxStyles} className="saved-filter-component-wrapper">
-      {/* Render search input and list */}
-      {!editMode && renderList()}
+    <Box
+      // sx={{
+      //   ...filterStyles.filterMainComponentWrapper,
+      //   ...filterStyles.scrollbarCustom,
+      // }}
+      className="saved-filter-component-wrapper"
+    >
+      {!editMode && (
+        <>
+          {/* Search Box */}
+          <Box sx={{ mb: 2 }}>
+            <CustomSearch
+              value={searchTerm}
+              onChange={setSearchTerm}
+              className="search-input"
+            />
+          </Box>
+
+          {/* ---- My Filters Section ---- */}
+          <Box
+            sx={{
+              background: "#fff",
+              borderRadius: "12px",
+              border: "1px solid #eee",
+              mb: 2,
+              overflow: "hidden",
+            }}
+          >
+            <Accordion defaultExpanded disableGutters elevation={0}>
+              <AccordionSummary
+                expandIcon={<ExpandMoreIcon fontSize="small" />}
+              >
+                <Typography fontWeight={600}>My Filters</Typography>
+              </AccordionSummary>
+              <Divider sx={{ width: "100%" }} />
+              <AccordionDetails
+                sx={{
+                  p: "9px",
+                  maxHeight: "320px",
+                  overflowY: "auto",
+                  scrollbarWidth: "thin",
+                }}
+              >
+                {renderList(mappedSavedFilter, false)}
+              </AccordionDetails>
+            </Accordion>
+          </Box>
+
+          {/* ---- Shared Filters Section ---- */}
+          <Box
+            sx={{
+              background: "#fff",
+              borderRadius: "12px",
+              border: "1px solid #eee",
+              mb: 2,
+              overflow: "hidden",
+            }}
+          >
+            <Accordion disableGutters elevation={0}>
+              <AccordionSummary
+                expandIcon={<ExpandMoreIcon fontSize="small" />}
+              >
+                <Typography fontWeight={600}>Shared Filters</Typography>
+              </AccordionSummary>
+              <Divider sx={{ width: "100%" }} />
 
+              <AccordionDetails
+                sx={{
+                  p: "9px",
+                  maxHeight: "320px",
+                  overflowY: "auto",
+                  scrollbarWidth: "thin",
+                }}
+              >
+                {renderList(mappedSharedFilter, true)}
+              </AccordionDetails>
+            </Accordion>
+          </Box>
+        </>
+      )}
+
+      {/* Edit Component */}
       {editMode && (
         <SavedFilterEditComponent
           columnsData={columnsData}
@@ -228,7 +320,7 @@ const SavedFilter = ({
           setEditMode={setEditMode}
           searchTerm={searchTerm}
           setSearchTerm={setSearchTerm}
-          setSavedFilterModalOpen={setSavedFilterModalOpen}
+          onSaveFilterButtonClick={onSaveFilterButtonClick}
           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
           onChangeFunction={onChangeFunction}
           filterComponentOptions={filterComponentOptions}
@@ -239,3 +331,303 @@ const SavedFilter = ({
 };
 
 export default SavedFilter;
+
+// import { useEffect, useState } from "react";
+// import {
+//   FilterFormComponentProps,
+//   FilterMasterStateProps,
+// } from "../../../types/filter";
+// import {
+//   Accordion,
+//   AccordionDetails,
+//   AccordionSummary,
+//   Box,
+//   Divider,
+//   IconButton,
+//   List,
+//   ListItem,
+//   ListItemText,
+//   Typography,
+// } from "@mui/material";
+// import CustomSearch from "./search";
+// import { DeleteIcon, EditIcon } from "../../../../assets/svg";
+// import SavedFilterEditComponent from "./saved-edit-filter";
+// import { CheckBox } from "../../../../assets/svg";
+// import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+// const SavedFilter = ({
+//   columnsData,
+//   dropdownData,
+//   tableStates,
+//   editMode,
+//   setEditMode,
+//   setDeleteFilterModalOpen,
+//   onSaveFilterButtonClick,
+//   tabValue,
+//   onChangeFunction,
+//   filterComponentOptions,
+// }: FilterFormComponentProps) => {
+//   const { filters, filterMaster, setFilterMaster, setFilterToDelete } =
+//     tableStates;
+
+//   const [searchTerm, setSearchTerm] = useState<string>("");
+
+//   // ------------------------------
+//   // APPLY FILTER STATE (same logic)
+//   // ------------------------------
+//   const applyFilterStates = (filter: any) => {
+//     const newFilterMaster = {
+//       ...filterMaster,
+//       saved_filters: {
+//         ...(filterMaster?.saved_filters ?? {}),
+//         selectedId: filter?.value || filter?.id,
+//         selectedName: filter?.label || filter?.name,
+//         selectedCode: filter?.code,
+//         shareWithTeam: filter?.is_shared,
+//         allowTeamEdit: filter?.is_editable,
+//       },
+//       attributes: {
+//         ...filterMaster?.attributes,
+//         radio: [],
+//       },
+//       activeFilterTabIndex: tabValue,
+//     } as FilterMasterStateProps;
+
+//     setFilterMaster(newFilterMaster);
+
+//     onChangeFunction &&
+//       onChangeFunction({
+//         filterMaster: newFilterMaster,
+//         filters,
+//       });
+//   };
+
+//   const handleListItemClick = (filter: any) => {
+//     applyFilterStates(filter);
+//     setEditMode && setEditMode(true);
+//     setFilterToDelete(filter);
+//   };
+
+//   const handleApplyFilter = (filter: any) => {
+//     applyFilterStates(filter);
+//   };
+
+//   // ============================
+//   // ⭐ RENDER SAVED FILTER LIST
+//   // ============================
+//   const renderSavedFilterList = () => {
+//     const list = columnsData?.saved_filter ?? [];
+
+//     return list.length === 0 ? (
+//       <Typography>No saved filters yet.</Typography>
+//     ) : (
+//       <List sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+//         {list
+//           .filter((f: any) =>
+//             f.label?.toLowerCase().includes(searchTerm.toLowerCase())
+//           )
+//           .map((filter: any) => (
+//             <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: "all 0.2s ease",
+//                 }}
+//               >
+//                 <IconButton
+//                   size="large"
+//                   onClick={() => handleListItemClick(filter)}
+//                 >
+//                   <EditIcon />
+//                 </IconButton>
+
+//                 <IconButton
+//                   size="small"
+//                   onClick={() => {
+//                     setFilterToDelete(filter);
+//                     setDeleteFilterModalOpen?.(true);
+//                   }}
+//                 >
+//                   <DeleteIcon />
+//                 </IconButton>
+//               </Box>
+//             </ListItem>
+//           ))}
+//       </List>
+//     );
+//   };
+
+//   // ============================
+//   // ⭐ RENDER SHARED FILTER LIST
+//   // ============================
+//   const renderSharedFilterList = () => {
+//     const list = columnsData?.shared_filter ?? [];
+
+//     return list.length === 0 ? (
+//       <Typography>No shared filters yet.</Typography>
+//     ) : (
+//       <List sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+//         {list
+//           .filter((f: any) =>
+//             f.name?.toLowerCase().includes(searchTerm.toLowerCase())
+//           )
+//           .map((filter: any) => (
+//             <ListItem
+//               key={filter.id}
+//               sx={{
+//                 cursor: "pointer",
+//                 borderRadius: "8px",
+//                 bgcolor: "#f2f6f8ff",
+//                 display: "flex",
+//                 justifyContent: "space-between",
+//                 gap: 1,
+//                 alignItems: "center",
+//               }}
+//               onClick={() =>
+//                 handleApplyFilter({
+//                   id: filter.id,
+//                   value: filter.id,
+//                   name: filter.name,
+//                   label: filter.name,
+//                   code: filter.code,
+//                 })
+//               }
+//             >
+//               {filter.id === filterMaster?.saved_filters?.selectedId && (
+//                 <Box sx={{ display: "flex", alignItems: "center" }}>
+//                   <CheckBox />
+//                 </Box>
+//               )}
+
+//               <ListItemText primary={filter.name} />
+//             </ListItem>
+//           ))}
+//       </List>
+//     );
+//   };
+
+//   return (
+//     <Box className="saved-filter-component-wrapper">
+//       {!editMode && (
+//         <>
+//           <Box sx={{ mb: 2 }}>
+//             <CustomSearch
+//               value={searchTerm}
+//               onChange={setSearchTerm}
+//               className="search-input"
+//             />
+//           </Box>
+
+//           {/* ---- My Filters ---- */}
+//           <Box
+//             sx={{
+//               background: "#fff",
+//               borderRadius: "12px",
+//               border: "1px solid #eee",
+//               mb: 2,
+//               overflow: "hidden",
+//             }}
+//           >
+//             <Accordion defaultExpanded disableGutters elevation={0}>
+//               <AccordionSummary
+//                 expandIcon={<ExpandMoreIcon fontSize="small" />}
+//               >
+//                 <Typography fontWeight={600}>My Filters</Typography>
+//               </AccordionSummary>
+
+//               <Divider />
+//               <AccordionDetails
+//                 sx={{
+//                   p: "9px",
+//                   maxHeight: "320px",
+//                   overflowY: "auto",
+//                   scrollbarWidth: "thin",
+//                 }}
+//               >
+//                 {renderSavedFilterList()}
+//               </AccordionDetails>
+//             </Accordion>
+//           </Box>
+
+//           {/* ---- Shared Filters ---- */}
+//           <Box
+//             sx={{
+//               background: "#fff",
+//               borderRadius: "12px",
+//               border: "1px solid #eee",
+//               mb: 2,
+//               overflow: "hidden",
+//             }}
+//           >
+//             <Accordion disableGutters elevation={0}>
+//               <AccordionSummary
+//                 expandIcon={<ExpandMoreIcon fontSize="small" />}
+//               >
+//                 <Typography fontWeight={600}>Shared Filters</Typography>
+//               </AccordionSummary>
+
+//               <Divider />
+//               <AccordionDetails
+//                 sx={{
+//                   p: "9px",
+//                   maxHeight: "320px",
+//                   overflowY: "auto",
+//                   scrollbarWidth: "thin",
+//                 }}
+//               >
+//                 {renderSharedFilterList()}
+//               </AccordionDetails>
+//             </Accordion>
+//           </Box>
+//         </>
+//       )}
+
+//       {editMode && (
+//         <SavedFilterEditComponent
+//           columnsData={columnsData}
+//           dropdownData={dropdownData}
+//           tableStates={tableStates}
+//           editMode={editMode}
+//           setEditMode={setEditMode}
+//           searchTerm={searchTerm}
+//           setSearchTerm={setSearchTerm}
+//           onSaveFilterButtonClick={onSaveFilterButtonClick}
+//           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
+//           onChangeFunction={onChangeFunction}
+//           filterComponentOptions={filterComponentOptions}
+//         />
+//       )}
+//     </Box>
+//   );
+// };
+
+// export default SavedFilter;