rez-table-listing-mui 1.2.15 → 1.2.17

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

@@ -29,8 +29,10 @@ const SavedFilter = ({
   setDeleteFilterModalOpen,
   setSavedFilterModalOpen,
   tabValue,
+  onChangeFunction,
 }: FilterFormComponentProps) => {
-  const { setFilterMaster, setFilterToDelete } = tableStates;
+  const { filters, filterMaster, setFilterMaster, setFilterToDelete } =
+    tableStates;
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [criteriaSearchTerm, setCriteriaSearchTerm] = useState<string>("");
 
@@ -55,36 +57,74 @@ const SavedFilter = ({
   }, []);
 
   const handleListItemClick = (filter: FilterOperationListProps) => {
-    setFilterMaster(
-      (prev) =>
-        ({
-          ...prev,
-          saved_filters: {
-            ...prev?.attributes,
-            selectedId: filter?.value,
-            selectedName: filter?.label,
-          },
-          activeFilterTabIndex: tabValue,
-        } as FilterMasterStateProps)
-    );
+    // setFilterMaster(
+    //   (prev) =>
+    //     ({
+    //       ...prev,
+    //       saved_filters: {
+    //         ...prev?.attributes,
+    //         selectedId: filter?.value,
+    //         selectedName: filter?.label,
+    //       },
+    //       attributes: {
+    //         ...filterMaster?.attributes,
+    //         radio: [],
+    //       },
+    //       activeFilterTabIndex: tabValue,
+    //     } as FilterMasterStateProps)
+    // );
+
+    const newFilterMasterState = {
+      ...filterMaster,
+      saved_filters: {
+        ...filterMaster?.attributes,
+        selectedId: filter?.value,
+        selectedName: filter?.label,
+      },
+      attributes: {
+        ...filterMaster?.attributes,
+        radio: [],
+      },
+      activeFilterTabIndex: tabValue,
+    } as FilterMasterStateProps;
+
+    setFilterMaster(newFilterMasterState);
+
+    const newState = {
+      filterMaster: newFilterMasterState,
+      filters: filters,
+    };
+
+    onChangeFunction && onChangeFunction(newState);
+
     // setEditfilter state on edit icon click
     setEditMode && setEditMode(true);
     setFilterToDelete(filter);
   };
 
   const handleAppyFilter = (filter: FilterOperationListProps) => {
-    setFilterMaster(
-      (prev) =>
-        ({
-          ...prev,
-          saved_filters: {
-            ...prev?.attributes,
-            selectedId: filter?.value,
-            selectedName: filter?.label,
-          },
-          activeFilterTabIndex: tabValue,
-        } as FilterMasterStateProps)
-    );
+    const newFilterMasterState = {
+      ...filterMaster,
+      saved_filters: {
+        ...filterMaster?.attributes,
+        selectedId: filter?.value,
+        selectedName: filter?.label,
+      },
+      attributes: {
+        ...filterMaster?.attributes,
+        radio: [],
+      },
+      activeFilterTabIndex: tabValue,
+    } as FilterMasterStateProps;
+
+    setFilterMaster(newFilterMasterState);
+
+    const newState = {
+      filterMaster: newFilterMasterState,
+      filters: filters,
+    };
+
+    onChangeFunction && onChangeFunction(newState);
   };
 
   const renderList = () => (
@@ -208,6 +248,7 @@ const SavedFilter = ({
           setCriteriaSearchTerm={setCriteriaSearchTerm}
           setSavedFilterModalOpen={setSavedFilterModalOpen}
           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
+          onChangeFunction={onChangeFunction}
         />
       ) : null}
     </Box>

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

@@ -23,6 +23,7 @@ export function TableFilter({
   onSaveFilter,
   onUpdateFilter,
   dropdownData,
+  onChangeFunction,
 }: FilterDrawerProps) {
   const [tabValue, setTabValue] = useState(0);
   const [editMode, setEditMode] = useState(false);
@@ -30,6 +31,11 @@ export function TableFilter({
     UpdatedFilterStateProps[]
   >([]);
 
+  // tabs
+  const FILTER_TAB = 0;
+  const SAVED_TAB = 1;
+  const ATTR_TAB = 2;
+
   // remove this
   const [saveFilterModalOpen, setSaveFilterModalOpen] = useState(false);
   const [deleteFilterModalOpen, setDeleteFilterModalOpen] = useState(false);
@@ -45,6 +51,26 @@ export function TableFilter({
     setShowFilterOption,
   } = tableStates;
 
+  const clearAttributeRadio = () => {
+    const newFilterMaster = {
+      ...filterMaster,
+      attributes: {
+        ...filterMaster?.attributes,
+        radio: [],
+      },
+      activeFilterTabIndex: FILTER_TAB,
+    };
+
+    setFilterMaster(newFilterMaster as FilterMasterStateProps);
+
+    // const newState = {
+    //   filterMaster: newFilterMaster,
+    //   filters: filters,
+    // };
+
+    // onChangeFunction && onChangeFunction(newState);
+  };
+
   const filterNameInput: InputField = {
     label: "Filter Name",
     placeholder: 'e.g., "Website Leads - This Week"',
@@ -78,6 +104,10 @@ export function TableFilter({
   }, [filters, columnsData, tabValue]);
 
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
+    if (tabValue === ATTR_TAB && newValue === FILTER_TAB) {
+      clearAttributeRadio();
+    }
+
     setTabValue(newValue);
     if (newValue === 0) {
       setEditMode(false);
@@ -93,44 +123,33 @@ export function TableFilter({
   ];
 
   const handleTabCrossClick = (index: number) => {
-    const commonStateReset = () => {
-      setFilters([]);
-      setSelectedFilters([]);
-      setFilterMaster(
-        (prev) =>
-          ({ ...prev, activeFilterTabIndex: -1 } as FilterMasterStateProps)
-      );
+    // always-clear bits
+    setFilters([]);
+    setSelectedFilters([]);
+
+    // only tab 1 needs this
+    if (index === 1) setEditMode(false);
+
+    const patches: Record<number, Partial<FilterMasterStateProps>> = {
+      0: {}, // no extra fields
+      1: { saved_filters: { selectedId: "", selectedName: "" } },
+      2: { attributes: { radio: [], selected: "" } },
     };
 
-    const indexMapper: { [key: number]: () => void } = {
-      0: () => commonStateReset(),
-      1: () => {
-        commonStateReset();
-        setEditMode(false);
-        setFilterMaster(
-          (prev) =>
-            ({
-              ...prev,
-              saved_filters: { selectedId: "", selectedName: "" },
-            } as FilterMasterStateProps)
-        );
-      },
-      2: () => {
-        commonStateReset();
-        setFilterMaster(
-          (prev) =>
-            ({
-              ...prev,
-              attributes: {
-                radio: [],
-                selected: "",
-              },
-            } as FilterMasterStateProps)
-        );
-      },
+    const newFilterMasterState = {
+      ...filterMaster,
+      activeFilterTabIndex: -1,
+      ...(patches[index] ?? {}),
+    } as FilterMasterStateProps;
+
+    setFilterMaster(newFilterMasterState);
+
+    const newState = {
+      filterMaster: newFilterMasterState,
+      filters: filters,
     };
 
-    indexMapper[index] && indexMapper[index]();
+    onChangeFunction && onChangeFunction(newState);
   };
 
   return (
@@ -167,6 +186,7 @@ export function TableFilter({
           setSelectedFilters={setSelectedFilters}
           setSavedFilterModalOpen={setSaveFilterModalOpen}
           dropdownData={dropdownData}
+          onChangeFunction={onChangeFunction}
         />
       </CustomTabPanel>
 
@@ -182,6 +202,7 @@ export function TableFilter({
           setSavedFilterModalOpen={setSaveFilterModalOpen}
           dropdownData={dropdownData}
           tabValue={tabValue}
+          onChangeFunction={onChangeFunction}
         />
       </CustomTabPanel>
 
@@ -193,6 +214,7 @@ export function TableFilter({
           searchTerm={searchTerm}
           setSearchTerm={setSearchTerm}
           tabValue={tabValue}
+          onChangeFunction={onChangeFunction}
         />
       </CustomTabPanel>
 
@@ -230,7 +252,6 @@ export function TableFilter({
 
               onSaveFilter && onSaveFilter(inputValue || "");
               setSaveFilterModalOpen(false);
-
               setTabValue(1);
             },
             variant: "contained",
@@ -267,15 +288,6 @@ export function TableFilter({
               onDeleteFilter && onDeleteFilter();
               setDeleteFilterModalOpen(false);
               setEditMode && setEditMode(false);
-              setSelectedFilters([]);
-              setFilters([]);
-              setFilterMaster(
-                (prev) =>
-                  ({
-                    ...prev,
-                    activeFilterTabIndex: -1,
-                  } as FilterMasterStateProps)
-              );
             },
             variant: "contained",
             sx: {

package/src/listing/components/index.scss

@@ -10,8 +10,6 @@
   --grey-900: #414042;
   --filter-width: 24rem;
 
-  font-family: "Satoshi", sans-serif;
-
   // set default styles for all elements
   & * {
     box-sizing: border-box;
@@ -127,7 +125,7 @@
             cursor: pointer;
 
             .ts__dnd__button {
-              color: var(--grey-300);
+              color: var(--grey-600);
               // width: max-content;
               // height: max-content;
               // cursor: grabbing;

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

@@ -11,7 +11,7 @@ const LoginButton = () => {
       const response = await axios.post(
         "http://localhost:4010/api/auth/login",
         {
-          email_id: "admin@rezolut.in",
+          email_id: "test@gmail.com",
           password: "Admin@123",
         }
       );

package/src/listing/components/table-head.tsx

@@ -5,11 +5,7 @@ import {
 } from "../types/table-options";
 import { DownArrow, UpArrow } from "../../assets/svg";
 import { CSSProperties, useState } from "react";
-import {
-  getColumnAlignment,
-  getColumnPinningStyles,
-} from "../libs/utils/common";
-import { align } from "../types/common";
+import { getColumnPinningStyles } from "../libs/utils/common";
 import {
   horizontalListSortingStrategy,
   SortableContext,
@@ -39,7 +35,7 @@ function TableHead<T>({
   } = featureOptions;
 
   // Popover
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleHover = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl((prev) => (prev ? null : event.currentTarget));

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

@@ -119,17 +119,13 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
 
     if (showList || hideList) {
       const isValidShowList = showList?.length > 0;
-      console.log("inside show list and hide list if", isValidShowList);
 
       if (!isValidShowList) {
-        console.log("not a valid show list");
-
         const hasColumnError = saveButtonError.messages.some(
           (message) => message.type === ERROR_CODE
         );
 
         if (!hasColumnError) {
-          console.log("inside if");
           setSaveButtonError((prev) => ({
             ...prev,
             hasError: true,
@@ -143,7 +139,6 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
           }));
         }
       } else {
-        console.log("inside else");
         const hasOtherMessages = saveButtonError?.messages?.some(
           (message) => message.type !== ERROR_CODE
         );

package/src/listing/components/table-settings/components/group-by.tsx

@@ -58,8 +58,6 @@ const GroupBy = ({
     const stateToArray =
       (quickTabStates && Object.entries(quickTabStates)) || [];
     const isEmptyState = stateToArray.length ? false : true;
-    console.log("columnsData", columnsData);
-    console.log("first", columnsData.lanes.map((item: any) => item.name)[0]);
 
     if (isEmptyState) {
       setSettingsData((prev) => ({
@@ -160,7 +158,7 @@ const GroupBy = ({
     id,
     label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
   }));
-  const hideListValues = (quickTabStates?.hide_list || []).map((id: any) => ({
+  const hideListValues = (quickTabStates?.hide_list || [])?.map((id: any) => ({
     id,
     label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
   }));
@@ -375,7 +373,7 @@ const GroupBy = ({
                       return selected;
                     }}
                   >
-                    {LANE_SELECTS.map((lane: any) => (
+                    {LANE_SELECTS?.map((lane: any) => (
                       <MenuItem key={lane?.key} value={lane?.value}>
                         {lane?.value}
                       </MenuItem>
@@ -408,7 +406,7 @@ const GroupBy = ({
                       return option?.label || selected;
                     }}
                   >
-                    {sortingOptions.map((option) => (
+                    {sortingOptions?.map((option) => (
                       <MenuItem key={option?.value} value={option?.value}>
                         {option?.label}
                       </MenuItem>

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

@@ -57,8 +57,6 @@ const Lane = ({
     const stateToArray =
       (quickTabStates && Object.entries(quickTabStates)) || [];
     const isEmptyState = stateToArray.length ? false : true;
-    console.log("columnsData", columnsData);
-    console.log("first", columnsData.lanes.map((item: any) => item.name)[0]);
 
     if (isEmptyState) {
       setSettingsData((prev) => ({
@@ -159,7 +157,7 @@ const Lane = ({
     id,
     label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
   }));
-  const hideListValues = (quickTabStates?.hide_list || []).map((id: any) => ({
+  const hideListValues = (quickTabStates?.hide_list || [])?.map((id: any) => ({
     id,
     label: id?.charAt(0)?.toUpperCase() + id?.slice(1),
   }));
@@ -374,7 +372,7 @@ const Lane = ({
                       return selected;
                     }}
                   >
-                    {LANE_SELECTS.map((lane: any) => (
+                    {LANE_SELECTS?.map((lane: any) => (
                       <MenuItem key={lane?.key} value={lane?.value}>
                         {lane?.value}
                       </MenuItem>

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

@@ -68,8 +68,6 @@ const Sorting = ({
           sortby: emptySortBy,
         },
       }));
-
-      console.log("sorting is empty");
     } else if (isEmptyDefault) {
       setSettingsData((prev) => ({
         ...prev,

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

@@ -19,7 +19,7 @@
       cursor: pointer;
       color: var(--grey-900);
       font-size: 0.875rem;
-      font-family: "Satoshi", sans-serif;
+      font-family: "Satoshi";
       font-weight: 700;
 
       .tab__label {

package/src/listing/components/topbar/index.scss

@@ -33,7 +33,6 @@
           margin-bottom: 1.2rem;
         }
       }
-
       .ts--button {
         margin-right: 0.6rem;
         margin-top: 1rem;

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

@@ -60,8 +60,7 @@ function Topbar<T>({
     table.getAllLeafColumns().map((col) => col.id)
   );
 
-  //Filter
-  // const [showFilterInput, setShowFilterInput] = useState(false);
+  const { setShowTableFilter } = tableStates;
 
   // search
   const [showSearchInput, setShowSearchInput] = useState(false);
@@ -77,7 +76,6 @@ function Topbar<T>({
     rightSideComponent,
     showColumnToggle,
     showChangeLayoutToggle,
-    viewMoreToggle,
     showSortingToggle,
     showFilterToggle,
     showSearch,
@@ -93,10 +91,6 @@ function Topbar<T>({
     handler: () => setShowColumnHiding(false),
   });
 
-  const handleLayoutIconClick = (event: React.MouseEvent<HTMLElement>) => {
-    setLayoutAnchorEl(event.currentTarget);
-  };
-
   const handleLayoutSelect = (layout: string) => {
     setSelectedLayout(layout);
     setLayoutAnchorEl(null);
@@ -175,14 +169,6 @@ function Topbar<T>({
         {rightSideComponent}
         {paginationComponent}
 
-        {/* {showSearch && (
-          <div title="Search">
-            <TableSearch
-              value={searchValue ?? ""}
-              onChange={onSearchChange ?? (() => {})}
-            />
-          </div>
-        )} */}
         {showSearch && (
           <div
             title="Search"
@@ -203,9 +189,6 @@ function Topbar<T>({
         {showChangeLayoutToggle && (
           <>
             <div className="change-layout ts--button" title="Layout">
-              {/* <div onClick={handleLayoutIconClick}>
-                <ChangeLayoutIcon />
-              </div> */}
               <div
                 onClick={(e) => {
                   const customEvent = new CustomEvent("triggerLayoutPopover", {
@@ -275,13 +258,76 @@ function Topbar<T>({
           </>
         )}
 
+        {/* {showFilterToggle && (
+          <div
+            className="filter ts--button"
+            title="Filter"
+            onClick={onFilterButtonClick}
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              backgroundColor:
+                tableStates.showTableFilter || tableStates.filters.length > 0
+                  ? "#e8e2fb"
+                  : "transparent",
+              height: "25px",
+              width: "25px",
+              borderRadius: "6px",
+              cursor: "pointer",
+            }}
+          >
+            <FilterationIcon
+              color={
+                tableStates.showTableFilter || tableStates.filters.length > 0
+                  ? "#7A5AF8"
+                  : "#1C1B1F"
+              }
+            />
+          </div>
+        )} */}
+
         {showFilterToggle && (
           <div
             className="filter ts--button"
             title="Filter"
-            onClick={onFilterButtonClick && onFilterButtonClick}
+            onClick={onFilterButtonClick}
+            style={{
+              position: "relative",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              backgroundColor:
+                tableStates.showTableFilter || tableStates.filters.length > 0
+                  ? "#eae4fe"
+                  : "transparent",
+              height: "25px",
+              width: "25px",
+              borderRadius: "6px",
+              cursor: "pointer",
+            }}
           >
-            <FilterationIcon color="#1C1B1F" />
+            <FilterationIcon
+              color={
+                tableStates.showTableFilter || tableStates.filters.length > 0
+                  ? "#7A5AF8"
+                  : "#1C1B1F"
+              }
+            />
+
+            {tableStates.filters.length > 0 && !tableStates.showTableFilter && (
+              <span
+                style={{
+                  position: "absolute",
+                  top: "1px",
+                  right: "1px",
+                  width: "6px",
+                  height: "6px",
+                  borderRadius: "50%",
+                  backgroundColor: "#F63D68",
+                }}
+              />
+            )}
           </div>
         )}