rez-table-listing-mui 0.0.24 → 0.0.26

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

@@ -0,0 +1,424 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  IconButton,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { CloseIcon, DeleteIcon } from "../../../../assets/svg";
+import {
+  FilterColumnsDataProps,
+  FilterDropdownDataProps,
+  FilterMasterStateProps,
+  UpdatedFilterStateProps,
+} from "../../../../types/filter";
+import { Controller, useForm } from "react-hook-form";
+import FormTextfield from "./components/Textfield";
+import React, { useEffect, useMemo } from "react";
+import FormSelect from "./components/Select";
+import FormDatePicker from "./components/Date";
+import FormDropdown from "./components/Dropdown";
+import FormMultiSelect from "./components/Multi-Select";
+import { CraftTableOptionsProps } from "../../../../types/table-options";
+import FilterCriteria from "./components/Filter-criteria";
+import CustomSearch from "../search";
+
+interface FormValues {
+  filterName: string;
+  [key: string]:
+    | {
+        value: string | string[];
+        operator: string;
+      }
+    | string;
+}
+
+const FilterForm = ({
+  columnsData,
+  dropdownData,
+  searchTerm = "",
+  setSearchTerm,
+  selectedFilters,
+  setSelectedFilters,
+  handleRemoveFilter,
+  handleClearAllFilters,
+  editMode = false,
+  tableStates,
+  setSavedFilterModalOpen,
+  setDeleteFilterModalOpen,
+}: {
+  columnsData: FilterColumnsDataProps;
+  dropdownData: FilterDropdownDataProps;
+  searchTerm?: string;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+  selectedFilters: UpdatedFilterStateProps[];
+  setSelectedFilters: React.Dispatch<
+    React.SetStateAction<UpdatedFilterStateProps[]>
+  >;
+  handleRemoveFilter: (filter_attribute: string) => void;
+  handleClearAllFilters: () => void;
+  editMode?: boolean;
+  tableStates: CraftTableOptionsProps;
+  setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const { filterMaster, setFilters, setFilterMaster } = tableStates;
+
+  const filterName = filterMaster?.saved_filters?.selectedName || "";
+
+  const defaultValues = useMemo(() => {
+    const filterValues = selectedFilters.reduce((acc, curr) => {
+      if (curr.name) {
+        acc[curr.name] = {
+          value: curr.filter_value ?? "",
+          operator:
+            curr.filter_operator ?? curr.dropdown_list?.[0]?.value ?? "",
+        };
+      }
+      return acc;
+    }, {} as Record<string, { value: string | string[]; operator: string }>);
+
+    return {
+      filterName: filterName ?? "",
+      ...filterValues,
+    };
+  }, [selectedFilters, filterName]);
+
+  const {
+    control,
+    watch,
+    reset,
+    formState: { isDirty },
+  } = useForm<FormValues>({
+    mode: "onChange",
+    defaultValues,
+  });
+
+  // Watch for form changes
+  const formValues = watch();
+
+  // Effect to update filters when form values change
+  useEffect(() => {
+    if (isDirty) {
+      const updatedFilters = selectedFilters.map((filter) => {
+        if (filter.name && typeof formValues[filter.name] === "object") {
+          const filterValue = formValues[filter.name] as {
+            value: string | string[];
+            operator: string;
+          };
+          // Only update if the value or operator has actually changed
+          if (
+            filterValue.value !== filter.filter_value ||
+            filterValue.operator !== filter.filter_operator
+          ) {
+            return {
+              ...filter,
+              filter_value: filterValue.value,
+              filter_operator: filterValue.operator,
+            };
+          }
+        }
+        return filter;
+      });
+
+      // Only update if there are actual changes
+      const hasChanges = updatedFilters.some(
+        (filter, index) =>
+          filter.filter_value !== selectedFilters[index].filter_value ||
+          filter.filter_operator !== selectedFilters[index].filter_operator
+      );
+
+      if (hasChanges) {
+        setSelectedFilters(updatedFilters);
+        setFilters(updatedFilters);
+      }
+    }
+  }, [formValues, selectedFilters]);
+
+  const editModeStylingBorder = {
+    border: "1px solid #c5c5c5",
+    borderRadius: "6px",
+    padding: "5px 10px 10px 10px",
+  };
+
+  return (
+    <form>
+      <Box sx={editMode ? editModeStylingBorder : {}}>
+        {editMode && (
+          <Box
+            sx={{
+              "& .MuiOutlinedInput-root": {
+                borderRadius: "6px",
+                fontSize: "14px",
+                bgcolor: "#fafafa",
+                "& fieldset": { borderColor: "#c1c1c1" },
+                "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
+              },
+              display: "flex",
+              alignItems: "center", // vertical alignment
+              justifyContent: "center", // horizontal alignment
+              paddingY: 2,
+              gap: 1,
+            }}
+          >
+            <Controller
+              name="filterName"
+              control={control}
+              render={({ field }) => (
+                <TextField
+                  fullWidth
+                  size="small"
+                  placeholder="Filter Name"
+                  value={field.value}
+                  onChange={(e) => {
+                    field.onChange(e);
+
+                    if (editMode) {
+                      setFilterMaster(
+                        (prev) =>
+                          ({
+                            ...prev,
+                            saved_filters: {
+                              ...prev?.saved_filters,
+                              selectedName: e.target.value,
+                            },
+                          } as FilterMasterStateProps)
+                      );
+                    }
+                  }}
+                  inputRef={field.ref}
+                  sx={{
+                    maxWidth: 400,
+
+                    "& .MuiOutlinedInput-root": {
+                      bgcolor: "white",
+                      borderRadius: "0px",
+                      fontSize: "14px",
+                      color: "#272524",
+                      fontWeight: "500",
+                      "& fieldset": { borderColor: "#c5c5c5" },
+                      "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
+                    },
+                  }}
+                />
+              )}
+            />
+            <Box onClick={(e) => e.stopPropagation()}>
+              <IconButton
+                size="small"
+                onClick={() => {
+                  setDeleteFilterModalOpen && setDeleteFilterModalOpen(true);
+                }}
+              >
+                <DeleteIcon />
+              </IconButton>
+            </Box>
+          </Box>
+        )}
+
+        <FilterCriteria
+          columnsData={columnsData}
+          tableStates={tableStates}
+          setSelectedFilters={setSelectedFilters}
+        />
+
+        {/* Render search input */}
+        {!editMode && (
+          <CustomSearch value={searchTerm} onChange={setSearchTerm} />
+        )}
+
+        {selectedFilters
+          ?.filter(
+            (filter) =>
+              filter.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+              filter.filter_value
+                ?.toString()
+                .toLowerCase()
+                .includes(searchTerm.toLowerCase())
+          )
+          .map((filter) => {
+            const { dropdown_list = [] } = filter;
+
+            return (
+              <Box
+                key={filter.filter_attribute}
+                sx={{
+                  mt: 2,
+                  p: 1,
+                  borderRadius: 2,
+                  backgroundColor: "#FAFAFA",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 0.5,
+                  // border: "1px solid #E0E0E0",
+                }}
+              >
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "flex-start",
+                    alignItems: "center",
+                    gap: 2,
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      fontWeight: 500,
+                      fontSize: "13px",
+                      color: "#797877",
+                    }}
+                  >
+                    {filter.name}
+                  </Typography>
+                  <FormDropdown
+                    filter={filter}
+                    control={control}
+                    dropdownList={dropdown_list}
+                    sx={{
+                      fontSize: "13px",
+                      minWidth: 50,
+                      border: "none",
+                      boxShadow: "none",
+                    }}
+                  />
+                  <IconButton
+                    sx={{ marginLeft: "auto" }}
+                    onClick={() => handleRemoveFilter(filter.filter_attribute)}
+                    size="small"
+                  >
+                    <CloseIcon />
+                  </IconButton>
+                </Box>
+
+                <Box>
+                  {filter.data_type === "text" ? (
+                    <FormTextfield filter={filter} control={control} />
+                  ) : filter.data_type === "number" ? (
+                    <FormTextfield filter={filter} control={control} />
+                  ) : filter.data_type === "date" ? (
+                    <FormDatePicker
+                      filter={filter}
+                      control={control}
+                      sx={{
+                        "& .MuiOutlinedInput-root": {
+                          borderRadius: "6px",
+                          fontSize: "14px",
+                          bgcolor: "#ffffff",
+                          "& fieldset": { borderColor: "#c1c1c1" },
+                          "&.Mui-focused fieldset": {
+                            borderColor: "#7A5AF8",
+                          },
+                        },
+                      }}
+                    />
+                  ) : filter.data_type === "select" ? (
+                    <FormSelect
+                      filter={filter}
+                      control={control}
+                      dropdownData={dropdownData}
+                      sx={{
+                        "& .MuiOutlinedInput-root": {
+                          borderRadius: "6px",
+                          fontSize: "14px",
+                          bgcolor: "#ffffff",
+                          "& fieldset": { borderColor: "#c1c1c1" },
+                          "&.Mui-focused fieldset": {
+                            borderColor: "#7A5AF8",
+                          },
+                        },
+                      }}
+                    />
+                  ) : filter.data_type === "multiselect" ? (
+                    <FormMultiSelect
+                      filter={filter}
+                      control={control}
+                      dropdownData={dropdownData}
+                      sx={{
+                        "& .MuiOutlinedInput-root": {
+                          borderRadius: "6px",
+                          fontSize: "14px",
+                          bgcolor: "#ffffff",
+                          "& fieldset": { borderColor: "#c1c1c1" },
+                          "&.Mui-focused fieldset": {
+                            borderColor: "#7A5AF8",
+                          },
+                        },
+                      }}
+                    />
+                  ) : (
+                    <FormControl
+                      fullWidth
+                      size="small"
+                      sx={{
+                        "& .MuiOutlinedInput-root": {
+                          borderRadius: "6px",
+                          fontSize: "14px",
+                          bgcolor: "#ffffff",
+                          "& fieldset": { borderColor: "#c1c1c1" },
+                          "&.Mui-focused fieldset": {
+                            borderColor: "#7A5AF8",
+                          },
+                        },
+                      }}
+                    ></FormControl>
+                  )}
+                </Box>
+              </Box>
+            );
+          })}
+      </Box>
+
+      {selectedFilters.length > 0 && (
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            gap: 1,
+            mt: 3,
+          }}
+        >
+          <Button
+            variant="outlined"
+            sx={{
+              color: "#7A5AF8",
+              border: `1px solid #7A5AF8`,
+              borderRadius: "6px",
+              textTransform: "none",
+              fontSize: "14px",
+            }}
+            fullWidth
+            onClick={() => {
+              reset();
+              handleClearAllFilters();
+            }}
+          >
+            Clear All
+          </Button>
+
+          <Button
+            variant="contained"
+            fullWidth
+            sx={{
+              color: "white",
+              backgroundColor: "#7A5AF8",
+              "&.Mui-disabled": {
+                backgroundColor: "#d7cefd", // Change background color when disabled
+                color: "rgba(255, 255, 255, 0.7)",
+              },
+            }}
+            // onClick={() => setSaveFilterModalOpen(true)}
+            disabled={editMode && !isDirty}
+            onClick={() => {
+              setSavedFilterModalOpen && setSavedFilterModalOpen(true);
+            }}
+          >
+            Save Filter
+          </Button>
+        </Box>
+      )}
+    </form>
+  );
+};
+
+export default FilterForm;

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

@@ -0,0 +1,53 @@
+import { Box } from "@mui/material";
+import { useState } from "react";
+import FilterForm from "./forms";
+import { FilterFormComponentProps } from "../../../types/filter";
+
+const MainFilter = ({
+  columnsData,
+  dropdownData,
+  tableStates,
+  selectedFilters,
+  setSelectedFilters,
+  setSavedFilterModalOpen,
+}: FilterFormComponentProps) => {
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const { setFilters } = tableStates;
+
+  const handleRemoveFilter = (filter_attribute: string) => {
+    setFilters((prev) =>
+      prev.filter((filter) => filter.filter_attribute !== filter_attribute)
+    );
+    setSelectedFilters((prev) =>
+      prev.filter((filter) => filter.filter_attribute !== filter_attribute)
+    );
+  };
+
+  const handleClearAllFilters = () => {
+    setFilters([]);
+    setSelectedFilters([]);
+  };
+
+  return (
+    <Box>
+      {/* Set selectedFilters state */}
+
+      {/* Render selectedFilters state */}
+      <FilterForm
+        columnsData={columnsData}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
+        selectedFilters={selectedFilters}
+        setSelectedFilters={setSelectedFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        handleClearAllFilters={handleClearAllFilters}
+        tableStates={tableStates}
+        setSavedFilterModalOpen={setSavedFilterModalOpen}
+        dropdownData={dropdownData}
+      />
+    </Box>
+  );
+};
+
+export default MainFilter;

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

@@ -0,0 +1,101 @@
+import { Box, Typography } from "@mui/material";
+import FilterForm from "./forms";
+import BackArrow from "@mui/icons-material/ArrowBackIosNew";
+import {
+  FilterColumnsDataProps,
+  FilterDropdownDataProps,
+  UpdatedFilterStateProps,
+} from "../../../types/filter";
+import { CraftTableOptionsProps } from "../../../types/table-options";
+
+const SavedFilterEditComponent = ({
+  columnsData,
+  dropdownData,
+  tableStates,
+  selectedFilters,
+  setSelectedFilters,
+  editMode,
+  setEditMode,
+  searchTerm,
+  setSearchTerm,
+  setSavedFilterModalOpen,
+  setDeleteFilterModalOpen,
+}: {
+  columnsData: FilterColumnsDataProps;
+  dropdownData: FilterDropdownDataProps;
+  tableStates: CraftTableOptionsProps;
+  selectedFilters: UpdatedFilterStateProps[];
+  setSelectedFilters: React.Dispatch<
+    React.SetStateAction<UpdatedFilterStateProps[]>
+  >;
+  editMode?: boolean;
+  setEditMode?: React.Dispatch<React.SetStateAction<boolean>>;
+  searchTerm?: string;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+  setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const { setFilters } = tableStates;
+
+  const handleRemoveFilter = (filter_attribute: string) => {
+    setFilters((prev) =>
+      prev.filter((filter) => filter.filter_attribute !== filter_attribute)
+    );
+    setSelectedFilters((prev) =>
+      prev.filter((filter) => filter.filter_attribute !== filter_attribute)
+    );
+  };
+
+  const handleClearAllFilters = () => {
+    setFilters([]);
+    setSelectedFilters([]);
+  };
+
+  return (
+    <>
+      <Box>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            cursor: "pointer",
+            mb: 2,
+          }}
+          onClick={() => {
+            setEditMode && setEditMode(false);
+          }}
+        >
+          <BackArrow sx={{ width: "13px", height: "13px" }} />
+          <Typography variant="body2" sx={{ color: "#8592A3" }}>
+            Back To Saved Filters
+          </Typography>
+        </Box>
+      </Box>
+
+      {/* <FilterCriteria
+        columnsData={columnsData}
+        tableStates={tableStates}
+        setSelectedFilters={setSelectedFilters}
+      /> */}
+
+      {/* Render selectedFilters state */}
+      <FilterForm
+        selectedFilters={selectedFilters}
+        setSelectedFilters={setSelectedFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        handleClearAllFilters={handleClearAllFilters}
+        editMode={editMode}
+        tableStates={tableStates}
+        columnsData={columnsData}
+        dropdownData={dropdownData}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
+        setSavedFilterModalOpen={setSavedFilterModalOpen}
+        setDeleteFilterModalOpen={setDeleteFilterModalOpen}
+      />
+    </>
+  );
+};
+
+export default SavedFilterEditComponent;