rez-table-listing-mui 1.0.48 → 1.0.50

package/package.json

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

package/src/App.tsx

@@ -23,7 +23,9 @@ import { CraftTableFilter } from ".";
 import { useCraftTableFilterSettings } from "./libs/hooks/useCraftTableFilterSettings";
 import { QuickFilterSettings } from "./components/table-settings";
 import { SettingsDataProps } from "./types/filter-settings";
-// import { ENTITY_TYPE } from "./libs/utils/common";
+import { FilterMasterStateProps } from "./types/filter";
+import { ColumnDef } from "@tanstack/react-table";
+import { ENTITY_TYPE } from "./libs/utils/common";
 
 function App() {
   // const [mockLoading, setMockLoading] = useState<boolean>(true);
@@ -31,21 +33,21 @@ 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 UPR BRD
 
   const [selectedTab, setSelectedTab] = useState("ALL");
 
   const tableStates = useCraftTable();
   const filterSettingStates = useCraftTableFilterSettings();
 
-  const { filters, setFilters, filterMaster, filterToDelete } = tableStates;
+  const { filters, setFilters, filterMaster, setFilterMaster, filterToDelete } =
+    tableStates;
 
   const { showListViewSettings, setShowListViewSettings, setSettingsData } =
     filterSettingStates;
 
   const { defaultColumns } = useDefaultColumns();
 
-  const { metaQuery } = useFetchData("BRD");
+  const { metaQuery } = useFetchData(ENTITY_TYPE);
   const { detailsQuery } = useDetailsQueryAPI(
     filterMaster?.saved_filters?.selectedId
       ? filterMaster?.saved_filters?.selectedId
@@ -55,16 +57,16 @@ function App() {
   const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
   const { deleteMutation } = useDeleteFilterAPI(); //API FOR DELETING FILTER
   const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
-  const { saveSettingsDataMutation } = useSaveSettingsDataAPI("BRD");
+  const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
   const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
   const { settingsTabDropdownData, settingsTabDropdownPending } =
     useSettingsDropDownAPI({
-      entity_type: "BRD",
+      entity_type: ENTITY_TYPE,
       column: filterSettingStates?.quickTabStates?.attribute,
       sort_by: filterSettingStates?.quickTabStates?.sorting,
     });
 
-  const { getSettingsAPIData } = useGetSettingsDataAPI("BRD");
+  const { getSettingsAPIData } = useGetSettingsDataAPI(ENTITY_TYPE);
 
   useEffect(() => {
     // setTimeout(() => {
@@ -73,10 +75,24 @@ function App() {
 
     const fetchMeta = async () => {
       try {
-        const { res: allColumns } = await entityTableMetaMaster("BRD");
+        const { res: allColumns } = await entityTableMetaMaster(ENTITY_TYPE);
 
         const savedColumnSettings = filterSettingStates.settingsData?.column;
 
+        const getOrderedColumns = (
+          showList: { value: string }[],
+          filteredColumns: any[]
+        ) => {
+          // Build ordered columns using showList and filteredColumns
+          return showList
+            .map((showItem) => {
+              return filteredColumns.find(
+                (col) => col.accessorKey === showItem.value
+              );
+            })
+            .filter((col): col is ColumnDef<any> => col !== undefined); // Ensure non-undefined columns are returned
+        };
+
         if (
           savedColumnSettings &&
           !savedColumnSettings.isDefault &&
@@ -91,10 +107,14 @@ function App() {
             const visibleColumns = new Set(
               activeTabSettings.show_list.map((c) => c.value)
             );
-            const filtered = allColumns.filter((col: any) =>
+
+            // First, filter columns based on visibleColumns
+            const filteredColumns = allColumns.filter((col: any) =>
               visibleColumns.has(col.accessorKey)
             );
-            setColumns(filtered);
+            setColumns(
+              getOrderedColumns(activeTabSettings.show_list, filteredColumns)
+            );
           } else {
             // Fallback if no specific settings for the active tab are found
             setColumns(allColumns);
@@ -107,7 +127,10 @@ function App() {
           const filtered = allColumns.filter((col: any) =>
             visibleColumns.has(col.accessorKey)
           );
-          setColumns(filtered);
+
+          setColumns(
+            getOrderedColumns(savedColumnSettings.show_list, filtered)
+          );
         } else {
           // No settings found, use all columns
           setColumns(allColumns);
@@ -118,7 +141,7 @@ function App() {
     };
 
     fetchMeta();
-  }, [filterSettingStates.settingsData, selectedTab]);
+  }, [selectedTab]);
 
   useEffect(() => {
     setFilters(detailsQuery.data ?? []);
@@ -134,10 +157,11 @@ function App() {
   const { tableData } = useEntityTableAPI({
     page: 0,
     size: 50,
-    entity_type: "BRD",
+    entity_type: ENTITY_TYPE,
     tabs: {
-      columnName: "status",
-      sortBy: "ASC",
+      columnName:
+        getSettingsAPIData?.layout_json?.quick_tab?.attribute || "status",
+      sortBy: getSettingsAPIData?.layout_json?.quick_tab?.sorting || "ASC",
       value:
         selectedTab.toLowerCase() === "all" ? "" : selectedTab.toLowerCase(),
     },
@@ -157,6 +181,27 @@ function App() {
   );
   const tabsData = tableData?.entity_tabs;
 
+  // Auto-switch tab if the selected tab is removed
+  useEffect(() => {
+    if (
+      tabsData &&
+      tabsData.length > 0 &&
+      !tabsData.some(
+        (tab) => tab.tab_value?.toLowerCase() === selectedTab.toLowerCase()
+      )
+    ) {
+      // Try to select 'ALL' if it exists
+      const allTab = tabsData.find(
+        (tab) => tab.tab_value?.toLowerCase() === "all"
+      );
+      if (allTab) {
+        setSelectedTab(allTab.tab_value || "ALL");
+      } else {
+        setSelectedTab(tabsData[0].tab_value || "ALL");
+      }
+    }
+  }, [tabsData, selectedTab]);
+
   const totalCount = useMemo(() => {
     return Number(
       tableData?.entity_tabs?.find((tab) => {
@@ -213,7 +258,7 @@ function App() {
     const payload = {
       name,
       is_default: false,
-      mapped_entity_type: "BRD", // For that entity type
+      mapped_entity_type: ENTITY_TYPE, // For that entity type
       status: "ACTIVE",
       entity_type: "SFM", // FIXED entity type
       filterDetails: quickFilter,
@@ -222,10 +267,22 @@ function App() {
     savedMutation.mutate(
       { entity_type, payload },
       {
-        onSuccess: () => {},
-        onError: (error: any) => {
-          const msg = error?.response?.data?.message;
-          console.log("Error in saving filter", msg, error);
+        onSuccess: (response) => {
+          const newFilterId = response?.id;
+          if (newFilterId) {
+            setFilterMaster(
+              (prev) =>
+                ({
+                  ...prev,
+                  saved_filters: {
+                    ...prev?.saved_filters,
+                    selectedId: newFilterId.toString(),
+                    selectedName: name,
+                  },
+                  activeFilterTabIndex: 1,
+                } as FilterMasterStateProps)
+            );
+          }
         },
       }
     );
@@ -237,7 +294,7 @@ function App() {
       name: filterToDelete?.label,
       id: filterToDelete?.value,
       is_default: false,
-      mapped_entity_type: "BRD",
+      mapped_entity_type: ENTITY_TYPE,
       status: "INACTIVE",
       entity_type: "SFM",
     };
@@ -257,7 +314,7 @@ function App() {
       name: filterMaster?.saved_filters?.selectedName, // Name of the filter
       is_default: false,
       id: filterMaster?.saved_filters?.selectedId,
-      mapped_entity_type: "BRD",
+      mapped_entity_type: ENTITY_TYPE,
       status: "ACTIVE",
       entity_type: "SFM",
       filterDetails: quickFilter,
@@ -269,7 +326,7 @@ function App() {
   const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
     const payload = {
       entity_type: "LAP",
-      mapped_entity_type: "BRD",
+      mapped_entity_type: ENTITY_TYPE,
       layout_json: settingsData,
     };
 
@@ -332,7 +389,7 @@ function App() {
                   showIcon: true,
                   onClick: () => setShowListViewSettings(!showListViewSettings),
                 }}
-                activeTab={selectedTab}
+                activeTab={selectedTab?.toUpperCase()}
                 tableStates={tableStates}
                 tabsData={tabsData}
                 onClick={(state) => {

package/src/assets/svg.tsx

@@ -172,7 +172,7 @@ export const ArrowDownUp = () => (
 );
 export const EditIcon = () => (
   <svg
-    width="12"
+    width="18"
     height="12"
     viewBox="0 0 12 12"
     fill="none"
@@ -181,14 +181,14 @@ export const EditIcon = () => (
     <path
       d="M1.33331 10.6663H2.17431L8.99865 3.84201L8.15765 3.00101L1.33331 9.82534V10.6663ZM0.93598 11.6663C0.765202 11.6663 0.622091 11.6086 0.506646 11.493C0.391091 11.3776 0.333313 11.2345 0.333313 11.0637V9.90867C0.333313 9.74612 0.364535 9.59118 0.42698 9.44384C0.489313 9.29651 0.575202 9.16812 0.684646 9.05868L9.12698 0.620174C9.22776 0.528619 9.33904 0.457897 9.46081 0.408008C9.5827 0.358008 9.71048 0.333008 9.84415 0.333008C9.97781 0.333008 10.1073 0.35673 10.2325 0.404175C10.3578 0.451619 10.4688 0.527063 10.5653 0.630507L11.3795 1.45484C11.4829 1.5514 11.5566 1.66251 11.6006 1.78817C11.6446 1.91384 11.6666 2.03951 11.6666 2.16517C11.6666 2.29929 11.6438 2.42723 11.598 2.54901C11.5522 2.6709 11.4794 2.78223 11.3795 2.88301L2.94098 11.315C2.83154 11.4245 2.70315 11.5103 2.55581 11.5727C2.40848 11.6351 2.25354 11.6663 2.09098 11.6663H0.93598ZM8.57081 3.42884L8.15765 3.00101L8.99865 3.84201L8.57081 3.42884Z"
       fill="#0E0C0B"
-      fill-opacity="0.4"
+      fillOpacity={0.4}
     />
   </svg>
 );
 
 export const DeleteIcon = () => (
   <svg
-    width="20"
+    width="18"
     height="20"
     viewBox="0 0 10 12"
     fill="none"
@@ -664,7 +664,7 @@ export const SortingIcon = () => {
   );
 };
 
-export const FilterationIcon = () => {
+export const FilterationIcon = ({ color = "#1C1B1F" }) => {
   return (
     <svg
       width="20"
@@ -687,7 +687,7 @@ export const FilterationIcon = () => {
       <g mask="url(#mask0_811_12698)">
         <path
           d="M8.33333 15V13.3333H11.6667V15H8.33333ZM5 10.8333V9.16667H15V10.8333H5ZM2.5 6.66667V5H17.5V6.66667H2.5Z"
-          fill="#1C1B1F"
+          fill={color}
         />
       </g>
     </svg>

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

@@ -4,7 +4,6 @@ import {
   FormControlLabel,
   MenuItem,
   Radio,
-  RadioGroup,
   Select,
   SelectChangeEvent,
 } from "@mui/material";
@@ -27,21 +26,23 @@ const AttributesFilter = ({
 
   const selectedAttribute = filterMaster?.attributes?.selected;
 
-  // Get the current filter value to set radio button state
+  // Get the current filter value(s) to determine selected options
   const currentFilterValue = useMemo(() => {
-    if (!selectedAttribute) return "";
+    if (!selectedAttribute) return [];
 
     const matchingColumn = columnsData.column_list.find(
       (column) => column.datasource_list === selectedAttribute
     );
 
-    if (!matchingColumn) return "";
+    if (!matchingColumn) return [];
 
     const existingFilter = filters.find(
       (filter) => filter.filter_attribute === matchingColumn.attribute_key
     );
 
-    return existingFilter?.filter_value || "";
+    return Array.isArray(existingFilter?.filter_value)
+      ? existingFilter?.filter_value
+      : [];
   }, [selectedAttribute, filters, columnsData]);
 
   const handleSelectChange = (event: SelectChangeEvent) => {
@@ -54,47 +55,69 @@ const AttributesFilter = ({
           attributes: {
             ...prev?.attributes,
             selected: attributeKey,
-            radio: "", // Reset radio selection when changing attribute
+            radio: [],
           },
         } as FilterMasterStateProps)
     );
   };
 
-  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    event.preventDefault();
+  const handleMultiRadioToggle = (value: string) => {
+    const selectedAttr = filterMaster?.attributes.selected;
+    if (!selectedAttr) return;
 
-    const selectedValue = event.target.value;
+    const matchingColumn = columnsData.column_list.find(
+      (column) => column.datasource_list === selectedAttr
+    );
+    if (!matchingColumn) return;
 
-    setFilterMaster(
-      (prev) =>
-        ({
-          ...prev,
-          attributes: {
-            ...prev?.attributes,
-            radio: selectedValue,
-          },
-          activeFilterTabIndex: tabValue,
-        } as FilterMasterStateProps)
+    const existingFilter = filters.find(
+      (f) => f.filter_attribute === matchingColumn.attribute_key
     );
 
-    const selectedAttribute = filterMaster?.attributes.selected;
-    if (selectedAttribute) {
-      const matchingColumn = columnsData.column_list.find(
-        (column) => column.datasource_list === selectedAttribute
+    const currentValues: string[] = Array.isArray(existingFilter?.filter_value)
+      ? existingFilter.filter_value
+      : [];
+
+    const isAlreadySelected = currentValues.includes(value);
+
+    const updatedValues = isAlreadySelected
+      ? currentValues.filter((v) => v !== value)
+      : [...currentValues, value];
+
+    const defaultOperator =
+      columnsData.operation_list[matchingColumn.data_type]?.[0]?.value || "in";
+
+    const newFilter = {
+      filter_attribute: matchingColumn.attribute_key,
+      filter_operator: defaultOperator,
+      filter_value: updatedValues,
+    };
+
+    setFilters((prevFilters) => {
+      const exists = prevFilters.some(
+        (f) => f.filter_attribute === matchingColumn.attribute_key
       );
-      if (matchingColumn) {
-        const defaultOperator =
-          columnsData.operation_list[matchingColumn.data_type]?.[0]?.value ||
-          "equals";
-        const newFilter = {
-          filter_attribute: matchingColumn.attribute_key,
-          filter_operator: defaultOperator,
-          filter_value: selectedValue,
-        };
-
-        setFilters([newFilter]);
+      if (exists) {
+        return prevFilters.map((f) =>
+          f.filter_attribute === matchingColumn.attribute_key ? newFilter : f
+        );
+      } else {
+        return [...prevFilters, newFilter];
       }
-    }
+    });
+
+    setFilterMaster((prev) => {
+      if (!prev || !prev.attributes.selected) return prev;
+
+      return {
+        ...prev,
+        attributes: {
+          ...prev.attributes,
+          radio: updatedValues,
+        },
+        activeFilterTabIndex: tabValue as number,
+      };
+    });
   };
 
   const selectedAttributeOptions = useMemo(() => {
@@ -170,27 +193,30 @@ const AttributesFilter = ({
         {dropdownData && (
           <Box sx={{ mt: 2 }}>
             <FormControl>
-              <RadioGroup
-                onChange={handleRadioChange}
-                value={currentFilterValue} // Set the value from current filter
-              >
-                {selectedAttributeOptions
-                  ?.filter((option) => {
-                    if (!searchTerm) return true;
-
-                    return option.label
-                      .toLowerCase()
-                      .includes(searchTerm.toLowerCase());
-                  })
-                  .map((option) => (
+              {selectedAttributeOptions
+                ?.filter((option) => {
+                  if (!searchTerm) return true;
+
+                  return option.label
+                    .toLowerCase()
+                    .includes(searchTerm.toLowerCase());
+                })
+                .map((option) => {
+                  const isSelected = currentFilterValue.includes(option.value);
+
+                  return (
                     <FormControlLabel
                       key={option.value}
-                      value={option.value}
-                      control={<Radio />}
+                      control={
+                        <Radio
+                          checked={isSelected}
+                          onClick={() => handleMultiRadioToggle(option.value)}
+                        />
+                      }
                       label={option.label}
                     />
-                  ))}
-              </RadioGroup>
+                  );
+                })}
             </FormControl>
           </Box>
         )}