@codezee/sixtify-brahma 0.0.0

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

@@ -0,0 +1,165 @@
+import ClearIcon from "@mui/icons-material/Clear";
+import type { PopoverProps } from "@mui/material";
+import {
+  Box,
+  Divider,
+  IconButton,
+  Popover,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { isFunction, sortBy } from "lodash";
+import { useEffect, useState, type PropsWithChildren } from "react";
+import { Button } from "../Button";
+import { PadBox } from "../PadBox";
+import type { FilterListType } from "./FilterTypeWrapper";
+
+type FilterPopupProps = PropsWithChildren<PopoverProps> & {
+  onApply?: () => void;
+  showFooter?: boolean;
+  showDivider?: boolean;
+  title?: string;
+  required?: boolean;
+  background?: boolean;
+  filterItem?: FilterListType;
+  currentFilterValue?: string | string[] | null;
+  reset?: () => void;
+};
+
+export const FilterPopup = ({
+  open,
+  anchorEl,
+  onClose,
+  children,
+  onApply,
+  showDivider = false,
+  showFooter = true,
+  title,
+  required,
+  filterItem,
+  reset,
+  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(reset)) {
+      reset();
+    }
+
+    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"
+            >
+              <Stack direction="row" alignItems="center" gap="5px">
+                <Typography variant="h6">{title}</Typography>
+
+                {required && (
+                  <Typography variant="h6" color="error">
+                    *
+                  </Typography>
+                )}
+              </Stack>
+
+              <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" }}>
+          <Box display="flex" justifyContent="flex-end">
+            <Button
+              onClick={handleApply}
+              disabled={isDisabled}
+              variant="text"
+              sx={{ maxWidth: "40px" }}
+            >
+              Apply
+            </Button>
+          </Box>
+        </PadBox>
+      )}
+    </Popover>
+  );
+};

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

@@ -0,0 +1,110 @@
+import { Stack, Typography, type PopoverProps } from "@mui/material";
+import { type PropsWithChildren } from "react";
+import type { Control, FieldErrors, FieldValues } from "react-hook-form";
+import { Switch } from "../FormFields";
+import { PadBox } from "../PadBox";
+import { DateRangePickerPopUp } from "./DateRangePickerPopUp";
+import { FilterPopup } from "./FilterPopup";
+import type { FilterListType } from "./FilterTypeWrapper";
+import { getFilterPopupComponent } from "./GetFilterPopupComponent";
+
+type FilterPopupWrapperProp = PropsWithChildren<PopoverProps> & {
+  filterItem: FilterListType;
+  control: Control<FieldValues>;
+  errors: FieldErrors<FieldValues>;
+  currentFilterValue?: string | string[] | null;
+  onApply: () => void;
+  reset?: () => void;
+};
+
+type FilterDateRangePickerWrapperProp = PropsWithChildren<PopoverProps> & {
+  filterItem: FilterListType;
+  control: Control<FieldValues>;
+  errors: FieldErrors<FieldValues>;
+  onApply: () => void;
+};
+
+export type FilterPopupComponentType = {
+  autoComplete?: JSX.Element;
+  text: JSX.Element;
+  date: JSX.Element;
+  checkbox?: JSX.Element;
+  dateRange?: JSX.Element;
+  switch?: JSX.Element;
+  radio?: JSX.Element;
+};
+
+export const FilterPopupWrapper = ({
+  open,
+  anchorEl,
+  filterItem,
+  onClose,
+  control,
+  errors,
+  onApply,
+  currentFilterValue,
+  reset,
+}: FilterPopupWrapperProp) => {
+  return (
+    <FilterPopup
+      title={filterItem.label}
+      required={filterItem.required}
+      filterItem={filterItem}
+      open={open}
+      onClose={onClose}
+      anchorEl={anchorEl}
+      onApply={onApply}
+      currentFilterValue={currentFilterValue}
+      reset={reset}
+      showFooter
+      showDivider
+      background
+    >
+      <PadBox padding={{ padding: "10px" }}>
+        {getFilterPopupComponent(filterItem, control, errors)[filterItem.type]}
+
+        {filterItem.type === "switch" && (
+          <Stack
+            key={filterItem.key}
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+            sx={{ padding: "10px 5px 10px 20px", margin: "auto" }}
+          >
+            <Typography variant="body2">{filterItem.label}</Typography>
+
+            <Switch control={control} name={filterItem.key} />
+          </Stack>
+        )}
+      </PadBox>
+    </FilterPopup>
+  );
+};
+
+export const FilterPopUpDateRangeWrapper = ({
+  open,
+  anchorEl,
+  filterItem,
+  onClose,
+  control,
+  errors,
+  onApply,
+}: FilterDateRangePickerWrapperProp) => {
+  return (
+    <DateRangePickerPopUp
+      title={filterItem.label}
+      required={filterItem.required}
+      open={open}
+      onClose={onClose}
+      anchorEl={anchorEl}
+      onApply={onApply}
+      showFooter
+      showDivider
+      background
+    >
+      <PadBox padding={{ padding: "10px" }}>
+        {getFilterPopupComponent(filterItem, control, errors)[filterItem.type]}
+      </PadBox>
+    </DateRangePickerPopUp>
+  );
+};

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

@@ -0,0 +1,60 @@
+import { ListItemButton, Stack, Typography } from "@mui/material";
+import type { Control, FieldValues } from "react-hook-form";
+import { Switch } from "../FormFields/Switch";
+
+export type FilterComponentType =
+  | "autoComplete"
+  | "text"
+  | "date"
+  | "dateRange"
+  | "checkbox"
+  | "radio"
+  | "switch";
+
+type Options = readonly {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  avatar?: string;
+}[];
+
+export type FilterListType = {
+  label: string;
+  isDisabled?: boolean;
+  key: string;
+  value: string;
+  type: FilterComponentType;
+  menuInfo?: string;
+  options?: Options;
+  multiSelect?: boolean;
+  required?: boolean;
+};
+type FilterTypeWrapperProps = {
+  filter: FilterListType;
+  control: Control<FieldValues>;
+};
+export const FilterTypeWrapper = ({
+  filter,
+  control,
+}: FilterTypeWrapperProps) => {
+  const getFilterByType = (type: FilterComponentType) => {
+    return (
+      <Stack
+        direction="row"
+        width="100%"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Typography variant="body2">{filter.label}</Typography>
+
+        {type === "switch" ? (
+          <Switch control={control} name={filter.key} />
+        ) : (
+          <Typography variant="body2">{filter.menuInfo}</Typography>
+        )}
+      </Stack>
+    );
+  };
+
+  return <ListItemButton>{getFilterByType(filter.type)}</ListItemButton>;
+};

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

@@ -0,0 +1,76 @@
+import { useTheme } from "@mui/material";
+import type { Control, FieldErrors, FieldValues } from "react-hook-form";
+import {
+  Autocomplete,
+  DatePicker,
+  DateRangePicker,
+  TextField,
+} from "../FormFields";
+import type { FilterPopupComponentType } from "./FilterPopupWrapper";
+import type { FilterListType } from "./FilterTypeWrapper";
+
+export const getFilterPopupComponent = (
+  selectedFilter: FilterListType,
+  control: Control<FieldValues>,
+  errors: FieldErrors<FieldValues>
+): FilterPopupComponentType => {
+  const theme = useTheme();
+
+  const { sapphireBlue, black } = theme.palette.app.color;
+
+  const errorSelectedKey = errors[selectedFilter.key];
+
+  return {
+    autoComplete: selectedFilter.options && (
+      <Autocomplete
+        disableClearable
+        multiple={selectedFilter.multiSelect ?? false}
+        placeholder={`Select ${selectedFilter.label}`}
+        name={`${selectedFilter.key}`}
+        disabled={selectedFilter.isDisabled}
+        shouldCloseOnSelect={selectedFilter.multiSelect ?? false}
+        control={control}
+        options={selectedFilter.options ?? []}
+        sx={{
+          maxHeight: "250px",
+          overflowY: "auto",
+          width: "100%",
+          "& .MuiAutocomplete-tag": {
+            backgroundColor: sapphireBlue[300],
+            color: black[900],
+          },
+        }}
+        error={!!errorSelectedKey}
+        helperText={errorSelectedKey?.message as string}
+      />
+    ),
+    text: (
+      <TextField
+        name={selectedFilter.key}
+        control={control}
+        disabled={selectedFilter.isDisabled}
+        placeholder={selectedFilter.label}
+        error={!!errorSelectedKey}
+        helperText={errorSelectedKey?.message as string}
+      />
+    ),
+    date: (
+      <DatePicker
+        name={selectedFilter.key}
+        control={control}
+        disabled={selectedFilter.isDisabled}
+        error={!!errorSelectedKey}
+        helperText={errorSelectedKey?.message as string}
+      />
+    ),
+    dateRange: (
+      <DateRangePicker
+        name={selectedFilter.key}
+        control={control}
+        disabled={selectedFilter.isDisabled}
+        error={!!errorSelectedKey}
+        helperText={errorSelectedKey?.message as string}
+      />
+    ),
+  };
+};

package/packages/shared-components/src/FilterList/getFormData.ts

@@ -0,0 +1,29 @@
+import type { FilterListType } from "./FilterTypeWrapper";
+
+export const getFormValue = (value: unknown, item: FilterListType) => {
+  let keyValue = value;
+
+  if (item && item.type === "autoComplete") {
+    if (item.multiSelect && Array.isArray(value)) {
+      keyValue = item.options
+        ?.filter((option) => value.includes(option.value))
+        .map((option) => option.label)
+        .join(", ");
+    } else {
+      keyValue = item.options
+        ?.filter((option) => option.value === value)
+        .map((option) => option.label)
+        .join(", ");
+    }
+  }
+
+  if (item.type === "dateRange" && Array.isArray(value) && value.length === 2) {
+    const startDate = value[0];
+
+    const endDate = value[1];
+
+    keyValue = `${startDate} <= Start Date <= ${endDate}`;
+  }
+
+  return keyValue;
+};

package/packages/shared-components/src/FilterList/index.ts

@@ -0,0 +1,6 @@
+export * from "./FilterList";
+export * from "./FilterListV2";
+export * from "./FilterPopup";
+export * from "./FilterPopupWrapper";
+export * from "./FilterTypeWrapper";
+export * from "./getFormData";