rez-table-listing-mui 1.2.1 → 1.2.3

package/package.json

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

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/login/index.tsx

@@ -9,9 +9,9 @@ const LoginButton = () => {
     setLoading(true);
     try {
       const response = await axios.post(
-        "http://localhost:6010/api/auth/login",
+        "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,14 +77,14 @@ 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
 
 // API INTEGRATION
 export const api = axios.create({
-  baseURL: "http://localhost:6010/api",
+  baseURL: "http://localhost:4010/api",
   timeout: 10000,
   headers: {
     "Content-Type": "application/json",