rez-table-listing-mui 1.3.30 → 1.3.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.30",
+  "version": "1.3.31",
   "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,480 @@
+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 { 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 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;
+
+    // NEW FILTER → RESET everything
+    if (!filterId) {
+      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?.saved_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);
+    }
+  }, [
+    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?.saved_filter?.find(
+      (f: any) => f.id === selectedId
+    );
+    if (filterObj?.is_shared) {
+      return "My Filter";
+    }
+
+    return "Shared 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
+  );
+
+  // Check if we should show prefields
+  const showPrefields =
+    selectedSavedFilter && selectedSavedFilter.is_editable === "true";
+
+  // Disable checkboxes if prefields are shown
+  const showCheckboxes = !showPrefields;
+
+  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}
+          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 */}
+        {showCheckboxes && shouldShowSharingControls && (
+          <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 && (
+          <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
+                sx={{ bgcolor: "#0E0C0B0F" }}
+                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>
+                  ),
+                }}
+              />
+            </Box>
+
+            <Box>
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                  fontWeight: 500,
+                  color: "#6b6b6b",
+                  mb: 0.5,
+                }}
+              >
+                Created By*
+              </Typography>
+              <TextField
+                fullWidth
+                sx={{ bgcolor: "#0E0C0B0F" }}
+                size="small"
+                value={selectedFilter?.name || ""} // Use created_by (assuming it can be name or ID)
+                InputProps={{ readOnly: true }}
+              />
+            </Box>
+
+            <Box>
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                  fontWeight: 500,
+                  color: "#6b6b6b",
+                  mb: 0.5,
+                }}
+              >
+                Modified On*
+              </Typography>
+
+              <TextField
+                fullWidth
+                sx={{ bgcolor: "#0E0C0B0F" }}
+                size="small"
+                value={
+                  selectedFilter?.modified_date
+                    ? new Date(selectedFilter.modified_date).toLocaleString()
+                    : ""
+                }
+                InputProps={{
+                  readOnly: true,
+                  endAdornment: (
+                    <IconButton size="small">
+                      <CalendarTodayIcon fontSize="small" />
+                    </IconButton>
+                  ),
+                }}
+              />
+            </Box>
+
+            <Box>
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                  fontWeight: 500,
+                  color: "#6b6b6b",
+                  mb: 0.5,
+                }}
+              >
+                Modified By*
+              </Typography>
+              <TextField
+                fullWidth
+                sx={{ bgcolor: "#0E0C0B0F" }}
+                size="small"
+                value={selectedFilter?.modified_by || ""}
+                InputProps={{
+                  readOnly: true,
+                }}
+              />
+            </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/Date.tsx

@@ -18,7 +18,7 @@ const FormDatePicker = ({
   filter,
   control,
   sx,
-  views = ["day"],
+  views = ["day", "month", "year"],
   onValueChange,
 }: FormDatePickerProps) => {
   const isRange = filter.filter_operator === "between";

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

@@ -1,5 +1,3 @@
-// !! DON'T DELETE THIS OLD CODE !! //
-
 import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
 import { Controller, UseFormSetValue } from "react-hook-form";
 import { FilterStateProps } from "../../../../../types/filter";
@@ -18,6 +16,24 @@ interface FormDropdownProps {
   onValueChange?: () => void;
 }
 
+// Allowed date-based operators
+const DATE_ALLOWED_OPERATORS = [
+  "equal",
+  "before",
+  "after",
+  "between",
+  "is",
+  "today",
+  "is_day_before",
+  "is_day_after",
+  "is_month_before",
+  "is_month_after",
+  "is_before",
+  "is_after",
+  "is_on_or_before",
+  "is_on_or_after",
+];
+
 const FormDropdown = ({
   filter,
   control,
@@ -58,6 +74,19 @@ const FormDropdown = ({
 
               field.onChange(e);
 
+              // Reset value if operator switches date → non-date or non-date → date
+              if (filter.filter_attribute_data_type === "date") {
+                const wasDateOp = DATE_ALLOWED_OPERATORS.includes(oldOperator);
+                const isDateOpNow =
+                  DATE_ALLOWED_OPERATORS.includes(newOperator);
+
+                if (wasDateOp !== isDateOpNow) {
+                  setValue(`${filter?.filter_attribute_name}.value`, "", {
+                    shouldDirty: true,
+                  });
+                }
+              }
+
               if (
                 (filter?.filter_attribute_data_type === "date" ||
                   filter?.filter_attribute_data_type === "year") &&
@@ -101,3 +130,107 @@ const FormDropdown = ({
 };
 
 export default FormDropdown;
+
+// !! DON'T DELETE THIS OLD CODE !! //
+
+// import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
+// import { Controller, UseFormSetValue } from "react-hook-form";
+// import { FilterStateProps } from "../../../../../types/filter";
+// import moment from "moment";
+
+// interface FormDropdownProps {
+//   filter: FilterStateProps;
+//   control: any;
+//   setValue: UseFormSetValue<any>;
+//   dropdownList: {
+//     label?: string;
+//     value?: string;
+//   }[];
+//   isLoading?: boolean;
+//   sx?: SxProps<Theme>;
+//   onValueChange?: () => void;
+// }
+
+// const FormDropdown = ({
+//   filter,
+//   control,
+//   setValue,
+//   dropdownList,
+//   isLoading = false,
+//   sx,
+//   onValueChange,
+// }: FormDropdownProps) => {
+//   return (
+//     <Controller
+//       name={`${filter?.filter_attribute_name}.operator`}
+//       control={control}
+//       defaultValue={filter?.filter_operator || dropdownList?.[0]?.value || ""}
+//       render={({ field }) => (
+//         <FormControl sx={sx} size="small">
+//           <Select
+//             {...field}
+//             variant="standard"
+//             sx={{
+//               fontSize: "0.875rem",
+//               minWidth: 50,
+//               border: "none",
+//               boxShadow: "none",
+//               "& .MuiSelect-icon": {
+//                 top: "45%",
+//                 transform: "translateY(-50%)",
+//                 "& .MuiOutlinedInput-input": {
+//                   padding: "12px 20px",
+//                 },
+//               },
+//             }}
+//             disabled={isLoading}
+//             disableUnderline
+//             onChange={(e) => {
+//               const newOperator = e.target.value;
+//               const oldOperator = field.value;
+
+//               field.onChange(e);
+
+//               if (
+//                 (filter?.filter_attribute_data_type === "date" ||
+//                   filter?.filter_attribute_data_type === "year") &&
+//                 newOperator !== oldOperator
+//               ) {
+//                 if (newOperator === "today") {
+//                   setValue(
+//                     `${filter?.filter_attribute_name}.value`,
+//                     moment().format("YYYY-MM-DD"),
+//                     {
+//                       shouldDirty: true,
+//                     }
+//                   );
+//                 } else if (newOperator === "between") {
+//                   setValue(`${filter?.filter_attribute_name}.value`, ["", ""], {
+//                     shouldDirty: true,
+//                   });
+//                 } else if (
+//                   oldOperator === "between" ||
+//                   oldOperator === "today"
+//                 ) {
+//                   setValue(`${filter?.filter_attribute_name}.value`, "", {
+//                     shouldDirty: true,
+//                   });
+//                 }
+//               }
+
+//               onValueChange?.();
+//             }}
+//           >
+//             {dropdownList?.map((item, idx) => (
+//               <MenuItem key={idx} value={item.value}>
+//                 {item.label}
+//               </MenuItem>
+//             ))}
+//           </Select>
+//         </FormControl>
+//       )}
+//     />
+//   );
+// };
+
+// export default FormDropdown;

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

@@ -33,10 +33,7 @@ const FormTextfield = ({
               padding: "12px 20px",
             },
           }}
-          // type={filter?.filter_attribute_data_type || "text" || "number"}
-          type={
-            filter?.filter_attribute_data_type === "number" ? "number" : "text"
-          }
+          type={filter?.filter_attribute_data_type || "text"}
           placeholder={"Enter value"}
           disabled={isLoading}
           onChange={(e) => {