rez-table-listing-mui 1.0.37 → 1.0.39

package/src/App.tsx

@@ -9,6 +9,8 @@ import {
   useDeleteFilterAPI,
   useEntityTableAPI,
   useSavedFilterAPI,
+  useSaveSettingsDataAPI,
+  useSettingsDropDownAPI,
   useUpdateFilterAPI,
 } from "./libs/hooks/useEntityTableAPI";
 import {
@@ -17,6 +19,8 @@ import {
 } from "./libs/hooks/useEntityTableHooks";
 import LoginButton from "./components/login";
 import { CraftTableFilter } from ".";
+import { useCraftTableFilterSettings } from "./libs/hooks/useCraftTableFilterSettings";
+import QuickFilterSettings from "./components/table-settings";
 // import { ENTITY_TYPE } from "./libs/utils/common";
 
 function App() {
@@ -25,13 +29,22 @@ function App() {
   const [columns, setColumns] = useState<any[]>([]);
   const [searchTerm, setSearchTerm] = useState("");
   // const [data, setData] = useState<Person[]>(() => makeData(50, 3, 2));
-  // const [entity_type] = useState(ENTITY_TYPE); //OR AYR BRD
+  // const [entity_type] = useState(ENTITY_TYPE); //OR UPR BRD
 
   const [selectedTab, setSelectedTab] = useState("ALL");
 
   const tableStates = useCraftTable();
+  const filterSettingStates = useCraftTableFilterSettings();
+
   const { filters, setFilters, filterMaster, filterToDelete } = tableStates;
 
+  const {
+    showListViewSettings,
+    setShowListViewSettings,
+    settingsData,
+    setSettingsData,
+  } = filterSettingStates;
+
   const { defaultColumns } = useDefaultColumns();
 
   const { metaQuery } = useFetchData("AYR");
@@ -46,6 +59,16 @@ function App() {
   const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
 
   const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
+  const { settingsTabDropdownData, settingsTabDropdownPending } =
+    useSettingsDropDownAPI({
+      entity_type: "AYR",
+      column: filterSettingStates?.quickTabStates?.attribute,
+      sort_by: filterSettingStates?.quickTabStates?.sorting,
+    });
+
+  const { saveSettingsAPIData } = useSaveSettingsDataAPI({
+    payload: filterSettingStates?.settingsData,
+  });
 
   useEffect(() => {
     // setTimeout(() => {
@@ -68,16 +91,23 @@ function App() {
     setFilters(detailsQuery.data ?? []);
   }, [detailsQuery.data]);
 
-  const enableServerSideSorting = false;
+  useEffect(() => {
+    setSettingsData(saveSettingsAPIData?.layout_json);
+    console.log("settingsData", settingsData);
+  }, [saveSettingsAPIData]);
 
-  const { tableData, isTableDataPending } = useEntityTableAPI({
+  //For server side sorting
+  const enableServerSideSorting = true;
+
+  const { tableData } = useEntityTableAPI({
     page: 0,
     size: 50,
     entity_type: "AYR",
     tabs: {
       columnName: "status",
       sortBy: "ASC",
-      value: "active",
+      value:
+        selectedTab.toLowerCase() === "all" ? "" : selectedTab.toLowerCase(),
     },
     quickFilter: tableStates.filters,
     sortby: [
@@ -157,7 +187,16 @@ function App() {
       filterDetails: quickFilter,
     };
     const entity_type = "SFM";
-    savedMutation.mutate({ entity_type, payload });
+    savedMutation.mutate(
+      { entity_type, payload },
+      {
+        onSuccess: () => {},
+        onError: (error: any) => {
+          const msg = error?.response?.data?.message;
+          console.log("Error in saving filter", msg, error);
+        },
+      }
+    );
   };
 
   // API to handle removing or deleting a filter
@@ -216,24 +255,6 @@ function App() {
         //   isLoading: isTableDataPending || detailsQuery.isPending,
         //   // loaderText: "Loading, Please wait...",
         // }}
-        topbarOptions={{
-          tableStates,
-          leftSideComponent: (
-            <TableTabs
-              activeTab={selectedTab}
-              tableStates={tableStates}
-              tabsData={tabsData}
-              onClick={(state) => {
-                setSelectedTab(state);
-              }}
-            />
-          ),
-          searchValue: searchTerm,
-          onSearchChange: (val) => setSearchTerm(val),
-          showFilterToggle: true,
-          onFilterButtonClick: () =>
-            tableStates.setShowTableFilter(!tableStates.showTableFilter),
-        }}
         paginationOptions={{
           showPagination: true,
           paginationPosition: "top",
@@ -244,20 +265,54 @@ function App() {
           renderStatus: handleRenderStatus,
           renderAction: handleRenderAction,
         }}
+        // emptyListComponent={<div>No data found</div>}
         filterOptions={{
-          show: tableStates.showTableFilter,
+          show: tableStates?.showTableFilter,
           component: (
             <CraftTableFilter
               tableStates={tableStates}
-              columnsData={metaQuery.data || []}
+              onClose={() => tableStates.setShowTableFilter(false)}
+              onUpdateFilter={handleUpdateFilter}
+              columnsData={metaQuery.data || {}}
               dropdownData={dropdownData || []}
               onDeleteFilter={handleRemoveFilter}
               onSaveFilter={handleSaveFilter}
-              onUpdateFilter={handleUpdateFilter}
-              onClose={() => tableStates.setShowTableFilter(false)}
             />
           ),
         }}
+        topbarOptions={{
+          tableStates,
+          leftSideComponent: (
+            <>
+              <TableTabs
+                columns={columns}
+                settingsOptions={{
+                  showIcon: true,
+                  onClick: () => setShowListViewSettings(!showListViewSettings),
+                }}
+                activeTab={selectedTab}
+                tableStates={tableStates}
+                tabsData={tabsData}
+                onClick={(state) => {
+                  setSelectedTab(state);
+                }}
+              />
+
+              <QuickFilterSettings
+                filterSettingStates={filterSettingStates}
+                onClose={() => setShowListViewSettings(false)}
+                columnsData={metaQuery.data || {}}
+                tabsApiData={settingsTabDropdownData || []}
+                tabsApiDataLoading={settingsTabDropdownPending}
+              />
+            </>
+          ),
+          searchValue: searchTerm,
+          onSearchChange: (val) => setSearchTerm(val),
+          showFilterToggle: true,
+          onFilterButtonClick: () =>
+            tableStates.setShowTableFilter(!tableStates.showTableFilter),
+        }}
       />
     </div>
   );

package/src/components/common/confirm-modal/index.tsx

@@ -17,7 +17,7 @@ import { Theme } from "@emotion/react";
 // Types for the component props
 export interface ModalButton {
   label: string;
-  onClick: (inputValue?: string) => void;
+  onClick: (inputValue?: string, error?: string, setError?: any) => void;
   variant?: "text" | "outlined" | "contained";
   color?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
   disabled?: boolean;
@@ -58,14 +58,14 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
   fullWidth = true,
 }) => {
   const [inputValue, setInputValue] = useState(input?.defaultValue || "");
-
+  const [error, setError] = useState("");
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.target.value);
   };
 
   const handleButtonClick = (button: ModalButton) => {
     if (input) {
-      button.onClick(inputValue);
+      button.onClick(inputValue, error, setError);
     } else {
       button.onClick();
     }
@@ -168,6 +168,11 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
                 },
               }}
             />
+            {error && (
+              <Typography variant="body2" color="error.main">
+                {error}
+              </Typography>
+            )}
           </Box>
         )}
       </DialogContent>

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

@@ -4,7 +4,7 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import moment from "moment";
 import { UpdatedFilterStateProps } from "../../../../../types/filter";
-import { SxProps, Theme, Box } from "@mui/material";
+import { SxProps, Theme } from "@mui/material";
 
 type FormDatePickerProps = {
   filter: UpdatedFilterStateProps;
@@ -18,173 +18,121 @@ const FormDatePicker = ({
   filter,
   control,
   sx,
-  views = ["day", "month", "year"],
+  views = ["day", "month", "year"], // default to full date picker
   onValueChange,
 }: FormDatePickerProps) => {
-  const isRange = filter.filter_operator === "between";
-
-  console.log("filter", filter.filter_operator);
-
   return (
-    <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <Box display="flex" gap={1}>
-        <Controller
-          name={`${filter?.name}.value`}
-          control={control}
-          defaultValue={
-            isRange
-              ? ["", ""] // range default
-              : filter.filter_value
-              ? moment(filter.filter_value, "YYYY-MM-DD").toDate() //
-              : null
-          }
-          render={({ field }) => {
-            const value = field.value;
-
-            if (isRange) {
-              const fromDate = Array.isArray(value) ? value[0] : "";
-              const toDate = Array.isArray(value) ? value[1] : "";
-
-              return (
-                <>
-                  <DatePicker
-                    views={views}
-                    value={
-                      fromDate ? moment(fromDate, "YYYY-MM-DD").toDate() : null //
-                    }
-                    onChange={(date) => {
-                      let formatted = "";
-                      if (date) {
-                        formatted =
-                          views?.length === 1 && views[0] === "year"
-                            ? moment(date).format("YYYY")
-                            : moment(date).format("YYYY-MM-DD"); //
-                      }
-                      const updated: [string, string] = [
-                        formatted,
-                        toDate || "",
-                      ];
-                      field.onChange(updated);
-                      onValueChange?.();
-                    }}
-                    format={
-                      views?.length === 1 && views[0] === "year"
-                        ? "yyyy"
-                        : "dd-MM-yyyy"
-                    }
-                    sx={{
-                      "& .MuiOutlinedInput-input": {
-                        padding: "12px 20px",
-                      },
-                      ...sx,
-                    }}
-                    slotProps={{
-                      textField: {
-                        size: "small",
-                        fullWidth: true,
-                        placeholder:
-                          views?.length === 1 && views[0] === "year"
-                            ? "YYYY"
-                            : "From Date",
-                      },
-                    }}
-                  />
-
-                  <DatePicker
-                    views={views}
-                    value={
-                      toDate ? moment(toDate, "YYYY-MM-DD").toDate() : null //
-                    }
-                    onChange={(date) => {
-                      let formatted = "";
-                      if (date) {
-                        formatted =
-                          views?.length === 1 && views[0] === "year"
-                            ? moment(date).format("YYYY")
-                            : moment(date).format("YYYY-MM-DD"); //
-                      }
-                      const updated: [string, string] = [
-                        fromDate || "",
-                        formatted,
-                      ];
-                      field.onChange(updated);
-                      onValueChange?.();
-                    }}
-                    format={
-                      views?.length === 1 && views[0] === "year"
-                        ? "yyyy"
-                        : "dd-MM-yyyy"
-                    }
-                    sx={{
-                      "& .MuiOutlinedInput-input": {
-                        padding: "12px 20px",
-                      },
-                      ...sx,
-                    }}
-                    slotProps={{
-                      textField: {
-                        size: "small",
-                        fullWidth: true,
-                        placeholder:
-                          views?.length === 1 && views[0] === "year"
-                            ? "YYYY"
-                            : "To Date",
-                      },
-                    }}
-                  />
-                </>
-              );
+    <Controller
+      name={`${filter?.name}.value`} // Use consistent field structure
+      control={control}
+      defaultValue={
+        filter.filter_value
+          ? moment(filter.filter_value, "DD-MM-YYYY").toDate()
+          : null
+      }
+      render={({ field }) => (
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <DatePicker
+            {...field}
+            views={views}
+            value={
+              field.value ? moment(field.value, "DD-MM-YYYY").toDate() : null
             }
-
-            // single date picker fallback
-            return (
-              <DatePicker
-                {...field}
-                views={views}
-                value={
-                  field.value
-                    ? moment(field.value, "YYYY-MM-DD").toDate() //
-                    : null
+            onChange={(date) => {
+              let formatted = "";
+              if (date) {
+                if (views?.length === 1 && views[0] === "year") {
+                  formatted = moment(date).format("YYYY");
+                } else {
+                  formatted = moment(date).format("DD-MM-YYYY");
                 }
-                onChange={(date) => {
-                  let formatted = "";
-                  if (date) {
-                    formatted =
-                      views?.length === 1 && views[0] === "year"
-                        ? moment(date).format("YYYY")
-                        : moment(date).format("YYYY-MM-DD"); //
-                  }
-                  field.onChange(formatted);
-                  onValueChange?.();
-                }}
-                format={
+              }
+              field.onChange(formatted);
+              onValueChange?.();
+            }}
+            format={
+              views?.length === 1 && views[0] === "year" ? "yyyy" : "dd-MM-yyyy"
+            }
+            sx={{
+              "& .MuiOutlinedInput-input": {
+                padding: "12px 20px",
+              },
+              ...sx,
+            }}
+            slotProps={{
+              textField: {
+                size: "small",
+                fullWidth: true,
+                placeholder:
                   views?.length === 1 && views[0] === "year"
-                    ? "yyyy"
-                    : "dd-MM-yyyy"
-                }
-                sx={{
-                  "& .MuiOutlinedInput-input": {
-                    padding: "12px 20px",
-                  },
-                  ...sx,
-                }}
-                slotProps={{
-                  textField: {
-                    size: "small",
-                    fullWidth: true,
-                    placeholder:
-                      views?.length === 1 && views[0] === "year"
-                        ? "YYYY"
-                        : "DD-MM-YYYY",
-                  },
-                }}
-              />
-            );
-          }}
-        />
-      </Box>
-    </LocalizationProvider>
+                    ? "YYYY"
+                    : "DD-MM-YYYY",
+              },
+            }}
+          />
+        </LocalizationProvider>
+      )}
+    />
   );
 };
 
 export default FormDatePicker;
+
+// import { Controller } from "react-hook-form";
+// import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+// import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+// import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+// import moment from "moment";
+// import { UpdatedFilterStateProps } from "../../../../../types/filter";
+// import { SxProps, Theme } from "@mui/material";
+
+// const FormDatePicker = ({
+//   filter,
+//   control,
+//   sx,
+// }: {
+//   filter: UpdatedFilterStateProps;
+//   control: any;
+//   sx?: SxProps<Theme>;
+// }) => {
+//   return (
+//     <Controller
+//       name={`${filter?.name}.value`} // or use a consistent structure like `filters.${index}.filter_value`
+//       control={control}
+//       defaultValue={
+//         filter.filter_value
+//           ? moment(filter.filter_value, "DD-MM-YYYY").toDate()
+//           : null
+//       }
+//       render={({ field }) => (
+//         <LocalizationProvider dateAdapter={AdapterDateFns}>
+//           <DatePicker
+//             sx={{
+//               "& .MuiOutlinedInput-input": {
+//                 padding: "12px 20px",
+//               },
+//             }}
+//             {...field}
+//             value={
+//               field.value ? moment(field.value, "DD-MM-YYYY").toDate() : null
+//             }
+//             onChange={(date) => {
+//               const formatted = date ? moment(date).format("DD-MM-YYYY") : "";
+//               field.onChange(formatted);
+//             }}
+//             format="dd-MM-yyyy"
+//             slotProps={{
+//               textField: {
+//                 size: "small",
+//                 fullWidth: true,
+//                 placeholder: "DD-MM-YYYY",
+//               },
+//             }}
+//           />
+//         </LocalizationProvider>
+//       )}
+//     />
+//   );
+// };
+
+// export default FormDatePicker;

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

@@ -48,65 +48,15 @@ const FilterCriteria = ({
   const { filters, setFilters } = tableStates;
   const filterButtonRef = useRef<HTMLButtonElement>(null);
 
-  //Remove this function once date with range is fixed
-  // const handleAddFilter = (column: FilterColumnsListProps) => {
-  //   const dropdownOptions = columnsData.operation_list[column.data_type];
-
-  //   // console.log("dropdownOptionssssss", dropdownOptions);
-
-  //   const defaultValue = column.data_type === "multiselect" ? [] : "";
-  //   console.log("defaultValue", defaultValue);
-
-  //   const defaultOperator = dropdownOptions?.[0]?.value || "";
-  //   // console.log("defaultOperator", defaultOperator);
-
-  //   const matchingDropdownList =
-  //     columnsData.operation_list[column.data_type] || [];
-
-  //   // console.log("matchingDropdownList", matchingDropdownList);
-
-  //   const newFilter = {
-  //     filter_attribute: column.attribute_key,
-  //     filter_operator: defaultOperator,
-  //     filter_value: defaultValue,
-  //   };
-
-  //   const newSelectedFilter = {
-  //     ...newFilter,
-  //     id: column.id,
-  //     name: column.name,
-  //     data_type: column.data_type,
-  //     dropdown_list: matchingDropdownList,
-  //   };
-
-  //   setFilters((prev) => [...prev, newFilter]);
-  //   setSelectedFilters((prev) => [...prev, newSelectedFilter]);
-  //   //   if (editMode) {
-  //   //     setEditFilters((prev) => [...prev, newFilter]);
-  //   //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
-  //   //   } else {
-  //   //     setFilters((prev) => [...prev, newFilter]);
-  //   //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
-  //   //   }
-
-  //   setShowFilterOption(false);
-  // };
-
-  // Updated this function to handle the addition of date with
-
   const handleAddFilter = (column: FilterColumnsListProps) => {
-    const dropdownOptions = columnsData.operation_list[column.data_type] || [];
+    const dropdownOptions = columnsData.operation_list[column.data_type];
 
-    const defaultOperator = dropdownOptions[0]?.value || "";
+    const defaultValue = column.data_type === "multiselect" ? [] : "";
 
-    const defaultValue =
-      column.data_type === "date" && defaultOperator === "between"
-        ? ["", ""] // range-based value for "between"
-        : column.data_type === "multiselect"
-        ? []
-        : "";
+    const defaultOperator = dropdownOptions?.[0]?.value || "";
 
-    const matchingDropdownList = dropdownOptions;
+    const matchingDropdownList =
+      columnsData.operation_list[column.data_type] || [];
 
     const newFilter = {
       filter_attribute: column.attribute_key,
@@ -124,6 +74,13 @@ const FilterCriteria = ({
 
     setFilters((prev) => [...prev, newFilter]);
     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
+    //   if (editMode) {
+    //     setEditFilters((prev) => [...prev, newFilter]);
+    //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
+    //   } else {
+    //     setFilters((prev) => [...prev, newFilter]);
+    //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
+    //   }
 
     setShowFilterOption(false);
   };

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

@@ -106,7 +106,7 @@ const FilterForm = ({
   const formValues = watch();
 
   useEffect(() => {
-    if (!isDirty) reset(defaultValues);
+    reset(defaultValues);
   }, [selectedFilters, filterName]);
 
   const debouncedUpdateFilters = useCallback(

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

@@ -72,10 +72,13 @@ const SavedFilter = ({
 
   const renderList = () => (
     <>
-      <CustomSearch value={searchTerm} onChange={setSearchTerm} />
+      <CustomSearch
+        value={searchTerm}
+        onChange={setSearchTerm}
+        className="search-input"
+      />
 
-      {!Array.isArray(columnsData?.saved_filter) ||
-      columnsData?.saved_filter?.length === 0 ? (
+      {columnsData.saved_filter.length === 0 ? (
         <Typography sx={{ mt: 2 }}>No saved filters yet.</Typography>
       ) : (
         <List

package/src/components/filter/index.tsx

@@ -83,7 +83,7 @@ export function TableFilter({
   const tabItems: TabItem[] = [
     { label: "Filter" },
     { label: "Saved Filter" },
-    { label: "Attributes" },
+    // { label: "Attributes" },
   ];
 
   const handleTabCrossClick = (index: number) => {

package/src/components/filter/style.ts

@@ -39,7 +39,6 @@ export const filterStyles: StyleProps = {
     overflowY: "hidden",
     boxShadow: "0px 3px 8px 0px rgba(34, 48, 62, 0.10)",
     borderRadius: "0.5rem",
-    minHeight: "calc(100vh - 200px)",
   },
 
   filterMainHeader: {

package/src/components/index-table.tsx

@@ -242,6 +242,9 @@ function TableWrapper<T>({
   //   ...(styleOptions?.wrapperStyle && { style: styleOptions.wrapperStyle }),
   //   className: "ts__table__wrapper",
   // };
+  // const emptyListComponentCondition = () => {
+  //   if(isLoading) {}
+  // }
 
   const showFilterCondition = filterOptions?.show;
 
@@ -275,8 +278,8 @@ function TableWrapper<T>({
                   />
                 ) : null
               }
-              // searchValue={searchValue} // 👈 new
-              // onSearchChange={onSearchChange}
+              searchValue={craftTopbarOptions.searchValue}
+              onSearchChange={craftTopbarOptions.onSearchChange}
               tableStates={tableStates}
               onFilterButtonClick={topbarOptions?.onFilterButtonClick}
             />

package/src/components/index.scss

@@ -28,6 +28,7 @@
       opacity: 0;
       margin-right: calc(-1 * var(--filter-width));
       transition: all 0.4s ease-in-out;
+      max-height: calc(100vh - 50px);
     }
     .ts__table__filter.show {
       transition: all 0.4s ease-in-out;
@@ -36,6 +37,7 @@
       max-width: var(--filter-width);
       margin-left: 1.25rem;
       margin-right: 0rem;
+      min-height: calc(100vh - 50px);
     }
   }