@codezee/sixtify-brahma 0.1.1

package/packages/shared-components/src/FilterList/FilterListV2.tsx

@@ -0,0 +1,504 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Divider,
+  Drawer,
+  IconButton,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import type { FilterListType } from "./FilterTypeWrapper";
+import {
+  FilterPopupWrapper,
+  GetFilterPopupComponent,
+} from "./FilterPopupWrapper";
+import type { FieldValues } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
+import { SvgFilterList } from "../Svgs/SvgFilterList";
+import { ExpandMore } from "@mui/icons-material";
+import { Switch } from "../FormFields/Switch";
+import { PadBox } from "../PadBox";
+import { Button } from "../Button";
+import { ClearIcon } from "@mui/x-date-pickers/icons";
+import { Tooltip } from "../Tooltip";
+import { FilterPill } from "../Chips/FilterPill";
+import { getFormValue } from "./getFormData";
+import { isEmpty } from "lodash";
+
+export type FilterListV2Props = {
+  filterListItems: FilterListType[];
+  isDisabled?: boolean;
+  filterListData?: FieldValues;
+  onApply: (data: FieldValues, isPopup?: boolean, key?: string) => void;
+  onChange: (data: FieldValues, isPopup: boolean) => void;
+  onClear: () => void;
+  resetFormBasedOnFields?: string;
+};
+export const FilterListV2 = ({
+  filterListItems,
+  isDisabled = false,
+  filterListData,
+  onApply,
+  onClear,
+  onChange,
+}: FilterListV2Props) => {
+  const theme = useTheme();
+
+  const { iron, slate } = theme.palette.app.color;
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const filterPopupAnchorElm = useRef<HTMLDivElement | null>(null);
+
+  const [openFilterPopup, setOpenFilterPopup] = useState(false);
+
+  const [currentFilter, setCurrentFilter] = useState<null | FilterListType>(
+    null
+  );
+
+  const handleDateRange = (filter: FilterListType) => {
+    setCurrentFilter(filter);
+    setOpenFilterPopup(true);
+  };
+
+  const defaultValues: FieldValues = useMemo(() => {
+    return filterListItems.reduce<FieldValues>((acc, item) => {
+      acc[item.key] = item.value ?? null;
+
+      return acc;
+    }, {});
+  }, [filterListData]);
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { dirtyFields },
+    watch,
+  } = useForm({
+    values: defaultValues,
+  });
+
+  const company_id = watch("company_id");
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleCloseFilterPopup = () => {
+    if (currentFilter?.key) {
+      setValue(`${currentFilter?.key}`, filterListData?.[currentFilter.key]);
+    }
+    setOpenFilterPopup(false);
+  };
+
+  const handlerReset = () => {
+    reset();
+    onClear();
+    handleClose();
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const onSubmit = (data: FieldValues) => {
+    setOpenFilterPopup(false);
+    setCurrentFilter(null);
+
+    const filteredData = Object.fromEntries(
+      Object.entries(data).filter(
+        ([, value]) => value && !(Array.isArray(value) && value.length === 0)
+      )
+    );
+
+    onApply(filteredData, openFilterPopup, currentFilter?.key);
+  };
+
+  const handleDelete = (key: string) => {
+    setValue(`${key}`, null);
+
+    const newData = { ...filterListData };
+
+    delete newData[key];
+
+    onApply(newData, true, key);
+  };
+
+  const formData = useWatch({ control });
+
+  const currentFilterValue = currentFilter?.key
+    ? watch(currentFilter.key)
+    : null;
+
+  useEffect(() => {
+    onChange(formData, openFilterPopup);
+  }, [formData, onChange]);
+
+  useMemo(() => {
+    if (company_id !== filterListData?.company_id && !openFilterPopup) {
+      filterListItems.forEach((item) => {
+        setValue(`${item.key}`, null);
+      });
+      setValue("company_id", company_id);
+    }
+  }, [company_id]);
+
+  const getFilterItem = (key: string) => {
+    return filterListItems.find((item) => item.key === key);
+  };
+
+  const open = Boolean(anchorEl);
+
+  const shouldFormSubmit = useMemo(() => {
+    return (
+      isEmpty(dirtyFields) ||
+      Object.keys(formData).every((key) => !formData[key])
+    );
+  }, [formData, dirtyFields]);
+
+  const renderChips = (data: FieldValues) => {
+    return Object.entries(data).map(([key, value]) => {
+      if (!value) {
+        return;
+      }
+
+      const item = getFilterItem(key);
+
+      const keyValue = item && getFormValue(value, item);
+
+      if (!keyValue) {
+        return;
+      }
+
+      return (
+        <FilterPill
+          ref={filterPopupAnchorElm}
+          key={key}
+          label={
+            <Tooltip
+              // eslint-disable-next-line sonarjs/no-base-to-string
+              toolTipLabel={`${keyValue}`}
+              // eslint-disable-next-line sonarjs/no-base-to-string
+            >{`${item?.label}: ${keyValue}`}</Tooltip>
+          }
+          onDelete={() => handleDelete(key)}
+          onClick={(e: { currentTarget: HTMLDivElement | null }) => {
+            setOpenFilterPopup(true);
+            filterPopupAnchorElm.current = e.currentTarget;
+
+            const item = getFilterItem(key);
+
+            if (item) {
+              setCurrentFilter(item);
+            }
+          }}
+        />
+      );
+    });
+  };
+
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Stack
+        direction="row"
+        spacing={1}
+        alignItems="flex-start"
+        justifyContent="space-between"
+      >
+        <Stack
+          direction="row"
+          alignItems="flex-start"
+          sx={{
+            maxWidth: {
+              xs: "40vw",
+              md: "45vw",
+              lg: "57vw",
+            },
+          }}
+        >
+          {filterListData &&
+            Object.values(filterListData).some((value) => value) && (
+              <>
+                <Typography
+                  variant="body1"
+                  sx={{
+                    minWidth: "60px",
+                    marginTop: "8px",
+                  }}
+                >
+                  Filters:
+                </Typography>
+                <Stack
+                  direction="row"
+                  gap="5px"
+                  marginTop="3px"
+                  alignItems="center"
+                  sx={{ flexWrap: "wrap", maxWidth: "100%" }}
+                >
+                  {renderChips(filterListData)}
+                </Stack>
+              </>
+            )}
+        </Stack>
+        <Stack direction="row">
+          {filterListData &&
+            Object.values(filterListData).some((value) => value) && (
+              <Button onClick={() => handlerReset()} variant="text">
+                Clear Filter
+              </Button>
+            )}
+          {!isDisabled && (
+            <IconButton onClick={handleClick} sx={{ height: "40px" }}>
+              <SvgFilterList />
+            </IconButton>
+          )}
+        </Stack>
+      </Stack>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+
+          if (!shouldFormSubmit) {
+            handleSubmit((data) => {
+              onSubmit(data);
+              handleClose();
+            })();
+          }
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+
+            if (!shouldFormSubmit) {
+              handleSubmit((data) => {
+                onSubmit(data);
+                handleClose();
+              })();
+            }
+          }
+        }}
+      >
+        <Drawer
+          open={open}
+          onClose={(_event, reason) => {
+            if (reason === "backdropClick") {
+              return;
+            }
+            handleClose();
+          }}
+          anchor="right"
+          sx={{
+            zIndex: theme.zIndex.drawer + 2,
+            "& .MuiPaper-root": {
+              width: "350px",
+            },
+          }}
+        >
+          <Stack
+            alignItems="flex-end"
+            sx={{
+              background: iron[600],
+            }}
+          >
+            <PadBox padding={{ padding: "10px 30px" }}>
+              <Stack
+                direction="row"
+                justifyContent="space-between"
+                width="100%"
+                alignItems="center"
+              >
+                <Typography variant="h6">Filter</Typography>
+                <IconButton
+                  onClick={() => {
+                    reset();
+                    handleClose();
+                  }}
+                >
+                  <ClearIcon />
+                </IconButton>
+              </Stack>
+            </PadBox>
+            <Divider sx={{ width: "100%" }} />
+          </Stack>
+          <Stack flexGrow={1} sx={{ overflowX: "hidden" }}>
+            {filterListItems.map((filter) =>
+              filter.type === "switch" ? (
+                <Stack
+                  key={filter.key}
+                  direction="row"
+                  justifyContent="space-between"
+                  alignItems="center"
+                  width="80%"
+                  sx={{ padding: "10px 5px 10px 20px ", margin: "auto" }}
+                >
+                  <Typography variant="body2">{filter.label}</Typography>
+                  <Switch control={control} name={filter.key} />
+                </Stack>
+              ) : (
+                <Accordion
+                  defaultExpanded={!!filterListData?.[filter.key]}
+                  disabled={filter.isDisabled}
+                  key={filter.key}
+                  sx={{
+                    "&.MuiAccordion-root.Mui-expanded": {
+                      margin: "0 !important",
+                    },
+                  }}
+                >
+                  <AccordionSummary
+                    expandIcon={<ExpandMore />}
+                    aria-controls="panel1a-content"
+                    id="panel1a-header"
+                    sx={{
+                      flexDirection: "row-reverse",
+                      "& MuiAccordionSummary-root.Mui-expanded": {
+                        marginRight: "10px",
+                        transform: "rotate(-90deg)",
+                      },
+                      "&.Mui-expanded": {
+                        minHeight: "40px",
+                        paddingY: "5px",
+                      },
+                      "& .MuiAccordionSummary-content.Mui-expanded": {
+                        margin: "0px",
+                      },
+                    }}
+                  >
+                    <Stack
+                      direction="row"
+                      justifyContent="space-between"
+                      alignItems="center"
+                      width="90%"
+                    >
+                      <Typography variant="body2">{filter.label}</Typography>
+                      <Typography variant="body2">{filter.menuInfo}</Typography>
+                    </Stack>
+                  </AccordionSummary>
+                  <AccordionDetails
+                    sx={{
+                      background: slate[600],
+                      borderRadius: "5px",
+                      padding: "0px",
+                    }}
+                  >
+                    <PadBox
+                      padding={{
+                        paddingLeft: "15px",
+                        paddingY: "5px",
+                        paddingRight: "15px",
+                      }}
+                    >
+                      {filter.type === "dateRange" ? (
+                        <Stack
+                          direction="row"
+                          alignItems="center"
+                          gap="10px"
+                          onClick={(e) => {
+                            handleDateRange(filter);
+                            filterPopupAnchorElm.current = e.currentTarget;
+                          }}
+                        >
+                          <Box
+                            sx={{
+                              border: "1px solid black",
+                              borderRadius: "5px",
+                              width: "150px",
+                              p: 1,
+                            }}
+                          >
+                            <Typography variant="body2">
+                              {(Array.isArray(filterListData?.["dateRange"]) &&
+                                filterListData?.["dateRange"][0]) ||
+                                "Start Date"}
+                            </Typography>
+                          </Box>
+                          <Typography>~</Typography>
+                          <Box
+                            sx={{
+                              border: "1px solid black",
+                              borderRadius: "5px",
+                              width: "150px",
+                              p: 1,
+                            }}
+                          >
+                            <Typography variant="body2">
+                              {(Array.isArray(filterListData?.["dateRange"]) &&
+                                filterListData?.["dateRange"][1]) ||
+                                "End Date"}
+                            </Typography>
+                          </Box>
+                        </Stack>
+                      ) : (
+                        <Box>
+                          {
+                            GetFilterPopupComponent(filter, control)[
+                              filter.type
+                            ]
+                          }
+                        </Box>
+                      )}
+                    </PadBox>
+                  </AccordionDetails>
+                </Accordion>
+              )
+            )}
+          </Stack>
+
+          <Divider
+            sx={{ width: "100%", position: "absolute", bottom: "70px" }}
+          />
+          <Stack height="70px">
+            <PadBox padding={{ padding: "10px" }}>
+              <Stack
+                direction="row"
+                gap="10px"
+                sx={{ position: "absolute", bottom: "15px" }}
+              >
+                <Button
+                  type="submit"
+                  disabled={shouldFormSubmit}
+                  variant="contained"
+                  onClick={() => {
+                    handleSubmit(onSubmit)();
+                    handleClose();
+                  }}
+                >
+                  Apply
+                </Button>
+                <Button
+                  type="button"
+                  onClick={() => handlerReset()}
+                  disabled={Object.keys(formData).every(
+                    (key) => !formData[key]
+                  )}
+                  variant="outlined"
+                >
+                  Reset
+                </Button>
+              </Stack>
+            </PadBox>
+          </Stack>
+        </Drawer>
+      </form>
+      {currentFilter && currentFilter.type !== "switch" && (
+        <FilterPopupWrapper
+          open={openFilterPopup}
+          onClose={handleCloseFilterPopup}
+          onApply={() => {
+            handleSubmit(onSubmit)();
+          }}
+          control={control}
+          anchorEl={filterPopupAnchorElm.current}
+          filterItem={currentFilter}
+          currentFilterValue={currentFilterValue}
+        />
+      )}
+    </Box>
+  );
+};

package/packages/shared-components/src/FilterList/FilterPopup.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState, type PropsWithChildren } from "react";
+import type { PopoverProps } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {
+  Box,
+  Divider,
+  IconButton,
+  Popover,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { Button } from "../Button";
+import { PadBox } from "../PadBox";
+import { isFunction, sortBy } from "lodash";
+import type { FilterListType } from "./FilterTypeWrapper";
+
+type FilterPopupProps = PropsWithChildren<PopoverProps> & {
+  onApply?: () => void;
+  showFooter?: boolean;
+  showDivider?: boolean;
+  title?: string;
+  background?: boolean;
+  filterItem?: FilterListType;
+  currentFilterValue?: string | string[] | null;
+};
+
+export const FilterPopup = ({
+  open,
+  anchorEl,
+  onClose,
+  children,
+  onApply,
+  showDivider = false,
+  showFooter = true,
+  title,
+  filterItem,
+  background = false,
+  currentFilterValue,
+}: FilterPopupProps) => {
+  const theme = useTheme();
+
+  const { slate } = theme.palette.app.color;
+
+  const [initialValue, setInitialValue] = useState<string | string[] | null>(
+    null
+  );
+
+  const [isDisabled, setIsDisabled] = useState(true);
+
+  useEffect(() => {
+    if (open) {
+      if (!initialValue && !!currentFilterValue) {
+        const changedValue = filterItem?.multiSelect
+          ? sortBy(currentFilterValue)
+          : currentFilterValue;
+
+        setInitialValue(changedValue);
+      }
+    } else {
+      setInitialValue(null);
+    }
+
+    if (!!currentFilterValue && !!initialValue) {
+      const isChanged = filterItem?.multiSelect
+        ? JSON.stringify(sortBy(currentFilterValue)) !==
+          JSON.stringify(initialValue)
+        : currentFilterValue !== initialValue;
+
+      setIsDisabled(!isChanged);
+    }
+  }, [open, currentFilterValue, initialValue, filterItem?.multiSelect]);
+
+  const handleApply = () => {
+    setInitialValue(null);
+
+    if (isFunction(onApply)) {
+      onApply();
+    }
+  };
+
+  const handleClose = () => {
+    setInitialValue(null);
+
+    if (isFunction(onClose)) {
+      onClose({}, "backdropClick");
+    }
+  };
+
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+      onClose={(_event, reason) => {
+        if (reason === "backdropClick") {
+          return;
+        }
+        handleClose();
+      }}
+      sx={{ "& .MuiPaper-root": { minWidth: "300px" } }}
+    >
+      {showDivider && (
+        <Stack alignItems="flex-end">
+          <PadBox padding={{ padding: "8px" }}>
+            <Stack
+              direction="row"
+              justifyContent="space-between"
+              width="100%"
+              alignItems="center"
+            >
+              <Typography variant="h6">{title}</Typography>
+              <IconButton onClick={handleClose}>
+                <ClearIcon />
+              </IconButton>
+            </Stack>
+          </PadBox>
+          <Divider sx={{ width: "100%" }} />
+        </Stack>
+      )}
+
+      <Box
+        sx={{
+          background: background ? slate[600] : "transparent",
+          borderRadius: "5px",
+          maxWidth: "300px",
+        }}
+      >
+        {children}
+      </Box>
+
+      {showFooter && (
+        <PadBox padding={{ padding: "10px" }}>
+          <Stack direction="row" justifyContent="flex-end">
+            <Button
+              onClick={handleApply}
+              disabled={isDisabled}
+              variant="text"
+              sx={{ maxWidth: "40px" }}
+            >
+              Apply
+            </Button>
+          </Stack>
+        </PadBox>
+      )}
+    </Popover>
+  );
+};