From 10fca7d9fd06eadee104b4fc3b55666e08b7ca20 Mon Sep 17 00:00:00 2001
From: Maciej Bodek <maciej.bodek@gmail.com>
Date: Tue, 31 Dec 2024 09:54:22 +0100
Subject: [PATCH] Calendar updates

---
 .../Editor/Metrics/date-time-picker.tsx       | 51 +++++++++++++++----
 .../scenes/Editor/Metrics/useGraphOptions.ts  |  4 +-
 .../src/styles/lib/_react-calendar.scss       | 10 +++-
 3 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/packages/web-console/src/scenes/Editor/Metrics/date-time-picker.tsx b/packages/web-console/src/scenes/Editor/Metrics/date-time-picker.tsx
index d526f106e..ccd2681d7 100644
--- a/packages/web-console/src/scenes/Editor/Metrics/date-time-picker.tsx
+++ b/packages/web-console/src/scenes/Editor/Metrics/date-time-picker.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import styled from "styled-components"
 import {
   metricDurations,
@@ -86,20 +86,36 @@ const DatePickerItem = ({
   max,
   name,
   label,
+  dateFrom,
+  dateTo,
+  onChange,
 }: {
   min: Date
   max: Date
   name: string
   label: string
+  dateFrom: string
+  dateTo: string
+  onChange: (date: string[]) => void
 }) => {
-  const { getValues, setValue } = useFormContext()
+  const { setValue } = useFormContext()
 
-  const values = getValues()
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = durationTokenToDate(e.target.value)
+    if (value === "Invalid date") {
+      return
+    }
+    if (name === "dateFrom") {
+      onChange([value, dateTo])
+    } else if (name === "dateTo") {
+      onChange([dateFrom, value])
+    }
+  }
 
   return (
     <Form.Item name={name} label={label}>
       <Box gap="0.5rem" align="center">
-        <Form.Input name={name} />
+        <Form.Input name={name} onChange={handleChange} />
         <Popover
           trigger={
             <Button skin="secondary">
@@ -122,8 +138,8 @@ const DatePickerItem = ({
               })
             }}
             value={[
-              new Date(durationTokenToDate(values.dateFrom)),
-              new Date(durationTokenToDate(values.dateTo)),
+              new Date(durationTokenToDate(dateFrom)),
+              new Date(durationTokenToDate(dateTo)),
             ]}
             selectRange={true}
           />
@@ -149,6 +165,8 @@ export const DateTimePicker = ({
   onDateFromToChange: (dateFrom: string, dateTo: string) => void
 }) => {
   const [mainOpen, setMainOpen] = useState(false)
+  const [currentDateFrom, setCurrentDateFrom] = useState(dateFrom)
+  const [currentDateTo, setCurrentDateTo] = useState(dateTo)
 
   const handleSubmit = async (values: FormValues) => {
     if (values.dateFrom && values.dateTo) {
@@ -206,6 +224,22 @@ export const DateTimePicker = ({
       }),
   })
 
+  const datePickerProps = {
+    min,
+    max,
+    dateFrom: currentDateFrom,
+    dateTo: currentDateTo,
+    onChange: ([from, to]: string[]) => {
+      setCurrentDateFrom(from)
+      setCurrentDateTo(to)
+    },
+  }
+
+  useEffect(() => {
+    setCurrentDateFrom(dateFrom)
+    setCurrentDateTo(dateTo)
+  }, [dateFrom, dateTo])
+
   return (
     <Popover
       open={mainOpen}
@@ -237,10 +271,9 @@ export const DateTimePicker = ({
                 <DatePickerItem
                   name="dateFrom"
                   label="From"
-                  min={min}
-                  max={max}
+                  {...datePickerProps}
                 />
-                <DatePickerItem name="dateTo" label="To" min={min} max={max} />
+                <DatePickerItem name="dateTo" label="To" {...datePickerProps} />
                 <Form.Submit>Apply</Form.Submit>
               </Box>
             </Form>
diff --git a/packages/web-console/src/scenes/Editor/Metrics/useGraphOptions.ts b/packages/web-console/src/scenes/Editor/Metrics/useGraphOptions.ts
index c63b8a864..ca2662ebc 100644
--- a/packages/web-console/src/scenes/Editor/Metrics/useGraphOptions.ts
+++ b/packages/web-console/src/scenes/Editor/Metrics/useGraphOptions.ts
@@ -2,7 +2,7 @@ import { utcToLocal } from "./../../../utils/dateTime"
 import { useContext } from "react"
 import { ThemeContext } from "styled-components"
 import uPlot from "uplot"
-import { durationTokenToDate } from "./utils"
+import { durationTokenToDate, DATETIME_FORMAT } from "./utils"
 
 type Params = {
   data: uPlot.AlignedData
@@ -32,7 +32,7 @@ const valuePlugin = (
       if ([y, x].every((v) => v !== null)) {
         timeRef.current!.textContent = utcToLocal(
           x as number,
-          "dd/MM/yyyy HH:mm:ss",
+          DATETIME_FORMAT,
         ) as string
         valueRef.current!.textContent = mapYValue(y as number)
       } else {
diff --git a/packages/web-console/src/styles/lib/_react-calendar.scss b/packages/web-console/src/styles/lib/_react-calendar.scss
index d93bee735..81dad682d 100644
--- a/packages/web-console/src/styles/lib/_react-calendar.scss
+++ b/packages/web-console/src/styles/lib/_react-calendar.scss
@@ -99,12 +99,18 @@
   text-decoration: underline;
 }
 
-.react-calendar__tile--active {
+.react-calendar__tile--active,
+.react-calendar__tile--range,
+ .react-calendar__tile--hasActive{
   background: #b93d64;
   color: #fff;
 }
 
 .react-calendar__tile--active:enabled:hover,
-.react-calendar__tile--active:enabled:focus {
+.react-calendar__tile--active:enabled:focus,
+.react-calendar__tile--range:enabled:hover,
+.react-calendar__tile--range:enabled:focus,
+.react-calendar__tile--hasActive:enabled:hover,
+.react-calendar__tile--hasActive:enabled:focus {
   background: #b93d64;
 }