rez-table-listing-mui 1.3.42 → 1.3.43

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

@@ -1,517 +0,0 @@
-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;