rez-table-listing-mui 1.3.39 → 1.3.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.39",
+  "version": "1.3.41",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/listing/components/common/saved-filter-modal/index.tsx

@@ -0,0 +1,517 @@
+import {
+  ChangeEvent,
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  FormControlLabel,
+  IconButton,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { CloseIcon } from "../../../../assets/svg";
+import {
+  FilterFormComponentProps,
+  FilterMasterStateProps,
+} from "../../../types/filter";
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
+import { USER_ID } from "../../../libs/utils/common";
+// import { set } from "react-hook-form";
+
+const primary = "#7A5AF8";
+
+interface SavedFilterModalViewProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: () => void;
+  filterMaster: FilterMasterStateProps | null;
+  setFilterMaster: Dispatch<SetStateAction<FilterMasterStateProps | null>>;
+  columnsData: FilterFormComponentProps | undefined;
+  hasSavedFilters?: boolean;
+  forceShowSharingControls?: boolean;
+}
+
+const SavedFilterModalView = ({
+  open,
+  onClose,
+  onSave,
+  filterMaster,
+  setFilterMaster,
+  columnsData,
+
+  forceShowSharingControls = false,
+}: SavedFilterModalViewProps) => {
+  const [shareWithTeam, setShareWithTeam] = useState<boolean>(false);
+  const [allowTeamEdit, setAllowTeamEdit] = useState<boolean>(false);
+  const filterNameValue = filterMaster?.saved_filters?.selectedName ?? "";
+  const discriptionValue = filterMaster?.saved_filters?.description ?? "";
+
+  const isSaveDisabled =
+    !filterNameValue.trim() || (allowTeamEdit && !shareWithTeam);
+
+  const selectedFilterId = filterMaster?.saved_filters?.selectedId || "";
+
+  // Reset modal state when modal opens for a new filter
+  useEffect(() => {
+    if (!open) return;
+
+    const filterId = filterMaster?.saved_filters?.selectedId;
+    const filterObj1 = columnsData?.shared_filter?.find(
+      (f: any) => f.id === filterId
+    );
+    // NEW FILTER → RESET everything
+    if (!filterId && !filterObj1) {
+      setFilterMaster((prev: any) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          saved_filters: {
+            ...(prev.saved_filters ?? {}),
+            selectedId: null,
+            selectedName: "",
+            description: "",
+            is_shared: false,
+            is_editable: false,
+          },
+        };
+      });
+      setShareWithTeam(false);
+      setAllowTeamEdit(false);
+      return;
+    }
+
+    // EXISTING FILTER → Load from columnsData.saved_filter
+    const filterObj = columnsData?.shared_filter?.find(
+      (f: any) => f.id === filterId
+    );
+    if (filterObj) {
+      setFilterMaster((prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          saved_filters: {
+            ...(prev.saved_filters ?? {}),
+            selectedId: filterId,
+            selectedName: filterObj.name || "",
+            description: filterObj.description || "",
+            is_shared: filterObj.is_shared || false,
+            is_editable: filterObj.is_editable === "true",
+          },
+        };
+      });
+      // const initialShare = filterObj.is_shared ?? false;
+      // const initialAllow = initialShare
+      //   ? filterObj.is_editable === "true"
+      //   : false;
+      // setShareWithTeam(initialShare);
+      // setAllowTeamEdit(initialAllow);
+      const initialShare =
+        filterObj.is_shared === true || filterObj.is_shared === "true";
+      const initialAllow =
+        initialShare &&
+        (filterObj.is_editable === true || filterObj.is_editable === "true");
+
+      setShareWithTeam(initialShare);
+      setAllowTeamEdit(initialAllow);
+
+      persistPreferences(initialShare, initialAllow);
+    }
+  }, [
+    open,
+    columnsData,
+    filterMaster?.saved_filters?.selectedId,
+    setFilterMaster,
+  ]); // Added dependencies for loading
+
+  // Persist toggle state to filterMaster
+  const persistPreferences = (sharedValue: boolean, editableValue: boolean) => {
+    setFilterMaster((prev) => {
+      if (!prev) return prev;
+
+      return {
+        ...prev,
+        saved_filters: {
+          ...(prev.saved_filters ?? {}),
+          is_shared: sharedValue,
+          is_editable: editableValue,
+        },
+      };
+    });
+  };
+
+  // Handle Share Toggle
+
+  const handleShareToggle = (
+    _: ChangeEvent<HTMLInputElement>,
+    checked: boolean
+  ) => {
+    setShareWithTeam(checked);
+
+    const nextAllow = checked ? allowTeamEdit : false;
+    setAllowTeamEdit(nextAllow);
+
+    persistPreferences(checked, nextAllow);
+  };
+
+  // Handle Allow Edit Toggle
+
+  const handleAllowEditToggle = (
+    _: ChangeEvent<HTMLInputElement>,
+    checked: boolean
+  ) => {
+    if (!shareWithTeam) return; // Cannot enable edit without sharing
+
+    setAllowTeamEdit(checked);
+    persistPreferences(shareWithTeam, checked);
+  };
+
+  const shouldShowSharingControls = forceShowSharingControls || true; // always show
+
+  const getModalTitle = () => {
+    const selectedId = filterMaster?.saved_filters?.selectedId;
+
+    if (!selectedId) return "Save Filter"; // new filter
+
+    const filterObj = columnsData?.shared_filter?.find(
+      (f: any) => f.id === selectedId
+    );
+    if (filterObj?.is_shared) {
+      return "Shared Filter";
+    }
+    return "My Filter";
+  };
+
+  const handleSave = () => {
+    persistPreferences(shareWithTeam, allowTeamEdit);
+    onSave(); // call original save handler
+  };
+
+  // Get the selected filter object from columnsData.saved_filter
+  const selectedFilter = columnsData?.shared_filter?.find(
+    (f: any) => f.id === selectedFilterId
+  );
+
+  const selectedSavedFilter = columnsData?.shared_filter?.find(
+    (f: any) => f.id === selectedFilterId
+  );
+
+  const isOwner = String(selectedSavedFilter?.is_owner) === "true";
+
+  // Check if we should show prefields
+  const showPrefields =
+    (selectedSavedFilter && selectedSavedFilter.is_editable === "true") ||
+    selectedSavedFilter;
+
+  // Disable checkboxes if prefields are shown
+  const showCheckboxes = !showPrefields;
+
+  const isNewFilter = !selectedSavedFilter;
+
+  const isshow = isOwner;
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle sx={{ display: "flex", justifyContent: "space-between" }}>
+        <Typography fontSize={18} fontWeight={600} marginTop={1}>
+          {getModalTitle()}
+        </Typography>
+        <Box onClick={onClose} sx={{ cursor: "pointer" }}>
+          <CloseIcon />
+        </Box>
+      </DialogTitle>
+
+      <Divider sx={{ mx: "25px", my: "2px", bgcolor: "#f9f7f727" }} />
+
+      <DialogContent sx={{ pt: 0 }}>
+        <Typography my={1} fontSize={"14px"}>
+          Give a name to this filter so you can easily reuse it later.
+        </Typography>
+        {/* Filter Name */}
+        <Typography mt={2} fontSize={11}>
+          Filter Name
+        </Typography>
+        <TextField
+          fullWidth
+          size="small"
+          value={filterNameValue}
+          onChange={(e) =>
+            setFilterMaster((prev) => {
+              if (!prev) return prev;
+              return {
+                ...prev,
+                saved_filters: {
+                  ...(prev.saved_filters ?? {}),
+                  selectedName: e.target.value,
+                },
+              };
+            })
+          }
+          sx={{
+            mb: 0,
+            "& .MuiOutlinedInput-root": {
+              width: "50%",
+              "& fieldset": { borderColor: "#888" },
+              "&:hover fieldset": { borderColor: "black" },
+              "&.Mui-focused fieldset": { borderColor: primary },
+              "& .MuiInputBase-input": { fontSize: "12px" },
+            },
+          }}
+        />
+        {/* Description */}
+        <Typography mt={2} fontSize={11}>
+          Description
+        </Typography>
+        <TextField
+          fullWidth
+          minRows={3}
+          value={discriptionValue}
+          size="small"
+          sx={{
+            mb: 1,
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": { borderColor: "#888" },
+              "&:hover fieldset": { borderColor: "black" },
+              "&.Mui-focused fieldset": { borderColor: primary },
+            },
+          }}
+          onChange={(e) =>
+            setFilterMaster((prev) => {
+              if (!prev) return prev;
+              return {
+                ...prev,
+                saved_filters: {
+                  ...(prev.saved_filters ?? {}),
+                  description: e.target.value,
+                },
+              };
+            })
+          }
+        />
+        <Typography sx={{ mb: 1, fontSize: 12, color: "#888" }}>
+          (Max. 300 Characters)
+        </Typography>
+        {/* Sharing Controls */}
+        {shouldShowSharingControls && (showCheckboxes || isshow) && (
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 0.5,
+              "& .MuiFormControlLabel-label": { fontSize: "14px" },
+            }}
+          >
+            <FormControlLabel
+              control={
+                <Checkbox
+                  size="small"
+                  checked={shareWithTeam}
+                  onChange={handleShareToggle}
+                  sx={{
+                    color: "black",
+                    "&.Mui-checked": { color: "black" },
+                  }}
+                />
+              }
+              label="Share with team member."
+            />
+
+            {shareWithTeam && (
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    size="small"
+                    checked={allowTeamEdit}
+                    onChange={handleAllowEditToggle}
+                    sx={{
+                      color: "black",
+                      "&.Mui-checked": { color: "black" },
+                    }}
+                  />
+                }
+                label="Allow editing to Team member"
+              />
+            )}
+          </Box>
+        )}
+        {/* prefields */}
+        {showPrefields && !isshow && (
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: 3,
+              mt: 2,
+            }}
+          >
+            <Box>
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                  fontWeight: 500,
+                  color: "#6b6b6b",
+                  mb: 0.5,
+                }}
+              >
+                Created On*
+              </Typography>
+
+              <TextField
+                fullWidth
+                size="small"
+                value={
+                  selectedFilter?.created_date
+                    ? new Date(selectedFilter.created_date).toLocaleString()
+                    : ""
+                } // format date
+                InputProps={{
+                  readOnly: true,
+                  endAdornment: (
+                    <IconButton size="small">
+                      <CalendarTodayIcon fontSize="small" />
+                    </IconButton>
+                  ),
+                  sx: {
+                    backgroundColor: "#0E0C0B0F",
+                    borderRadius: "4px",
+                  },
+                }}
+              />
+            </Box>
+
+            <Box>
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                  fontWeight: 500,
+                  color: "#6b6b6b",
+                  mb: 0.5,
+                }}
+              >
+                Created By*
+              </Typography>
+              <TextField
+                fullWidth
+                size="small"
+                value={selectedFilter?.created_by || ""}
+                InputProps={{
+                  readOnly: true,
+                  sx: {
+                    backgroundColor: "#0E0C0B0F",
+                    borderRadius: "4px",
+                  },
+                }}
+              />
+            </Box>
+
+            <Box>
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                  fontWeight: 500,
+                  color: "#6b6b6b",
+                  mb: 0.5,
+                }}
+              >
+                Modified On*
+              </Typography>
+
+              <TextField
+                fullWidth
+                size="small"
+                value={
+                  selectedFilter?.modified_date
+                    ? new Date(selectedFilter.modified_date).toLocaleString()
+                    : ""
+                }
+                InputProps={{
+                  readOnly: true,
+                  endAdornment: (
+                    <IconButton size="small">
+                      <CalendarTodayIcon fontSize="small" />
+                    </IconButton>
+                  ),
+
+                  sx: {
+                    backgroundColor: "#0E0C0B0F",
+                    borderRadius: "4px",
+                  },
+                }}
+              />
+            </Box>
+
+            <Box>
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                  fontWeight: 500,
+                  color: "#6b6b6b",
+                  mb: 0.5,
+                }}
+              >
+                Modified By*
+              </Typography>
+              <TextField
+                fullWidth
+                size="small"
+                value={selectedFilter?.modified_by || ""}
+                InputProps={{
+                  readOnly: true,
+                  sx: {
+                    backgroundColor: "#0E0C0B0F",
+                    borderRadius: "4px",
+                  },
+                }}
+              />
+            </Box>
+          </Box>
+        )}
+        {/* Buttons */}
+        <Box
+          sx={{ display: "flex", justifyContent: "flex-end", gap: 1, mt: 3 }}
+        >
+          <Button
+            variant="outlined"
+            onClick={onClose}
+            sx={{
+              borderColor: primary,
+              color: primary,
+              "&:hover": {
+                borderColor: primary,
+                backgroundColor: "rgba(122, 90, 248, 0.04)",
+              },
+            }}
+          >
+            Cancel
+          </Button>
+
+          <Button
+            variant="contained"
+            onClick={handleSave}
+            disabled={isSaveDisabled}
+            sx={{
+              backgroundColor: primary,
+              "&:hover": { backgroundColor: "#6A4DE8" },
+              "&.Mui-disabled": {
+                backgroundColor: "#d7cefd",
+                color: "rgba(255, 255, 255, 0.7)",
+              },
+            }}
+          >
+            Save
+          </Button>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default SavedFilterModalView;

package/src/listing/components/filter/components/forms/components/Filter-criteria.tsx

@@ -144,11 +144,14 @@ const FilterCriteria = ({
           >
             <Box
               sx={{
-                maxHeight: `calc(100vh - 440px)`,
+                maxHeight: filterMaster?.saved_filters?.selectedId
+                  ? `calc(100vh - 601px)`
+                  : `calc(100vh - 440px)`,
                 overflowY: "auto",
                 width: "100%",
                 ...filterStyles.scrollbarCustom,
               }}
+              className="filter-criteria-list-box"
             >
               {selectedFilterEntity ? (
                 <FilterCriteriaList

package/src/listing/components/filter/components/forms/components/filter-criteria-list.tsx

@@ -70,6 +70,7 @@ const FilterCriteriaList = ({
             onClick={() =>
               !isSingleEntity && setSelectedFilterEntity(undefined)
             }
+            className="cross-icon"
           >
             <CloseIcon />
           </IconButton>

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

@@ -36,7 +36,7 @@ const FilterForm = ({
   handleRemoveFilter,
   editMode = false,
   tableStates,
-  setSavedFilterModalOpen,
+  onSaveFilterButtonClick,
   setDeleteFilterModalOpen,
   onChangeFunction,
   filterComponentOptions,
@@ -48,7 +48,7 @@ const FilterForm = ({
   handleRemoveFilter: (filter_attribute: string) => void;
   editMode?: boolean;
   tableStates: CraftTableOptionsProps;
-  setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  onSaveFilterButtonClick?: () => void;
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   onChangeFunction: ({
     updatedFilters,
@@ -67,6 +67,7 @@ const FilterForm = ({
     filterComponentOptions?.tabOptions?.mainFilter?.customButtons;
 
   const filterName = filterMaster?.saved_filters?.selectedName || "";
+  const isOwner = filterMaster?.saved_filters?.is_owner || false;
 
   const defaultValues = useMemo(() => {
     const filterValues = filters?.reduce((acc, curr) => {
@@ -252,22 +253,30 @@ const FilterForm = ({
                 />
               )}
             />
-            <Box onClick={(e) => e.stopPropagation()}>
-              <IconButton
-                size="small"
-                onClick={() =>
-                  setDeleteFilterModalOpen && setDeleteFilterModalOpen(true)
-                }
-              >
-                <DeleteIcon />
-              </IconButton>
-            </Box>
+            {isOwner && (
+              <Box onClick={(e) => e.stopPropagation()}>
+                <IconButton
+                  size="small"
+                  onClick={() =>
+                    setDeleteFilterModalOpen && setDeleteFilterModalOpen(true)
+                  }
+                >
+                  <DeleteIcon />
+                </IconButton>
+              </Box>
+            )}
           </Box>
         )}
 
         <Box
           className="filter-criteria-form"
-          sx={filterFormStyles.formFlexContainer}
+          sx={{
+            ...filterFormStyles.formFlexContainer,
+            ...(editMode && {
+              maxHeight: "calc(100vh - 570px)",
+              overflowY: "auto",
+            }),
+          }}
         >
           <FilterCriteria
             columnsData={columnsData}
@@ -442,7 +451,7 @@ const FilterForm = ({
                 },
               }}
               onClick={() => {
-                setSavedFilterModalOpen && setSavedFilterModalOpen(true);
+                onSaveFilterButtonClick && onSaveFilterButtonClick();
               }}
             >
               Save Filter

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

@@ -11,7 +11,7 @@ const MainFilter = ({
   columnsData,
   dropdownData,
   tableStates,
-  setSavedFilterModalOpen,
+  onSaveFilterButtonClick,
   onChangeFunction,
   filterComponentOptions,
 }: FilterFormComponentProps) => {
@@ -22,10 +22,10 @@ const MainFilter = ({
   useEffect(() => {
     setFilterMaster(
       (prev) =>
-        ({
-          ...prev,
-          activeFilterTabIndex: 0,
-        } as FilterMasterStateProps)
+      ({
+        ...prev,
+        activeFilterTabIndex: 0,
+      } as FilterMasterStateProps)
     );
   }, []);
 
@@ -61,7 +61,7 @@ const MainFilter = ({
         setSearchTerm={setSearchTerm}
         handleRemoveFilter={handleRemoveFilter}
         tableStates={tableStates}
-        setSavedFilterModalOpen={setSavedFilterModalOpen}
+        onSaveFilterButtonClick={onSaveFilterButtonClick}
         dropdownData={dropdownData}
         onChangeFunction={onChangeFunction}
         filterComponentOptions={filterComponentOptions}

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

@@ -18,7 +18,7 @@ const SavedFilterEditComponent = ({
   setEditMode,
   searchTerm,
   setSearchTerm,
-  setSavedFilterModalOpen,
+  onSaveFilterButtonClick,
   setDeleteFilterModalOpen,
   onChangeFunction,
   filterComponentOptions,
@@ -30,7 +30,7 @@ const SavedFilterEditComponent = ({
   setEditMode?: React.Dispatch<React.SetStateAction<boolean>>;
   searchTerm?: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
-  setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  onSaveFilterButtonClick?: () => void;
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   onChangeFunction: ({
     updatedFilters,
@@ -62,6 +62,8 @@ const SavedFilterEditComponent = ({
             selectedId: "",
             selectedName: "",
             selectedCode: "",
+            shareWithTeam: false,
+            allowTeamEdit: false,
           },
           activeFilterTabIndex: -1,
         } as FilterMasterStateProps)
@@ -99,7 +101,7 @@ const SavedFilterEditComponent = ({
         dropdownData={dropdownData}
         searchTerm={searchTerm}
         setSearchTerm={setSearchTerm}
-        setSavedFilterModalOpen={setSavedFilterModalOpen}
+        onSaveFilterButtonClick={onSaveFilterButtonClick}
         setDeleteFilterModalOpen={setDeleteFilterModalOpen}
         onChangeFunction={onChangeFunction}
         filterComponentOptions={filterComponentOptions}