rez-table-listing-mui 1.0.48 → 1.0.50

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

@@ -13,9 +13,10 @@ import {
   Typography,
 } from "@mui/material";
 import CustomSearch from "./search";
-import { DeleteIcon } from "../../../assets/svg";
+import { DeleteIcon, EditIcon } from "../../../assets/svg";
 import SavedFilterEditComponent from "./saved-edit-filter";
 import { filterStyles } from "../style";
+import { CheckBox } from "../../../assets/svg";
 
 const SavedFilter = ({
   columnsData,
@@ -31,6 +32,7 @@ const SavedFilter = ({
 }: FilterFormComponentProps) => {
   const { setFilterMaster, setFilterToDelete } = tableStates;
   const [searchTerm, setSearchTerm] = useState<string>("");
+  const [criteriaSearchTerm, setCriteriaSearchTerm] = useState<string>("");
 
   // reset savedFilterEditValue when component unmounts
   useEffect(() => {
@@ -65,11 +67,26 @@ const SavedFilter = ({
           activeFilterTabIndex: tabValue,
         } as FilterMasterStateProps)
     );
-
+    // 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 renderList = () => (
     <>
       <CustomSearch
@@ -98,24 +115,62 @@ const SavedFilter = ({
                 key={filter?.value}
                 sx={{
                   cursor: "pointer",
-                  border: "1px solid #ccc",
+                  border:
+                    filter?.value ===
+                    tableStates?.filterMaster?.saved_filters?.selectedId
+                      ? `3px solid #7a5af8`
+                      : "1px solid #C5C5C5",
                   borderRadius: "8px",
                   display: "flex",
                   justifyContent: "space-between",
+                  gap: 1,
                   alignItems: "center",
+                  "&:hover .action-icons": {
+                    opacity: 1,
+                    visibility: "visible",
+                  },
                 }}
-                onClick={() => handleListItemClick(filter)}
+                onClick={() => handleAppyFilter(filter)}
               >
+                {filter?.value ===
+                  tableStates?.filterMaster?.saved_filters?.selectedId && (
+                  <Box
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      cursor: "pointer",
+                      color: "green",
+                      rounded: "full",
+                    }}
+                  >
+                    <CheckBox />
+                  </Box>
+                )}
                 <ListItemText primary={filter?.label} />
 
-                <Box onClick={(e) => e.stopPropagation()}>
+                <Box
+                  onClick={(e) => e.stopPropagation()}
+                  className="action-icons"
+                  sx={{
+                    display: "flex",
+                    gap: 1,
+                    opacity: 0,
+                    visibility: "hidden",
+                    transition: "opacity 0.2s ease, visibility 0.2s ease",
+                  }}
+                >
+                  <IconButton
+                    size="large"
+                    onClick={() => handleListItemClick(filter)}
+                  >
+                    <EditIcon />
+                  </IconButton>
+
                   <IconButton
                     size="small"
                     onClick={() => {
-                      setFilterToDelete(filter); // Store the filter to delete
-
-                      setDeleteFilterModalOpen &&
-                        setDeleteFilterModalOpen(true); // Open the delete confirmation modal
+                      setFilterToDelete(filter);
+                      setDeleteFilterModalOpen?.(true);
                     }}
                   >
                     <DeleteIcon />
@@ -149,6 +204,8 @@ const SavedFilter = ({
           setEditMode={setEditMode}
           searchTerm={searchTerm}
           setSearchTerm={setSearchTerm}
+          criteriaSearchTerm={criteriaSearchTerm}
+          setCriteriaSearchTerm={setCriteriaSearchTerm}
           setSavedFilterModalOpen={setSavedFilterModalOpen}
           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
         />

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

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
-import { TextField, InputAdornment } from "@mui/material";
+import { TextField, InputAdornment, IconButton } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import { CloseIcon } from "../../../../assets/svg";
 
 interface SearchInputProps {
   value: string;
@@ -22,6 +23,11 @@ const CustomSearch = ({
     onChange?.(val);
   };
 
+  const handleClear = () => {
+    setSearch(""); // Clear the search value
+    onChange?.(""); // Propagate the cleared value
+  };
+
   return (
     <TextField
       fullWidth
@@ -39,6 +45,17 @@ const CustomSearch = ({
             />
           </InputAdornment>
         ),
+        endAdornment: search && ( // Show the clear icon only when there's a value
+          <InputAdornment position="end">
+            <IconButton
+              edge="end"
+              onClick={handleClear}
+              sx={{ color: "#888888", fontSize: "20px" }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </InputAdornment>
+        ),
       }}
       sx={{
         "& .MuiOutlinedInput-root": {

package/src/components/filter/index.tsx

@@ -36,8 +36,14 @@ export function TableFilter({
 
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const { filters, setFilters, filterToDelete, filterMaster, setFilterMaster } =
-    tableStates;
+  const {
+    filters,
+    setFilters,
+    filterToDelete,
+    filterMaster,
+    setFilterMaster,
+    setShowFilterOption,
+  } = tableStates;
 
   const filterNameInput: InputField = {
     label: "Filter Name",
@@ -73,7 +79,7 @@ export function TableFilter({
 
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
     setTabValue(newValue);
-    if (newValue !== 1) {
+    if (newValue === 0) {
       setEditMode(false);
       setSelectedFilters([]);
     }
@@ -83,7 +89,7 @@ export function TableFilter({
   const tabItems: TabItem[] = [
     { label: "Filter" },
     { label: "Saved Filter" },
-    // { label: "Attributes" },
+    { label: "Attributes" },
   ];
 
   const handleTabCrossClick = (index: number) => {
@@ -116,7 +122,7 @@ export function TableFilter({
             ({
               ...prev,
               attributes: {
-                radio: "",
+                radio: [],
                 selected: "",
               },
             } as FilterMasterStateProps)
@@ -137,6 +143,7 @@ export function TableFilter({
           onClick={(e) => {
             e.stopPropagation();
             onClose && onClose();
+            setShowFilterOption(false);
           }}
           aria-label="close"
         >
@@ -256,11 +263,19 @@ export function TableFilter({
           },
           {
             label: "Delete",
-
             onClick: () => {
               onDeleteFilter && onDeleteFilter();
               setDeleteFilterModalOpen(false);
               setEditMode && setEditMode(false);
+              setSelectedFilters([]);
+              setFilters([]);
+              setFilterMaster(
+                (prev) =>
+                  ({
+                    ...prev,
+                    activeFilterTabIndex: -1,
+                  } as FilterMasterStateProps)
+              );
             },
             variant: "contained",
             sx: {

package/src/components/filter/style.ts

@@ -90,7 +90,7 @@ export const filterFormStyles: filterFormStyleType = {
   formFlexContainer: {
     display: "flex",
     flexDirection: "column",
-    gap: "1.25rem",
+    gap: "0.75rem",
   },
 
   formListItem: {

package/src/components/index.scss

@@ -46,7 +46,7 @@
   }
 
   .ts__table__main {
-    flex-grow: 1;
+    flex: 1;
     min-width: 0;
   }
 

package/src/components/table-settings/common/info-alert.tsx

@@ -0,0 +1,37 @@
+import { Alert, Box } from "@mui/material";
+
+interface InfoAlertProps {
+  message: string;
+  width?: string | number;
+  top?: number | string;
+  color?: string;
+  zIndex?: number;
+  position?: "absolute" | "relative" | "fixed" | "sticky";
+}
+
+const InfoAlert = ({
+  message,
+  width = "100%",
+  top = 10,
+  color = "#088AB2",
+  zIndex = 0,
+  position = "absolute",
+}: InfoAlertProps) => {
+  return (
+    <Box
+      sx={{
+        fontSize: "12px",
+        color,
+        width,
+        height: "fit-content",
+        position,
+        zIndex,
+        top,
+      }}
+    >
+      <Alert severity="info">{message}</Alert>
+    </Box>
+  );
+};
+
+export default InfoAlert;

package/src/components/table-settings/common/listing-values.tsx

@@ -1,4 +1,11 @@
-import { Box, Button, Grid, IconButton, Typography } from "@mui/material";
+import {
+  Alert,
+  Box,
+  Button,
+  Grid,
+  IconButton,
+  Typography,
+} from "@mui/material";
 import CustomSearch from "../../filter/components/search/index.tsx";
 import {
   SortableContext,
@@ -9,6 +16,8 @@ import DraggableListItem from "./draggable-listitem.tsx";
 import { listingValuesStyles } from "../style.ts";
 import Loader from "../../common/loader/loader.tsx";
 import { ClosedEyeIcon, EyeIcon } from "../../../assets/svg.tsx";
+import InfoAlert from "./info-alert.tsx";
+import React from "react";
 ``;
 
 interface FilterValue {
@@ -26,8 +35,42 @@ interface ListingValuesProps {
   containerId: string;
   tabsApiDataLoading?: boolean;
   onItemToggle: (itemId: string, fromContainerId: string) => void;
+  enableDragAndDrop?: boolean;
+  isQuickTabActive?: boolean;
+  AlertComponenet?: React.ReactNode;
 }
 
+const ListingValuesContent = ({
+  item,
+  containerId,
+  onItemToggle,
+}: {
+  item: FilterValue;
+  containerId: string;
+  onItemToggle: (itemId: string, fromContainerId: string) => void;
+}) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 1,
+        flex: 1,
+        color: containerId === "tabs" ? "black" : "#9e9d9b",
+      }}
+    >
+      <Typography>{item.label}</Typography>
+      <IconButton
+        size="small"
+        onClick={() => onItemToggle(item.id, containerId)}
+      >
+        {containerId === "tabs" ? <EyeIcon /> : <ClosedEyeIcon />}
+      </IconButton>
+    </Box>
+  );
+};
+
 const ListingValues = ({
   filteredValues,
   buttonText,
@@ -38,6 +81,8 @@ const ListingValues = ({
   containerId,
   tabsApiDataLoading,
   onItemToggle,
+  enableDragAndDrop = true,
+  AlertComponenet,
 }: ListingValuesProps) => {
   const { setNodeRef } = useDroppable({
     id: containerId,
@@ -52,62 +97,65 @@ const ListingValues = ({
       {tabsApiDataLoading ? (
         <Loader />
       ) : (
-        <Box sx={{ p: 2 }}>
-          <Box sx={listingValuesStyles.headerContainer}>
-            <Typography variant="h6" sx={listingValuesStyles.heading}>
-              {headerText}
-            </Typography>
-            <Button
-              onClick={onClick}
-              variant="text"
-              size="small"
-              sx={listingValuesStyles.button}
-              disabled={filteredValues.length === 0}
-            >
-              {buttonText}
-            </Button>
-          </Box>
-
-          {searchTerm !== undefined && setSearchTerm !== undefined && (
-            <CustomSearch value={searchTerm} onChange={setSearchTerm} />
-          )}
+        <>
+          <Box sx={{ p: 2, zIndex: 10 }}>
+            <Box sx={listingValuesStyles.headerContainer}>
+              <Typography variant="h6" sx={listingValuesStyles.heading}>
+                {headerText}
+              </Typography>
+              <Button
+                onClick={onClick}
+                variant="text"
+                size="small"
+                sx={listingValuesStyles.button}
+                disabled={filteredValues.length === 0}
+              >
+                {buttonText}
+              </Button>
+            </Box>
 
-          <Box ref={setNodeRef} sx={listingValuesStyles.draggableContainer}>
-            <SortableContext
-              items={filteredValues.map((item) => item.id)}
-              strategy={verticalListSortingStrategy}
-            >
-              <Box sx={listingValuesStyles.draggableCover}>
-                {filteredValues.map((item) => (
-                  <DraggableListItem
-                    key={item.id}
-                    id={item.id}
-                    containerId={containerId}
-                  >
-                    <Box
-                      sx={{
-                        display: "flex",
-                        alignItems: "center",
-                        flex: 1,
-                        color: containerId === "tabs" ? "black" : "#9e9d9b",
-                      }}
-                    >
-                      <Typography>{item.label}</Typography>
-                    </Box>
+            {searchTerm !== undefined && setSearchTerm !== undefined && (
+              <CustomSearch value={searchTerm} onChange={setSearchTerm} />
+            )}
 
-                    {/* on click i want to append this item in the show list and remove it from the hide list */}
-                    <IconButton
-                      size="small"
-                      onClick={() => onItemToggle(item.id, containerId)}
-                    >
-                      {containerId === "tabs" ? <EyeIcon /> : <ClosedEyeIcon />}
-                    </IconButton>
-                  </DraggableListItem>
-                ))}
-              </Box>
-            </SortableContext>
+            <Box ref={setNodeRef} sx={listingValuesStyles.draggableContainer}>
+              {enableDragAndDrop ? (
+                <SortableContext
+                  items={filteredValues.map((item) => item.id)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <Box sx={listingValuesStyles.draggableCover}>
+                    {filteredValues.map((item) => (
+                      <DraggableListItem
+                        key={item.id}
+                        id={item.id}
+                        containerId={containerId}
+                      >
+                        <ListingValuesContent
+                          item={item}
+                          containerId={containerId}
+                          onItemToggle={onItemToggle}
+                        />
+                      </DraggableListItem>
+                    ))}
+                  </Box>
+                </SortableContext>
+              ) : (
+                <Box sx={listingValuesStyles.draggableCover}>
+                  {filteredValues.map((item) => (
+                    <ListingValuesContent
+                      key={item.id}
+                      item={item}
+                      containerId={containerId}
+                      onItemToggle={onItemToggle}
+                    />
+                  ))}
+                </Box>
+              )}
+            </Box>
           </Box>
-        </Box>
+          {AlertComponenet && AlertComponenet}
+        </>
       )}
     </Grid>
   );