rez-table-listing-mui 0.0.25 → 0.0.26

package/src/components/filter/components/forms/components/Attributes-select.tsx

@@ -0,0 +1,180 @@
+import {
+  Box,
+  FormControl,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Radio,
+  RadioGroup,
+  FormControlLabel,
+} from "@mui/material";
+import {
+  AttributesFilterSelectProps,
+  FilterMasterStateProps,
+} from "../../../../../types/filter";
+import { useMemo } from "react";
+import CustomSearch from "../../search";
+
+const SelectAttribute = ({
+  columnsData,
+  tableStates,
+  dropdownData,
+  searchTerm = "",
+  setSearchTerm,
+}: AttributesFilterSelectProps) => {
+  const { filterMaster, setFilterMaster, filters, setFilters } = tableStates;
+
+  const selectedAttribute = filterMaster?.attributes?.selected;
+
+  const handleSelectChange = (event: SelectChangeEvent) => {
+    const attributeKey = event.target.value as string;
+
+    setFilterMaster(
+      (prev) =>
+        ({
+          ...prev,
+          attributes: {
+            ...prev?.attributes,
+            selected: attributeKey,
+          },
+        } as FilterMasterStateProps)
+    );
+  };
+
+  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
+    const selectedValue = event.target.value;
+    setFilterMaster(
+      (prev) =>
+        ({
+          ...prev,
+          attributes: {
+            ...prev?.attributes,
+            radio: selectedValue,
+          },
+        } as FilterMasterStateProps)
+    );
+
+    const selectedAttribute = filterMaster?.attributes.selected;
+    if (selectedAttribute) {
+      const matchingColumn = columnsData.column_list.find(
+        (column) => column.datasource_list === selectedAttribute
+      );
+      if (matchingColumn) {
+        const defaultOperator =
+          columnsData.operation_list[matchingColumn.data_type]?.[0]?.value ||
+          "equals";
+        const newFilter = {
+          filter_attribute: matchingColumn.attribute_key,
+          filter_operator: defaultOperator,
+          filter_value: selectedValue,
+        };
+
+        const existingFilterIndex = filters.findIndex(
+          (filter) => filter.filter_attribute === matchingColumn.attribute_key
+        );
+
+        let updatedFilters;
+        if (existingFilterIndex !== -1) {
+          updatedFilters = [...filters];
+          updatedFilters[existingFilterIndex] = newFilter;
+        } else {
+          updatedFilters = [...filters, newFilter];
+        }
+
+        setFilters(updatedFilters);
+      }
+    }
+  };
+
+  const selectedAttributeOptions = useMemo(() => {
+    const selected = columnsData.column_list.find(
+      (col) => col.datasource_list === selectedAttribute
+    )?.attribute_key;
+
+    return selected ? dropdownData[selected] : [];
+  }, [selectedAttribute, dropdownData]);
+
+  return (
+    <Box sx={{ mt: 2 }}>
+      <FormControl fullWidth size="small">
+        <Select
+          value={selectedAttribute || ""}
+          onChange={handleSelectChange}
+          displayEmpty // Ensures the placeholder is shown when no value is selected
+          renderValue={(selected) => {
+            if (!selected) {
+              return <span>Select Attribute</span>;
+            }
+            return columnsData?.column_list?.find(
+              (col) => col.datasource_list === selected
+            )?.name;
+          }}
+          sx={{
+            "& .MuiOutlinedInput-root": {
+              borderRadius: "6px",
+              fontSize: "14px",
+              bgcolor: "#fafafa",
+              "& fieldset": {
+                borderColor: "#7a5af8 !important",
+              },
+              "&:hover fieldset": {
+                borderColor: "#7a5af8 !important",
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: "#7a5af8 !important",
+                boxShadow: "none",
+              },
+            },
+            "& .MuiSelect-select": {
+              padding: "8px 14px",
+            },
+          }}
+        >
+          {columnsData?.column_list
+            ?.filter((column) => column.data_type.includes("select"))
+            .map((column, index) => (
+              <MenuItem
+                key={index}
+                value={column.datasource_list}
+                disabled={column.datasource_list === selectedAttribute}
+              >
+                {column.name}
+              </MenuItem>
+            ))}
+        </Select>
+        {selectedAttribute && (
+          <CustomSearch value={searchTerm} onChange={setSearchTerm} />
+        )}
+      </FormControl>
+
+      {dropdownData && (
+        <Box sx={{ mt: 2 }}>
+          <FormControl>
+            <RadioGroup onChange={handleRadioChange}>
+              {selectedAttributeOptions
+                ?.filter((option) => {
+                  if (!searchTerm) return true;
+
+                  return option.label
+                    .toLowerCase()
+                    .includes(searchTerm.toLowerCase());
+                })
+                .map((option) => (
+                  <FormControlLabel
+                    key={option.value}
+                    value={option.value}
+                    control={<Radio />}
+                    label={option.label}
+                  />
+                ))}
+            </RadioGroup>
+          </FormControl>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default SelectAttribute;

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

@@ -0,0 +1,58 @@
+import { Controller } from "react-hook-form";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import moment from "moment";
+import { UpdatedFilterStateProps } from "../../../../../types/filter";
+import { SxProps, Theme } from "@mui/material";
+
+const FormDatePicker = ({
+  filter,
+  control,
+  sx,
+}: {
+  filter: UpdatedFilterStateProps;
+  control: any;
+  sx?: SxProps<Theme>;
+}) => {
+  return (
+    <Controller
+      name={`${filter?.name}.value`} // or use a consistent structure like `filters.${index}.filter_value`
+      control={control}
+      defaultValue={
+        filter.filter_value
+          ? moment(filter.filter_value, "DD-MM-YYYY").toDate()
+          : null
+      }
+      render={({ field }) => (
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <DatePicker
+            sx={{
+              "& .MuiOutlinedInput-input": {
+                padding: "12px 20px",
+              },
+            }}
+            {...field}
+            value={
+              field.value ? moment(field.value, "DD-MM-YYYY").toDate() : null
+            }
+            onChange={(date) => {
+              const formatted = date ? moment(date).format("DD-MM-YYYY") : "";
+              field.onChange(formatted);
+            }}
+            format="dd-MM-yyyy"
+            slotProps={{
+              textField: {
+                size: "small",
+                fullWidth: true,
+                placeholder: "DD-MM-YYYY",
+              },
+            }}
+          />
+        </LocalizationProvider>
+      )}
+    />
+  );
+};
+
+export default FormDatePicker;

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

@@ -0,0 +1,62 @@
+import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
+import { Controller } from "react-hook-form";
+import { UpdatedFilterStateProps } from "../../../../../types/filter";
+
+interface FormDropdownProps {
+  filter: UpdatedFilterStateProps;
+  control: any;
+  dropdownList: {
+    label?: string;
+    value?: string;
+  }[];
+  isLoading?: boolean;
+  sx?: SxProps<Theme>;
+}
+
+const FormDropdown = ({
+  filter,
+  control,
+  dropdownList,
+  isLoading = false,
+  sx,
+}: FormDropdownProps) => {
+  return (
+    <Controller
+      name={`${filter?.name}.operator`}
+      control={control}
+      defaultValue={filter.filter_operator || dropdownList?.[0]?.value || ""}
+      render={({ field }) => (
+        <FormControl sx={sx} size="small">
+          <Select
+            {...field}
+            variant="standard"
+            sx={{
+              fontSize: "0.875rem",
+              minWidth: 50,
+              border: "none",
+              boxShadow: "none",
+              "& .MuiSelect-icon": {
+                top: "45%", // move up
+                transform: "translateY(-50%)",
+                "& .MuiOutlinedInput-input": {
+                  padding: "12px 20px",
+                },
+              },
+            }}
+            disabled={isLoading}
+            disableUnderline
+          >
+            {dropdownList &&
+              dropdownList.map((item, idx) => (
+                <MenuItem key={idx} value={item.value}>
+                  {item.label}
+                </MenuItem>
+              ))}
+          </Select>
+        </FormControl>
+      )}
+    />
+  );
+};
+
+export default FormDropdown;

package/src/components/filter/components/forms/components/Filter-criteria.tsx

@@ -0,0 +1,164 @@
+import {
+  Box,
+  Button,
+  styled,
+  List,
+  ListItem,
+  Paper,
+  ListSubheader,
+  ListItemText,
+} from "@mui/material";
+import { useState, useRef } from "react";
+import { AddIcon } from "../../../../../assets/svg";
+import {
+  FilterColumnsDataProps,
+  FilterColumnsListProps,
+  UpdatedFilterStateProps,
+} from "../../../../../types/filter";
+import { CraftTableOptionsProps } from "../../../../../types/table-options";
+
+const FilterCriteria = ({
+  columnsData,
+  tableStates,
+  setSelectedFilters,
+}: {
+  columnsData: FilterColumnsDataProps;
+  tableStates: CraftTableOptionsProps;
+  setSelectedFilters: React.Dispatch<
+    React.SetStateAction<UpdatedFilterStateProps[]>
+  >;
+}) => {
+  const FilterButton = styled(Button)(({ theme }) => ({
+    borderRadius: 20,
+    borderColor: theme.palette.primary.main,
+    color: theme.palette.primary.main,
+    textTransform: "none",
+    padding: "8px 16px",
+    "&:hover": {
+      borderColor: theme.palette.primary.dark,
+    },
+  }));
+
+  const [showFilterOptions, setShowFilterOption] = useState(false);
+  const { filters, setFilters } = tableStates;
+  const filterButtonRef = useRef<HTMLButtonElement>(null);
+
+  const handleAddFilter = (column: FilterColumnsListProps) => {
+    const dropdownOptions = columnsData.operation_list[column.data_type];
+    const defaultValue = column.data_type === "multiselect" ? [] : "";
+    const defaultOperator = dropdownOptions?.[0]?.value || "";
+    const matchingDropdownList =
+      columnsData.operation_list[column.data_type] || [];
+
+    const newFilter = {
+      filter_attribute: column.attribute_key,
+      filter_operator: defaultOperator,
+      filter_value: defaultValue,
+    };
+
+    const newSelectedFilter = {
+      ...newFilter,
+      id: column.id,
+      name: column.name,
+      data_type: column.data_type,
+      dropdown_list: matchingDropdownList,
+    };
+
+    setFilters((prev) => [...prev, newFilter]);
+    setSelectedFilters((prev) => [...prev, newSelectedFilter]);
+    //   if (editMode) {
+    //     setEditFilters((prev) => [...prev, newFilter]);
+    //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
+    //   } else {
+    //     setFilters((prev) => [...prev, newFilter]);
+    //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
+    //   }
+
+    setShowFilterOption(false);
+  };
+
+  const toggleFilterOptions = () => {
+    setShowFilterOption((prev) => !prev);
+  };
+
+  return (
+    <Box>
+      <FilterButton
+        fullWidth
+        startIcon={<AddIcon />}
+        onClick={toggleFilterOptions}
+        sx={{
+          bgcolor: "#eae4fe",
+          borderRadius: "6px",
+          color: "#7a5af8",
+          fontSize: "13px",
+          fontWeight: 500,
+        }}
+        ref={filterButtonRef}
+      >
+        Filter Criteria
+      </FilterButton>
+
+      {showFilterOptions && (
+        <Paper
+          sx={{
+            mt: 2,
+            width: filterButtonRef.current?.offsetWidth || 360, // Dynamic width based on button
+            p: 1,
+            maxHeight: "300px",
+            overflowY: "auto",
+            cursor: "pointer",
+            position: "absolute",
+            zIndex: 1300,
+          }}
+        >
+          <Box
+            sx={{
+              maxHeight: "300px", // Adjust height as needed
+              overflowY: "auto", // Enable vertical scrolling
+              width: "100%", // Adjust width as needed
+            }}
+          >
+            <List
+              subheader={
+                <ListSubheader
+                  component="div"
+                  sx={{
+                    fontWeight: "bold",
+                    bgcolor: "#f5f5f9",
+                    borderRadius: "6px",
+                  }}
+                >
+                  Filter by...
+                </ListSubheader>
+              }
+            >
+              {columnsData?.column_list?.map((column, index) => {
+                const isAlreadySelected = filters?.some(
+                  (filter) => filter.filter_attribute === column.attribute_key
+                );
+
+                return (
+                  <ListItem
+                    key={index}
+                    onClick={() =>
+                      !isAlreadySelected && handleAddFilter(column)
+                    } // Prevent click if already selected
+                    sx={{
+                      opacity: isAlreadySelected ? 0.5 : 1,
+                      cursor: isAlreadySelected ? "not-allowed" : "pointer",
+                    }}
+                  >
+                    <ListItemText primary={column.name} />
+                  </ListItem>
+                );
+              })}
+            </List>
+          </Box>
+        </Paper>
+      )}
+    </Box>
+  );
+};
+
+export default FilterCriteria;

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

@@ -0,0 +1,57 @@
+import { Controller } from "react-hook-form";
+import { FormControl, Select, MenuItem, Theme, SxProps } from "@mui/material";
+import { UpdatedFilterStateProps } from "../../../../../types/filter";
+import { DropdownOption } from "../../../../../types/common";
+
+const FormMultiSelect = ({
+  filter,
+  control,
+  dropdownData,
+  sx,
+}: {
+  filter: UpdatedFilterStateProps;
+  control: any;
+  dropdownData: Record<string, DropdownOption[]>;
+  sx?: SxProps<Theme>;
+}) => {
+  const options = dropdownData[filter.filter_attribute] || [];
+
+  return (
+    <Controller
+      name={`${filter?.name}.value`}
+      control={control}
+      defaultValue={filter.filter_value || []}
+      render={({ field }) => (
+        <FormControl sx={sx} fullWidth size="small">
+          <Select
+            {...field}
+            sx={{
+              "& .MuiOutlinedInput-input": {
+                padding: "12px 20px",
+              },
+            }}
+            multiple
+            value={field.value || []}
+            onChange={(e) => field.onChange(e.target.value)}
+            renderValue={(selected: string[]) =>
+              selected
+                .map(
+                  (val) =>
+                    options.find((item) => item.value === val)?.label || val
+                )
+                .join(", ")
+            }
+          >
+            {options.map((item, idx) => (
+              <MenuItem key={idx} value={item.value}>
+                {item.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      )}
+    />
+  );
+};
+
+export default FormMultiSelect;

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

@@ -0,0 +1,53 @@
+import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
+import { Controller } from "react-hook-form";
+import { UpdatedFilterStateProps } from "../../../../../types/filter";
+import { DropdownOption } from "../../../../../types/common";
+
+interface FormSelectProps {
+  filter: UpdatedFilterStateProps;
+  control: any;
+  dropdownData: Record<string, DropdownOption[]>;
+  isLoading?: boolean;
+  sx?: SxProps<Theme>;
+}
+
+const FormSelect = ({
+  filter,
+  control,
+  dropdownData,
+  isLoading = false,
+  sx,
+}: FormSelectProps) => {
+  // Use dropdownData if available, otherwise fallback to filter's dropdown_list
+  const dropdownOptions =
+    dropdownData[filter.filter_attribute] || filter.dropdown_list || [];
+
+  return (
+    <Controller
+      name={`${filter?.name}.value`}
+      control={control}
+      defaultValue={filter.filter_value || ""}
+      render={({ field }) => (
+        <FormControl sx={sx} fullWidth size="small">
+          <Select
+            {...field}
+            disabled={isLoading}
+            sx={{
+              "& .MuiOutlinedInput-input": {
+                padding: "12px 20px",
+              },
+            }}
+          >
+            {dropdownOptions.map((item, idx) => (
+              <MenuItem key={idx} value={item.value}>
+                {item.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      )}
+    />
+  );
+};
+
+export default FormSelect;

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

@@ -0,0 +1,43 @@
+import { TextField } from "@mui/material";
+import { Controller } from "react-hook-form";
+import { TextFieldStyles } from "./styles";
+import { UpdatedFilterStateProps } from "../../../../../types/filter";
+
+interface FormTextfieldProps {
+  filter: UpdatedFilterStateProps;
+  control: any;
+  isLoading?: boolean;
+}
+
+const FormTextfield = ({
+  filter,
+  control,
+  isLoading = false,
+}: FormTextfieldProps) => {
+  return (
+    <Controller
+      name={`${filter?.name}.value`}
+      control={control}
+      defaultValue={filter.filter_value || ""}
+      render={({ field }) => (
+        <TextField
+          {...field}
+          fullWidth
+          variant="outlined"
+          size="small"
+          sx={{
+            ...TextFieldStyles,
+            "& .MuiOutlinedInput-input": {
+              padding: "12px 20px",
+            },
+          }}
+          type={filter.data_type || "text"}
+          placeholder={"Enter value"}
+          disabled={isLoading}
+        />
+      )}
+    />
+  );
+};
+
+export default FormTextfield;

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

@@ -0,0 +1,11 @@
+export const TextFieldStyles = {
+  "& .MuiOutlinedInput-root": {
+    borderRadius: "6px",
+    fontSize: "14px",
+    bgcolor: "#fafafa",
+    "& fieldset": { borderColor: "#c1c1c1" },
+    "&.Mui-focused fieldset": {
+      borderColor: "#7A5AF8",
+    },
+  },
+};