From 87db3708a4b1ee307f4dc1000d1a8aecc92b7a35 Mon Sep 17 00:00:00 2001
From: Maxim <hello.makson@gmail.com>
Date: Tue, 28 Jun 2022 16:28:18 +0300
Subject: [PATCH] add proper controls to rotation form

---
 .../RotationForm/RotationForm.module.css      |  37 ++++-
 .../components/RotationForm/RotationForm.tsx  | 156 +++++++++++++++---
 grafana-plugin/src/vars.css                   |   4 +-
 3 files changed, 175 insertions(+), 22 deletions(-)

diff --git a/grafana-plugin/src/components/RotationForm/RotationForm.module.css b/grafana-plugin/src/components/RotationForm/RotationForm.module.css
index 5d03f916..69aaa60f 100644
--- a/grafana-plugin/src/components/RotationForm/RotationForm.module.css
+++ b/grafana-plugin/src/components/RotationForm/RotationForm.module.css
@@ -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;
+}
diff --git a/grafana-plugin/src/components/RotationForm/RotationForm.tsx b/grafana-plugin/src/components/RotationForm/RotationForm.tsx
index 7018f81e..653425e0 100644
--- a/grafana-plugin/src/components/RotationForm/RotationForm.tsx
+++ b/grafana-plugin/src/components/RotationForm/RotationForm.tsx
@@ -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;
diff --git a/grafana-plugin/src/vars.css b/grafana-plugin/src/vars.css
index 448db1c4..936cd721 100644
--- a/grafana-plugin/src/vars.css
+++ b/grafana-plugin/src/vars.css
@@ -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);
+
+
 }