rez-table-listing-mui 1.3.32 → 1.3.33

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

@@ -1,3 +1,248 @@
+// import { useEffect, useState } from "react";
+// import {
+//   FilterFormComponentProps,
+//   FilterMasterStateProps,
+//   FilterOperationListProps,
+// } from "../../../types/filter";
+// import {
+//   Box,
+//   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";
+
+// const SavedFilter = ({
+//   columnsData,
+//   dropdownData,
+//   tableStates,
+//   editMode,
+//   setEditMode,
+//   setDeleteFilterModalOpen,
+//   setSavedFilterModalOpen,
+//   tabValue,
+//   onChangeFunction,
+//   filterComponentOptions,
+// }: FilterFormComponentProps) => {
+//   const { filters, filterMaster, setFilterMaster, setFilterToDelete } =
+//     tableStates;
+//   const [searchTerm, setSearchTerm] = useState<string>("");
+
+//   // reset savedFilterEditValue when component unmounts
+//   useEffect(() => {
+//     return () => {
+//       const editModeFromTabOptions =
+//         filterComponentOptions?.tabOptions?.savedFilter?.editMode;
+//       if (!editModeFromTabOptions) {
+//         setEditMode && setEditMode(false);
+//         setFilterMaster(
+//           (prev) =>
+//             ({
+//               ...prev,
+//               saved_filters: {
+//                 ...prev?.attributes,
+//                 selectedId: "",
+//                 selectedName: "",
+//                 selectedCode: "",
+//               },
+//             } as FilterMasterStateProps)
+//         );
+//       }
+//     };
+//   }, []);
+
+//   const handleListItemClick = (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 newState = {
+//       filterMaster: newFilterMasterState,
+//       filters: filters,
+//     };
+
+//     onChangeFunction && onChangeFunction(newState);
+
+//     // setEditfilter state on edit icon click
+//     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 newState = {
+//       filterMaster: newFilterMasterState,
+//       filters: filters,
+//     };
+
+//     onChangeFunction && onChangeFunction(newState);
+//   };
+
+//   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,
+//                   alignItems: "center",
+//                   "&:hover .action-icons": {
+//                     opacity: 1,
+//                     visibility: "visible",
+//                   },
+//                 }}
+//                 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",
+//                   }}
+//                 >
+//                   <IconButton
+//                     size="large"
+//                     onClick={() => handleListItemClick(filter)}
+//                   >
+//                     <EditIcon />
+//                   </IconButton>
+
+//                   <IconButton
+//                     size="small"
+//                     onClick={() => {
+//                       setFilterToDelete(filter);
+//                       setDeleteFilterModalOpen?.(true);
+//                     }}
+//                   >
+//                     <DeleteIcon />
+//                   </IconButton>
+//                 </Box>
+//               </ListItem>
+//             ))}
+//         </List>
+//       )}
+//     </>
+//   );
+
+//   const mainBoxStyles = {
+//     ...filterStyles.filterMainComponentWrapper,
+//     ...filterStyles.scrollbarCustom,
+//   };
+
+//   return (
+//     <Box sx={mainBoxStyles} className="saved-filter-component-wrapper">
+//       {/* Render search input and list */}
+//       {!editMode && renderList()}
+
+//       {editMode && (
+//         <SavedFilterEditComponent
+//           columnsData={columnsData}
+//           dropdownData={dropdownData}
+//           tableStates={tableStates}
+//           editMode={editMode}
+//           setEditMode={setEditMode}
+//           searchTerm={searchTerm}
+//           setSearchTerm={setSearchTerm}
+//           setSavedFilterModalOpen={setSavedFilterModalOpen}
+//           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
+//           onChangeFunction={onChangeFunction}
+//           filterComponentOptions={filterComponentOptions}
+//         />
+//       )}
+//     </Box>
+//   );
+// };
+
+// export default SavedFilter;
+
+// do not delete this logic rework this
+// ----------------------------------------------------------------------------------------------------------------------------
+
 import { useEffect, useState } from "react";
 import {
   FilterFormComponentProps,
@@ -49,8 +294,10 @@ const SavedFilter = ({
       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",
 
-      // 🔥 STRING ko BOOLEAN banaya
       is_editable:
         f.is_editable === true ||
         f.is_editable === "true" ||
@@ -61,9 +308,11 @@ const SavedFilter = ({
 
   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(() => {
@@ -81,6 +330,7 @@ const SavedFilter = ({
                 ...(prev?.saved_filters ?? {}),
                 selectedId: "",
                 selectedName: "",
+                description: "",
                 selectedCode: "",
                 shareWithTeam: undefined,
                 allowTeamEdit: undefined,
@@ -98,6 +348,7 @@ const SavedFilter = ({
         ...(filterMaster?.saved_filters ?? {}),
         selectedId: filter.value,
         selectedName: filter.label,
+        description: filter.description,
         selectedCode: filter.code,
         shareWithTeam: filter.is_shared,
         allowTeamEdit: filter.is_editable,
@@ -127,6 +378,7 @@ const SavedFilter = ({
   const handleApplyFilter = (filter: FilterOperationListProps) => {
     applyFilterStates(filter);
   };
+  const [openAccordion, setOpenAccordion] = useState<"my" | "shared">("my");
 
   /**
    * renderList
@@ -196,14 +448,14 @@ const SavedFilter = ({
                   gap: 1,
                   opacity: 0,
                   visibility: "hidden",
-                  transition: "all 0.2s ease",
+                  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) && (
+                {(!isSharedList ||
+                  filter.is_editable === true ||
+                  filter.is_owner === true) && (
+                  //  ||
+                  // String(filter.created_by) !== String(filter.user_id))
                   <IconButton
                     size="large"
                     onClick={() => handleListItemClick(filter)}
@@ -211,7 +463,7 @@ const SavedFilter = ({
                     <EditIcon />
                   </IconButton>
                 )}
-                {(!isSharedList || filter.is_editable === true) && (
+                {filter?.is_owner === true && (
                   <IconButton
                     size="small"
                     onClick={() => {
@@ -257,7 +509,15 @@ const SavedFilter = ({
               overflow: "hidden",
             }}
           >
-            <Accordion defaultExpanded disableGutters elevation={0}>
+            <Accordion
+              // defaultExpanded
+              disableGutters
+              elevation={0}
+              expanded={openAccordion === "my"}
+              onChange={() =>
+                setOpenAccordion(openAccordion === "my" ? "shared" : "my")
+              }
+            >
               <AccordionSummary
                 expandIcon={<ExpandMoreIcon fontSize="small" />}
               >
@@ -287,7 +547,14 @@ const SavedFilter = ({
               overflow: "hidden",
             }}
           >
-            <Accordion disableGutters elevation={0}>
+            <Accordion
+              disableGutters
+              elevation={0}
+              expanded={openAccordion === "shared"}
+              onChange={() =>
+                setOpenAccordion(openAccordion === "shared" ? "my" : "shared")
+              }
+            >
               <AccordionSummary
                 expandIcon={<ExpandMoreIcon fontSize="small" />}
               >

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

@@ -169,6 +169,8 @@ export function TableFilter({
   const handleSavedFilterModalSave = () => {
     const selectedId = filterMaster?.saved_filters?.selectedId;
     const selectedName = filterMaster?.saved_filters?.selectedName || "";
+    const description = filterMaster?.saved_filters?.description || "";
+
     const selectedCode = filterMaster?.saved_filters?.selectedCode;
 
     const newFilterMasterState = {
@@ -178,6 +180,7 @@ export function TableFilter({
         selectedId,
         selectedName,
         selectedCode,
+        description,
       },
     } as FilterMasterStateProps;
 
@@ -391,6 +394,8 @@ export function TableFilter({
                     inputValue || filterMaster?.saved_filters?.selectedName;
                   const selectedCode =
                     filterMaster?.saved_filters?.selectedCode;
+                  const description =
+                    inputValue || filterMaster?.saved_filters?.description;
 
                   const newFilterMasterState = {
                     ...filterMaster,
@@ -399,6 +404,7 @@ export function TableFilter({
                       selectedId,
                       selectedName,
                       selectedCode,
+                      description,
                     },
                   } as FilterMasterStateProps;
 

package/src/listing/libs/utils/common.ts

@@ -80,6 +80,7 @@ export function customDebounce<T extends (...args: any[]) => any>(
 const ENVIRONMENT = "uat";
 export const ENTITY_TYPE = "LEAD";
 export const MAPPED_ENTITY_TYPE = "LYPR"; // LAP OR LYPR
+export const USER_ID = 226;
 
 const environments = {
   adm_dev: "http://localhost:4010/api",

package/src/listing/types/filter.ts

@@ -17,6 +17,10 @@ export interface FilterOperationListProps {
   value: string;
   is_shared: boolean;
   is_editable: boolean;
+  is_owner: boolean;
+  created_by: string;
+  user_id: number;
+  description: string | null;
 }
 
 export interface FilterSharedListProps {
@@ -301,6 +305,7 @@ export interface FilterMasterStateProps {
     selectedId: string;
     selectedName: string;
     selectedCode?: string;
+    description?: string;
     is_shared?: boolean;
     is_editable?: boolean;
   };

package/src/view/FIlterWrapper.tsx

@@ -89,6 +89,7 @@ const CraftTableFilterWrapper = ({
     const quickFilter = filters.map((f: any) => ({ ...f }));
     const shareWithTeam = filterMaster?.saved_filters?.is_shared ?? false;
     const allowTeamEdit = filterMaster?.saved_filters?.is_editable ?? false;
+    const description = filterMaster?.saved_filters?.description ?? "";
 
     const payload = {
       name,
@@ -96,6 +97,7 @@ const CraftTableFilterWrapper = ({
       mapped_entity_type: ENTITY_TYPE, // For that entity type
       status: "ACTIVE",
       entity_type: "SFM", // FIXED entity type
+      description: description,
       filterDetails: quickFilter,
       is_shared: shareWithTeam,
       is_editable: allowTeamEdit,
@@ -115,6 +117,7 @@ const CraftTableFilterWrapper = ({
                     ...prev?.saved_filters,
                     selectedId: newFilterId.toString(),
                     selectedName: name,
+                    description: description,
                     is_shared: shareWithTeam,
                     is_editable: allowTeamEdit,
                   },
@@ -135,6 +138,7 @@ const CraftTableFilterWrapper = ({
     }));
     const shareWithTeam = filterMaster?.saved_filters?.is_shared ?? false;
     const allowTeamEdit = filterMaster?.saved_filters?.is_editable ?? false;
+    const description = filterMaster?.saved_filters?.description ?? "";
 
     const payload = {
       name: filterMaster?.saved_filters?.selectedName, // Name of the filter
@@ -142,6 +146,7 @@ const CraftTableFilterWrapper = ({
       id: filterMaster?.saved_filters?.selectedId,
       mapped_entity_type: ENTITY_TYPE,
       status: "ACTIVE",
+      description: description,
       entity_type: "SFM",
       filterDetails: quickFilter,
       is_shared: shareWithTeam, // Now true/false from state