rez-table-listing-mui 1.3.31 → 1.3.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.31",
+  "version": "1.3.33",
   "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

@@ -24,6 +24,7 @@ import {
   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";
@@ -52,6 +53,8 @@ const SavedFilterModalView = ({
   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);
 
@@ -62,9 +65,11 @@ const SavedFilterModalView = ({
     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) {
+    if (!filterId && !filterObj1) {
       setFilterMaster((prev: any) => {
         if (!prev) return prev;
         return {
@@ -166,14 +171,13 @@ const SavedFilterModalView = ({
 
     if (!selectedId) return "Save Filter"; // new filter
 
-    const filterObj = columnsData?.saved_filter?.find(
+    const filterObj = columnsData?.shared_filter?.find(
       (f: any) => f.id === selectedId
     );
     if (filterObj?.is_shared) {
-      return "My Filter";
+      return "Shared Filter";
     }
-
-    return "Shared Filter";
+    return "My Filter";
   };
 
   const handleSave = () => {
@@ -190,13 +194,20 @@ const SavedFilterModalView = ({
     (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 && 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" }}>
@@ -252,6 +263,7 @@ const SavedFilterModalView = ({
         <TextField
           fullWidth
           minRows={3}
+          value={discriptionValue}
           size="small"
           sx={{
             mb: 1,
@@ -278,7 +290,7 @@ const SavedFilterModalView = ({
           (Max. 300 Characters)
         </Typography>
         {/* Sharing Controls */}
-        {showCheckboxes && shouldShowSharingControls && (
+        {shouldShowSharingControls && (showCheckboxes || isshow) && (
           <Box
             sx={{
               display: "flex",
@@ -321,7 +333,7 @@ const SavedFilterModalView = ({
           </Box>
         )}
         {/* prefields */}
-        {showPrefields && (
+        {showPrefields && !isshow && (
           <Box
             sx={{
               display: "grid",
@@ -344,7 +356,6 @@ const SavedFilterModalView = ({
 
               <TextField
                 fullWidth
-                sx={{ bgcolor: "#0E0C0B0F" }}
                 size="small"
                 value={
                   selectedFilter?.created_date
@@ -358,6 +369,10 @@ const SavedFilterModalView = ({
                       <CalendarTodayIcon fontSize="small" />
                     </IconButton>
                   ),
+                  sx: {
+                    backgroundColor: "#0E0C0B0F",
+                    borderRadius: "4px",
+                  },
                 }}
               />
             </Box>
@@ -375,10 +390,15 @@ const SavedFilterModalView = ({
               </Typography>
               <TextField
                 fullWidth
-                sx={{ bgcolor: "#0E0C0B0F" }}
                 size="small"
-                value={selectedFilter?.name || ""} // Use created_by (assuming it can be name or ID)
-                InputProps={{ readOnly: true }}
+                value={selectedFilter?.created_by || ""}
+                InputProps={{
+                  readOnly: true,
+                  sx: {
+                    backgroundColor: "#0E0C0B0F",
+                    borderRadius: "4px",
+                  },
+                }}
               />
             </Box>
 
@@ -396,7 +416,6 @@ const SavedFilterModalView = ({
 
               <TextField
                 fullWidth
-                sx={{ bgcolor: "#0E0C0B0F" }}
                 size="small"
                 value={
                   selectedFilter?.modified_date
@@ -410,6 +429,11 @@ const SavedFilterModalView = ({
                       <CalendarTodayIcon fontSize="small" />
                     </IconButton>
                   ),
+
+                  sx: {
+                    backgroundColor: "#0E0C0B0F",
+                    borderRadius: "4px",
+                  },
                 }}
               />
             </Box>
@@ -427,11 +451,14 @@ const SavedFilterModalView = ({
               </Typography>
               <TextField
                 fullWidth
-                sx={{ bgcolor: "#0E0C0B0F" }}
                 size="small"
                 value={selectedFilter?.modified_by || ""}
                 InputProps={{
                   readOnly: true,
+                  sx: {
+                    backgroundColor: "#0E0C0B0F",
+                    borderRadius: "4px",
+                  },
                 }}
               />
             </Box>

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

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

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

@@ -1,3 +1,5 @@
+// !! 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";
@@ -16,24 +18,6 @@ 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,
@@ -74,19 +58,6 @@ 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") &&
@@ -130,107 +101,3 @@ 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,7 +33,10 @@ const FormTextfield = ({
               padding: "12px 20px",
             },
           }}
-          type={filter?.filter_attribute_data_type || "text"}
+          // type={filter?.filter_attribute_data_type || "text" || "number"}
+          type={
+            filter?.filter_attribute_data_type === "number" ? "number" : "text"
+          }
           placeholder={"Enter value"}
           disabled={isLoading}
           onChange={(e) => {

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

@@ -350,7 +350,7 @@ const FilterForm = ({
                                 `${filter?.filter_attribute_name}.operator`
                               );
 
-                              // ✅ Toggle dummy field to force form dirty
+                              // Toggle dummy field to force form dirty
                               const dummy = watch("dummyChange");
                               setValue(
                                 "dummyChange",
@@ -469,7 +469,7 @@ const FilterForm = ({
 
 export default FilterForm;
 
-// !! PLEASE DO NOT DELETE THIS COMMENT BLOCK !!
+// !! PLEASE DO NOT DELETE THIS COMMENTED BLOCK !!
 // import {
 //   Box,
 //   Button,
@@ -831,7 +831,7 @@ export default FilterForm;
 //                                 `${filter?.filter_attribute_name}.operator`
 //                               );
 
-//                               // ✅ Toggle dummy field to force form dirty
+//                               // Toggle dummy field to force form dirty
 //                               const dummy = watch("dummyChange");
 //                               setValue(
 //                                 "dummyChange",
@@ -850,60 +850,108 @@ export default FilterForm;
 //                         </Box>
 
 //                         <Box>
-//                           {filter?.filter_attribute_data_type === "text" ||
-//                           filter?.filter_attribute_data_type === "number" ? (
-//                             <FormTextfield
-//                               filter={filter}
-//                               control={control}
-//                               onValueChange={updateFiltersFromForm}
-//                             />
-//                           ) : filter?.filter_attribute_data_type === "year" ? (
-//                             <FormDatePicker
-//                               filter={filter}
-//                               control={control}
-//                               views={["year"]}
-//                               onValueChange={updateFiltersFromForm}
-//                             />
-//                           ) : filter?.filter_attribute_data_type === "date" ? (
-//                             <FormDatePicker
-//                               filter={filter}
-//                               control={control}
-//                               onValueChange={updateFiltersFromForm}
-//                             />
-//                           ) : filter?.filter_attribute_data_type ===
-//                             "select" ? (
-//                             <FormMultiSelect
-//                               filter={filter}
-//                               control={control}
-//                               dropdownData={dropdownData}
-//                               onValueChange={updateFiltersFromForm}
-//                             />
-//                           ) : filter?.filter_attribute_data_type ===
-//                             "multiselect" ? (
-//                             <FormMultiSelect
-//                               filter={filter}
-//                               control={control}
-//                               dropdownData={dropdownData}
-//                               onValueChange={updateFiltersFromForm}
-//                             />
-//                           ) : filter?.filter_attribute_data_type === "radio" ? (
-//                             <FormMultiSelect
-//                               filter={filter}
-//                               control={control}
-//                               dropdownData={dropdownData}
-//                               onValueChange={updateFiltersFromForm}
-//                             />
-//                           ) : filter?.filter_attribute_data_type ===
-//                             "checkbox" ? (
-//                             <FormMultiSelect
-//                               filter={filter}
-//                               control={control}
-//                               dropdownData={dropdownData}
-//                               onValueChange={updateFiltersFromForm}
-//                             />
-//                           ) : (
-//                             <FormControl fullWidth size="small" />
-//                           )}
+//                           {(() => {
+//                             const fieldValue = formValues[
+//                               filter?.filter_attribute_name as string
+//                             ] as
+//                               | { value: string | string[]; operator: string }
+//                               | undefined;
+
+//                             const operator = fieldValue?.operator;
+
+//                             // Operators that should show a Date Picker
+//                             const dateAllowedOperators = [
+//                               "equal",
+//                               "before",
+//                               "after",
+//                               "between",
+//                               "is",
+//                               "today",
+//                               "is_before",
+//                               "is_after",
+//                               "is_on_or_before",
+//                               "is_on_or_after",
+//                               "empty",
+//                               "not_empty",
+//                             ];
+
+//                             const showDatePicker =
+//                               filter?.filter_attribute_data_type === "date" &&
+//                               operator &&
+//                               dateAllowedOperators.includes(operator);
+
+//                             if (
+//                               filter?.filter_attribute_data_type === "text" ||
+//                               filter?.filter_attribute_data_type === "number"
+//                             ) {
+//                               return (
+//                                 <FormTextfield
+//                                   filter={filter}
+//                                   control={control}
+//                                   onValueChange={updateFiltersFromForm}
+//                                 />
+//                               );
+//                             }
+
+//                             if (
+//                               filter?.filter_attribute_data_type === "select"
+//                             ) {
+//                               return (
+//                                 <FormMultiSelect
+//                                   filter={filter}
+//                                   control={control}
+//                                   dropdownData={dropdownData}
+//                                   onValueChange={updateFiltersFromForm}
+//                                 />
+//                               );
+//                             }
+
+//                             if (
+//                               filter?.filter_attribute_data_type ===
+//                               "multiselect"
+//                             ) {
+//                               return (
+//                                 <FormMultiSelect
+//                                   filter={filter}
+//                                   control={control}
+//                                   dropdownData={dropdownData}
+//                                   onValueChange={updateFiltersFromForm}
+//                                 />
+//                               );
+//                             }
+
+//                             if (filter?.filter_attribute_data_type === "year") {
+//                               return (
+//                                 <FormDatePicker
+//                                   filter={filter}
+//                                   control={control}
+//                                   views={["year"]}
+//                                   onValueChange={updateFiltersFromForm}
+//                                 />
+//                               );
+//                             }
+
+//                             // DATE LOGIC
+//                             if (showDatePicker) {
+//                               return (
+//                                 <FormDatePicker
+//                                   filter={filter}
+//                                   control={control}
+//                                   onValueChange={updateFiltersFromForm}
+//                                 />
+//                               );
+//                             } else {
+//                               return (
+//                                 <FormTextfield
+//                                   filter={filter}
+//                                   control={control}
+//                                   onValueChange={updateFiltersFromForm}
+//                                 />
+//                               );
+//                             }
+
+//                             return <FormControl fullWidth size="small" />;
+//                           })()}
 //                         </Box>
 //                       </Box>
 //                     );

package/src/listing/components/filter/components/forms/utils/filter-date-input-resolver.tsx

@@ -4,37 +4,20 @@ import FormTextfield from "../components/Textfield";
 import FormDatePicker from "../components/Date";
 import FormMultiSelect from "../components/Multi-Select";
 
-export type DateOperator =
-  | "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";
-
-export const DATE_ALLOWED_OPERATORS: DateOperator[] = [
+// Operators that should show a Date Picker
+const dateAllowedOperators = [
   "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",
+  "empty",
+  "not_empty",
 ];
 
 export const resolveFilterInput = ({
@@ -50,20 +33,10 @@ export const resolveFilterInput = ({
   dropdownData: any;
   updateFiltersFromForm: () => void;
 }) => {
-  const isDateType = filter.filter_attribute_data_type === "date";
-
-  const showDatePicker =
-    isDateType && operator && DATE_ALLOWED_OPERATORS.includes(operator as any);
+  const dataType = filter?.filter_attribute_data_type;
 
-  const showTextInsteadOfDate =
-    isDateType &&
-    (!operator || !DATE_ALLOWED_OPERATORS.includes(operator as any));
-
-  // TEXT / NUMBER -> Always TextField
-  if (
-    filter?.filter_attribute_data_type === "text" ||
-    filter?.filter_attribute_data_type === "number"
-  ) {
+  // TEXT / NUMBER → always textfield
+  if (dataType === "text" || dataType === "number") {
     return (
       <FormTextfield
         filter={filter}
@@ -73,8 +46,8 @@ export const resolveFilterInput = ({
     );
   }
 
-  // YEAR
-  if (filter?.filter_attribute_data_type === "year") {
+  // YEAR → DatePicker (Year mode)
+  if (dataType === "year") {
     return (
       <FormDatePicker
         filter={filter}
@@ -85,18 +58,21 @@ export const resolveFilterInput = ({
     );
   }
 
-  // DATE LOGIC
-  if (showDatePicker) {
-    return (
-      <FormDatePicker
-        filter={filter}
-        control={control}
-        onValueChange={updateFiltersFromForm}
-      />
-    );
-  }
+  // DATE FIELD
+  if (dataType === "date") {
+    const showDatePicker = operator && dateAllowedOperators.includes(operator);
+
+    if (showDatePicker) {
+      // Date Picker
+      return (
+        <FormDatePicker
+          filter={filter}
+          control={control}
+          onValueChange={updateFiltersFromForm}
+        />
+      );
+    }
 
-  if (showTextInsteadOfDate) {
     return (
       <FormTextfield
         filter={filter}
@@ -106,7 +82,7 @@ export const resolveFilterInput = ({
     );
   }
 
-  // MULTISELECT / SELECT / RADIO / CHECKBOX
+  // SELECT / MULTISELECT / RADIO / CHECKBOX
   if (
     filter?.filter_attribute_data_type !== undefined &&
     ["select", "multiselect", "radio", "checkbox"].includes(