@centreon/ui 23.10.17 → 23.10.18-MON-17793-create-graph-component-centreon-ui.0

package/src/TimePeriods/CustomTimePeriod/index.tsx

@@ -0,0 +1,63 @@
+import { MouseEvent, useState } from 'react';
+
+import { useAtomValue, useSetAtom } from 'jotai';
+
+import {
+  changeCustomTimePeriodDerivedAtom,
+  customTimePeriodAtom
+} from '../timePeriodsAtoms';
+
+import CompactCustomTimePeriod from './CompactCustomTimePeriod';
+import PopoverCustomTimePeriod from './PopoverCustomTimePeriod';
+
+interface Props {
+  disabled?: boolean;
+  width: number;
+}
+
+const CustomTimePeriod = ({ width, disabled = false }: Props): JSX.Element => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
+
+  const customTimePeriod = useAtomValue(customTimePeriodAtom);
+  const changeCustomTimePeriod = useSetAtom(changeCustomTimePeriodDerivedAtom);
+
+  const acceptDate = ({ property, date }): void =>
+    changeCustomTimePeriod({ date, property });
+
+  const onClickCompactCustomTimePeriod = (
+    event: MouseEvent<HTMLButtonElement>
+  ): void => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const closePopover = (): void => {
+    setAnchorEl(undefined);
+  };
+
+  return (
+    <>
+      <CompactCustomTimePeriod
+        disabled={disabled}
+        width={width}
+        onClick={onClickCompactCustomTimePeriod}
+      />
+      <PopoverCustomTimePeriod
+        pickersData={{
+          acceptDate,
+          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,99 @@
+import { useState } from 'react';
+
+import dayjs from 'dayjs';
+
+import { TextFieldProps } from '@mui/material';
+import { DesktopDateTimePicker } from '@mui/x-date-pickers';
+
+import { TextField } from '@centreon/ui';
+
+import { DateTimePickerInputModel } from './models';
+import useDateTimePickerAdapter from './useDateTimePickerAdapter';
+
+const renderDateTimePickerTextField =
+  (blur: () => void) =>
+  ({ inputRef, inputProps, InputProps }: TextFieldProps): JSX.Element => {
+    return (
+      <TextField
+        // eslint-disable-next-line react/no-unstable-nested-components
+        EndAdornment={(): JSX.Element => <div>{InputProps?.endAdornment}</div>}
+        dataTestId="calendar"
+        inputProps={{
+          ...inputProps,
+          ref: inputRef,
+          style: { padding: 8 }
+        }}
+        onBlur={blur}
+      />
+    );
+  };
+
+const DateTimePickerInput = ({
+  date,
+  maxDate,
+  minDate,
+  property,
+  changeDate,
+  setDate,
+  onClosePicker,
+  disabled = false
+}: DateTimePickerInputModel): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { getDestinationAndConfiguredTimezoneOffset, formatKeyboardValue } =
+    useDateTimePickerAdapter();
+
+  const changeTime = (
+    newValue: dayjs.Dayjs | null,
+    keyBoardValue: string | undefined
+  ): void => {
+    if (isOpen) {
+      changeDate({ date: dayjs(newValue).toDate(), property });
+
+      return;
+    }
+    const value = dayjs(formatKeyboardValue(keyBoardValue))
+      .add(
+        dayjs.duration({ hours: getDestinationAndConfiguredTimezoneOffset() })
+      )
+      .toDate();
+
+    setDate(value);
+  };
+
+  const blur = (): void => {
+    changeDate({ date, property });
+  };
+  const close = (): void => {
+    setIsOpen(false);
+    onClosePicker?.(true);
+  };
+
+  const open = (): void => {
+    setIsOpen(true);
+    onClosePicker?.(false);
+  };
+
+  return (
+    <DesktopDateTimePicker<dayjs.Dayjs>
+      hideTabs
+      PopperProps={{
+        open: isOpen
+      }}
+      dayOfWeekFormatter={(day: string): string =>
+        day.substring(0, 2).toUpperCase()
+      }
+      disabled={disabled}
+      maxDate={maxDate && dayjs(maxDate)}
+      minDate={minDate && dayjs(minDate)}
+      open={isOpen}
+      renderInput={renderDateTimePickerTextField(blur)}
+      value={date as dayjs.Dayjs}
+      onChange={changeTime}
+      onClose={close}
+      onOpen={open}
+    />
+  );
+};
+
+export default DateTimePickerInput;

package/src/TimePeriods/SelectedTimePeriod.tsx

@@ -0,0 +1,99 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { T, always, cond, equals, lte, map, pick } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import { Button, ButtonGroup, Tooltip, useTheme } from '@mui/material';
+
+import { TimePeriod, timePeriods } from './models';
+import {
+  changeSelectedTimePeriodDerivedAtom,
+  selectedTimePeriodAtom
+} from './timePeriodsAtoms';
+import useSortTimePeriods from './useSortTimePeriods';
+
+const useStyles = makeStyles()((theme) => ({
+  button: {
+    fontSize: theme.typography.body2.fontSize,
+    pointerEvents: 'all'
+  },
+  buttonGroup: {
+    alignSelf: 'center',
+    height: '100%'
+  }
+}));
+
+interface Props {
+  disabled?: boolean;
+  extraTimePeriods?: Array<TimePeriod>;
+  width: number;
+}
+
+const SelectedTimePeriod = ({
+  width,
+  disabled = false,
+  extraTimePeriods = []
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+  const theme = useTheme();
+
+  const selectedTimePeriodData = useAtomValue(selectedTimePeriodAtom);
+
+  const changeSelectedTimePeriod = useSetAtom(
+    changeSelectedTimePeriodDerivedAtom
+  );
+
+  const currentTimePeriods = useSortTimePeriods([
+    ...timePeriods,
+    ...extraTimePeriods
+  ]);
+
+  const timePeriodOptions = map(
+    pick(['id', 'name', 'largeName']),
+    currentTimePeriods
+  );
+
+  return (
+    <div>
+      <ButtonGroup
+        className={classes.buttonGroup}
+        color="primary"
+        component="span"
+        disabled={disabled}
+        size="small"
+      >
+        {map(
+          ({ id, name, largeName }) => (
+            <Tooltip key={name} placement="top" title={largeName}>
+              <Button
+                className={classes.button}
+                component="span"
+                data-testid={id}
+                variant={
+                  equals(selectedTimePeriodData?.id, id)
+                    ? 'contained'
+                    : 'outlined'
+                }
+                onClick={(): void =>
+                  changeSelectedTimePeriod({
+                    id,
+                    timePeriods: currentTimePeriods
+                  })
+                }
+              >
+                {
+                  cond<number, string>([
+                    [lte(theme.breakpoints.values.md), always(largeName)],
+                    [T, always(name)]
+                  ])(width) as string
+                }
+              </Button>
+            </Tooltip>
+          ),
+          timePeriodOptions
+        )}
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default SelectedTimePeriod;