@codezee/sixtify-brahma 0.2.207 → 0.2.208

package/packages/shared-components/dist/FilterList/FilterListV2.js

@@ -1,440 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterListV2 = void 0;
-exports.formatFilterData = formatFilterData;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable sonarjs/no-nested-functions */
-/* eslint-disable sonarjs/no-nested-conditional */
-/* eslint-disable sonarjs/function-return-type */
-/* eslint-disable no-use-before-define */
-const zod_1 = require("@hookform/resolvers/zod");
-const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
-const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
-const Accordion_1 = __importDefault(require("@mui/material/Accordion"));
-const AccordionDetails_1 = __importDefault(require("@mui/material/AccordionDetails"));
-const AccordionSummary_1 = __importDefault(require("@mui/material/AccordionSummary"));
-const Box_1 = __importDefault(require("@mui/material/Box"));
-const Divider_1 = __importDefault(require("@mui/material/Divider"));
-const Drawer_1 = __importDefault(require("@mui/material/Drawer"));
-const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const styles_1 = require("@mui/material/styles");
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
-const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
-const isEqual_1 = __importDefault(require("lodash/isEqual"));
-const isNil_1 = __importDefault(require("lodash/isNil"));
-const omitBy_1 = __importDefault(require("lodash/omitBy"));
-const luxon_1 = require("luxon");
-const react_1 = require("react");
-const react_hook_form_1 = require("react-hook-form");
-const zod_2 = require("zod");
-const Actions_1 = require("../Actions");
-const Button_1 = require("../Button");
-const FilterPill_1 = require("../Chips/FilterPill");
-const FormFields_1 = require("../FormFields");
-const SwitchField_1 = require("../FormFields/SwitchField");
-const Layouts_1 = require("../Layouts");
-const PadBox_1 = require("../PadBox");
-const Toast_1 = require("../Toast");
-const Tooltip_1 = require("../Tooltip");
-const utils_1 = require("../utils");
-const FilterPopupWrapper_1 = require("./FilterPopupWrapper");
-const GetFilterPopupComponent_1 = require("./GetFilterPopupComponent");
-const getFormData_1 = require("./getFormData");
-function formatFilterData(data, filterListItems) {
-    return Object.fromEntries(Object.entries(data).flatMap(([key, value]) => {
-        if (value) {
-            const config = filterListItems.find((item) => item.key === key);
-            const formattedValue = config?.monthYearFormat && typeof value === "string"
-                ? luxon_1.DateTime.fromISO(value).toFormat("yyyy-MM")
-                : value;
-            return [[key, formattedValue]];
-        }
-        return [];
-    }));
-}
-const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onApply, onClear, onChange, }) => {
-    const theme = (0, styles_1.useTheme)();
-    const { iron, slate } = theme.palette.app.color;
-    const { layout } = (0, utils_1.useGetDeviceType)();
-    const isDesktop = layout === "desktop";
-    const isMobile = layout === "mobile";
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    const filterPopupAnchorElm = (0, react_1.useRef)(null);
-    const dateRangeAnchorRef = (0, react_1.useRef)(null);
-    const [openFilterPopup, setOpenFilterPopup] = (0, react_1.useState)(false);
-    const [datePickerPopup, setDatePickerPopup] = (0, react_1.useState)(false);
-    const [currentFilter, setCurrentFilter] = (0, react_1.useState)(null);
-    const filterListV2AnchorRef = (0, react_1.useRef)(null);
-    const [isPopupOpen, setIsPopupOpen] = (0, react_1.useState)(false);
-    const [focusedChipKey, setFocusedChipKey] = (0, react_1.useState)(null);
-    const chipRefs = (0, react_1.useRef)({});
-    const handleDateRange = (filter) => {
-        setCurrentFilter(filter);
-        setDatePickerPopup(true);
-    };
-    const defaultValues = (0, react_1.useMemo)(() => {
-        return filterListItems.reduce((acc, item) => {
-            if (item.type === "autoComplete" &&
-                item.required &&
-                item.options?.length === 1) {
-                acc[item.key] = item.options[0]?.value;
-            }
-            else if (item.multiSelect || item.type === "dateRange") {
-                acc[item.key] = item.value || null;
-            }
-            else if (item.type === "switch") {
-                acc[item.key] = item.value || false;
-            }
-            else if (item.isDefaultCurrentDate && item.type === "date") {
-                acc[item.key] = item.value || luxon_1.DateTime.now().toISODate();
-            }
-            else {
-                acc[item.key] = item.value || null;
-            }
-            return acc;
-        }, {});
-    }, [filterListData]);
-    const baseSchema = zod_2.z.object((() => {
-        const shape = {};
-        filterListItems.forEach((item) => {
-            if (item.multiSelect || item.type === "dateRange") {
-                shape[item.key] = zod_2.z.array(zod_2.z.string()).nullable().optional();
-            }
-            else if (item.type === "switch") {
-                shape[item.key] = zod_2.z.boolean().nullable().optional();
-            }
-            else {
-                shape[item.key] = zod_2.z.string().nullable().optional();
-            }
-        });
-        return shape;
-    })());
-    const validationSchema = baseSchema.superRefine((data, ctx) => {
-        filterListItems.forEach((item) => {
-            if (item.required && !data[item.key]?.length) {
-                ctx.addIssue({
-                    path: [item.key],
-                    message: `${item.label} is required`,
-                    code: zod_2.z.ZodIssueCode.custom,
-                });
-            }
-        });
-    });
-    const { control, handleSubmit, setValue, reset, getValues, formState: { errors, dirtyFields }, watch, } = (0, react_hook_form_1.useForm)({
-        values: defaultValues,
-        resolver: (0, zod_1.zodResolver)(validationSchema),
-        mode: "all",
-    });
-    (0, react_1.useMemo)(() => {
-        if (!filterListItems || filterListItems.length === 0) {
-            return;
-        }
-        filterListItems.forEach((item) => {
-            if (item.required && item.options?.length === 1) {
-                const currentValue = getValues(item.key);
-                if (!currentValue) {
-                    setValue(item.key, item.options[0]?.value);
-                }
-            }
-        });
-    }, [filterListItems]);
-    const company_id = watch("company_id");
-    const business_unit_id = watch("business_unit_id");
-    const department_id = watch("department_id");
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-    const handleCloseFilterPopup = () => {
-        if (currentFilter?.key) {
-            setValue(`${currentFilter?.key}`, filterListData?.[currentFilter.key]);
-        }
-        setOpenFilterPopup(false);
-    };
-    const handleCloseDatePickerPopup = () => {
-        if (currentFilter?.key) {
-            setValue(`${currentFilter?.key}`, filterListData?.[currentFilter.key]);
-        }
-        setDatePickerPopup(false);
-    };
-    const handlerReset = () => {
-        reset();
-        onClear();
-        handleClose();
-    };
-    const handleClick = (event) => {
-        const element = event instanceof HTMLElement ? event : event.currentTarget;
-        setAnchorEl(element);
-    };
-    const onSubmit = (data) => {
-        setOpenFilterPopup(false);
-        setCurrentFilter(null);
-        const filteredData = (0, omitBy_1.default)(formatFilterData(data, filterListItems), (v) => (0, isNil_1.default)(v) || (0, isEmpty_1.default)(v));
-        onApply(filteredData, openFilterPopup, currentFilter?.key);
-        handleClose();
-    };
-    const handleDateRangeSubmit = () => {
-        setDatePickerPopup(false);
-    };
-    const getFilterItem = (key) => {
-        return filterListItems.find((item) => item.key === key);
-    };
-    const handleDelete = (key) => {
-        const item = getFilterItem(key);
-        if (item?.required) {
-            return Toast_1.toasts.error({
-                title: "This is a required custom filter field and cannot be removed.",
-            });
-        }
-        setValue(`${key}`, null);
-        const newData = { ...filterListData };
-        delete newData[key];
-        onApply(newData, true, key);
-    };
-    const formData = (0, react_hook_form_1.useWatch)({ control });
-    const currentFilterValue = currentFilter?.key
-        ? currentFilter.key === "switch"
-            ? watch(currentFilter.key)
-                ? "true"
-                : "false"
-            : watch(currentFilter.key)
-        : null;
-    (0, react_1.useEffect)(() => {
-        onChange(formData, openFilterPopup);
-    }, [formData, onChange]);
-    (0, react_1.useEffect)(() => {
-        reset(defaultValues);
-    }, [defaultValues, reset]);
-    (0, react_1.useMemo)(() => {
-        if (company_id !== filterListData?.company_id && !openFilterPopup) {
-            filterListItems.forEach((item) => {
-                if (item.isDefaultCurrentDate && item.type === "date") {
-                    return;
-                }
-                setValue(`${item.key}`, null);
-            });
-            setValue("company_id", company_id);
-        }
-    }, [company_id]);
-    (0, react_1.useMemo)(() => {
-        if (!(0, isEqual_1.default)(business_unit_id, filterListData?.business_unit_id) &&
-            !openFilterPopup) {
-            setValue("business_unit_location_id", null);
-        }
-    }, [business_unit_id]);
-    (0, react_1.useMemo)(() => {
-        if (!(0, isEqual_1.default)(department_id, filterListData?.department_id) &&
-            !openFilterPopup) {
-            setValue("sub_department_id", null);
-        }
-    }, [department_id]);
-    const open = Boolean(anchorEl);
-    const shouldFormSubmit = (0, react_1.useMemo)(() => {
-        return (Object.keys(dirtyFields).length === 0 &&
-            Object.keys(formData).every((key) => (0, isNil_1.default)(formData[key]) || (0, isEmpty_1.default)(formData[key])));
-    }, [formData, dirtyFields]);
-    function formatKeyValue(keyValue) {
-        if (Array.isArray(keyValue)) {
-            return keyValue.join(", ");
-        }
-        if (utils_1.monthYearRegex.test(keyValue)) {
-            return luxon_1.DateTime.fromFormat(keyValue, "yyyy-MM").toFormat("MMM yyyy");
-        }
-        if (utils_1.isoDateRegex.test(keyValue)) {
-            return luxon_1.DateTime.fromFormat(keyValue, "yyyy-MM-dd").toFormat("dd-MM-yyyy");
-        }
-        return keyValue;
-    }
-    const handleChipClick = (key, e) => {
-        if (key === "company_id" &&
-            filterListItems?.some(({ required }) => required)) {
-            return;
-        }
-        setOpenFilterPopup(true);
-        filterPopupAnchorElm.current = e.currentTarget;
-        const item = getFilterItem(key);
-        if (item) {
-            setCurrentFilter(item);
-        }
-    };
-    const handleChipKeyDown = (key, e) => {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            const chipElement = chipRefs.current[key];
-            if (chipElement) {
-                handleChipClick(key, { currentTarget: chipElement });
-            }
-        }
-        else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
-            e.preventDefault();
-            const chipKeys = Object.keys(filterListData || {}).filter((k) => filterListData?.[k]);
-            const currentIndex = chipKeys.indexOf(key);
-            const nextIndex = e.key === "ArrowRight"
-                ? (currentIndex + 1) % chipKeys.length
-                : (currentIndex - 1 + chipKeys.length) % chipKeys.length;
-            const nextKey = chipKeys[nextIndex];
-            if (nextKey && chipRefs.current[nextKey]) {
-                chipRefs.current[nextKey]?.focus();
-                setFocusedChipKey(nextKey);
-            }
-        }
-    };
-    const renderChips = (data) => {
-        return Object.entries(data).map(([key, value], index) => {
-            if (typeof value !== "boolean" && !value) {
-                return;
-            }
-            const item = getFilterItem(key);
-            const keyValue = item && (0, getFormData_1.getFormValue)(value, item);
-            const formattedValue = formatKeyValue(typeof keyValue === "object"
-                ? JSON.stringify(keyValue)
-                : String(keyValue));
-            if (typeof value !== "boolean" && !formattedValue) {
-                return;
-            }
-            const isFocused = focusedChipKey === key;
-            return ((0, jsx_runtime_1.jsx)(FilterPill_1.FilterPill, { ref: (el) => {
-                    chipRefs.current[key] = el;
-                    if (index === 0 && !focusedChipKey) {
-                        filterPopupAnchorElm.current = el;
-                    }
-                }, label: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip
-                // eslint-disable-next-line sonarjs/no-base-to-string
-                , { 
-                    // eslint-disable-next-line sonarjs/no-base-to-string
-                    toolTipLabel: `${formattedValue}`, children: `${item?.label}: ${formattedValue}` }), onDelete: () => handleDelete(key), onClick: (e) => {
-                    handleChipClick(key, e);
-                }, isFocused: isFocused, onKeyDown: (e) => handleChipKeyDown(key, e), onFocus: () => setFocusedChipKey(key), onBlur: () => {
-                    // Only clear focus if focus is moving to another chip
-                    setTimeout(() => {
-                        if (!Object.values(chipRefs.current).some((ref) => ref === document.activeElement)) {
-                            setFocusedChipKey(null);
-                        }
-                    }, 0);
-                }, tabIndex: 0 }, key));
-        });
-    };
-    (0, utils_1.useGlobalKeyboardShortcut)({
-        key: "f",
-        modifierKeys: ["ctrl", "shift"],
-        onTrigger: () => {
-            if (isDisabled) {
-                return;
-            }
-            const buttonElement = filterListV2AnchorRef.current ?? document.createElement("button");
-            handleClick(buttonElement);
-        },
-    });
-    const firstNonSwitchIndex = filterListItems.findIndex(({ type }) => type !== "switch" && type !== "dateRange");
-    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: { flexGrow: 1 }, children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", justifyContent: { xs: "end", md: "space-between" }, spacing: 1, children: [isDesktop && ((0, jsx_runtime_1.jsx)(Stack_1.default, { direction: "row", alignItems: "center", sx: {
-                            maxWidth: {
-                                xs: "40vw",
-                                md: "45vw",
-                                lg: "57vw",
-                            },
-                        }, children: filterListData &&
-                            Object.values(filterListData).some((value) => value) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body1", sx: {
-                                        minWidth: "50px",
-                                        marginRight: "5px",
-                                    }, children: "Filters:" }), (0, jsx_runtime_1.jsx)(Stack_1.default, { direction: "row", gap: "5px", alignItems: "center", sx: { flexWrap: "wrap", maxWidth: "100%" }, children: renderChips(filterListData) })] })) })), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignItems: "flex-start", children: [filterListData &&
-                                Object.values(filterListData).some((value) => value) && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => handlerReset(), variant: "text", sx: { minWidth: { xs: "60px", sm: "100px" } }, children: !isMobile ? "Clear Filter" : "Clear" })), !isDisabled && ((0, jsx_runtime_1.jsx)(Actions_1.FilterIconAction, { isFiltered: !(0, isEmpty_1.default)(filterListData), onClick: handleClick, ref: filterListV2AnchorRef }))] })] }), (0, jsx_runtime_1.jsx)("form", { onSubmit: (e) => {
-                    e.preventDefault();
-                    if (!shouldFormSubmit) {
-                        handleSubmit((data) => {
-                            onSubmit(data);
-                        })();
-                    }
-                }, onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                        e.preventDefault();
-                        if (!isPopupOpen && !shouldFormSubmit) {
-                            handleSubmit((data) => {
-                                onSubmit(data);
-                            })();
-                        }
-                    }
-                }, children: (0, jsx_runtime_1.jsxs)(Drawer_1.default, { open: open, onClose: (_event, reason) => {
-                        if (reason === "backdropClick") {
-                            return;
-                        }
-                        handleClose();
-                    }, anchor: "right", sx: {
-                        zIndex: theme.zIndex.drawer + 2,
-                        "& .MuiPaper-root": {
-                            width: "100%",
-                            maxWidth: { xs: "270px", sm: "350px" },
-                        },
-                    }, children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { sx: {
-                                background: iron[600],
-                            }, children: [(0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px 30px" }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", justifyContent: "space-between", width: "100%", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h6", children: "Filter" }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => {
-                                                    reset();
-                                                    handleClose();
-                                                }, children: (0, jsx_runtime_1.jsx)(Clear_1.default, {}) })] }) }), (0, jsx_runtime_1.jsx)(Divider_1.default, { sx: { width: "100%" } })] }), (0, jsx_runtime_1.jsx)(Stack_1.default, { flexGrow: 1, sx: { overflowX: "hidden" }, children: filterListItems.map((filter, index) => filter.type === "switch" ? ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "80%", sx: { padding: "10px 5px 10px 20px ", margin: "auto" }, children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", children: filter.label }), (0, jsx_runtime_1.jsx)(SwitchField_1.SwitchField, { control: control, name: filter.key })] }, filter.key)) : ((0, jsx_runtime_1.jsxs)(Accordion_1.default, { defaultExpanded: index === firstNonSwitchIndex ||
-                                    !!filterListData?.[filter.key] ||
-                                    !!defaultValues?.[filter.key] ||
-                                    filter.required, disabled: filter.isDisabled, sx: {
-                                    boxShadow: "none",
-                                    "&.MuiAccordion-root.Mui-expanded": {
-                                        margin: "0 !important",
-                                    },
-                                    "&.MuiAccordion-root.Mui-disabled": {
-                                        backgroundColor: "transparent",
-                                    },
-                                }, children: [(0, jsx_runtime_1.jsx)(AccordionSummary_1.default, { expandIcon: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}), "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",
-                                            },
-                                        }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "90%", children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignItems: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", children: filter.label }), filter.required && ((0, jsx_runtime_1.jsx)(Typography_1.default, { color: "error", children: "*" }))] }), (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", children: filter.menuInfo })] }) }), (0, jsx_runtime_1.jsx)(AccordionDetails_1.default, { sx: {
-                                            background: slate[600],
-                                            borderRadius: "5px",
-                                            padding: "0px",
-                                        }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: {
-                                                paddingLeft: "15px",
-                                                paddingY: "5px",
-                                                paddingRight: "15px",
-                                            }, children: filter.type === "dateRange" ? ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignItems: "center", gap: "10px", onClick: (e) => {
-                                                    handleDateRange(filter);
-                                                    dateRangeAnchorRef.current = e.currentTarget;
-                                                }, children: [(0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
-                                                            border: "1px solid black",
-                                                            borderRadius: "5px",
-                                                            width: "150px",
-                                                            p: 1,
-                                                        }, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", children: Array.isArray(watch(filter.key)) &&
-                                                                watch(filter.key)[0]
-                                                                ? luxon_1.DateTime.fromISO(watch(filter.key)[0]).toFormat(FormFields_1.dateFormats.dateWithEuropean)
-                                                                : "Start Date" }) }), (0, jsx_runtime_1.jsx)(Typography_1.default, { children: "~" }), (0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
-                                                            border: "1px solid black",
-                                                            borderRadius: "5px",
-                                                            width: "150px",
-                                                            p: 1,
-                                                        }, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", children: Array.isArray(watch(filter.key)) &&
-                                                                watch(filter.key)[1]
-                                                                ? luxon_1.DateTime.fromISO(watch(filter.key)[1]).toFormat(FormFields_1.dateFormats.dateWithEuropean)
-                                                                : "End Date" }) })] })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { children: (0, GetFilterPopupComponent_1.getFilterPopupComponent)({
-                                                    selectedFilter: filter,
-                                                    control,
-                                                    errors,
-                                                    setIsPopupOpen,
-                                                    autoFocus: index === firstNonSwitchIndex,
-                                                })[filter.type] })) }) })] }, filter.key))) }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(Stack_1.default, { children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsxs)(Layouts_1.ButtonContainer, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", disabled: shouldFormSubmit, variant: "contained", onClick: () => {
-                                                handleSubmit(onSubmit)();
-                                            }, children: "Apply" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", onClick: () => handlerReset(), disabled: Object.keys(formData).every((key) => !formData[key]), variant: "outlined", children: "Reset" })] }) }) })] }) }), currentFilter && ((0, jsx_runtime_1.jsx)(FilterPopupWrapper_1.FilterPopupWrapper, { open: openFilterPopup, onClose: handleCloseFilterPopup, onApply: () => {
-                    handleSubmit(onSubmit)();
-                }, control: control, errors: errors, reset: reset, anchorEl: filterPopupAnchorElm.current, filterItem: currentFilter, currentFilterValue: currentFilterValue })), currentFilter && ((0, jsx_runtime_1.jsx)(FilterPopupWrapper_1.FilterPopUpDateRangeWrapper, { open: datePickerPopup, onClose: handleCloseDatePickerPopup, onApply: () => {
-                    handleDateRangeSubmit();
-                }, control: control, errors: errors, anchorEl: dateRangeAnchorRef.current, filterItem: currentFilter }))] }));
-};
-exports.FilterListV2 = FilterListV2;

package/packages/shared-components/dist/FilterList/FilterPopup.js

@@ -1,72 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterPopup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
-const Box_1 = __importDefault(require("@mui/material/Box"));
-const Divider_1 = __importDefault(require("@mui/material/Divider"));
-const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
-const Popover_1 = __importDefault(require("@mui/material/Popover"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const styles_1 = require("@mui/material/styles");
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
-const isFunction_1 = __importDefault(require("lodash/isFunction"));
-const sortBy_1 = __importDefault(require("lodash/sortBy"));
-const react_1 = require("react");
-const Button_1 = require("../Button");
-const PadBox_1 = require("../PadBox");
-const FilterPopup = ({ open, anchorEl, onClose, children, onApply, showDivider = false, showFooter = true, title, required, filterItem, reset, background = false, currentFilterValue, }) => {
-    const theme = (0, styles_1.useTheme)();
-    const { slate } = theme.palette.app.color;
-    const [initialValue, setInitialValue] = (0, react_1.useState)(null);
-    const [isDisabled, setIsDisabled] = (0, react_1.useState)(true);
-    (0, react_1.useEffect)(() => {
-        if (open) {
-            if (!initialValue && !!currentFilterValue) {
-                const changedValue = filterItem?.multiSelect
-                    ? (0, sortBy_1.default)(currentFilterValue)
-                    : currentFilterValue;
-                setInitialValue(changedValue);
-            }
-        }
-        else {
-            setInitialValue(null);
-        }
-        if (!!currentFilterValue && !!initialValue) {
-            const isChanged = filterItem?.multiSelect
-                ? JSON.stringify((0, sortBy_1.default)(currentFilterValue)) !==
-                    JSON.stringify(initialValue)
-                : currentFilterValue !== initialValue;
-            setIsDisabled(!isChanged);
-        }
-    }, [open, currentFilterValue, initialValue, filterItem?.multiSelect]);
-    const handleApply = () => {
-        setInitialValue(null);
-        if ((0, isFunction_1.default)(onApply)) {
-            onApply();
-        }
-    };
-    const handleClose = () => {
-        setInitialValue(null);
-        if ((0, isFunction_1.default)(reset)) {
-            reset();
-        }
-        if ((0, isFunction_1.default)(onClose)) {
-            onClose({}, "backdropClick");
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, { open: open, anchorEl: anchorEl, anchorOrigin: { vertical: "bottom", horizontal: "left" }, onClose: (_event, reason) => {
-            if (reason === "backdropClick") {
-                return;
-            }
-            handleClose();
-        }, sx: { "& .MuiPaper-root": { minWidth: "300px" } }, children: [showDivider && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { alignItems: "flex-end", children: [(0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "8px" }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", justifyContent: "space-between", width: "100%", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignItems: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h6", children: title }), required && ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h6", color: "error", children: "*" }))] }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: handleClose, children: (0, jsx_runtime_1.jsx)(Clear_1.default, {}) })] }) }), (0, jsx_runtime_1.jsx)(Divider_1.default, { sx: { width: "100%" } })] })), (0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
-                    background: background ? slate[600] : "transparent",
-                    borderRadius: "5px",
-                    maxWidth: "300px",
-                }, children: children }), showFooter && ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { display: "flex", justifyContent: "flex-end", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleApply, disabled: isDisabled, variant: "text", sx: { maxWidth: "40px" }, children: "Apply" }) }) }))] }));
-};
-exports.FilterPopup = FilterPopup;

package/packages/shared-components/dist/FilterList/FilterPopupWrapper.js

@@ -1,30 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterPopUpDateRangeWrapper = exports.FilterPopupWrapper = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
-const FormFields_1 = require("../FormFields");
-const PadBox_1 = require("../PadBox");
-const DateRangePickerPopUp_1 = require("./DateRangePickerPopUp");
-const FilterPopup_1 = require("./FilterPopup");
-const GetFilterPopupComponent_1 = require("./GetFilterPopupComponent");
-const FilterPopupWrapper = ({ open, anchorEl, filterItem, onClose, control, errors, onApply, currentFilterValue, reset, }) => {
-    return ((0, jsx_runtime_1.jsx)(FilterPopup_1.FilterPopup, { title: filterItem.label, required: filterItem.required, filterItem: filterItem, open: open, onClose: onClose, anchorEl: anchorEl, onApply: onApply, currentFilterValue: currentFilterValue, reset: reset, showFooter: true, showDivider: true, background: true, children: (0, jsx_runtime_1.jsxs)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: [(0, GetFilterPopupComponent_1.getFilterPopupComponent)({
-                    selectedFilter: filterItem,
-                    control,
-                    errors,
-                })[filterItem.type], filterItem.type === "switch" && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { padding: "10px 5px 10px 20px", margin: "auto" }, children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", children: filterItem.label }), (0, jsx_runtime_1.jsx)(FormFields_1.SwitchField, { control: control, name: filterItem.key })] }, filterItem.key))] }) }));
-};
-exports.FilterPopupWrapper = FilterPopupWrapper;
-const FilterPopUpDateRangeWrapper = ({ open, anchorEl, filterItem, onClose, control, errors, onApply, }) => {
-    return ((0, jsx_runtime_1.jsx)(DateRangePickerPopUp_1.DateRangePickerPopUp, { title: filterItem.label, required: filterItem.required, open: open, onClose: onClose, anchorEl: anchorEl, onApply: onApply, showDivider: true, background: true, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, GetFilterPopupComponent_1.getFilterPopupComponent)({
-                selectedFilter: filterItem,
-                control,
-                errors,
-            })[filterItem.type] }) }));
-};
-exports.FilterPopUpDateRangeWrapper = FilterPopUpDateRangeWrapper;

package/packages/shared-components/dist/FilterList/FilterTypeWrapper.js

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterTypeWrapper = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
-const SwitchField_1 = require("../FormFields/SwitchField");
-const FilterTypeWrapper = ({ filter, control, }) => {
-    const getFilterByType = (type) => {
-        return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", width: "100%", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", children: filter.label }), type === "switch" ? ((0, jsx_runtime_1.jsx)(SwitchField_1.SwitchField, { control: control, name: filter.key })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", children: filter.menuInfo }))] }));
-    };
-    return (0, jsx_runtime_1.jsx)(ListItemButton_1.default, { children: getFilterByType(filter.type) });
-};
-exports.FilterTypeWrapper = FilterTypeWrapper;

package/packages/shared-components/dist/FilterList/GetFilterPopupComponent.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFilterPopupComponent = getFilterPopupComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
-const FormFields_1 = require("../FormFields");
-function getFilterPopupComponent({ selectedFilter, control, errors, setIsPopupOpen, autoFocus = false, }) {
-    const theme = (0, styles_1.useTheme)();
-    const { sapphireBlue, black } = theme.palette.app.color;
-    const errorSelectedKey = errors[selectedFilter.key];
-    const { placeholder, label } = selectedFilter;
-    const autocompletePlaceholder = placeholder ?? `Select ${label}`;
-    const textFieldPlaceholder = placeholder ?? label;
-    return {
-        autoComplete: selectedFilter.options && ((0, jsx_runtime_1.jsx)(FormFields_1.Autocomplete, { disableClearable: true, multiple: selectedFilter.multiSelect ?? false, placeholder: autocompletePlaceholder, name: `${selectedFilter.key}`, disabled: selectedFilter.isDisabled, shouldCloseOnSelect: selectedFilter.multiSelect ?? false, control: control, options: selectedFilter.options ?? [], onOpen: () => setIsPopupOpen?.(true), onClose: () => setIsPopupOpen?.(false), autoFocus: autoFocus, sx: {
-                maxHeight: "250px",
-                overflowY: "auto",
-                width: "100%",
-                "& .MuiAutocomplete-tag": {
-                    backgroundColor: sapphireBlue[300],
-                    color: black[900],
-                },
-            }, ...(selectedFilter.employeeAutocomplete && {
-                isShowEmployeeData: true,
-                isShowOptionsOnType: true,
-                getOptionLabel: (option) => {
-                    if (typeof option === "string") {
-                        return option;
-                    }
-                    return `${option.label} (${option.employee_code}) - ${option.punch_code}`;
-                },
-            }), error: !!errorSelectedKey, helperText: errorSelectedKey?.message })),
-        text: ((0, jsx_runtime_1.jsx)(FormFields_1.TextField, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, placeholder: textFieldPlaceholder, error: !!errorSelectedKey, helperText: errorSelectedKey?.message, autoFocus: autoFocus })),
-        date: ((0, jsx_runtime_1.jsx)(FormFields_1.DatePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, error: !!errorSelectedKey, helperText: errorSelectedKey?.message, autoFocus: autoFocus, ...(selectedFilter.monthYearFormat && {
-                format: "MMM yyyy",
-                views: ["year", "month"],
-            }) })),
-        dateRange: ((0, jsx_runtime_1.jsx)(FormFields_1.DateRangePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, error: !!errorSelectedKey, helperText: errorSelectedKey?.message })),
-    };
-}

package/packages/shared-components/dist/FilterList/getFormData.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFormValue = void 0;
-const getFormValue = (value, item) => {
-    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;
-};
-exports.getFormValue = getFormValue;