@evenicanpm/admin-integrate 1.1.0 → 1.2.0

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

@@ -4,32 +4,32 @@ import { useTranslations } from "next-intl";
 import React, { useEffect, useState } from "react";
 
 import {
-  Search,
-  FilterAltOutlined,
-  CloseOutlined,
-  ArrowForwardIos,
-  Delete,
+	Search,
+	FilterAltOutlined,
+	CloseOutlined,
+	ArrowForwardIos,
+	Delete,
 } from "@mui/icons-material";
 import {
-  Box,
-  Button,
-  IconButton,
-  TextField,
-  InputAdornment,
-  Select,
-  MenuItem,
-  Theme,
-  useTheme,
-  Paper,
-  Popper,
-  Badge,
-  ClickAwayListener,
+	Box,
+	Button,
+	IconButton,
+	TextField,
+	InputAdornment,
+	Select,
+	MenuItem,
+	Theme,
+	useTheme,
+	Paper,
+	Popper,
+	Badge,
+	ClickAwayListener,
 } from "@mui/material";
 import {
-  Filters,
-  FilterResult,
-  ListFilterOutput,
-  FilterConfig,
+	Filters,
+	FilterResult,
+	ListFilterOutput,
+	FilterConfig,
 } from "./list-filter-types";
 
 import { OutlinedIconButton } from "../button";
@@ -39,371 +39,380 @@ import DateFilterComponent from "./date-filter";
 import DateRangeFilterComponent from "./date-range-filter";
 
 interface FilterProps<FilterShape extends Filters> {
-  setFilters: (filterUpdate: ListFilterOutput<FilterShape>) => void;
-  clearFilters: () => void;
-  filters?: FilterShape;
-  config?: FilterConfig;
-  manualClose?: boolean;
+	setFilters: (filterUpdate: ListFilterOutput<FilterShape>) => void;
+	clearFilters: () => void;
+	filters?: FilterShape;
+	config?: FilterConfig;
+	manualClose?: boolean;
 }
 
 type FilterErrors<FilterShape extends Filters> = {
-  [Property in keyof FilterShape]: boolean;
+	[Property in keyof FilterShape]: boolean;
 };
 
 const ListFilter = function ListFilter<FilterShape extends Filters>(
-  props: FilterProps<FilterShape>,
+	props: FilterProps<FilterShape>,
 ) {
-  const t = useTranslations("Integrate.Filter");
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const t = useTranslations("Integrate.Filter");
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  const {
-    setFilters,
-    clearFilters,
-    filters = {} as FilterShape,
-    manualClose = false,
-    config: { pagination = {}, search = {} } = {},
-  } = props;
+	const {
+		setFilters,
+		clearFilters,
+		filters = {} as FilterShape,
+		manualClose = false,
+		config: { pagination = {}, search = {} } = {},
+	} = props;
 
-  const { pageOptions = [10, 20, 30], pageDefault = 10 } = pagination || {};
+	const { pageOptions = [10, 20, 30], pageDefault = 10 } = pagination || {};
 
-  const { label: searchLabel = t("defaultSearchLabel") } = search || {};
+	const { label: searchLabel = t("defaultSearchLabel") } = search || {};
 
-  const defaultValues = Object.entries(filters).reduce(
-    (values, [key, filter]) => {
-      if (filter.type === "select" && filter.value)
-        return {
-          ...values,
-          [key]: filter.options.find((o) => o.id === filter.value[0].id),
-        };
-      if (filter.type === "multiSelect" && filter.value)
-        return {
-          ...values,
-          [key]: filter.options.filter((o) =>
-            filter.value.find((v) => v.id === o.id),
-          ),
-        };
+	const defaultValues = Object.entries(filters).reduce(
+		(values, [key, filter]) => {
+			if (filter.type === "select" && filter.value)
+				return {
+					...values,
+					// @ts-ignore
+					[key]: filter.options.find((o) => o.id === filter.value[0].id),
+				};
+			if (filter.type === "multiSelect" && filter.value)
+				return {
+					...values,
+					[key]: filter.options.filter((o) =>
+						// @ts-ignore
+						filter.value.find((v) => v.id === o.id),
+					),
+				};
 
-      return { ...values, [key]: filter.value };
-    },
-    {},
-  ) as FilterResult<FilterShape>;
+			return { ...values, [key]: filter.value };
+		},
+		{},
+	) as FilterResult<FilterShape>;
 
-  const filterErrorsBase: FilterErrors<FilterShape> = Object.keys(
-    filters,
-  ).reduce(
-    (values, key) => ({
-      ...values,
-      [key]: false,
-    }),
-    {},
-  ) as FilterErrors<FilterShape>;
+	const filterErrorsBase: FilterErrors<FilterShape> = Object.keys(
+		filters,
+	).reduce(
+		(values, key) => ({
+			...values,
+			[key]: false,
+		}),
+		{},
+	) as FilterErrors<FilterShape>;
 
-  const [perPage, setPerPage] = useState(pageDefault);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [open, setOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [filterErrors, setFilterErrors] = useState(filterErrorsBase);
-  const [publishedFilterValues, setPublishedFilterValues] =
-    useState<FilterResult<FilterShape>>(defaultValues);
-  const [filterValues, setFilterValues] = useState<FilterResult<FilterShape>>(
-    publishedFilterValues,
-  );
+	const [perPage, setPerPage] = useState(pageDefault);
+	const [searchTerm, setSearchTerm] = useState("");
+	const [open, setOpen] = useState(false);
+	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+	const [filterErrors, setFilterErrors] = useState(filterErrorsBase);
+	const [publishedFilterValues, setPublishedFilterValues] =
+		useState<FilterResult<FilterShape>>(defaultValues);
+	const [filterValues, setFilterValues] = useState<FilterResult<FilterShape>>(
+		publishedFilterValues,
+	);
 
-  const activeFilterCount = Object.entries(publishedFilterValues).reduce(
-    (sum, [key, value]) => {
-      if (!value) return sum;
+	const activeFilterCount = Object.entries(publishedFilterValues).reduce(
+		(sum, [key, value]) => {
+			if (!value) return sum;
 
-      const activeFilters =
-        filters[key].type === "multiSelect" ? value.length : 1;
+			const activeFilters =
+				filters[key].type === "multiSelect" ? value.length : 1;
 
-      return sum + activeFilters;
-    },
-    0,
-  );
+			return sum + activeFilters;
+		},
+		0,
+	);
 
-  const updateFilterValue = (name, value) => {
-    if (Array.isArray(value) && !value.length) value = null;
-    setFilterValues({
-      ...filterValues,
-      [name]: value || null,
-    });
-  };
+	const updateFilterValue = (name: string, value: any) => {
+		if (Array.isArray(value) && !value.length) value = null;
+		setFilterValues({
+			...filterValues,
+			[name]: value || null,
+		});
+	};
 
-  const updateFilterErrors = (name: keyof FilterShape, error: boolean) => {
-    setFilterErrors({
-      ...filterErrors,
-      [name]: error,
-    });
-  };
+	const updateFilterErrors = (name: keyof FilterShape, error: boolean) => {
+		setFilterErrors({
+			...filterErrors,
+			[name]: error,
+		});
+	};
 
-  const sendFilterOutput = (
-    update: {
-      search?: string;
-      itemsPerPage?: number;
-      filters?: FilterResult<FilterShape>;
-    } = {},
-  ) => {
-    setFilters({
-      search: searchTerm,
-      itemsPerPage: perPage,
-      filters: publishedFilterValues,
-      ...update,
-    });
-  };
+	const sendFilterOutput = (
+		update: {
+			search?: string;
+			itemsPerPage?: number;
+			filters?: FilterResult<FilterShape>;
+		} = {},
+	) => {
+		setFilters({
+			search: searchTerm,
+			itemsPerPage: perPage,
+			filters: publishedFilterValues,
+			...update,
+		});
+	};
 
-  const handleFilterMenuClick = (event: React.MouseEvent<HTMLElement>) => {
-    if (!open) {
-      setFilterValues(publishedFilterValues);
-      setAnchorEl(event.currentTarget);
-    }
-    setOpen(!open);
-  };
+	const handleFilterMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+		if (!open) {
+			setFilterValues(publishedFilterValues);
+			setAnchorEl(event.currentTarget);
+		}
+		setOpen(!open);
+	};
 
-  const handleFilterSet = () => {
-    setPublishedFilterValues(filterValues);
-    sendFilterOutput({ filters: filterValues });
-    setOpen(false);
-  };
+	const handleFilterSet = () => {
+		if (Object.values(filterValues).some((value) => value !== null)) {
+			setPublishedFilterValues(filterValues);
+			sendFilterOutput({ filters: filterValues });
+			setOpen(false);
+		} else {
+			handleFilterClear();
+		}
+	};
 
-  const handleFilterClear = () => {
-    const emptyFilterValues = Object.keys(filterValues).reduce(
-      (values, key) => ({ ...values, [key]: null }),
-      {},
-    ) as FilterResult<FilterShape>;
-    setPublishedFilterValues(emptyFilterValues);
-    setOpen(false);
-    clearFilters();
-  };
+	const handleFilterClear = () => {
+		const emptyFilterValues = Object.keys(filterValues).reduce(
+			(values, key) => ({ ...values, [key]: null }),
+			{},
+		) as FilterResult<FilterShape>;
+		setPublishedFilterValues(emptyFilterValues);
+		setOpen(false);
+		clearFilters();
+	};
 
-  const debounceSendSearchOutput = debounce(
-    (s) => sendFilterOutput({ search: s }),
-    400,
-  );
+	const debounceSendSearchOutput = debounce(
+		(s) => sendFilterOutput({ search: s }),
+		400,
+	);
 
-  useEffect(() => {
-    debounceSendSearchOutput(searchTerm);
-    return debounceSendSearchOutput.cancel;
-  }, [searchTerm]);
+	useEffect(() => {
+		debounceSendSearchOutput(searchTerm);
+		return debounceSendSearchOutput.cancel;
+	}, [searchTerm]);
 
-  const handlePerPageUpdate = (itemsPerPage: number) => {
-    setPerPage(itemsPerPage);
-    sendFilterOutput({ itemsPerPage });
-  };
+	const handlePerPageUpdate = (itemsPerPage: number) => {
+		setPerPage(itemsPerPage);
+		sendFilterOutput({ itemsPerPage });
+	};
 
-  return (
-    <Box sx={styles.filter}>
-      {Object.keys(filters).length ? (
-        <ClickAwayListener
-          onClickAway={() => !manualClose && setOpen(false)}
-          mouseEvent="onMouseUp"
-        >
-          <Box>
-            <Badge
-              badgeContent={activeFilterCount}
-              color="error"
-              invisible={!activeFilterCount}
-            >
-              <OutlinedIconButton
-                color="info"
-                onClick={(e) => handleFilterMenuClick(e)}
-              >
-                <FilterAltOutlined />
-              </OutlinedIconButton>
-            </Badge>
-            <Popper open={open} anchorEl={anchorEl} placement="bottom-start">
-              <Paper sx={styles.popOut} elevation={3}>
-                <Box sx={styles.closeRow}>
-                  {manualClose ? (
-                    <IconButton
-                      centerRipple={false}
-                      onClick={() => setOpen(false)}
-                    >
-                      <CloseOutlined />
-                    </IconButton>
-                  ) : (
-                    <Box sx={styles.bufferRow} />
-                  )}
-                </Box>
+	return (
+		<Box sx={styles.filter}>
+			{Object.keys(filters).length ? (
+				<ClickAwayListener
+					onClickAway={() => !manualClose && setOpen(false)}
+					mouseEvent="onMouseUp"
+				>
+					<Box>
+						<Badge
+							badgeContent={activeFilterCount}
+							color="error"
+							invisible={!activeFilterCount}
+						>
+							<OutlinedIconButton
+								color="info"
+								onClick={(e) => handleFilterMenuClick(e)}
+							>
+								<FilterAltOutlined />
+							</OutlinedIconButton>
+						</Badge>
+						<Popper open={open} anchorEl={anchorEl} placement="bottom-start">
+							<Paper sx={styles.popOut} elevation={3}>
+								<Box sx={styles.closeRow}>
+									{manualClose ? (
+										<IconButton
+											centerRipple={false}
+											onClick={() => setOpen(false)}
+										>
+											<CloseOutlined />
+										</IconButton>
+									) : (
+										<Box sx={styles.bufferRow} />
+									)}
+								</Box>
 
-                <Box sx={styles.filterRows}>
-                  {Object.entries(filters)
-                    .sort(([keyA, { sort: a }], [keyB, { sort: b }]) => a - b)
-                    .map(([name, filter]) => {
-                      switch (filter.type) {
-                        case "select":
-                          return (
-                            <SelectFilterComponent
-                              key={name}
-                              filter={filter}
-                              current={
-                                filterValues[name] as (typeof filter)["value"]
-                              }
-                              onSet={(v) => updateFilterValue(name, v)}
-                              onError={(e) => updateFilterErrors(name, e)}
-                            />
-                          );
-                        case "multiSelect":
-                          return (
-                            <MultiSelectFilterComponent
-                              key={name}
-                              filter={filter}
-                              current={
-                                filterValues[name] as (typeof filter)["value"]
-                              }
-                              onSet={(v) => updateFilterValue(name, v)}
-                              onError={(e) => updateFilterErrors(name, e)}
-                            />
-                          );
-                        case "date":
-                          return (
-                            <DateFilterComponent
-                              key={name}
-                              filter={filter}
-                              current={
-                                filterValues[name] as (typeof filter)["value"]
-                              }
-                              onSet={(v) => updateFilterValue(name, v)}
-                              onError={(e) => updateFilterErrors(name, e)}
-                            />
-                          );
-                        case "dateRange":
-                          return (
-                            <DateRangeFilterComponent
-                              key={name}
-                              filter={filter}
-                              current={
-                                filterValues[name] as (typeof filter)["value"]
-                              }
-                              onSet={(v) => updateFilterValue(name, v)}
-                              onError={(e) => updateFilterErrors(name, e)}
-                            />
-                          );
-                      }
-                    })}
-                  <Box sx={styles.buttonRow}>
-                    {activeFilterCount ? (
-                      <Button
-                        variant="contained"
-                        color="error"
-                        startIcon={<Delete />}
-                        onClick={handleFilterClear}
-                      >
-                        Clear
-                      </Button>
-                    ) : (
-                      ""
-                    )}
+								<Box sx={styles.filterRows}>
+									{Object.entries(filters)
+										.sort(
+											([, { sort: a }], [, { sort: b }]) =>
+												(a ?? Infinity) - (b ?? Infinity),
+										)
+										.map(([name, filter]) => {
+											switch (filter.type) {
+												case "select":
+													return (
+														<SelectFilterComponent
+															key={name}
+															filter={filter}
+															current={
+																filterValues[name] as (typeof filter)["value"]
+															}
+															onSet={(v) => updateFilterValue(name, v)}
+															onError={(e) => updateFilterErrors(name, e)}
+														/>
+													);
+												case "multiSelect":
+													return (
+														<MultiSelectFilterComponent
+															key={name}
+															filter={filter}
+															current={
+																filterValues[name] as (typeof filter)["value"]
+															}
+															onSet={(v) => updateFilterValue(name, v)}
+															onError={(e) => updateFilterErrors(name, e)}
+														/>
+													);
+												case "date":
+													return (
+														<DateFilterComponent
+															key={name}
+															filter={filter}
+															current={
+																filterValues[name] as (typeof filter)["value"]
+															}
+															onSet={(v) => updateFilterValue(name, v)}
+															onError={(e) => updateFilterErrors(name, e)}
+														/>
+													);
+												case "dateRange":
+													return (
+														<DateRangeFilterComponent
+															key={name}
+															filter={filter}
+															current={
+																filterValues[name] as (typeof filter)["value"]
+															}
+															onSet={(v) => updateFilterValue(name, v)}
+															onError={(e) => updateFilterErrors(name, e)}
+														/>
+													);
+											}
+										})}
+									<Box sx={styles.buttonRow}>
+										{activeFilterCount ? (
+											<Button
+												variant="contained"
+												color="error"
+												startIcon={<Delete />}
+												onClick={handleFilterClear}
+											>
+												Clear
+											</Button>
+										) : (
+											""
+										)}
 
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      startIcon={<ArrowForwardIos />}
-                      disabled={Object.values(filterErrors).some((v) => v)}
-                      onClick={handleFilterSet}
-                    >
-                      Filter
-                    </Button>
-                  </Box>
-                </Box>
-              </Paper>
-            </Popper>
-          </Box>
-        </ClickAwayListener>
-      ) : (
-        ""
-      )}
+										<Button
+											variant="contained"
+											color="primary"
+											startIcon={<ArrowForwardIos />}
+											disabled={Object.values(filterErrors).some((v) => v)}
+											onClick={handleFilterSet}
+										>
+											Filter
+										</Button>
+									</Box>
+								</Box>
+							</Paper>
+						</Popper>
+					</Box>
+				</ClickAwayListener>
+			) : (
+				""
+			)}
 
-      {search ? (
-        <TextField
-          sx={styles.search}
-          variant="outlined"
-          label={searchLabel}
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          slotProps={{
-            input: {
-              startAdornment: (
-                <InputAdornment position="start">
-                  <Search />
-                </InputAdornment>
-              ),
-            },
-          }}
-        />
-      ) : (
-        ""
-      )}
-      {pagination ? (
-        <Select
-          sx={styles.select}
-          value={perPage}
-          onChange={(e) => handlePerPageUpdate(e.target.value as number)}
-        >
-          {pageOptions.map((option) => (
-            <MenuItem value={option}>
-              {option} {t("itemsPerPage")}
-            </MenuItem>
-          ))}
-        </Select>
-      ) : (
-        ""
-      )}
-    </Box>
-  );
+			{search ? (
+				<TextField
+					sx={styles.search}
+					variant="outlined"
+					label={searchLabel}
+					value={searchTerm}
+					onChange={(e) => setSearchTerm(e.target.value)}
+					slotProps={{
+						input: {
+							startAdornment: (
+								<InputAdornment position="start">
+									<Search />
+								</InputAdornment>
+							),
+						},
+					}}
+				/>
+			) : (
+				""
+			)}
+			{pagination ? (
+				<Select
+					sx={styles.select}
+					value={perPage}
+					onChange={(e) => handlePerPageUpdate(e.target.value as number)}
+				>
+					{pageOptions.map((option) => (
+						<MenuItem value={option}>
+							{option} {t("itemsPerPage")}
+						</MenuItem>
+					))}
+				</Select>
+			) : (
+				""
+			)}
+		</Box>
+	);
 };
 
 const getStyles = (theme: Theme) => {
-  return {
-    filter: {
-      width: "100%",
-      maxWidth: "600px",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      columnGap: theme.spacing(2),
-    },
-    popOut: {
-      width: "512px",
-      padding: theme.spacing(2),
-      paddingTop: theme.spacing(1),
-      margin: theme.spacing(1, 0),
-    },
-    filterRows: {
-      display: "flex",
-      flexDirection: "column",
-      rowGap: theme.spacing(2),
-    },
-    closeRow: {
-      display: "flex",
-      justifyContent: "end",
-    },
-    bufferRow: {
-      paddingTop: theme.spacing(1),
-    },
-    buttonRow: {
-      width: "100%",
-      display: "flex",
-      justifyContent: "end",
-      columnGap: theme.spacing(1),
-    },
-    search: {
-      "& .MuiOutlinedInput-root": {
-        "& input": {
-          padding: theme.spacing(1.5),
-        },
-      },
-      backgroundColor: theme.palette.common.white,
-      width: "100%",
-      flexGrow: "1",
-    },
-    select: {
-      "& .MuiSelect-select": {
-        padding: theme.spacing(1.5),
-      },
-      backgroundColor: theme.palette.common.white,
-    },
-  };
+	return {
+		filter: {
+			width: "100%",
+			maxWidth: "600px",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			columnGap: theme.spacing(2),
+		},
+		popOut: {
+			width: "512px",
+			padding: theme.spacing(2),
+			paddingTop: theme.spacing(1),
+			margin: theme.spacing(1, 0),
+		},
+		filterRows: {
+			display: "flex",
+			flexDirection: "column",
+			rowGap: theme.spacing(2),
+		},
+		closeRow: {
+			display: "flex",
+			justifyContent: "end",
+		},
+		bufferRow: {
+			paddingTop: theme.spacing(1),
+		},
+		buttonRow: {
+			width: "100%",
+			display: "flex",
+			justifyContent: "end",
+			columnGap: theme.spacing(1),
+		},
+		search: {
+			"& .MuiOutlinedInput-root": {
+				"& input": {
+					padding: theme.spacing(1.5),
+				},
+			},
+			backgroundColor: theme.palette.common.white,
+			width: "100%",
+			flexGrow: "1",
+		},
+		select: {
+			"& .MuiSelect-select": {
+				padding: theme.spacing(1.5),
+			},
+			backgroundColor: theme.palette.common.white,
+		},
+	};
 };
 
 export default ListFilter;