@evenicanpm/admin-integrate 1.1.0 → 1.2.2

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

@@ -1,117 +1,116 @@
 import { useTranslations } from "next-intl";
 import {
-  Box,
-  Typography,
-  IconButton,
-  InputAdornment,
-  Select,
-  MenuItem,
-  Theme,
-  useTheme,
-  FormControl,
-  Chip,
+	Box,
+	Typography,
+	IconButton,
+	InputAdornment,
+	Select,
+	MenuItem,
+	Theme,
+	useTheme,
+	FormControl,
+	Chip,
 } from "@mui/material";
 import { CloseOutlined } from "@mui/icons-material";
 import React, { useState } from "react";
 import {
-  FilterOption,
-  MultiSelectFilter,
-  FilterProps,
+	FilterOption,
+	MultiSelectFilter,
+	FilterProps,
 } from "./list-filter-types";
 
 const MultiSelectFilterComponent: React.FC<FilterProps<MultiSelectFilter>> = ({
-  filter,
-  onSet,
-  onError,
-  current,
+	filter,
+	onSet,
+	current,
 }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  const t = useTranslations("Integrate");
+	const t = useTranslations("Integrate");
 
-  const mappedOptionDictionary = filter.options.reduce(
-    (dictionary, option) => ({
-      ...dictionary,
-      [option.id]: {
-        id: option.id,
-        value: t(option.value),
-      },
-    }),
-    {},
-  ) as { [id: string | number]: FilterOption };
+	const mappedOptionDictionary = filter.options.reduce(
+		(dictionary, option) => ({
+			...dictionary,
+			[option.id]: {
+				id: option.id,
+				value: t(option.value),
+			},
+		}),
+		{},
+	) as { [id: string | number]: FilterOption };
 
-  const [value, setValue] = useState(current);
+	const [value, setValue] = useState(current);
 
-  const updateValue = (optionIds: (string | number)[] | null) => {
-    const newValue = optionIds?.map((id) => mappedOptionDictionary[id]) || null;
+	const updateValue = (optionIds: (string | number)[] | null) => {
+		const newValue = optionIds?.map((id) => mappedOptionDictionary[id]) || null;
 
-    setValue(newValue);
-    onSet(newValue);
-  };
+		setValue(newValue);
+		onSet(newValue);
+	};
 
-  return (
-    <FormControl>
-      <Typography>{filter.label}</Typography>
-      <Select
-        sx={styles.select}
-        multiple
-        value={(value || []).map(({ id }) => id)}
-        onChange={(e) => updateValue(e.target.value as (string | number)[])}
-        renderValue={(selected) => (
-          <Box sx={styles.chipSelect}>
-            {selected.map((id) => (
-              <Chip
-                key={id}
-                label={mappedOptionDictionary[id].value}
-                size="small"
-              />
-            ))}
-          </Box>
-        )}
-        endAdornment={
-          value ? (
-            <InputAdornment sx={styles.inputClearButton} position="end">
-              <IconButton
-                onClick={() => {
-                  updateValue(null);
-                }}
-              >
-                <CloseOutlined></CloseOutlined>
-              </IconButton>
-            </InputAdornment>
-          ) : (
-            ""
-          )
-        }
-      >
-        {filter.options.map((option) => (
-          <MenuItem key={option.id} value={option.id}>
-            {t(option.value)}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  );
+	return (
+		<FormControl>
+			<Typography>{t(filter.label)}</Typography>
+			<Select
+				sx={styles.select}
+				multiple
+				value={(value || []).map(({ id }) => id)}
+				onChange={(e) => updateValue(e.target.value as (string | number)[])}
+				renderValue={(selected) => (
+					<Box sx={styles.chipSelect}>
+						{selected.map((id) => (
+							<Chip
+								key={id}
+								label={mappedOptionDictionary[id].value}
+								size="small"
+							/>
+						))}
+					</Box>
+				)}
+				endAdornment={
+					value ? (
+						<InputAdornment sx={styles.inputClearButton} position="end">
+							<IconButton
+								onClick={() => {
+									updateValue(null);
+								}}
+							>
+								<CloseOutlined></CloseOutlined>
+							</IconButton>
+						</InputAdornment>
+					) : (
+						""
+					)
+				}
+			>
+				{filter.options.map((option) => (
+					<MenuItem key={option.id} value={option.id}>
+						{t(option.value)}
+					</MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	);
 };
 
 const getStyles = (theme: Theme) => ({
-  inputClearButton: {
-    position: "absolute",
-    right: theme.spacing(3),
-  },
-  chipSelect: {
-    display: "flex",
-    flexWrap: "wrap",
-    gap: theme.spacing(1),
-    marginRight: theme.spacing(1),
-  },
-  select: {
-    "& .MuiSelect-select": {
-      padding: theme.spacing(1),
-      minHeight: theme.spacing(3),
-    },
-  },
+	inputClearButton: {
+		position: "absolute",
+		right: theme.spacing(3),
+	},
+	chipSelect: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: theme.spacing(1),
+		marginRight: theme.spacing(1),
+	},
+	select: {
+		"& .MuiSelect-select": {
+			padding: theme.spacing(1),
+			minHeight: theme.spacing(3),
+		},
+	},
 });
 
 export default MultiSelectFilterComponent;

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

@@ -1,82 +1,85 @@
+import { useTranslations } from "next-intl";
 import {
-  Typography,
-  IconButton,
-  InputAdornment,
-  Select,
-  MenuItem,
-  Theme,
-  useTheme,
-  FormControl,
+	Typography,
+	IconButton,
+	InputAdornment,
+	Select,
+	MenuItem,
+	Theme,
+	useTheme,
+	FormControl,
 } from "@mui/material";
 import { CloseOutlined } from "@mui/icons-material";
 import React, { useState } from "react";
 import { FilterOption, SelectFilter, FilterProps } from "./list-filter-types";
 
 const SelectFilterComponent: React.FC<FilterProps<SelectFilter>> = ({
-  filter,
-  onSet,
-  onError,
-  current,
+	filter,
+	onSet,
+	current,
 }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const t = useTranslations("Integrate");
 
-  const [value, setValue] = useState(current);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  const mappedOptionDictionary = filter.options.reduce(
-    (dictionary, option) => ({
-      ...dictionary,
-      [option.id]: option,
-    }),
-    {},
-  ) as { [id: string | number]: FilterOption };
+	const [value, setValue] = useState(current);
 
-  const updateValue = (optionId: string | number) => {
-    const newValue = mappedOptionDictionary[optionId] || null;
-    setValue(newValue && [newValue]);
-    onSet(newValue && [newValue]);
-  };
+	const mappedOptionDictionary = filter.options.reduce(
+		(dictionary, option) => ({
+			...dictionary,
+			[option.id]: option,
+		}),
+		{},
+	) as { [id: string | number]: FilterOption };
 
-  return (
-    <FormControl>
-      <Typography>{filter.label}</Typography>
-      <Select
-        value={value?.[0]?.id || ""}
-        onChange={(e) => updateValue(e.target.value)}
-        endAdornment={
-          value ? (
-            <InputAdornment sx={styles.inputClearButton} position="end">
-              <IconButton
-                onClick={() => {
-                  updateValue(null);
-                }}
-              >
-                <CloseOutlined></CloseOutlined>
-              </IconButton>
-            </InputAdornment>
-          ) : (
-            ""
-          )
-        }
-        renderValue={(selected) =>
-          selected && mappedOptionDictionary[selected]?.value
-        }
-      >
-        {filter.options.map((option) => (
-          <MenuItem key={option.id} value={option.id}>
-            {option.value}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  );
+	const updateValue = (optionId: string | number | null) => {
+		const newValue =
+			optionId !== null ? mappedOptionDictionary[optionId] : null;
+		setValue(newValue && [newValue]);
+		onSet(newValue && [newValue]);
+	};
+
+	return (
+		<FormControl>
+			<Typography>{t(filter.label)}</Typography>
+			<Select
+				value={value?.[0]?.id || ""}
+				onChange={(e) => updateValue(e.target.value)}
+				endAdornment={
+					value ? (
+						<InputAdornment sx={styles.inputClearButton} position="end">
+							<IconButton
+								onClick={() => {
+									updateValue(null);
+								}}
+							>
+								<CloseOutlined></CloseOutlined>
+							</IconButton>
+						</InputAdornment>
+					) : (
+						""
+					)
+				}
+				renderValue={(selected) =>
+					selected && mappedOptionDictionary[selected]?.value
+				}
+			>
+				{filter.options.map((option) => (
+					<MenuItem key={option.id} value={option.id}>
+						{option.value}
+					</MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	);
 };
 
 const getStyles = (theme: Theme) => ({
-  inputClearButton: {
-    position: "absolute",
-    right: theme.spacing(3),
-  },
+	inputClearButton: {
+		position: "absolute",
+		right: theme.spacing(3),
+	},
 });
 
 export default SelectFilterComponent;

package/src/components/scheduler/day-selector.tsx

@@ -0,0 +1,174 @@
+import { useTranslations } from "next-intl";
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Typography, Box, Stack, ButtonBase } from "@mui/material";
+
+// Types
+import { IsDay } from "./scheduler-types";
+
+interface Props {
+	days: IsDay;
+	setDays: (newDays: IsDay) => void;
+	disabled?: boolean;
+}
+
+const DaySelector: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate.Scheduler.DaySelector");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const handleClick = (field: keyof IsDay) => {
+		if (!props.disabled) {
+			const newDays = { ...props.days };
+			newDays[field] = !newDays[field];
+			props.setDays(newDays);
+		}
+	};
+
+	return (
+		<Stack spacing={1} direction="row" sx={styles.days}>
+			<ButtonBase
+				centerRipple
+				onClick={() => handleClick("isMonday")}
+				disableRipple={props.disabled}
+			>
+				<Box
+					sx={getDayStyle(styles, props.days.isMonday)}
+					alignContent="center"
+					textAlign="center"
+				>
+					<Typography variant="body1" sx={styles.dayInitial}>
+						{t("mondaySelector")}
+					</Typography>
+				</Box>
+			</ButtonBase>
+			<ButtonBase
+				centerRipple
+				onClick={() => handleClick("isTuesday")}
+				disableRipple={props.disabled}
+			>
+				<Box
+					sx={getDayStyle(styles, props.days.isTuesday)}
+					alignContent="center"
+					textAlign="center"
+				>
+					<Typography variant="body1" sx={styles.dayInitial}>
+						{t("tuesdaySelector")}
+					</Typography>
+				</Box>
+			</ButtonBase>
+			<ButtonBase
+				centerRipple
+				onClick={() => handleClick("isWednesday")}
+				disableRipple={props.disabled}
+			>
+				<Box
+					sx={getDayStyle(styles, props.days.isWednesday)}
+					alignContent="center"
+					textAlign="center"
+				>
+					<Typography variant="body1" sx={styles.dayInitial}>
+						{t("wednesdaySelector")}
+					</Typography>
+				</Box>
+			</ButtonBase>
+			<ButtonBase
+				centerRipple
+				onClick={() => handleClick("isThursday")}
+				disableRipple={props.disabled}
+			>
+				<Box
+					sx={getDayStyle(styles, props.days.isThursday)}
+					alignContent="center"
+					textAlign="center"
+				>
+					<Typography variant="body1" sx={styles.dayInitial}>
+						{t("thursdaySelector")}
+					</Typography>
+				</Box>
+			</ButtonBase>
+			<ButtonBase
+				centerRipple
+				onClick={() => handleClick("isFriday")}
+				disableRipple={props.disabled}
+			>
+				<Box
+					sx={getDayStyle(styles, props.days.isFriday)}
+					alignContent="center"
+					textAlign="center"
+				>
+					<Typography variant="body1" sx={styles.dayInitial}>
+						{t("fridaySelector")}
+					</Typography>
+				</Box>
+			</ButtonBase>
+			<ButtonBase
+				centerRipple
+				onClick={() => handleClick("isSaturday")}
+				disableRipple={props.disabled}
+			>
+				<Box
+					sx={getDayStyle(styles, props.days.isSaturday)}
+					alignContent="center"
+					textAlign="center"
+				>
+					<Typography variant="body1" sx={styles.dayInitial}>
+						{t("saturdaySelector")}
+					</Typography>
+				</Box>
+			</ButtonBase>
+			<ButtonBase
+				centerRipple
+				onClick={() => handleClick("isSunday")}
+				disableRipple={props.disabled}
+			>
+				<Box
+					sx={getDayStyle(styles, props.days.isSunday)}
+					alignContent="center"
+					textAlign="center"
+				>
+					<Typography variant="body1" sx={styles.dayInitial}>
+						{t("sundaySelector")}
+					</Typography>
+				</Box>
+			</ButtonBase>
+		</Stack>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		days: {
+			marginTop: theme.spacing(0),
+		},
+		dayOfWeek: {
+			color: "grey.700",
+			border: "solid " + theme.palette.grey[500] + " " + theme.spacing(0.5),
+			backgroundColor: theme.palette.grey[50],
+			borderRadius: "50%",
+			width: theme.spacing(5),
+			height: theme.spacing(5),
+			"&:hover": {
+				cursor: "pointer",
+			},
+		},
+		dayOfWeekSelected: {
+			borderColor: "info.main",
+			color: "info.main",
+			backgroundColor: "info.100",
+		},
+		dayInitial: {
+			fontWeight: "bold",
+		},
+	};
+};
+
+const getDayStyle = (styles: any, selected: boolean) => {
+	if (selected) {
+		return { ...styles.dayOfWeek, ...styles.dayOfWeekSelected };
+	}
+	return styles.dayOfWeek;
+};
+
+export default DaySelector;

package/src/components/scheduler/day-tag.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { useTranslations } from "next-intl";
+
+import { styled } from "@mui/material/styles";
+import { Box, Typography, SxProps } from "@mui/material";
+
+import { DayString } from "./scheduler-types";
+
+// Styled components
+const StyledTagBox = styled(Box)(({ theme }) => ({
+	padding: theme.spacing(0, 1.5),
+	border: "solid 1px",
+	borderRadius: 4,
+	alignContent: "center",
+	maxWidth: "fit-content",
+}));
+const StyledTag = styled(Typography)(() => ({
+	fontWeight: "bold",
+}));
+
+interface Props {
+	day: DayString;
+	sx?: SxProps;
+}
+
+const DayTag: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate");
+
+	if (props.day === "disabled") {
+		return (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "grey.300",
+					borderColor: "grey.600",
+					color: "grey.600",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="grey" variant="caption">
+					{t("Scheduler.disabled")}
+				</StyledTag>
+			</StyledTagBox>
+		);
+	}
+
+	return props.day === "everyday" ? (
+		<StyledTagBox
+			sx={{
+				backgroundColor: "success.100",
+				borderColor: "success.main",
+				...props.sx,
+			}}
+		>
+			<StyledTag color="success" variant="caption">
+				{t("Scheduler.everyday")}
+			</StyledTag>
+		</StyledTagBox>
+	) : (
+		<StyledTagBox
+			sx={{
+				backgroundColor: "info.100",
+				borderColor: "info.main",
+				...props.sx,
+			}}
+		>
+			<StyledTag color="info" variant="caption">
+				{t(`Scheduler.${props.day}Short`)}
+			</StyledTag>
+		</StyledTagBox>
+	);
+};
+
+export default DayTag;

package/src/components/scheduler/index.ts

@@ -0,0 +1,4 @@
+export { default as DayTag } from "./day-tag";
+export { default as ScheduleIcon } from "./schedule-icon";
+export { default as DaySelector } from "./day-selector";
+export * from "./scheduler-types";

package/src/components/scheduler/schedule-filter.ts

@@ -0,0 +1,25 @@
+import {
+	Filters,
+	MultiSelectFilter,
+} from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+
+export interface SchedulesListFilters extends Filters {
+	multiSelectFilter: MultiSelectFilter;
+}
+
+export const schedulesListFilters: SchedulesListFilters = {
+	multiSelectFilter: {
+		type: "multiSelect",
+		label: "Scheduler.daysOfTheWeek",
+		value: null,
+		options: [
+			{ id: "monday", value: "Scheduler.monday" },
+			{ id: "tuesday", value: "Scheduler.tuesday" },
+			{ id: "wednesday", value: "Scheduler.wednesday" },
+			{ id: "thursday", value: "Scheduler.thursday" },
+			{ id: "friday", value: "Scheduler.friday" },
+			{ id: "saturday", value: "Scheduler.saturday" },
+			{ id: "sunday", value: "Scheduler.sunday" },
+		],
+	},
+};