#434

frontend/src/components/common/DateTimeField.tsx

@@ -8,13 +8,13 @@ import type { ComponentPropsWithoutRef, FC, FocusEvent } from 'react'
 const pad = (n: number): string => n.toString ().padStart (2, '0')
 
 
-const toDateTimeLocalValue = (value: Date) => {
+const toDateTimeLocalValue = (value: Date, seconds = false) => {
   const y = value.getFullYear ()
   const m = pad (value.getMonth () + 1)
   const day = pad (value.getDate ())
   const h = pad (value.getHours ())
   const min = pad (value.getMinutes ())
-  return `${ y }-${ m }-${ day }T${ h }:${ min }`
+  return `${ y }-${ m }-${ day }T${ h }:${ min }${seconds ? `:${pad (value.getSeconds ())}` : ''}`
 }
 
 
@@ -37,15 +37,17 @@ type Props = Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> & {
     onChange?:  (isoUTC: string | null) => void
     className?: string
     onBlur?:    (ev: FocusEvent<HTMLInputElement>) => void
-    invalid?:   boolean }
+    invalid?:   boolean
+    precision?: 'minute' | 'second' }
 
 
-const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, invalid, ...rest }) => {
+const DateTimeField: FC<Props> = props => {
+  const { value, onChange, className, onBlur, invalid, precision = 'minute', ...rest } = props
   const [local, setLocal] = useState ('')
 
   useEffect (() => {
-    setLocal (value ? toDateTimeLocalValue (new Date (value)) : '')
-  }, [value])
+    setLocal (value ? toDateTimeLocalValue (new Date (value), precision === 'second') : '')
+  }, [value, precision])
 
   return (
       <input
@@ -61,13 +63,15 @@ const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, invalid,
 			     'focus:ring-2 focus:ring-blue-200']),
 			 className)}
 	  type="datetime-local"
-	  step={60}
+	  step={precision === 'second' ? 1 : 60}
 	  value={local}
 	  aria-invalid={invalid}
 	  onChange={ev => {
 	    const v = ev.target.value
 	    setLocal (v)
-	    onChange?.(v ? toMinutePrecisionIsoUtc (v) : null)
+	    const iso = v ? (precision === 'second'
+                ? new Date (v).toISOString () : toMinutePrecisionIsoUtc (v)) : null
+            onChange?.(iso)
 	  }}
 	  onBlur={onBlur}/>)
 }