rez-table-listing-mui 1.3.33 → 1.3.34

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

@@ -243,6 +243,365 @@
 // do not delete this logic rework this
 // ----------------------------------------------------------------------------------------------------------------------------
 
+// import { useEffect, useState } from "react";
+// import {
+//   FilterFormComponentProps,
+//   FilterMasterStateProps,
+//   FilterOperationListProps,
+// } 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 { filterStyles } from "../style";
+// 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>("");
+
+//   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,
+//       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",
+//     };
+//   };
+
+//   const mappedSavedFilter: FilterOperationListProps[] =
+//     columnsData?.saved_filter?.map(normalizeFilter) ?? [];
+//   // console.log("mappedSavedFilter", mappedSavedFilter);
+
+//   const mappedSharedFilter: FilterOperationListProps[] =
+//     columnsData?.shared_filter?.map(normalizeFilter) ?? [];
+//   // console.log("mappedSharedFilter", mappedSharedFilter);
+
+//   // Reset on unmount
+//   useEffect(() => {
+//     return () => {
+//       const editModeFromTab =
+//         filterComponentOptions?.tabOptions?.savedFilter?.editMode;
+
+//       if (!editModeFromTab) {
+//         setEditMode && setEditMode(false);
+//         setFilterMaster(
+//           (prev) =>
+//             ({
+//               ...prev,
+//               saved_filters: {
+//                 ...(prev?.saved_filters ?? {}),
+//                 selectedId: "",
+//                 selectedName: "",
+//                 description: "",
+//                 selectedCode: "",
+//                 shareWithTeam: undefined,
+//                 allowTeamEdit: undefined,
+//               },
+//             } as FilterMasterStateProps)
+//         );
+//       }
+//     };
+//   }, []);
+
+//   const applyFilterStates = (filter: FilterOperationListProps) => {
+//     const newFilterMaster = {
+//       ...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,
+//       },
+//       attributes: {
+//         ...filterMaster?.attributes,
+//         radio: [],
+//       },
+//       activeFilterTabIndex: tabValue,
+//     } as FilterMasterStateProps;
+
+//     setFilterMaster(newFilterMaster);
+
+//     onChangeFunction &&
+//       onChangeFunction({
+//         filterMaster: newFilterMaster,
+//         filters,
+//       });
+//   };
+
+//   const handleListItemClick = (filter: FilterOperationListProps) => {
+//     applyFilterStates(filter);
+//     setEditMode && setEditMode(true);
+//     setFilterToDelete(filter);
+//   };
+
+//   const handleApplyFilter = (filter: FilterOperationListProps) => {
+//     applyFilterStates(filter);
+//   };
+//   const [openAccordion, setOpenAccordion] = useState<"my" | "shared">("my");
+
+//   /**
+//    * 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  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>
+//               )}
+
+//               <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",
+//                 }}
+//               >
+//                 {((!isSharedList && filter.is_editable === true) ||
+//                   filter.is_owner === true) && (
+//                   //  ||
+//                   // String(filter.created_by) !== String(filter.user_id))
+//                   <IconButton
+//                     size="large"
+//                     onClick={() => handleListItemClick(filter)}
+//                   >
+//                     <EditIcon />
+//                   </IconButton>
+//                 )}
+//                 {filter?.is_owner === true && (
+//                   <IconButton
+//                     size="small"
+//                     onClick={() => {
+//                       setFilterToDelete(filter);
+//                       setDeleteFilterModalOpen?.(true);
+//                     }}
+//                   >
+//                     <DeleteIcon />
+//                   </IconButton>
+//                 )}
+//               </Box>
+//             </ListItem>
+//           ))}
+//       </List>
+//     );
+
+//   return (
+//     <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}
+//               expanded={openAccordion === "my"}
+//               onChange={() =>
+//                 setOpenAccordion(openAccordion === "my" ? "shared" : "my")
+//               }
+//             >
+//               <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) || (
+//                   <Typography>No My Filters</Typography>
+//                 )}
+//               </AccordionDetails>
+//             </Accordion>
+//           </Box>
+
+//           {/* ---- Shared Filters Section ---- */}
+//           <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")
+//               }
+//             >
+//               <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) || (
+//                   <Typography>No Shared Filters</Typography>
+//                 )}
+//               </AccordionDetails>
+//             </Accordion>
+//           </Box>
+//         </>
+//       )}
+
+//       {/* Edit Component */}
+//       {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;
+
 import { useEffect, useState } from "react";
 import {
   FilterFormComponentProps,
@@ -264,7 +623,6 @@ 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";
 
@@ -285,7 +643,20 @@ const SavedFilter = ({
 
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const normalizeFilter = (f: any): FilterOperationListProps => {
+  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 || {};
 
@@ -293,11 +664,10 @@ const SavedFilter = ({
       label: f.name || f.label || "Unnamed Filter",
       value: f.id || f.value,
       code: f.code ?? "",
-      is_shared: f.is_shared ?? prefs.is_shared ?? false,
+      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" ||
@@ -306,13 +676,13 @@ const SavedFilter = ({
     };
   };
 
-  const mappedSavedFilter: FilterOperationListProps[] =
-    columnsData?.saved_filter?.map(normalizeFilter) ?? [];
-  console.log("mappedSavedFilter", mappedSavedFilter);
+  //  SEPARATE DATA MAPPINGS
+
+  const myFilters: FilterOperationListProps[] =
+    columnsData?.saved_filter?.map(MyFilter) ?? [];
 
-  const mappedSharedFilter: FilterOperationListProps[] =
-    columnsData?.shared_filter?.map(normalizeFilter) ?? [];
-  console.log("mappedSharedFilter", mappedSharedFilter);
+  const sharedFilters: FilterOperationListProps[] =
+    columnsData?.shared_filter?.map(SharedFilter) ?? [];
 
   // Reset on unmount
   useEffect(() => {
@@ -341,6 +711,8 @@ const SavedFilter = ({
     };
   }, []);
 
+  // APPLY FILTER
+
   const applyFilterStates = (filter: FilterOperationListProps) => {
     const newFilterMaster = {
       ...filterMaster,
@@ -378,32 +750,87 @@ const SavedFilter = ({
   const handleApplyFilter = (filter: FilterOperationListProps) => {
     applyFilterStates(filter);
   };
+
   const [openAccordion, setOpenAccordion] = useState<"my" | "shared">("my");
 
-  /**
-   * 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." } = {}
-  ) =>
+  //  RENDER: MY FILTERS
+
+  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>
+              )}
+
+              <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",
+                }}
+              >
+                <IconButton
+                  size="large"
+                  onClick={() => handleListItemClick(filter)}
+                >
+                  <EditIcon />
+                </IconButton>
+
+                <IconButton
+                  size="small"
+                  onClick={() => {
+                    setFilterToDelete(filter);
+                    setDeleteFilterModalOpen?.(true);
+                  }}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              </Box>
+            </ListItem>
+          ))}
+      </List>
+    );
+
+  // ----------------------------------------
+  //  RENDER: SHARED FILTERS
+  // ----------------------------------------
+  const renderSharedFilters = (source: FilterOperationListProps[]) =>
     source.length === 0 ? (
-      <Typography>{emptyMessage}</Typography>
+      <Typography>No Shared Filters</Typography>
     ) : (
-      <List
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          gap: 1,
-        }}
-      >
+      <List sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
         {source
           .filter((f) =>
             f.label?.toLowerCase().includes(searchTerm.toLowerCase())
@@ -413,11 +840,6 @@ const SavedFilter = ({
               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",
@@ -431,8 +853,7 @@ const SavedFilter = ({
               }}
               onClick={() => handleApplyFilter(filter)}
             >
-              {filter.value ===
-                tableStates?.filterMaster?.saved_filters?.selectedId && (
+              {filter.value === filterMaster?.saved_filters?.selectedId && (
                 <Box sx={{ display: "flex", alignItems: "center" }}>
                   <CheckBox />
                 </Box>
@@ -451,11 +872,7 @@ const SavedFilter = ({
                   transition: "opacity 0.2s ease, visibility 0.2s ease",
                 }}
               >
-                {(!isSharedList ||
-                  filter.is_editable === true ||
-                  filter.is_owner === true) && (
-                  //  ||
-                  // String(filter.created_by) !== String(filter.user_id))
+                {(filter.is_editable || filter.is_owner) && (
                   <IconButton
                     size="large"
                     onClick={() => handleListItemClick(filter)}
@@ -463,7 +880,7 @@ const SavedFilter = ({
                     <EditIcon />
                   </IconButton>
                 )}
-                {filter?.is_owner === true && (
+                {filter.is_owner && (
                   <IconButton
                     size="small"
                     onClick={() => {
@@ -480,17 +897,14 @@ const SavedFilter = ({
       </List>
     );
 
+  // ----------------------------------------
+  //  RENDER MAIN COMPONENT
+  // ----------------------------------------
   return (
-    <Box
-      // sx={{
-      //   ...filterStyles.filterMainComponentWrapper,
-      //   ...filterStyles.scrollbarCustom,
-      // }}
-      className="saved-filter-component-wrapper"
-    >
+    <Box className="saved-filter-component-wrapper">
       {!editMode && (
         <>
-          {/* Search Box */}
+          {/* Search */}
           <Box sx={{ mb: 2 }}>
             <CustomSearch
               value={searchTerm}
@@ -499,7 +913,7 @@ const SavedFilter = ({
             />
           </Box>
 
-          {/* ---- My Filters Section ---- */}
+          {/* ---- My Filters ---- */}
           <Box
             sx={{
               background: "#fff",
@@ -510,7 +924,6 @@ const SavedFilter = ({
             }}
           >
             <Accordion
-              // defaultExpanded
               disableGutters
               elevation={0}
               expanded={openAccordion === "my"}
@@ -532,19 +945,19 @@ const SavedFilter = ({
                   scrollbarWidth: "thin",
                 }}
               >
-                {renderList(mappedSavedFilter, false)}
+                {renderMyFilters(myFilters)}
               </AccordionDetails>
             </Accordion>
           </Box>
 
-          {/* ---- Shared Filters Section ---- */}
+          {/* ---- Shared Filters ---- */}
           <Box
             sx={{
               background: "#fff",
               borderRadius: "12px",
-              border: "1px solid #eee",
-              mb: 2,
-              overflow: "hidden",
+              // border: "1px solid "#eee",
+              // mb: 2,
+              // overflow: "hidden",
             }}
           >
             <Accordion
@@ -561,7 +974,6 @@ const SavedFilter = ({
                 <Typography fontWeight={600}>Shared Filters</Typography>
               </AccordionSummary>
               <Divider sx={{ width: "100%" }} />
-
               <AccordionDetails
                 sx={{
                   p: "9px",
@@ -570,7 +982,7 @@ const SavedFilter = ({
                   scrollbarWidth: "thin",
                 }}
               >
-                {renderList(mappedSharedFilter, true)}
+                {renderSharedFilters(sharedFilters)}
               </AccordionDetails>
             </Accordion>
           </Box>

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

@@ -202,6 +202,7 @@ export function TableFilter({
       }
     } else {
       onSaveFilter && onSaveFilter(selectedName);
+      setTabValue(1);
     }
 
     setSavedFilterModalOpen(false);