rez-table-listing-mui 1.3.44 → 1.3.46

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

@@ -29,6 +29,8 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { AddIcon, CloseIcon } from "../../../../assets/svg";
+import CustomToggleSwitchButton from "./toggle-button-switch";
+import { TOGGLE_BUTTON_TABS } from "../constants";
 
 const Sorting = ({
   filterSettingStates,
@@ -38,7 +40,7 @@ const Sorting = ({
     filterSettingStates;
 
   const [activeTab, setActiveTab] = useState<string | undefined>(
-    quickTabStates?.show_list?.[0].value
+    quickTabStates?.show_list?.[0]?.value
   );
 
   const columnTabState = settingsData?.column as ColumnTabConfigProps;
@@ -100,25 +102,55 @@ const Sorting = ({
       { column: "", order: "asc" },
     ];
 
-    // if sorting state is empty, initialize once
+    // CASE 1: Initialize sorting if completely empty
     if (!sortingTabState || Object.keys(sortingTabState).length === 0) {
-      setSettingsData((prev) => ({
-        ...prev,
-        sorting: { isDefault: true, sortby: emptySortBy },
-      }));
-      return; // ✅ prevent further execution
-    }
-
-    // if sortby is missing or empty
-    if (!sortingTabState?.sortby || sortingTabState?.sortby.length === 0) {
       setSettingsData((prev) => ({
         ...prev,
         sorting: {
-          ...prev.sorting,
-          sortby: emptySortBy,
           isDefault: true,
+          sortby: [],
         },
       }));
+      return;
+    }
+
+    // CASE 2: sorting is default BUT missing sortby
+    // if (
+    //   (!sortingTabState?.sortby || sortingTabState?.sortby.length === 0) &&
+    //   sortingTabState?.isDefault
+    // ) {
+    //   setSettingsData((prev) => ({
+    //     ...prev,
+    //     sorting: {
+    //       ...prev.sorting,
+    //       sortby: emptySortBy,
+    //       isDefault: true,
+    //     },
+    //   }));
+    //   return;
+    // }
+
+    //  CASE 3: CUSTOM MODE → Populate tabs automatically
+    if (
+      sortingTabState?.isDefault === false &&
+      (!sortingTabState?.tabs || sortingTabState?.tabs.length === 0)
+    ) {
+      setSettingsData((prev) => {
+        const quickTabs = prev.quick_tab?.show_list || [];
+
+        const generatedTabs = quickTabs.map((t) => ({
+          tab_name: { value: t.value, label: t.label },
+          sortby: emptySortBy,
+        }));
+
+        return {
+          ...prev,
+          sorting: {
+            ...prev.sorting,
+            tabs: generatedTabs,
+          },
+        };
+      });
     }
   }, []);
 
@@ -143,8 +175,10 @@ const Sorting = ({
 
   const sensors = useSensors(useSensor(PointerSensor));
 
-  const activeTabIndex = sortingTabState?.tabs?.findIndex(
-    (tab) => tab?.tab_name === activeTab
+  const activeTabIndex = columnTabState?.tabs?.findIndex(
+    (tab) =>
+      tab?.tab_name?.value == activeTab ||
+      tab?.tab_name?.label?.toLowerCase() == activeTab?.toLowerCase()
   );
 
   /**
@@ -159,9 +193,10 @@ const Sorting = ({
    * * If activeTab is undefined
    * * - Return an empty array
    */
+
   const tabSortedList = useMemo(() => {
     return isSortingDefault
-      ? sortingTabState?.sortby
+      ? sortingTabState?.sortby || [{ column: "", order: "asc" }]
       : activeTab !== undefined
       ? sortingTabState?.tabs?.[activeTabIndex || 0]?.sortby
         ? sortingTabState?.tabs?.[activeTabIndex || 0]?.sortby
@@ -177,6 +212,11 @@ const Sorting = ({
         const tabs = [...(prev?.sorting?.tabs || [])];
         tabs[activeTabIndex || 0] = {
           ...tabs[activeTabIndex || 0],
+          tab_name: settingsData?.column?.tabs?.[activeTabIndex || 0]
+            ?.tab_name || {
+            label: "",
+            value: "",
+          },
           sortby: updated,
         };
         return { ...prev, sorting: { ...prev?.sorting, tabs } };
@@ -285,10 +325,10 @@ const Sorting = ({
         hideList: columnTabState?.hide_list || [],
       };
     } else {
-      const currentTab = columnTabState?.tabs?.[activeTabIndex || 0];
+      const currentTab = sortingTabState?.tabs?.[activeTabIndex || 0];
       return {
         showList: columnsData || [],
-        hideList: currentTab?.hide_list || [],
+        // hideList: currentTab?.hide_list || [],
       };
     }
   };
@@ -299,11 +339,11 @@ const Sorting = ({
     <Box sx={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
       <Typography>Select attribute(s) you want to sort by</Typography>
 
-      {/* <CustomToggleSwitchButton
+      <CustomToggleSwitchButton
         buttons={TOGGLE_BUTTON_TABS}
         value={isSortingDefault}
         onChange={handleModeChange}
-      /> */}
+      />
 
       {hasShowListQuickTabs ? (
         <>

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

@@ -32,11 +32,14 @@ export function QuickFilterSettings({
   columnsDataLoading,
   quickTabAttributes,
   quickTabAttributesLoading,
+  columnTabAttributes,
+  columnTabAttributesLoading,
   sortingTabAttributes,
   sortingTabAttributesLoading,
   tabsApiData,
   tabsApiDataLoading,
   onSaveSettingsData,
+  activeTab,
 }: QuickFilterModalProps) {
   const [tabValue, setTabValue] = useState(0);
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
@@ -73,7 +76,10 @@ export function QuickFilterSettings({
           sortby:
             sortingTabState?.sortby?.filter((item) => item.column !== "") || [],
         }
-      : null;
+      : {
+          isDefault: false,
+          tabs: sortingTabState?.tabs || [],
+        };
 
     const modifiedSettingsData = {
       quick_tab: quickTabStates,
@@ -132,6 +138,8 @@ export function QuickFilterSettings({
                       columnsData={quickTabAttributes}
                       tabsApiData={tabsApiData}
                       tabsApiDataLoading={tabsApiDataLoading}
+                      activeTab={activeTab}
+                      columnTabAttributes={columnTabAttributes}
                     />
                   )}
                 </CustomTabPanel>
@@ -143,6 +151,8 @@ export function QuickFilterSettings({
                     <Column
                       filterSettingStates={filterSettingStates}
                       columnsData={columnsData}
+                      columnTabAttributes={columnTabAttributes}
+                      columnTabAttributesLoading={columnTabAttributesLoading}
                     />
                   )}
                 </CustomTabPanel>
@@ -188,7 +198,7 @@ export function QuickFilterSettings({
         <DialogActions>
           <CustomButton
             // disabled={saveButtonError?.hasError}
-            disabled={saveButtonError?.hasError}
+            // disabled={saveButtonError?.hasError}
             onClick={handleSaveSetSettingsData}
           >
             {view === "listing" ? "Save Quick Filter" : "Save Kanban Layout"}

package/src/listing/components/table.tsx

@@ -5,11 +5,14 @@ import TableHead from "./table-head";
 
 function Table<T>({
   table,
+  activeTab,
   featureOptions,
   NestedComponent,
   columnOrder,
   isCompactTable,
   tableStates,
+  filterSettingStates,
+  onSaveSettings,
 }: CraftTableComponentProps<T>) {
   const { striped } = featureOptions;
 
@@ -23,9 +26,12 @@ function Table<T>({
     >
       <TableHead
         table={table}
+        activeTab={activeTab}
         featureOptions={featureOptions}
         columnOrder={columnOrder}
         tableStates={tableStates}
+        filterSettingStates={filterSettingStates}
+        onSaveSettings={onSaveSettings}
       />
       <TableBody
         table={table}

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

@@ -23,6 +23,7 @@ import {
   viewSettingsDropDown,
   getOperationList,
   getLayoutAttributes,
+  getSettingsColumnAttributes,
 } from "../utils/apiColumn";
 import {
   FilterDataMainFilterEntityListProps,
@@ -71,6 +72,7 @@ const entityListingCall = async ({
   const params: APIParamsProps = {
     page,
     size,
+    // use_flatjson: true,
   };
 
   const response = await api.post(url, body, { params });
@@ -163,9 +165,12 @@ export const useDeleteFilterAPI = (tableStates: CraftTableOptionsProps) => {
         const newFilterMasterState = {
           ...filterMaster,
           saved_filters: {
+            ...(filterMaster?.saved_filters ?? {}),
             selectedId: "",
             selectedName: "",
             selectedCode: "",
+            shareWithTeam: undefined,
+            allowTeamEdit: undefined,
           },
           activeFilterTabIndex: -1,
         };
@@ -251,7 +256,7 @@ export const useCommonFilterDropdownAPI = (
   // Step 1: Extract all keys and query types
   const dropdownConfigs = useMemo(() => {
     return filters
-      ?.filter((col) => col?.filter_attribute_element_type === "select")
+      ?.filter((col) => col?.filter_attribute_data_type === "select")
       ?.map((col) => ({
         key: col?.filter_attribute,
         dataSourceType: value ?? col?.datasource_list ?? "STS",
@@ -370,20 +375,30 @@ export const useGetOperationList = () => {
 
 export const useGetLayoutAttributes = ({
   entity_type,
-  element_type,
+  data_type,
 }: {
   entity_type: string;
-  element_type?: string;
+  data_type?: string;
 }) => {
   // First query to get meta data
   const layoutAttributes = useQuery({
-    queryKey: ["layoutAttributes", entity_type, element_type],
+    queryKey: ["layoutAttributes", entity_type, data_type],
     queryFn: () =>
       getLayoutAttributes({
         entity_type,
-        element_type,
+        data_type,
       }),
   });
 
   return { layoutAttributes };
 };
+
+export const useGetSettingsColumnAttributes = (entity_type: string) => {
+  // First query to get meta data
+  const settingsColumnAttributes = useQuery({
+    queryKey: ["settingsColumnAttributes", entity_type],
+    queryFn: () => getSettingsColumnAttributes(entity_type),
+  });
+
+  return { settingsColumnAttributes };
+};

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

@@ -193,13 +193,13 @@ export const getOperationList = async () => {
 
 export const getLayoutAttributes = async ({
   entity_type,
-  element_type,
+  data_type,
 }: {
   entity_type: string;
-  element_type?: string;
+  data_type?: string;
 }) => {
   const params = {
-    element_type,
+    data_type,
   };
   const response = await api.post(
     `/layout-preference/attributes`,
@@ -208,3 +208,8 @@ export const getLayoutAttributes = async ({
   );
   return response.data;
 };
+
+export const getSettingsColumnAttributes = async (entity_type: string) => {
+  const response = await api.get(`/attribute-master/getAll/${entity_type}`);
+  return response.data;
+};

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

@@ -77,9 +77,10 @@ export function customDebounce<T extends (...args: any[]) => any>(
 }
 
 //ENTITY TYPE
-const ENVIRONMENT = "uat";
+const ENVIRONMENT = "crm_dev";
 export const ENTITY_TYPE = "LEAD";
 export const MAPPED_ENTITY_TYPE = "LYPR"; // LAP OR LYPR
+export const USER_ID = 226;
 
 const environments = {
   adm_dev: "http://localhost:4010/api",

package/src/listing/libs/utils/hydrate-saved-filters.ts

@@ -8,7 +8,7 @@ export const hydrateSavedFilters = async (
     // const attribute = tableStates..find(
     //   (attr) => attr.attribute_key === filter.filter_attribute
     // );
-    if (typeof filter.filter_attribute_element_type === "undefined") {
+    if (typeof filter.filter_attribute_data_type === "undefined") {
       return {
         ...filter,
         dropdown_list: [],
@@ -16,7 +16,7 @@ export const hydrateSavedFilters = async (
     }
 
     const matchingDropdownList =
-      operationList[filter.filter_attribute_element_type] || [];
+      operationList[filter.filter_attribute_data_type] || [];
 
     return {
       ...filter,

package/src/listing/types/common.ts

@@ -105,6 +105,7 @@ export interface EntityListingResponse {
 export interface APIParamsProps {
   page?: number;
   size?: number;
+  use_flatjson?: boolean;
 }
 
 export type DropdownOption = {

package/src/listing/types/filter-settings.ts

@@ -10,11 +10,14 @@ export interface QuickFilterModalProps {
   columnsDataLoading?: boolean;
   quickTabAttributes?: any[];
   quickTabAttributesLoading?: boolean;
+  columnTabAttributes?: any[];
+  columnTabAttributesLoading?: boolean;
   sortingTabAttributes?: any[];
   sortingTabAttributesLoading?: boolean;
   tabsApiData?: { label: string; value: string }[];
   tabsApiDataLoading?: boolean;
   onSaveSettingsData?: (data: any) => void;
+  activeTab?: string;
 }
 
 type TabName = string;
@@ -42,7 +45,7 @@ interface ColumnItem {
 }
 
 interface ColumnTab {
-  tab_name: TabName;
+  tab_name: { label: string; value: string };
   show_list: ColumnItem[];
   hide_list: ColumnItem[];
 }
@@ -53,7 +56,7 @@ export interface SortingConfigSortByProps {
 }
 
 interface SortingConfigTabProps {
-  tab_name: TabName;
+  tab_name: { label: string; value: string };
   sortby: SortingConfigSortByProps[];
 }
 
@@ -96,6 +99,9 @@ export interface SettingsQuickTabProps {
   columnsData: any;
   tabsApiData?: { label: string; value: string }[];
   tabsApiDataLoading?: boolean;
+  activeTab?: string;
+  columnTabAttributes?: any[];
+  columnTabAttributesLoading?: boolean;
 }
 
 export interface SettingsDataProps {

package/src/listing/types/filter.ts

@@ -15,6 +15,38 @@ export interface FilterOperationListProps {
   code: string;
   label: string;
   value: string;
+  is_shared: boolean;
+  is_editable: boolean;
+  is_owner: boolean;
+  created_by: string;
+  // user_id: number;
+  description: string | null;
+}
+
+export interface FilterSharedListProps {
+  created_date: string; // ISO date string
+  entity_type: string;
+  id: string;
+  name: string;
+  status: string;
+  parent_type: string | null;
+  parent_id: string | number | null;
+  code: string;
+  created_by: string;
+  modified_by: string | null;
+  modified_date: string | null;
+  enterprise_id: number;
+  organization_id: number;
+  appcode: string | null;
+  level_id: string;
+  level_type: string;
+  mapped_entity_type: string;
+  user_id: number;
+  is_default: boolean;
+  filter_scope: string;
+  is_shared: boolean;
+  is_editable: boolean | string; // API gives "true" (string) so support both
+  description: string | null;
 }
 
 export type FilterInputDataTypes =
@@ -48,7 +80,7 @@ export interface FilterColumnsListProps {
   searchable: string | null;
   attribute_key: string;
   sort_type: string | null;
-  element_type: FilterInputDataTypes;
+  data_type: FilterInputDataTypes;
   data_source_type: string | null;
   datasource_list: any | null;
   visible: string;
@@ -58,6 +90,7 @@ export interface FilterColumnsDataProps {
   column_list: FilterColumnsListProps[];
   operation_list: OperationMapProps;
   saved_filter: FilterOperationListProps[];
+  shared_filter: FilterOperationListProps[];
 }
 
 export interface FilterDropdownDataProps {
@@ -180,7 +213,7 @@ export interface FilterStateProps {
   filter_value: string | string[];
   // id: string | number; // removed as per backend req
   filter_attribute_name: string | undefined;
-  filter_attribute_element_type: FilterInputDataTypes | undefined;
+  filter_attribute_data_type: FilterInputDataTypes | undefined;
   attribute_key?: string;
   dropdown_list?: {
     label?: string;
@@ -215,6 +248,7 @@ export interface createSavedFilterPayload {
   enterprise_id?: number;
   user_id?: number;
   is_default: boolean;
+  description: string | null;
   mapped_entity_type: string;
   status?: string;
   entity_type: string;
@@ -234,6 +268,7 @@ export interface updateSavedFilterPayload {
   name: string;
   is_default: boolean;
   id: string | number;
+
   status?: string;
   entity_type: string;
   mapped_entity_type: string;
@@ -242,12 +277,14 @@ export interface updateSavedFilterPayload {
 
 export interface FilterFormComponentProps {
   columnsData: FilterColumnsDataProps;
+  saved_filter?: any;
+  shared_filter?: any;
   dropdownData: FilterDropdownDataProps;
   tableStates: CraftTableOptionsProps;
   editMode?: boolean;
   setEditMode?: React.Dispatch<React.SetStateAction<boolean>>;
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-  setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  onSaveFilterButtonClick?: () => void;
   tabValue?: number;
   onChangeFunction: ({
     updatedFilters,
@@ -256,6 +293,11 @@ export interface FilterFormComponentProps {
   filterComponentOptions?: FilterComponentOptions;
 }
 
+export interface SavedFilterSharingPreference {
+  shareWithTeam?: boolean;
+  allowTeamEdit?: boolean;
+}
+
 export interface FilterMasterStateProps {
   attributes: {
     selected: string;
@@ -265,8 +307,13 @@ export interface FilterMasterStateProps {
     selectedId: string;
     selectedName: string;
     selectedCode?: string;
+    description?: string;
+    is_shared?: boolean;
+    is_editable?: boolean;
+    is_owner?: boolean;
   };
   activeFilterTabIndex: number;
+  shared_filters_meta?: Record<string, SavedFilterSharingPreference>;
 }
 
 export interface AttributesFilterProps {
@@ -308,6 +355,7 @@ export interface FilterDataMainFilterEntityWiseCriteriaProps {
   attribute_key: string;
   element_type: FilterInputDataTypes;
   datasource_list: any;
+  data_type: FilterInputDataTypes;
 }
 
 export interface FilterDataProps {

package/src/listing/types/table.ts

@@ -81,6 +81,8 @@ export interface CraftTableProps<T> {
   data: T[];
   columns: CustomColumnDef<T>[];
   tableStates: CraftTableOptionsProps;
+  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  onSaveSettings?: (columnId: string) => void;
   paginationOptions?: CraftTablePaginationProps;
   featureOptions?: CraftTableFeatureProps;
   nestedComponent?: React.ComponentType<{ row: Row<T> }>;
@@ -93,19 +95,26 @@ export interface CraftTableProps<T> {
   filterOptions?: FilterOptionsProps;
   settingsOptions?: settingsOptionsProps;
   craftTableFilterSettingsOptions?: craftTableFilterSettingsOptionsProps;
+  activeTab?: string;
 }
 export interface CraftTableComponentProps<T> {
   table: Table<T>;
+  activeTab?: string;
   featureOptions: CraftTableFeatureProps;
   NestedComponent?: React.ComponentType<{ row: Row<T> }>;
   columnOrder: ColumnOrderState;
   setColumnOrder: React.Dispatch<React.SetStateAction<ColumnOrderState>>;
   isCompactTable: boolean;
   tableStates: CraftTableOptionsProps;
+  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  onSaveSettings?: (columnId: string) => void;
 }
 
 export interface TableHeaderProps<T> {
   header: Header<T, unknown>;
+  activeTab?: string;
   featureOptions: CraftTableFeatureProps;
   tableStates: CraftTableOptionsProps;
+  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  onSaveSettings?: (columnId: string) => void;
 }

package/src/view/FIlterWrapper.tsx

@@ -87,6 +87,9 @@ const CraftTableFilterWrapper = ({
   // API to handle saving a filter
   const handleSaveFilter = (name: string) => {
     const quickFilter = filters.map((f: any) => ({ ...f }));
+    const shareWithTeam = filterMaster?.saved_filters?.is_shared ?? false;
+    const allowTeamEdit = filterMaster?.saved_filters?.is_editable ?? false;
+    const description = filterMaster?.saved_filters?.description ?? "";
 
     const payload = {
       name,
@@ -94,7 +97,10 @@ const CraftTableFilterWrapper = ({
       mapped_entity_type: ENTITY_TYPE, // For that entity type
       status: "ACTIVE",
       entity_type: "SFM", // FIXED entity type
+      description: description,
       filterDetails: quickFilter,
+      is_shared: shareWithTeam,
+      is_editable: allowTeamEdit,
     };
     const entity_type = "SFM";
     savedMutation.mutate(
@@ -111,6 +117,9 @@ const CraftTableFilterWrapper = ({
                     ...prev?.saved_filters,
                     selectedId: newFilterId.toString(),
                     selectedName: name,
+                    description: description,
+                    is_shared: shareWithTeam,
+                    is_editable: allowTeamEdit,
                   },
                   activeFilterTabIndex: 1,
                 } as FilterMasterStateProps)
@@ -127,6 +136,9 @@ const CraftTableFilterWrapper = ({
       filter_operator: f.filter_operator,
       filter_value: f.filter_value,
     }));
+    const shareWithTeam = filterMaster?.saved_filters?.is_shared ?? false;
+    const allowTeamEdit = filterMaster?.saved_filters?.is_editable ?? false;
+    const description = filterMaster?.saved_filters?.description ?? "";
 
     const payload = {
       name: filterMaster?.saved_filters?.selectedName, // Name of the filter
@@ -134,8 +146,11 @@ const CraftTableFilterWrapper = ({
       id: filterMaster?.saved_filters?.selectedId,
       mapped_entity_type: ENTITY_TYPE,
       status: "ACTIVE",
+      description: description,
       entity_type: "SFM",
       filterDetails: quickFilter,
+      is_shared: shareWithTeam, // Now true/false from state
+      is_editable: allowTeamEdit,
     };
     const entity_type = "SFM";
     updateMutation.mutate({ entity_type, payload });