rez-table-listing-mui 2.0.13 → 2.0.14

package/src/listing/components/table-settings/components/swim-lane.tsx

@@ -0,0 +1,240 @@
+import React, { useEffect, useState } from "react";
+import {
+  Box,
+  Select,
+  MenuItem,
+  FormControl,
+  Typography,
+  Grid,
+} from "@mui/material";
+
+import ListingValues from "../common/listing-values";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import { TabsStyles } from "../style";
+import { craftTableFilterSettingsOptionsProps } from "../../../types/table-options";
+import { LANE_SELECTS } from "../constants";
+
+const GroupBy = ({
+  filterSettingStates,
+  columnsData,
+  tabsApiData,
+  tabsApiDataLoading,
+}: {
+  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  columnsData: any;
+  tabsApiData?: any[];
+  tabsApiDataLoading?: boolean;
+}) => {
+  const { settingsData, setSettingsData } = filterSettingStates;
+
+  const quickTabStates = settingsData?.quick_tab as any;
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const isStatus = quickTabStates?.attribute === "Status";
+  const enableDND =
+    quickTabStates?.attribute === "Source" &&
+    quickTabStates?.sorting === "custom";
+
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor)
+  );
+
+  useEffect(() => {
+    if (!quickTabStates || !quickTabStates.attribute) {
+      setSettingsData((prev) => ({
+        ...prev,
+        quick_tab: {
+          attribute: "Status",
+          sorting: "asc",
+          show_list: [],
+          hide_list: [],
+        },
+      }));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!tabsApiData) return;
+
+    setSettingsData((prev) => ({
+      ...prev,
+      quick_tab: {
+        ...prev.quick_tab,
+        hide_list: tabsApiData,
+        show_list: [],
+        sorting: quickTabStates?.attribute === "Source" ? "count_dsc" : "asc",
+      },
+    }));
+  }, [quickTabStates?.attribute]);
+
+  /* Drag logic unchanged */
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over) return;
+
+    const from = active.data.current?.containerId;
+    const to = over.data.current?.containerId;
+    if (!from || !to) return;
+
+    const showList = [...(quickTabStates.show_list ?? [])];
+    const hideList = [...(quickTabStates.hide_list ?? [])];
+
+    if (from === to) {
+      const list = from === "lanes" ? showList : hideList;
+      const oldIndex = list.indexOf(String(active.id));
+      const newIndex = list.indexOf(String(over.id));
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const [moved] = list.splice(oldIndex, 1);
+        list.splice(newIndex, 0, moved);
+      }
+    } else {
+      if (from === "list" && to === "lanes") {
+        hideList.splice(hideList.indexOf(String(active.id)), 1);
+        showList.push(String(active.id));
+      }
+      if (from === "lanes" && to === "list") {
+        showList.splice(showList.indexOf(String(active.id)), 1);
+        hideList.push(String(active.id));
+      }
+    }
+
+    setSettingsData((prev) => ({
+      ...prev,
+      quick_tab: {
+        ...prev.quick_tab,
+        show_list: showList,
+        hide_list: hideList,
+      },
+    }));
+  };
+
+  const handleItemToggle = (itemId: string, fromContainerId: string) => {
+    const showList = [...(quickTabStates.show_list ?? [])];
+    const hideList = [...(quickTabStates.hide_list ?? [])];
+
+    if (fromContainerId === "list") {
+      hideList.splice(hideList.indexOf(itemId), 1);
+      showList.push(itemId);
+    } else {
+      showList.splice(showList.indexOf(itemId), 1);
+      hideList.push(itemId);
+    }
+
+    setSettingsData((prev) => ({
+      ...prev,
+      quick_tab: {
+        ...prev.quick_tab,
+        show_list: showList,
+        hide_list: hideList,
+      },
+    }));
+  };
+
+  const sortingOptions = [
+    { label: "A-Z", value: "asc" },
+    { label: "Z-A", value: "dsc" },
+    { label: "Count (Ascending)", value: "count_asc" },
+    { label: "Count (Descending)", value: "count_dsc" },
+    { label: "Custom", value: "custom" },
+  ];
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <Typography variant="caption" sx={TabsStyles.mainTabsHeader}>
+        **Swim Lane settings will be reflected in vertical lanes
+      </Typography>
+
+      <Grid sx={{ position: "relative" }} container>
+        <Grid size={12}>
+          <Grid sx={TabsStyles.mainTabDropdown} size={6}>
+            <FormControl sx={TabsStyles.mainTabSelect} size="small">
+              <Select
+                value={quickTabStates?.attribute || ""}
+                onChange={(e) =>
+                  setSettingsData((prev) => ({
+                    ...prev,
+                    quick_tab: {
+                      ...prev.quick_tab,
+                      attribute: e.target.value,
+                    },
+                  }))
+                }
+              >
+                {LANE_SELECTS?.map((lane: any) => (
+                  <MenuItem key={lane?.key} value={lane?.value}>
+                    {lane?.value}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+
+            <FormControl sx={TabsStyles.selectDropdownSeparator} size="small">
+              <Select
+                disabled={isStatus}
+                value={quickTabStates?.sorting}
+                onChange={(e) =>
+                  setSettingsData((prev) => ({
+                    ...prev,
+                    quick_tab: {
+                      ...prev.quick_tab,
+                      sorting: e.target.value,
+                    },
+                  }))
+                }
+              >
+                {!isStatus &&
+                  sortingOptions.map((opt) => (
+                    <MenuItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </MenuItem>
+                  ))}
+              </Select>
+            </FormControl>
+          </Grid>
+        </Grid>
+
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <Grid sx={{ mt: 2 }} container spacing={2} size={12}>
+            <ListingValues
+              buttonText="Show All"
+              headerText="List of Values"
+              filteredValues={quickTabStates?.hide_list || []}
+              searchTerm={searchTerm}
+              setSearchTerm={setSearchTerm}
+              containerId="list"
+              tabsApiDataLoading={tabsApiDataLoading}
+              onItemToggle={handleItemToggle}
+              enableDragAndDrop={enableDND}
+            />
+
+            <ListingValues
+              buttonText="Hide All"
+              headerText="View as Lanes"
+              filteredValues={quickTabStates?.show_list || []}
+              containerId="lanes"
+              onItemToggle={handleItemToggle}
+              enableDragAndDrop={enableDND}
+            />
+          </Grid>
+        </DndContext>
+      </Grid>
+    </Box>
+  );
+};
+
+export default GroupBy;

package/src/listing/components/table-settings/constants.ts

@@ -8,7 +8,7 @@ export const SETTINGS_TABS: { label: string }[] = [
 
 export const KANBAN_SETTINGS_TABS: { label: string }[] = [
   { label: "Lane" },
-  { label: "Group By" },
+  { label: "Swim Lane" },
 ];
 
 export const LANE_SELECTS = [
@@ -22,3 +22,4 @@ export const TOGGLE_BUTTON_TABS: ToggleButtonTabsProps[] = [
   { label: "Default", value: true, isDisabled: false },
   { label: "Tab Wise", value: false, isDisabled: false },
 ];
+

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

@@ -20,7 +20,7 @@ import CustomButton from "./components/custom-button";
 import { KANBAN_SETTINGS_TABS, SETTINGS_TABS } from "./constants";
 import Loader from "../common/loader/loader";
 import Lane from "./components/lane";
-import GroupBy from "./components/group-by";
+import GroupBy from "./components/swim-lane";
 import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
 
 export function QuickFilterSettings({
@@ -41,6 +41,8 @@ export function QuickFilterSettings({
   tabsApiDataLoading,
   onSaveSettingsData,
   activeTab,
+  selectAttributeData,
+  selectSwinLandData,
 }: QuickFilterModalProps) {
   const [tabValue, setTabValue] = useState(0);
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
@@ -66,27 +68,27 @@ export function QuickFilterSettings({
   };
 
   const handleSaveSetSettingsData = () => {
-    const copyColumnTabState = columnTabState?.isDefault
-      ? {
-          isDefault: true,
-          show_list: columnTabState?.show_list || [],
-          hide_list: columnTabState?.hide_list || [],
-        }
-      : {
-          isDefault: false,
-          tabs: columnTabState?.tabs || [],
-        };
-
-    const copySortingTabState = sortingTabState?.isDefault
-      ? {
-          isDefault: true,
-          sortby:
-            sortingTabState?.sortby?.filter((item) => item.column !== "") || [],
-        }
-      : {
-          isDefault: false,
-          tabs: sortingTabState?.tabs || [],
-        };
+    const copyColumnTabState = {
+      isDefault: columnTabState?.isDefault,
+      show_list: columnTabState?.show_list || [],
+      hide_list: columnTabState?.hide_list || [],
+      tabs: columnTabState?.tabs || [],
+    };
+    // : {
+    //     isDefault: false,
+    //     tabs: columnTabState?.tabs || [],
+    //   };
+    // commented as per the requirement
+    const copySortingTabState = {
+      isDefault: sortingTabState?.isDefault,
+      sortby:
+        sortingTabState?.sortby?.filter((item) => item.column !== "") || [],
+      tabs: sortingTabState?.tabs || [],
+    };
+    // : {
+    //     isDefault: false,
+    //     tabs: sortingTabState?.tabs || [],
+    //   };
 
     const modifiedSettingsData = {
       quick_tab: quickTabStates,
@@ -109,7 +111,12 @@ export function QuickFilterSettings({
       container={fullscreenContainer}
     >
       <DialogTitle sx={dialogStyles.dialogTitle}>
-        <Typography sx={{ fontSize: "1.125rem" }}>List View Setting</Typography>
+        <Typography sx={{ fontSize: "1.125rem" }}>
+          {view === "listing"
+            ? "Quick Filter Settings"
+            : "Kanban View Settings"}
+        </Typography>
+
         <IconButton
           size="small"
           color="inherit"
@@ -182,6 +189,7 @@ export function QuickFilterSettings({
                     <Lane
                       filterSettingStates={filterSettingStates}
                       columnsData={columnsData}
+                      selectAttributeData={selectAttributeData}
                     />
                   )}
                 </CustomTabPanel>
@@ -193,6 +201,7 @@ export function QuickFilterSettings({
                     <GroupBy
                       filterSettingStates={filterSettingStates}
                       columnsData={columnsData}
+                      selectSwinLandData={selectSwinLandData}
                     />
                   )}
                 </CustomTabPanel>
@@ -203,15 +212,33 @@ export function QuickFilterSettings({
       </DialogContent>
 
       {!columnsDataLoading && hasAPIData && (
+        // <DialogActions>
+        //   <CustomButton
+        //     // disabled={saveButtonError?.hasError}
+        //     // disabled={saveButtonError?.hasError}
+        //     disabled={disbaledCondition}
+        //     onClick={handleSaveSetSettingsData}
+        //   >
+        //     {view === "listing" ? "Save Quick Filter" : "Save Kanban Layout"}
+        //   </CustomButton>
+        // </DialogActions>
         <DialogActions>
-          <CustomButton
-            // disabled={saveButtonError?.hasError}
-            // disabled={saveButtonError?.hasError}
-            disabled={disbaledCondition}
-            onClick={handleSaveSetSettingsData}
-          >
-            {view === "listing" ? "Save Quick Filter" : "Save Kanban Layout"}
-          </CustomButton>
+          {view === "kanban" && tabValue === 0 && (
+            <>
+              <CustomButton onClick={handleSaveSetSettingsData}>
+                Save & Close
+              </CustomButton>
+              <CustomButton onClick={() => setTabValue(1)} variant="contained">
+                Next
+              </CustomButton>
+            </>
+          )}
+
+          {view === "kanban" && tabValue === 1 && (
+            <CustomButton onClick={handleSaveSetSettingsData}>
+              Save
+            </CustomButton>
+          )}
         </DialogActions>
       )}
     </CustomDialog>

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

@@ -4,7 +4,12 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import { api, ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../utils/common";
+import {
+  api,
+  APP_CODE,
+  ENTITY_TYPE,
+  MAPPED_ENTITY_TYPE,
+} from "../utils/common";
 import {
   APIParamsProps,
   EntityListingResponse,
@@ -62,7 +67,7 @@ const entityListingCall = async ({
   responseStatus: number;
   data: EntityListingResponse;
 }> => {
-  const url = `filter/adm`;
+  const url = `filter/${APP_CODE}`;
 
   const body = {
     entity_type,
@@ -102,6 +107,7 @@ export const useEntityTableAPI = ({
   ],
   attributeFilter = [],
   flatJson,
+  module_code,
 }: EntityTableAPIProps) => {
   const { data, isPending: isTableDataPending } = useQuery({
     queryKey: ["entityTable", page, size, tabs, quickFilter],

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

@@ -1,4 +1,4 @@
-import { api, MAPPED_ENTITY_TYPE } from "./common";
+import { api, APP_CODE, MAPPED_ENTITY_TYPE } from "./common";
 import {
   createSavedFilterPayload,
   deleteSavedFilterPayload,
@@ -225,7 +225,7 @@ export const getAttributes = async (
 };
 
 export const getTableTabs = async (payload: any) => {
-  const response = await api.post(`filter/adm/tabs`, payload);
+  const response = await api.post(`filter/${APP_CODE}/tabs`, payload);
   return response.data;
 };
 
@@ -263,3 +263,49 @@ export const newCommonGetDropdownDataAPI = async ({
     .post(`entity/getAttributeDropdown${queryString}`, requestBody)
     .then((response) => response.data);
 };
+
+export const commonFetchDropdownDataAPI = async ({
+  entity_type,
+  enterprise_id,
+  data,
+  inactiveIds,
+  parentId,
+}: {
+  entity_type: string | undefined;
+  enterprise_id?: string | null;
+  data?: any;
+  inactiveIds?: string | null;
+  parentId?: number | string;
+}) => {
+  const requestBody = {
+    // status: "ACTIVE",
+    enterprise_id,
+    ...data,
+  };
+
+  let params = "";
+
+  const queryParams: string[] = [];
+
+  if (!Number.isNaN(Number(inactiveIds)) && inactiveIds) {
+    queryParams.push(`inactiveIds=${inactiveIds}`);
+  }
+
+  if (parentId !== undefined && parentId !== null) {
+    queryParams.push(`parent=${parentId}`);
+  }
+
+  if (queryParams.length > 0) {
+    params = `?${queryParams.join("&")}`;
+  }
+  // if (entity_type === "ORGP") {
+  //   return await api.get(`organization/sso/getdropdown`).then((response) => {
+  //     return response.data;
+  //   });
+  // }
+  return await api
+    .post(`entity/getListMasterDropdown/${entity_type}${params}`, requestBody)
+    .then((response) => {
+      return response.data;
+    });
+};

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

@@ -77,14 +77,16 @@ export function customDebounce<T extends (...args: any[]) => any>(
 }
 
 //ENTITY TYPE
-const ENVIRONMENT = "adm_dev";
-export const ENTITY_TYPE = "SCH";
+const ENVIRONMENT = "crm_dev";
+export const ENTITY_TYPE = "LEAD";
+export const MODULE_CODE = "school_adm_org";
 export const MAPPED_ENTITY_TYPE = "LYPR"; // LAP OR LYPR
 export const USER_ID = 226;
+export const APP_CODE = "crm";
 
 const environments = {
   adm_dev: "http://localhost:6010/api",
-  crm_dev: "http://localhost:4011/api",
+  crm_dev: "http://localhost:6011/api",
   uat: "https://api.eth-qa.rezolut.in/api/enrol",
 };
 

package/src/listing/types/common.ts

@@ -65,6 +65,7 @@ export interface EntityTableAPIProps {
     filter_value: string[] | string;
   }[];
   flatJson: boolean;
+  module_code?: string;
 }
 
 export interface viewSettingsDropDownAPIProps {

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

@@ -19,6 +19,8 @@ export interface QuickFilterModalProps {
   tabsApiDataLoading?: boolean;
   onSaveSettingsData?: (data: any) => void;
   activeTab?: string;
+  selectAttributeData?: { label: string; value: string }[];
+  selectSwinLandData?: { label: string; value: string }[];
 }
 
 type TabName = string;

package/src/listing/types/filter.ts

@@ -55,7 +55,8 @@ export type FilterInputDataTypes =
   | "multiselect"
   | "date"
   | "year"
-  | "number";
+  | "number"
+  | "label";
 
 export interface FilterColumnsListProps {
   created_date: string | null;

package/src/view/KanbanView.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import Kanban from "../kanban";
 import LeadCard from "../kanban/components/LeadCard";
-import { useGetKanbanData } from "../kanban/hooks/hooks";
+import { kanbanDropdownResults, useGetKanbanData } from "../kanban/hooks/hooks";
 import { useCraftTable } from "../listing/libs/hooks/useCraftTable";
 import {
   useEntityTableAPI,
@@ -16,6 +16,9 @@ const KanbanView = () => {
   const { getSettingsAPIData } = useGetSettingsDataAPI(ENTITY_TYPE);
   const [selectedTab, setSelectedTab] = useState("All");
   const tableStates = useCraftTable();
+  const [selectAttributeData] = kanbanDropdownResults("ATT", "1001");
+  const [selectSwinLandData] = kanbanDropdownResults("SWM", "1001");
+
   const { tableData } = useEntityTableAPI({
     page: 0,
     size: 20,
@@ -57,6 +60,8 @@ const KanbanView = () => {
         onClose={() => setShowListViewSettings(false)}
         columnsData={metaData || {}}
         columnsDataLoading={isLoading}
+        selectAttributeData={selectAttributeData?.data}
+        selectSwinLandData={selectSwinLandData?.data}
         // tabsApiData={settingsTabDropdownData || []}
         // tabsApiDataLoading={settingsTabDropdownPending}
         // onSaveSettingsData={handleSaveSettingsData}

package/src/view/ListingView.tsx

@@ -10,6 +10,7 @@ import {
   ENTITY_TYPE,
   formatTableHeaders,
   MAPPED_ENTITY_TYPE,
+  MODULE_CODE,
 } from "../listing/libs/utils/common";
 import {
   useCommonFilterDropdownAPI,
@@ -135,7 +136,7 @@ function ListingView() {
     // }, 1000);
 
     fetchMeta();
-  }, [selectedTab]);
+  }, [selectedTab, metaQuery?.data]);
 
   // useEffect(() => {
   //   setFilters(detailsQuery.data ?? []);
@@ -187,6 +188,7 @@ function ListingView() {
     ],
     attributeFilter: [],
     flatJson: metaQuery.data?.is_flat_json || false,
+    // module_code: MODULE_CODE,
   });
 
   const newData = useMemo(
@@ -381,24 +383,7 @@ function ListingView() {
     );
   };
 
-  return isTableDataPending ? (
-    <Box
-      sx={{
-        // full viewport height
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 2,
-        bgcolor: "background.default",
-      }}
-    >
-      <CircularProgress size={60} thickness={5} color="primary" />
-      <Typography variant="body1" color="text.secondary">
-        Loading, please wait...
-      </Typography>
-    </Box>
-  ) : (
+  return (
     <TableWrapper
       data={filteredData}
       activeTab={selectedTab}
@@ -528,7 +513,7 @@ function ListingView() {
         ),
         searchValue: searchTerm,
         onSearchChange: (val) => setSearchTerm(val),
-        showFilterToggle: false,
+        showFilterToggle: true,
         onFilterButtonClick: () =>
           tableStates.setShowTableFilter(!tableStates.showTableFilter),
         showColumnToggle: false,