@centreon/ui 24.4.21 → 24.4.22

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -0,0 +1,95 @@
+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;
+  onClick: (event) => void;
+}
+
+const CompactCustomTimePeriod = ({
+  onClick,
+  disabled = false
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+  const { t } = useTranslation();
+
+  const { format } = useLocaleDateTimeFormat();
+
+  const customTimePeriod = useAtomValue(customTimePeriodAtom);
+
+  return (
+    <div>
+      <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={classes.containerDates}>
+            <div className={classes.timeContainer}>
+              <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={classes.timeContainer}>
+              <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>
+    </div>
+  );
+};
+
+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,171 @@
+import { useAtomValue } from 'jotai';
+import { makeStyles } from 'tss-react/mui';
+import { equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Typography } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+
+import { userAtom } from '@centreon/ui-context';
+
+import DateTimePickerInput from '../../DateTimePickerInput';
+import {
+  CustomTimePeriodProperty,
+  DateTimePickerInputModel
+} from '../../models';
+import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
+
+import ErrorText from './ErrorText';
+import { PickersData, PickersStartEndDateDirection } from './models';
+import { PickersStartEndDateModel } from './usePickersStartEndDate';
+
+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
+  },
+  horizontalError: {
+    textAlign: 'left'
+  },
+  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>
+  );
+};
+
+interface DisabledPicker {
+  isDisabledEndPicker?: boolean;
+  isDisabledStartPicker?: boolean;
+}
+type PickersDate = Pick<PickersData, 'rangeEndDate' | 'rangeStartDate'>;
+
+interface Props extends PickersDate, PickersStartEndDateModel {
+  direction?: PickersStartEndDateDirection;
+  disabled?: DisabledPicker;
+}
+
+const PickersStartEndDate = ({
+  startDate,
+  endDate,
+  disabled,
+  changeDate,
+  rangeStartDate,
+  rangeEndDate,
+  direction = PickersStartEndDateDirection.column
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles();
+
+  const { locale } = useAtomValue(userAtom);
+  const error = useAtomValue(errorTimePeriodAtom);
+
+  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;
+
+  const isHorizontalDirection = equals(
+    direction,
+    PickersStartEndDateDirection.row
+  );
+
+  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>
+
+      {error && (
+        <ErrorText
+          message="The end date must be greater than the start date"
+          style={cx(classes.error, {
+            [classes.horizontalError]: isHorizontalDirection
+          })}
+        />
+      )}
+    </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 {
+  PickersData,
+  PopoverData,
+  defaultAnchorOrigin,
+  defaultTransformOrigin
+} from './models';
+import usePickersStartEndDate from './usePickersStartEndDate';
+import PickersStartEndDate from './PickersStartEndDate';
+
+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,59 @@
+import { PopoverOrigin, PopoverPosition } from '@mui/material';
+
+import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
+
+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'
+}

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

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+
+import dayjs from 'dayjs';
+import { useSetAtom } from 'jotai';
+import { and, cond, equals, isNil } from 'ramda';
+
+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 isInvalidDate = ({ startDate, endDate }): boolean =>
+    dayjs(startDate).isSameOrAfter(dayjs(endDate), 'minute');
+
+  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,28 @@
+import PickersStartEndDate from './PopoverCustomTimePeriod/PickersStartEndDate';
+import {
+  AcceptDateProps,
+  PickersStartEndDateDirection
+} from './PopoverCustomTimePeriod/models';
+
+interface Props {
+  changeDate: (props: AcceptDateProps) => void;
+  endDate: Date;
+  startDate: Date;
+}
+
+const SimpleCustomTimePeriod = ({
+  startDate,
+  endDate,
+  changeDate
+}: Props): JSX.Element => {
+  return (
+    <PickersStartEndDate
+      changeDate={changeDate}
+      direction={PickersStartEndDateDirection.row}
+      endDate={endDate}
+      startDate={startDate}
+    />
+  );
+};
+
+export default SimpleCustomTimePeriod;

package/src/TimePeriods/CustomTimePeriod/index.tsx

@@ -0,0 +1,66 @@
+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;
+}
+
+const CustomTimePeriod = ({ disabled = 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}
+        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,77 @@
+import { useCallback } from 'react';
+
+import dayjs, { Dayjs } from 'dayjs';
+import { useAtomValue } from 'jotai';
+import { equals } from 'ramda';
+
+import { DateTimePicker, 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;
+  maxDate?: Date;
+  minDate?: Date;
+  property: CustomTimePeriodProperty | string;
+}
+
+const DateTimePickerInput = ({
+  date,
+  maxDate,
+  minDate,
+  property,
+  changeDate,
+  disabled = false,
+  desktopMediaQuery
+}: Props): JSX.Element => {
+  const desktopPickerMediaQuery =
+    '@media (min-width: 1024px) or (pointer: fine)';
+
+  const { timezone, locale } = useAtomValue(userAtom);
+
+  const isUTC = equals(timezone, 'UTC');
+
+  const changeTime = (newValue: dayjs.Dayjs | null): void => {
+    changeDate({ date: dayjs(newValue).toDate(), property });
+  };
+
+  const formatDate = useCallback(
+    (currentDate: Date | null): Dayjs => {
+      return isUTC ? dayjs.utc(currentDate) : dayjs.tz(currentDate, timezone);
+    },
+    [isUTC, timezone]
+  );
+
+  return (
+    <LocalizationProvider
+      adapterLocale={locale.substring(0, 2)}
+      dateAdapter={AdapterDayjs}
+      dateLibInstance={dayjs}
+    >
+      <DateTimePicker<dayjs.Dayjs>
+        dayOfWeekFormatter={(dayOfWeek) =>
+          dayOfWeek.substring(0, 2).toLocaleUpperCase()
+        }
+        desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
+        disabled={disabled}
+        maxDate={maxDate && formatDate(maxDate)}
+        minDate={minDate && formatDate(minDate)}
+        value={formatDate(date)}
+        onChange={changeTime}
+      />
+    </LocalizationProvider>
+  );
+};
+
+export default DateTimePickerInput;