rez-table-listing-mui 1.3.18 → 1.3.20

package/package.json

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

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

@@ -16,6 +16,22 @@ interface FormDropdownProps {
   onValueChange?: () => void;
 }
 
+// Allowed date-based operators
+const DATE_ALLOWED_OPERATORS = [
+  "equal",
+  "before",
+  "after",
+  "between",
+  "is",
+  "today",
+  "is_before",
+  "is_after",
+  "is_on_or_before",
+  "is_on_or_after",
+  "empty",
+  "not_empty",
+];
+
 const FormDropdown = ({
   filter,
   control,
@@ -56,6 +72,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") &&
@@ -99,3 +128,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;