rez-table-listing-mui 1.0.50 → 1.2.3

package/package.json

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

package/src/App.tsx

@@ -85,12 +85,12 @@ function App() {
         ) => {
           // Build ordered columns using showList and filteredColumns
           return showList
-            .map((showItem) => {
+            ?.map((showItem) => {
               return filteredColumns.find(
-                (col) => col.accessorKey === showItem.value
+                (col) => col?.accessorKey === showItem?.value
               );
             })
-            .filter((col): col is ColumnDef<any> => col !== undefined); // Ensure non-undefined columns are returned
+            ?.filter((col): col is ColumnDef<any> => col !== undefined); // Ensure non-undefined columns are returned
         };
 
         if (
@@ -110,7 +110,7 @@ function App() {
 
             // First, filter columns based on visibleColumns
             const filteredColumns = allColumns.filter((col: any) =>
-              visibleColumns.has(col.accessorKey)
+              visibleColumns.has(col?.accessorKey)
             );
             setColumns(
               getOrderedColumns(activeTabSettings.show_list, filteredColumns)
@@ -125,7 +125,7 @@ function App() {
             savedColumnSettings.show_list.map((c) => c.value)
           );
           const filtered = allColumns.filter((col: any) =>
-            visibleColumns.has(col.accessorKey)
+            visibleColumns.has(col?.accessorKey)
           );
 
           setColumns(

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

@@ -121,7 +121,7 @@ const AttributesFilter = ({
   };
 
   const selectedAttributeOptions = useMemo(() => {
-    const selected = columnsData.column_list.find(
+    const selected = columnsData?.column_list?.find(
       (col) => col.datasource_list === selectedAttribute
     )?.attribute_key;
 

package/src/components/filter/components/forms/components/Multi-Select.tsx

@@ -45,7 +45,8 @@ const FormMultiSelect = ({
               {...field}
               sx={{
                 "& .MuiOutlinedInput-input": {
-                  padding: "12px 20px",
+                  padding: "10px 20px",
+                  height: "21px",
                 },
               }}
               multiple

package/src/components/index-table.tsx

@@ -42,46 +42,48 @@ function TableWrapper<T>({
   const [metaColumns, setMetaColumns] = useState<ColumnDef<T>[]>([]);
 
   useEffect(() => {
-    const updatedColumns = columns
-      .filter((col) => {
-        const accessorKey =
-          "accessorKey" in col
-            ? (col as { accessorKey: string }).accessorKey
-            : undefined;
-        return typeof shouldHideColumn === "function"
-          ? !shouldHideColumn(accessorKey)
-          : true;
-      })
-      .map((col, index) => {
-        const id =
-          "accessorKey" in col
-            ? (col as { accessorKey: string }).accessorKey
-            : `col_${index}`;
-
-        const cell = (ctx: any) => {
-          if (col.meta?.type === "custom" && col?.meta?.propName) {
-            const customFn = customRenderFn?.[col.meta.propName];
-            return typeof customFn === "function"
-              ? customFn({
-                  value: ctx.getValue(),
-                  row: ctx.row,
-                  table: ctx.table.getRowModel().rows,
-                })
-              : ctx.getValue();
-          }
-
-          if (typeof col.cell === "function") {
-            return col.cell(ctx);
-          }
-
-          return ctx.getValue();
-        };
-
-        return { ...col, id, cell };
-      });
-
-    setMetaColumns(updatedColumns);
-  }, [columns, tableStates]);
+    if (columns?.length > 0) {
+      const updatedColumns = columns
+        ?.filter((col) => {
+          const accessorKey =
+            "accessorKey" in col
+              ? (col as { accessorKey: string })?.accessorKey
+              : undefined;
+          return typeof shouldHideColumn === "function"
+            ? !shouldHideColumn(accessorKey)
+            : true;
+        })
+        ?.map((col, index) => {
+          const id =
+            "accessorKey" in col
+              ? (col as { accessorKey: string })?.accessorKey
+              : `col_${index}`;
+
+          const cell = (ctx: any) => {
+            if (col?.meta?.type === "custom" && col?.meta?.propName) {
+              const customFn = customRenderFn?.[col?.meta?.propName];
+              return typeof customFn === "function"
+                ? customFn({
+                    value: ctx?.getValue(),
+                    row: ctx?.row,
+                    table: ctx?.table?.getRowModel()?.rows,
+                  })
+                : ctx?.getValue();
+            }
+
+            if (typeof col?.cell === "function") {
+              return col?.cell(ctx);
+            }
+
+            return ctx?.getValue();
+          };
+
+          return { ...col, id, cell };
+        });
+
+      setMetaColumns(updatedColumns);
+    }
+  }, [columns]);
 
   const [columnOrder, setColumnOrder] = useState<string[]>(() =>
     metaColumns.map((c) => c.id!)

package/src/components/login/index.tsx

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

package/src/components/search/index.tsx

@@ -2,13 +2,16 @@ import React, { useState, useRef, useEffect, useCallback } from "react";
 import { SearchIcon } from "../../assets/svg";
 import useOutsideClick from "../../libs/hooks/useOutsideClick";
 import { customDebounce } from "../../libs/utils/debounce";
+import { Box, IconButton, InputAdornment, TextField } from "@mui/material";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { searchStyles } from "./style";
 
 interface TableSearchProps {
   value: string;
   onChange: (value: string) => void;
 }
 
-const TableSearch: React.FC<TableSearchProps> = ({ value, onChange }) => {
+const TableSearch = ({ value, onChange }: TableSearchProps): JSX.Element => {
   const [showSearchInput, setShowSearchInput] = useState(false);
   const [localValue, setLocalValue] = useState(value);
   const searchContainerRef = useRef<HTMLDivElement>(null);
@@ -49,8 +52,16 @@ const TableSearch: React.FC<TableSearchProps> = ({ value, onChange }) => {
   };
 
   return (
-    <div className="search-wrapper" ref={searchContainerRef}>
-      <div
+    <Box
+      ref={searchContainerRef}
+      className="search-container"
+      sx={{
+        display: "flex",
+        position: "relative",
+        top: "10px",
+      }}
+    >
+      {/* <Box
         className="search-icon ts--button"
         onClick={() => {
           setShowSearchInput((prev) => !prev);
@@ -63,16 +74,60 @@ const TableSearch: React.FC<TableSearchProps> = ({ value, onChange }) => {
         }}
       >
         <SearchIcon />
-      </div>
-      <input
+      </Box> */}
+
+      <TextField
         type="text"
-        className={`search-input ${showSearchInput ? "expanded" : ""}`}
-        placeholder="Type to search"
+        placeholder="Search"
         value={localValue}
         onChange={handleChange}
         onKeyDown={handleKeyDown}
+        className={`search-input ${showSearchInput ? "expanded" : ""}`}
+        sx={searchStyles.searchField(showSearchInput)}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <IconButton
+                size="small"
+                onClick={() => {
+                  setShowSearchInput((prev) => !prev);
+                  if (!showSearchInput) {
+                    setTimeout(() => {
+                      searchContainerRef.current
+                        ?.querySelector("input")
+                        ?.focus();
+                    }, 100);
+                  }
+                }}
+                sx={{ color: "black", fontSize: "14px" }}
+                edge="start"
+              >
+                <SearchIcon />
+              </IconButton>
+            </InputAdornment>
+          ),
+          endAdornment:
+            showSearchInput && localValue !== "" ? (
+              <InputAdornment position="end">
+                <IconButton
+                  size="small"
+                  onClick={() => {
+                    setLocalValue("");
+                    handleChange({ target: { value: "" } } as any);
+                  }}
+                  sx={{ color: "black", fontSize: "14px" }}
+                  edge="end"
+                >
+                  <CloseRoundedIcon
+                    fontSize="small"
+                    sx={{ color: "black", fontSize: "14px" }}
+                  />
+                </IconButton>
+              </InputAdornment>
+            ) : null,
+        }}
       />
-    </div>
+    </Box>
   );
 };
 

package/src/components/search/style.tsx

@@ -0,0 +1,40 @@
+import { Theme } from "@emotion/react";
+import { SxProps } from "@mui/material";
+
+export interface StyleProps {
+  searchField: (showSearchInput: boolean) => SxProps<Theme>;
+}
+
+export const searchStyles: StyleProps = {
+  searchField: (showSearchInput: boolean): SxProps<Theme> => ({
+    width: showSearchInput ? "180px" : "40px",
+    transition: "all 0.3s ease",
+    opacity: showSearchInput ? 1 : 0.8,
+    marginRight: "0.5rem",
+
+    "& .MuiOutlinedInput-root": {
+      paddingRight: "4px",
+      height: "32px",
+      borderRadius: "6px",
+      backgroundColor: "#fff",
+      border: showSearchInput ? "1px solid #ccc" : "none",
+    },
+
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: "none",
+    },
+
+    "&:hover .MuiOutlinedInput-notchedOutline": {
+      border: "none",
+    },
+
+    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {},
+
+    " & .css-4bojcr-MuiInputBase-root-MuiOutlinedInput-root ": {
+      paddingLeft: "6px !important",
+    },
+    "& .css-1mnoz6i-MuiInputBase-root-MuiOutlinedInput-root": {
+      paddingLeft: "6px !important",
+    },
+  }),
+};

package/src/components/topbar/index.scss

@@ -27,32 +27,32 @@
           margin-bottom: 1.2rem;
         }
 
-        .search-input {
-          width: 0;
-          opacity: 0;
-          margin-left: 8px;
-          padding: 6px 8px;
-          font-size: 0.875rem;
-          border: 1px solid #ccc;
-          border-radius: 4px;
-          background-color: #f5f5f5;
-          color: #000;
-          transition: width 0.3s ease, opacity 0.3s ease;
-          // position: absolute;
-          // right: 40px;
-          // top: 50%;
-          // transform: translateY(-50%);
-
-          &:focus {
-            outline: none;
-            border-color: #000;
-          }
-        }
-
-        .search-input.expanded {
-          width: 200px;
-          opacity: 1;
-        }
+        // .search-input {
+        //   width: 0;
+        //   opacity: 0;
+        //   margin-left: 8px;
+        //   padding: 6px 8px;
+        //   font-size: 0.875rem;
+        //   border: 1px solid #ccc;
+        //   border-radius: 4px;
+        //   background-color: #f5f5f5;
+        //   color: #000;
+        //   transition: width 0.3s ease, opacity 0.3s ease;
+        //   // position: absolute;
+        //   // right: 40px;
+        //   // top: 50%;
+        //   // transform: translateY(-50%);
+
+        //   &:focus {
+        //     outline: none;
+        //     border-color: #000;
+        //   }
+        // }
+
+        // .search-input.expanded {
+        //   width: 200px;
+        //   opacity: 1;
+        // }
       }
 
       .ts--button {

package/src/libs/utils/common.ts

@@ -77,7 +77,7 @@ export function customDebounce<T extends (...args: any[]) => any>(
 }
 
 //ENTITY TYPE
-export const ENTITY_TYPE = "NTM";
+export const ENTITY_TYPE = "ROL";
 
 // uat http://13.200.182.92:4010/api
 // local http://localhost:4010/api