add proper controls to rotation form
This commit is contained in:
Maxim
parent
a195e09689
commit
87db3708a4
3 changed files with 175 additions and 22 deletions
|
|
@ -2,8 +2,43 @@
|
|||
|
||||
}
|
||||
|
||||
.header{
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.control {
|
||||
width: 195px;
|
||||
}
|
||||
|
||||
|
||||
.date-time-picker {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inline-switch {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
||||
.days {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.day {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--secondary-background-shade);
|
||||
border-radius: 2px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.days .day__selected {
|
||||
background: #3D71D9;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,17 @@
|
|||
import React, { FC } from 'react';
|
||||
import React, { FC, useCallback, useState } from 'react';
|
||||
|
||||
import { IconButton, VerticalGroup, HorizontalGroup, Field, Input, Button } from '@grafana/ui';
|
||||
import { dateTime, DateTime } from '@grafana/data';
|
||||
import {
|
||||
IconButton,
|
||||
VerticalGroup,
|
||||
HorizontalGroup,
|
||||
Field,
|
||||
Input,
|
||||
Button,
|
||||
DateTimePicker,
|
||||
Select,
|
||||
InlineSwitch,
|
||||
} from '@grafana/ui';
|
||||
import cn from 'classnames/bind';
|
||||
import dayjs from 'dayjs';
|
||||
import Draggable from 'react-draggable';
|
||||
|
|
@ -23,11 +34,35 @@ const cx = cn.bind(styles);
|
|||
const RotationForm: FC<RotationFormProps> = (props) => {
|
||||
const { onHide } = props;
|
||||
|
||||
const [repeatEveryValue, setRepeatEveryValue] = useState<number>(1);
|
||||
const [repeatEveryPeriod, setRepeatEveryPeriod] = useState<string>('days');
|
||||
const [selectedDays, setSelectedDays] = useState<string[]>(['Tuesday']);
|
||||
const [shiftStart, setShiftStart] = useState<DateTime>(dateTime('2021-05-05 12:00:00'));
|
||||
const [shiftEnd, setShiftEnd] = useState<DateTime>(dateTime('2021-05-05 12:00:00'));
|
||||
const [rotationStart, setRotationStart] = useState<DateTime>(dateTime('2021-05-05 12:00:00'));
|
||||
const [endLess, setEndless] = useState<boolean>(true);
|
||||
const [rotationEnd, setRotationEnd] = useState<DateTime>(dateTime('2021-05-05 12:00:00'));
|
||||
|
||||
const handleChangeEndless = useCallback(
|
||||
(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setEndless(!event.currentTarget.checked);
|
||||
},
|
||||
[endLess]
|
||||
);
|
||||
|
||||
const handleRepeatEveryValueChange = useCallback((option) => {
|
||||
setRepeatEveryValue(option.value);
|
||||
}, []);
|
||||
|
||||
const handleRepeatEveryPeriodChange = useCallback((option) => {
|
||||
setRepeatEveryPeriod(option.value);
|
||||
}, []);
|
||||
|
||||
const moment = dayjs();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width="400px"
|
||||
width="430px"
|
||||
title="New Rotation"
|
||||
onDismiss={onHide}
|
||||
contentElement={(props, children) => (
|
||||
|
|
@ -47,30 +82,79 @@ const RotationForm: FC<RotationFormProps> = (props) => {
|
|||
</HorizontalGroup>
|
||||
</HorizontalGroup>
|
||||
<UserGroups />
|
||||
<hr />
|
||||
{/*<hr />*/}
|
||||
<VerticalGroup>
|
||||
<HorizontalGroup>
|
||||
<Field label="Repeat shifts every">
|
||||
<Input value="1" />
|
||||
<Field className={cx('control')} label="Repeat shifts every">
|
||||
<Select
|
||||
value={repeatEveryValue}
|
||||
options={[
|
||||
{ label: '1', value: 1 },
|
||||
{ label: '2', value: 2 },
|
||||
{ label: '3', value: 3 },
|
||||
{ label: '4', value: 4 },
|
||||
{ label: '5', value: 5 },
|
||||
{ label: '6', value: 6 },
|
||||
]}
|
||||
onChange={handleRepeatEveryValueChange}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="">
|
||||
<Input value="days" />
|
||||
<Field className={cx('control')} label="">
|
||||
<Select
|
||||
value={repeatEveryPeriod}
|
||||
options={[
|
||||
{ label: 'days', value: 'days' },
|
||||
{ label: 'weeks', value: 'weeks' },
|
||||
{ label: 'hours', value: 'hours' },
|
||||
]}
|
||||
onChange={handleRepeatEveryPeriodChange}
|
||||
/>
|
||||
</Field>
|
||||
</HorizontalGroup>
|
||||
{repeatEveryPeriod === 'weeks' && (
|
||||
/*<HorizontalGroup justify="center">*/
|
||||
<Field label="Select days to repeat">
|
||||
<DaysSelector value={selectedDays} onChange={(value) => setSelectedDays(value)} />
|
||||
</Field>
|
||||
/*</HorizontalGroup>*/
|
||||
)}
|
||||
<HorizontalGroup>
|
||||
<Field className={cx('date-time-picker')} label="Shift start">
|
||||
<DateTimePicker date={shiftStart} onChange={setShiftStart} />
|
||||
</Field>
|
||||
<Field className={cx('date-time-picker')} label="Shift end">
|
||||
<DateTimePicker date={shiftEnd} onChange={setShiftEnd} />
|
||||
</Field>
|
||||
</HorizontalGroup>
|
||||
<HorizontalGroup>
|
||||
<Field label="Shift start">
|
||||
<Input value="12 May, 22 10:00" />
|
||||
<Field className={cx('date-time-picker')} label="Rotation start">
|
||||
<DateTimePicker date={rotationStart} onChange={setRotationStart} />
|
||||
</Field>
|
||||
<Field label="Shift end">
|
||||
<Input value="12 May, 22 10:00" />
|
||||
</Field>
|
||||
</HorizontalGroup>
|
||||
<HorizontalGroup>
|
||||
<Field label="Rotation start">
|
||||
<Input value="12 May, 22 10:00" />
|
||||
</Field>
|
||||
<Field label="Rotation end">
|
||||
<Input value="endless" />
|
||||
<Field
|
||||
label={
|
||||
<HorizontalGroup spacing="xs">
|
||||
<Text type="primary" size="small">
|
||||
Rotation end
|
||||
</Text>
|
||||
<InlineSwitch
|
||||
className={cx('inline-switch')}
|
||||
transparent
|
||||
value={!endLess}
|
||||
onChange={handleChangeEndless}
|
||||
/>
|
||||
</HorizontalGroup>
|
||||
}
|
||||
>
|
||||
{endLess ? (
|
||||
<Input
|
||||
value="endless"
|
||||
onClick={() => {
|
||||
setEndless(false);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<DateTimePicker date={rotationEnd} onChange={setRotationEnd} />
|
||||
)}
|
||||
</Field>
|
||||
</HorizontalGroup>
|
||||
</VerticalGroup>
|
||||
|
|
@ -86,4 +170,36 @@ const RotationForm: FC<RotationFormProps> = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
|
||||
interface DaysSelectorProps {
|
||||
value: string[];
|
||||
onChange: (value: string[]) => void;
|
||||
}
|
||||
|
||||
const DaysSelector = ({ value, onChange }: DaysSelectorProps) => {
|
||||
const getDayClickHandler = (day: string) => {
|
||||
return () => {
|
||||
const newValue = [...value];
|
||||
if (newValue.includes(day)) {
|
||||
const index = newValue.indexOf(day);
|
||||
newValue.splice(index, 1);
|
||||
} else {
|
||||
newValue.push(day);
|
||||
}
|
||||
onChange(newValue);
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cx('days')}>
|
||||
{DAYS.map((day: string) => (
|
||||
<div onClick={getDayClickHandler(day)} className={cx('day', { day__selected: value.includes(day) })}>
|
||||
{day.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RotationForm;
|
||||
|
|
|
|||
|
|
@ -53,5 +53,7 @@
|
|||
--hover-selected: rgba(204,204,220,0.12);
|
||||
--hover-selected-hardcoded: #34363d;
|
||||
|
||||
--secondary-background-shade: rgba(204, 204, 220, 0.2);;
|
||||
--secondary-background-shade: rgba(204, 204, 220, 0.2);
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue