@centreon/ui 24.11.14 → 24.11.21

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -0,0 +1,107 @@
+import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
+
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { Button, Typography } from '@mui/material';
+
+import { dateTimeFormat, useLocaleDateTimeFormat } from '@centreon/ui';
+
+import { customTimePeriodAtom } from '../timePeriodsAtoms';
+import {
+  labelCompactTimePeriod,
+  labelFrom,
+  labelTo
+} from '../translatedLabels';
+
+import useStyles from './CompactCustomTimePeriod.styles';
+
+interface Props {
+  disabled?: boolean;
+  isCondensed?: boolean;
+  onClick: (event) => void;
+}
+
+const CompactCustomTimePeriod = ({
+  onClick,
+  disabled = false,
+  isCondensed = false
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles();
+  const { t } = useTranslation();
+
+  const { format } = useLocaleDateTimeFormat();
+
+  const customTimePeriod = useAtomValue(customTimePeriodAtom);
+
+  return (
+    <Button
+      aria-label={t(labelCompactTimePeriod) as string}
+      className={classes.button}
+      color="primary"
+      data-testid={labelCompactTimePeriod}
+      disabled={disabled}
+      variant="outlined"
+      onClick={onClick}
+    >
+      <div className={classes.buttonContent}>
+        <AccessTimeIcon />
+        <div
+          className={cx(classes.containerDates, {
+            [classes.containerDatesCondensed]: isCondensed
+          })}
+        >
+          <div
+            className={cx(classes.timeContainer, {
+              [classes.timeContainerCondensed]: isCondensed
+            })}
+          >
+            <Typography
+              className={classes.label}
+              component="div"
+              variant="caption"
+            >
+              {t(labelFrom)}:
+            </Typography>
+
+            <Typography
+              className={classes.date}
+              component="div"
+              variant="caption"
+            >
+              {format({
+                date: customTimePeriod.start,
+                formatString: dateTimeFormat
+              })}
+            </Typography>
+          </div>
+          <div
+            className={cx(classes.timeContainer, {
+              [classes.timeContainerCondensed]: isCondensed
+            })}
+          >
+            <Typography
+              className={classes.label}
+              component="div"
+              variant="caption"
+            >
+              {t(labelTo)}:
+            </Typography>
+
+            <Typography
+              className={classes.date}
+              component="div"
+              variant="caption"
+            >
+              {format({
+                date: customTimePeriod.end,
+                formatString: dateTimeFormat
+              })}
+            </Typography>
+          </div>
+        </div>
+      </div>
+    </Button>
+  );
+};
+
+export default CompactCustomTimePeriod;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/ErrorText.tsx

@@ -0,0 +1,14 @@
+import { FormHelperText } from '@mui/material';
+
+interface Props {
+  message: string;
+  style: string;
+}
+
+const ErrorText = ({ message, style }: Props): JSX.Element => (
+  <FormHelperText error className={style}>
+    {message}
+  </FormHelperText>
+);
+
+export default ErrorText;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -0,0 +1,154 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useAtomValue } from 'jotai';
+import { equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import { Typography } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import { userAtom } from '@centreon/ui-context';
+
+import DateTimePickerInput from '../../DateTimePickerInput';
+import { isInvalidDate } from '../../helpers';
+import {
+  CustomTimePeriodProperty,
+  DateTimePickerInputModel
+} from '../../models';
+import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
+
+import ErrorText from './ErrorText';
+import {
+  PickersStartEndDateDirection,
+  PickersStartEndDateProps
+} from './models';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const useStyles = makeStyles()((theme) => ({
+  error: {
+    textAlign: 'center'
+  },
+  horizontalDirection: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1),
+    justifyItems: 'center',
+    padding: 0
+  },
+  row: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1)
+  },
+  verticalDirection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    justifyItems: 'center',
+    padding: theme.spacing(1, 2)
+  }
+}));
+
+interface PropsPickersDateWithLabel extends DateTimePickerInputModel {
+  direction?: PickersStartEndDateDirection;
+  label: string;
+}
+
+const PickerDateWithLabel = ({
+  label,
+  changeDate,
+  maxDate,
+  minDate,
+  property,
+  disabled,
+  date,
+  direction = PickersStartEndDateDirection.column
+}: PropsPickersDateWithLabel): JSX.Element => {
+  const { classes, cx } = useStyles();
+  const { t } = useTranslation();
+  const isRow = equals(direction, PickersStartEndDateDirection.row);
+
+  return (
+    <div aria-label={label} className={cx({ [classes.row]: isRow })}>
+      <Typography component={isRow ? 'div' : 'p'}>{t(label)}</Typography>
+      <DateTimePickerInput
+        changeDate={changeDate}
+        date={date}
+        disabled={disabled}
+        maxDate={maxDate}
+        minDate={minDate}
+        property={property}
+      />
+    </div>
+  );
+};
+
+const PickersStartEndDate = ({
+  startDate,
+  endDate,
+  disabled,
+  changeDate,
+  rangeStartDate,
+  rangeEndDate,
+  direction = PickersStartEndDateDirection.column
+}: PickersStartEndDateProps): JSX.Element => {
+  const { classes } = useStyles();
+
+  const { locale } = useAtomValue(userAtom);
+  const error = useAtomValue(errorTimePeriodAtom);
+  const isError = error || isInvalidDate({ endDate, startDate });
+
+  const maxStart = rangeStartDate?.max || endDate;
+  const minStart = rangeStartDate?.min;
+  const maxEnd = rangeEndDate?.max;
+  const minEnd = rangeEndDate?.min || startDate;
+
+  const styleContainer = equals(direction, PickersStartEndDateDirection.column)
+    ? classes.verticalDirection
+    : classes.horizontalDirection;
+
+  return (
+    <LocalizationProvider
+      adapterLocale={locale.substring(0, 2)}
+      dateAdapter={AdapterDayjs}
+    >
+      <div className={styleContainer}>
+        <PickerDateWithLabel
+          changeDate={changeDate}
+          date={startDate}
+          direction={direction}
+          disabled={disabled?.isDisabledStartPicker}
+          label="From"
+          maxDate={maxStart || undefined}
+          minDate={minStart}
+          property={CustomTimePeriodProperty.start}
+        />
+        <PickerDateWithLabel
+          changeDate={changeDate}
+          date={endDate}
+          direction={direction}
+          disabled={disabled?.isDisabledEndPicker}
+          label="to"
+          maxDate={maxEnd}
+          minDate={minEnd || undefined}
+          property={CustomTimePeriodProperty.end}
+        />
+      </div>
+
+      {isError && (
+        <ErrorText
+          message="The end date must be greater than the start date"
+          style={classes.error}
+        />
+      )}
+    </LocalizationProvider>
+  );
+};
+
+export default PickersStartEndDate;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/index.tsx

@@ -0,0 +1,76 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { Popover } from '@mui/material';
+
+import PickersStartEndDate from './PickersStartEndDate';
+import {
+  PickersData,
+  PopoverData,
+  defaultAnchorOrigin,
+  defaultTransformOrigin
+} from './models';
+import usePickersStartEndDate from './usePickersStartEndDate';
+
+const useStyles = makeStyles()((theme) => ({
+  paper: {
+    '& .MuiPopover-paper': {
+      minWidth: 250,
+      padding: theme.spacing(1)
+    }
+  }
+}));
+
+interface Props {
+  pickersData: PickersData;
+  popoverData: PopoverData;
+}
+
+const PopoverCustomTimePeriod = ({
+  popoverData,
+  pickersData
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const { open, onClose } = popoverData;
+  const { acceptDate, customTimePeriod } = pickersData;
+
+  const { startDate, endDate, changeDate } = usePickersStartEndDate({
+    acceptDate,
+    customTimePeriod
+  });
+
+  const anchorEl = popoverData?.anchorEl;
+  const anchorPosition = popoverData?.anchorPosition;
+  const anchorOrigin = popoverData?.anchorOrigin;
+  const transformOrigin = popoverData?.transformOrigin;
+  const anchorReference = anchorPosition ? 'anchorPosition' : 'anchorEl';
+
+  const disabled = {
+    isDisabledEndPicker: pickersData?.isDisabledEndPicker,
+    isDisabledStartPicker: pickersData?.isDisabledStartPicker
+  };
+
+  return (
+    <Popover
+      anchorEl={anchorEl}
+      anchorOrigin={anchorOrigin ?? defaultAnchorOrigin}
+      anchorPosition={anchorPosition}
+      anchorReference={anchorReference}
+      className={classes.paper}
+      open={open}
+      transformOrigin={transformOrigin ?? defaultTransformOrigin}
+      onClose={onClose}
+    >
+      <PickersStartEndDate
+        changeDate={changeDate}
+        disabled={disabled}
+        endDate={endDate}
+        rangeEndDate={pickersData?.rangeEndDate}
+        rangeStartDate={pickersData?.rangeStartDate}
+        startDate={startDate}
+      />
+    </Popover>
+  );
+};
+
+export default PopoverCustomTimePeriod;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts

@@ -0,0 +1,74 @@
+import { PopoverOrigin, PopoverPosition } from '@mui/material';
+
+import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
+
+import { PickersStartEndDateModel } from './usePickersStartEndDate';
+
+interface RangeDate {
+  max?: Date;
+  min?: Date;
+}
+
+export interface AcceptDateProps {
+  date: Date;
+  property: CustomTimePeriodProperty;
+}
+
+export interface PickersData {
+  acceptDate: (props: AcceptDateProps) => void;
+  customTimePeriod: CustomTimePeriod;
+  getError?: (value: boolean) => void;
+  isDisabledEndPicker?: boolean;
+  isDisabledStartPicker?: boolean;
+  rangeEndDate?: RangeDate;
+  rangeStartDate?: RangeDate;
+}
+
+export interface PopoverData {
+  anchorEl?: HTMLButtonElement;
+  anchorOrigin?: PopoverOrigin;
+  anchorPosition?: PopoverPosition;
+  onClose?: () => void;
+  open: boolean;
+  transformOrigin?: PopoverOrigin;
+}
+
+export enum OriginHorizontalEnum {
+  center = 'center',
+  left = 'left',
+  right = 'right'
+}
+
+export enum OriginVerticalEnum {
+  bottom = 'bottom',
+  center = 'center',
+  top = 'top'
+}
+
+export const defaultAnchorOrigin = {
+  horizontal: OriginHorizontalEnum.center,
+  vertical: OriginVerticalEnum.top
+};
+
+export const defaultTransformOrigin = {
+  horizontal: OriginHorizontalEnum.center,
+  vertical: OriginVerticalEnum.top
+};
+
+export enum PickersStartEndDateDirection {
+  column = 'column',
+  row = 'row'
+}
+
+interface DisabledPicker {
+  isDisabledEndPicker?: boolean;
+  isDisabledStartPicker?: boolean;
+}
+type PickersDate = Pick<PickersData, 'rangeEndDate' | 'rangeStartDate'>;
+
+export interface PickersStartEndDateProps
+  extends PickersDate,
+    PickersStartEndDateModel {
+  direction?: PickersStartEndDateDirection;
+  disabled?: DisabledPicker;
+}

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/usePickersStartEndDate.ts

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+
+import dayjs from 'dayjs';
+import { useSetAtom } from 'jotai';
+import { and, cond, equals, isNil } from 'ramda';
+
+import { isInvalidDate } from '../../helpers';
+import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
+import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
+
+import { AcceptDateProps } from './models';
+
+export interface PickersStartEndDateModel {
+  changeDate: (props: AcceptDateProps) => void;
+  endDate: Date | null;
+  startDate: Date | null;
+}
+interface Props {
+  acceptDate: (props: AcceptDateProps) => void;
+  customTimePeriod: CustomTimePeriod;
+}
+
+const usePickersStartEndDate = ({
+  customTimePeriod,
+  acceptDate
+}: Props): PickersStartEndDateModel => {
+  const [start, setStart] = useState<Date | null>(
+    !isNil(customTimePeriod) ? customTimePeriod.start : null
+  );
+  const [end, setEnd] = useState<Date | null>(
+    !isNil(customTimePeriod) ? customTimePeriod.end : null
+  );
+
+  const setError = useSetAtom(errorTimePeriodAtom);
+
+  const changeDate = ({ property, date }): void => {
+    const currentDate = customTimePeriod[property];
+    cond([
+      [equals(CustomTimePeriodProperty?.start), (): void => setStart(date)],
+      [equals(CustomTimePeriodProperty?.end), (): void => setEnd(date)]
+    ])(property);
+
+    if (dayjs(date).isSame(dayjs(currentDate)) || !dayjs(date).isValid()) {
+      return;
+    }
+
+    acceptDate({
+      date,
+      property
+    });
+  };
+
+  useEffect(() => {
+    if (
+      and(
+        dayjs(customTimePeriod.start).isSame(dayjs(start), 'minute'),
+        dayjs(customTimePeriod.end).isSame(dayjs(end), 'minute')
+      )
+    ) {
+      return;
+    }
+    setStart(customTimePeriod.start);
+    setEnd(customTimePeriod.end);
+  }, [customTimePeriod.start, customTimePeriod.end]);
+
+  useEffect(() => {
+    if (!end || !start) {
+      return;
+    }
+    setError(isInvalidDate({ endDate: end, startDate: start }));
+  }, [end, start]);
+
+  return {
+    changeDate,
+    endDate: end,
+    startDate: start
+  };
+};
+
+export default usePickersStartEndDate;

package/src/TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod.tsx

@@ -0,0 +1,34 @@
+import PickersStartEndDate from './PopoverCustomTimePeriod/PickersStartEndDate';
+import {
+  AcceptDateProps,
+  PickersStartEndDateDirection,
+  PickersStartEndDateProps
+} from './PopoverCustomTimePeriod/models';
+
+interface Props {
+  changeDate: (props: AcceptDateProps) => void;
+  endDate: Date;
+  startDate: Date;
+}
+
+const SimpleCustomTimePeriod = ({
+  startDate,
+  endDate,
+  changeDate,
+  ...rest
+}: Props &
+  Partial<
+    Omit<PickersStartEndDateProps, 'startDate' | 'endDate' | 'changeDate'>
+  >): JSX.Element => {
+  return (
+    <PickersStartEndDate
+      changeDate={changeDate}
+      direction={PickersStartEndDateDirection.row}
+      endDate={endDate}
+      startDate={startDate}
+      {...rest}
+    />
+  );
+};
+
+export default SimpleCustomTimePeriod;

package/src/TimePeriods/CustomTimePeriod/index.tsx

@@ -0,0 +1,71 @@
+import { MouseEvent, useState } from 'react';
+
+import { useAtomValue, useSetAtom } from 'jotai';
+
+import { useDebounce } from '@centreon/ui';
+
+import {
+  changeCustomTimePeriodDerivedAtom,
+  customTimePeriodAtom
+} from '../timePeriodsAtoms';
+
+import CompactCustomTimePeriod from './CompactCustomTimePeriod';
+import PopoverCustomTimePeriod from './PopoverCustomTimePeriod';
+
+interface Props {
+  disabled?: boolean;
+  isCondensed?: boolean;
+}
+
+const CustomTimePeriod = ({
+  disabled = false,
+  isCondensed = false
+}: Props): JSX.Element => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
+
+  const customTimePeriod = useAtomValue(customTimePeriodAtom);
+  const changeCustomTimePeriod = useSetAtom(changeCustomTimePeriodDerivedAtom);
+
+  const debouncedChangeDate = useDebounce({
+    functionToDebounce: ({ property, date }): void =>
+      changeCustomTimePeriod({ date, property }),
+    wait: 500
+  });
+
+  const onClickCompactCustomTimePeriod = (
+    event: MouseEvent<HTMLButtonElement>
+  ): void => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const closePopover = (): void => {
+    setAnchorEl(undefined);
+  };
+
+  return (
+    <>
+      <CompactCustomTimePeriod
+        disabled={disabled}
+        isCondensed={isCondensed}
+        onClick={onClickCompactCustomTimePeriod}
+      />
+      <PopoverCustomTimePeriod
+        pickersData={{
+          acceptDate: debouncedChangeDate,
+          customTimePeriod,
+          isDisabledEndPicker: disabled,
+          isDisabledStartPicker: disabled,
+          rangeEndDate: { min: customTimePeriod.start },
+          rangeStartDate: { max: customTimePeriod.end }
+        }}
+        popoverData={{
+          anchorEl,
+          onClose: closePopover,
+          open: Boolean(anchorEl)
+        }}
+      />
+    </>
+  );
+};
+
+export default CustomTimePeriod;

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -0,0 +1,96 @@
+import { useCallback } from 'react';
+
+import dayjs, { Dayjs } from 'dayjs';
+import { useAtomValue } from 'jotai';
+import { equals } from 'ramda';
+
+import {
+  DateTimePicker,
+  DateTimePickerProps,
+  LocalizationProvider
+} from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import { userAtom } from '@centreon/ui-context';
+
+import { CustomTimePeriodProperty } from './models';
+
+interface ChangeDateProps {
+  date: Date;
+  property: CustomTimePeriodProperty | string;
+}
+
+interface Props {
+  changeDate: (props: ChangeDateProps) => void;
+  date: Date | null;
+  desktopMediaQuery?: string;
+  disabled?: boolean;
+  locale?: string;
+  maxDate?: Date;
+  minDate?: Date;
+  minDateTime?: Date;
+  property: CustomTimePeriodProperty | string;
+  timezone?: string;
+}
+
+const DateTimePickerInput = ({
+  date,
+  maxDate,
+  minDate,
+  minDateTime,
+  property,
+  changeDate,
+  disabled = false,
+  desktopMediaQuery,
+  locale,
+  timezone,
+  ...rest
+}: Props & DateTimePickerProps<dayjs.Dayjs>): JSX.Element => {
+  const desktopPickerMediaQuery =
+    '@media (min-width: 1024px) or (pointer: fine)';
+
+  const user = useAtomValue(userAtom);
+
+  const isUTC = equals(timezone ?? user.timezone, 'UTC');
+
+  const changeTime = (newValue: dayjs.Dayjs | null): void => {
+    changeDate({ date: dayjs(newValue).toDate(), property });
+  };
+
+  const formatDate = useCallback(
+    (currentDate: Date | null): Dayjs => {
+      if (timezone) {
+        return dayjs(currentDate).tz(timezone);
+      }
+
+      return isUTC
+        ? dayjs.utc(currentDate)
+        : dayjs.tz(currentDate, user.timezone);
+    },
+    [isUTC, timezone, user.timezone]
+  );
+
+  return (
+    <LocalizationProvider
+      adapterLocale={(locale ?? user.locale).substring(0, 2)}
+      dateAdapter={AdapterDayjs}
+      dateLibInstance={dayjs}
+    >
+      <DateTimePicker<dayjs.Dayjs>
+        dayOfWeekFormatter={(dayOfWeek) =>
+          dayOfWeek.format('dd').toLocaleUpperCase()
+        }
+        desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
+        disabled={disabled}
+        maxDate={maxDate && formatDate(maxDate)}
+        minDate={minDate && formatDate(minDate)}
+        minDateTime={minDateTime && formatDate(minDateTime)}
+        value={formatDate(date)}
+        onChange={changeTime}
+        {...rest}
+      />
+    </LocalizationProvider>
+  );
+};
+
+export default DateTimePickerInput;