rez-table-listing-mui 2.0.7 → 2.0.9

package/package.json

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

package/src/listing/components/filter/components/forms/components/filter-criteria-entity-list.tsx

@@ -42,7 +42,7 @@ const FilterCriteriaEntityList = ({
 
     // Case 2: default behavior (apply search filter)
     return allEntities.filter((entity) =>
-      entity.label.toLowerCase().includes(searchTerm.toLowerCase())
+      entity.label?.toLowerCase().includes(searchTerm?.toLowerCase())
     );
   }, [isSingleEntity, filters, allEntities, searchTerm]);
 

package/src/listing/components/table-body/table-body.styles.ts

@@ -47,7 +47,7 @@ export const TableBodyCell = styled("td", {
   wrap?: boolean;
 }>(({ theme, compact, isDragging, wrap }) => ({
   fontSize: theme.typography.pxToRem(14),
-  padding: compact ? theme.spacing(0.25, 0.5) : theme.spacing(0.5, 1),
+  padding: compact ? theme.spacing(0.5, 0.75) : theme.spacing(0.75, 1.25),
   borderBottom: `1px solid ${theme.palette.grey[200]}`,
 
   ...(wrap && {

package/src/listing/components/table-head/table-head.styles.ts

@@ -96,7 +96,7 @@ export const TableHeadCell = styled("th", {
   sticky?: boolean;
 }>(({ theme, compact, isDragging, isPinned, sticky }) => ({
   position: "relative",
-  padding: compact ? theme.spacing(0.375, 0.675) : theme.spacing(0.75, 1),
+  padding: compact ? theme.spacing(0.5, 0.75) : theme.spacing(0.75, 1.25),
   border: `0.5px solid ${theme.palette.grey[200]}`,
   cursor: "pointer",
   backgroundColor: theme.palette.common.white,

package/src/listing/components/table-settings/components/column.tsx

@@ -190,11 +190,24 @@ const ColumnTab = ({
     }
   };
 
+  const constructHideList = (): ColumnItem[] => {
+    return (
+      columnTabAttributes
+        ?.map((column) => ({
+          label: column?.name,
+          value: column?.attribute_key,
+        }))
+        ?.filter(
+          (tab) =>
+            !settingsColumnState?.show_list?.find((i) => i.value === tab.value)
+        ) || []
+    );
+  };
   const getCurrentLists = () => {
     if (settingsColumnState?.isDefault) {
       return {
         showList: settingsColumnState.show_list || [],
-        hideList: settingsColumnState.hide_list || [],
+        hideList: constructHideList() || [],
       };
     } else {
       const currentTab = settingsColumnState?.tabs?.[selectedTabIndex];

package/src/listing/components/table-settings/components/quick-tab.tsx

@@ -106,6 +106,8 @@ const QuickTab = ({
           show_list: [],
         },
       }));
+
+      setCurrentQuickAttribute("");
     }
   }, [tabsApiData]);
 
@@ -174,8 +176,14 @@ const QuickTab = ({
   ];
 
   // Convert show_list/hide_list to FilterValue[] for rendering only
+
+  const constructHideList = () => {
+    return tabsApiData?.filter(
+      (tab) => !showListValues?.find((i) => i.value === tab.value)
+    );
+  };
   const showListValues = quickTabStates?.show_list || [];
-  const hideListValues = quickTabStates?.hide_list || [];
+  const hideListValues = constructHideList() || [];
 
   const sensors = useSensors(
     useSensor(MouseSensor),

package/src/listing/components/tabs/index.tsx

@@ -6,14 +6,14 @@ import { TableTab, TableTabCount, TableTabsRoot } from "./tabs.styles";
 import { SettingsOutlined } from "@mui/icons-material";
 
 interface TabDataProps {
-  tab_value: string | null;
-  tab_value_count?: string | number;
+  tab_name: string | null;
+  count?: string | number;
 }
 
 interface TableTabsProps {
   loading?: boolean;
   tabsData?: TabDataProps[];
-  activeTab?: string;
+  activeTab?: TabDataProps;
   tableStates: CraftTableOptionsProps;
   onClick: (state: string) => void;
   settingsOptions?: settingsOptionsProps;
@@ -22,7 +22,7 @@ interface TableTabsProps {
 export function TableTabs({
   loading = false,
   tabsData = [],
-  activeTab = "All",
+  activeTab = { tab_name: "All", count: 0 },
   onClick,
   tableStates,
   settingsOptions,
@@ -39,22 +39,22 @@ export function TableTabs({
 
   const normalizedTabs = useMemo(() => {
     return tabsData
-      ?.filter((tab) => tab.tab_value !== null)
+      ?.filter((tab) => tab.tab_name !== null)
       ?.map((tab) => ({
         ...tab,
-        tab_value: tab.tab_value,
+        tab_name: tab.tab_name,
       }));
   }, [tabsData]);
 
   const defaultTab = useMemo(() => {
     return (
-      normalizedTabs.find((t) => t.tab_value === "All")?.tab_value ||
-      normalizedTabs[0]?.tab_value ||
+      normalizedTabs.find((t) => t.tab_name === "All")?.tab_name ||
+      normalizedTabs[0]?.tab_name ||
       ""
     );
   }, [normalizedTabs]);
 
-  const selectedTab = activeTab || defaultTab;
+  const selectedTab = activeTab?.tab_name || defaultTab;
 
   return (
     <Box display="flex" alignItems="center" justifyContent="flex-start">
@@ -73,21 +73,21 @@ export function TableTabs({
         scrollButtons="auto"
       >
         {normalizedTabs.map((tab) => {
-          const isSelected = activeTab === tab?.tab_value;
+          const isSelected = activeTab?.tab_name === tab?.tab_name;
 
           return (
             <TableTab
-              key={tab?.tab_value}
-              value={tab?.tab_value}
+              key={tab?.tab_name}
+              value={tab}
               label={
                 <Box display="flex" alignItems="center" gap={1}>
                   <Box sx={{ color: isSelected ? "#000" : "" }}>
-                    {tab?.tab_value}
+                    {tab?.tab_name}
                   </Box>
                   <TableTabCount selected={isSelected}>
-                    {tab?.tab_value_count == 0
+                    {tab?.count == 0
                       ? "0"
-                      : String(tab?.tab_value_count).padStart(2, "0")}
+                      : String(tab?.count).padStart(2, "0")}
                   </TableTabCount>
                 </Box>
               }

package/src/listing/libs/hooks/useEntityTableAPI.tsx

@@ -25,6 +25,7 @@ import {
   getLayoutAttributes,
   getAttributes,
   getTableTabs,
+  newCommonGetDropdownDataAPI,
 } from "../utils/apiColumn";
 import {
   FilterDataMainFilterEntityListProps,
@@ -269,7 +270,11 @@ export const useCommonFilterDropdownAPI = (
     queries: dropdownConfigs.map((cfg) => {
       return {
         queryKey: ["commonDropdown", cfg?.dataSourceType],
-        queryFn: () => commonGetDropdownDataAPI(cfg?.dataSourceType, null),
+        queryFn: () =>
+          newCommonGetDropdownDataAPI({
+            entity_type: "ROL",
+            attribute_key: cfg?.key,
+          }),
         enabled: !!cfg?.dataSourceType,
       };
     }),
@@ -364,10 +369,14 @@ export const useGetFilterEntityListAndCriteria = ({
   return { filterEntityList, filterEntityWiseCriteria };
 };
 
-export const useGetAttributes = (entity_type: string) => {
+export const useGetAttributes = (
+  entity_type: string,
+  element_type?: string
+) => {
   const attributes = useQuery({
-    queryKey: ["attributes", entity_type],
-    queryFn: () => getAttributes(entity_type),
+    queryKey: ["attributes", entity_type, element_type],
+    queryFn: () => getAttributes(entity_type, element_type),
+    enabled: !!entity_type, // optional safety
   });
 
   return { attributes };
@@ -409,6 +418,47 @@ export const useGetTableTabs = (payload: any) => {
   });
   return { tableTabs, isLoading };
 };
+
+export const useDropdownAPI = ({
+  entity_type,
+  attribute_key,
+  inactiveIds,
+  parentId,
+  data,
+  enabled = true,
+}: {
+  entity_type: string;
+  attribute_key?: string;
+  inactiveIds?: string | null;
+  parentId?: number | string;
+  data?: any;
+  enabled?: boolean;
+}) => {
+  const query = useQuery({
+    queryKey: [
+      "commonDropdown",
+      entity_type,
+      attribute_key,
+      inactiveIds,
+      parentId,
+    ],
+    queryFn: () =>
+      newCommonGetDropdownDataAPI({
+        entity_type,
+        attribute_key,
+        inactiveIds,
+        parentId,
+        data,
+      }),
+    enabled, // prevents auto call unless needed
+    staleTime: 5 * 60 * 1000, // cache for 5 mins
+  });
+
+  return {
+    ...query,
+    dropdownData: query.data || [],
+  };
+};
 // export const useGetSettingsColumnAttributes = (entity_type: string) => {
 //   // First query to get meta data
 //   const settingsColumnAttributes = useQuery({

package/src/listing/libs/utils/apiColumn.ts

@@ -209,11 +209,17 @@ export const getLayoutAttributes = async ({
   return response.data;
 };
 
-export const getAttributes = async (entity_type: string) => {
-  const response = await api.get(
-    `meta/attribute-master/getAttributes?direct=false&entity_type=${entity_type}`
-  );
-  console.log("resss", response);
+export const getAttributes = async (
+  entity_type: string,
+  element_type?: string
+) => {
+  const response = await api.get("/meta/attribute-master/getAttributes", {
+    params: {
+      // direct: false, // commented as per requirement
+      entity_type,
+      ...(element_type && { element_type }),
+    },
+  });
 
   return response.data;
 };
@@ -222,3 +228,38 @@ export const getTableTabs = async (payload: any) => {
   const response = await api.post(`filter/adm/tabs`, payload);
   return response.data;
 };
+
+export const newCommonGetDropdownDataAPI = async ({
+  entity_type,
+  attribute_key,
+  // organization_id,
+  data,
+  inactiveIds,
+  parentId,
+}: {
+  entity_type: string | undefined;
+  attribute_key?: string;
+  // organization_id?: string | null;
+  data?: any;
+  inactiveIds?: string | null;
+  parentId?: number | string;
+}) => {
+  // Body can still accept optional custom data if needed
+  const requestBody = data || {};
+
+  // Build query params dynamically
+  const queryParams: string[] = [];
+
+  if (entity_type) queryParams.push(`entity_type=${entity_type}`);
+  if (attribute_key) queryParams.push(`attribute_key=${attribute_key}`);
+  if (!Number.isNaN(Number(inactiveIds)) && inactiveIds)
+    queryParams.push(`inactiveIds=${inactiveIds}`);
+  if (parentId !== undefined && parentId !== null)
+    queryParams.push(`parent=${parentId}`);
+
+  const queryString = queryParams.length > 0 ? `?${queryParams.join("&")}` : "";
+
+  return await api
+    .post(`entity/getAttributeDropdown${queryString}`, requestBody)
+    .then((response) => response.data);
+};

package/src/view/ListingView.tsx

@@ -13,6 +13,7 @@ import {
 } from "../listing/libs/utils/common";
 import {
   useCommonFilterDropdownAPI,
+  useDropdownAPI,
   useEntityTableAPI,
   useGetAttributes,
   useGetOperationList,
@@ -92,6 +93,10 @@ function ListingView() {
   const { operationList } = useGetOperationList();
 
   const { attributes } = useGetAttributes(ENTITY_TYPE);
+  const { attributes: quickTabAttributes } = useGetAttributes(
+    ENTITY_TYPE,
+    "select"
+  );
 
   const isColumnDefault =
     filterSettingStates?.columnTabState?.isDefault || false;
@@ -106,12 +111,14 @@ function ListingView() {
   // );
   // const { dropdownData } = useCommonDropdownAPI(filters);
   const { dropdownFilterData } = useCommonFilterDropdownAPI(filters);
-  const { settingsTabDropdownData, settingsTabDropdownPending } =
-    useSettingsDropDownAPI({
-      entity_type: ENTITY_TYPE,
-      column: filterSettingStates?.quickTabStates?.attribute,
-      sort_by: filterSettingStates?.quickTabStates?.sorting,
-    });
+
+  const {
+    data: settingsTabDropdownData,
+    isLoading: settingsTabDropdownPending,
+  } = useDropdownAPI({
+    entity_type: ENTITY_TYPE,
+    attribute_key: filterSettingStates?.quickTabStates?.attribute,
+  });
 
   const queryClient = useQueryClient();
 
@@ -399,7 +406,7 @@ function ListingView() {
       filterSettingStates={filterSettingStates}
       onSaveSettings={handleSaveSettings}
       featureOptions={{
-        // striped: true,
+        striped: true,
         compactTable: false,
         enableSorting: !enableServerSideSorting,
         enableColumnReordering: true,
@@ -498,7 +505,7 @@ function ListingView() {
               onClose={() => setShowListViewSettings(false)}
               columnsData={metaQuery.data || {}}
               columnsDataLoading={metaQuery.isPending}
-              quickTabAttributes={attributes?.data?.map((item) => ({
+              quickTabAttributes={quickTabAttributes?.data?.map((item) => ({
                 label: item.name,
                 value: item.attribute_key,
               }))}
@@ -518,13 +525,13 @@ function ListingView() {
         ),
         searchValue: searchTerm,
         onSearchChange: (val) => setSearchTerm(val),
-        showFilterToggle: true,
+        showFilterToggle: false,
         onFilterButtonClick: () =>
           tableStates.setShowTableFilter(!tableStates.showTableFilter),
-        // showColumnToggle: false,
-        // showSearch: false,
-        // showChangeLayoutToggle: false,
-        // showSortingToggle: false,
+        showColumnToggle: false,
+        showSearch: false,
+        showChangeLayoutToggle: false,
+        showSortingToggle: false,
         // viewMoreToggle: true,
         // showCompactTableToggle: false,
       }}