cycle editor: use date picker (#3031)

Co-authored-by: Stefano Ricci <[email protected]> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
openforis · Sep 29, 2023 · 90ed1d1 · 90ed1d1
1 parent 3780f36
commit 90ed1d1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 42 deletions.
diff --git a/...p/views/App/views/Home/SurveyInfo/CyclesEditor/CycleEditor/DateContainer/DateContainer.js b/...p/views/App/views/Home/SurveyInfo/CyclesEditor/CycleEditor/DateContainer/DateContainer.js
@@ -1,45 +1,32 @@
-import React, { useRef } from 'react'
+import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
-import * as R from 'ramda'
 
 import { useI18n } from '@webapp/store/system'
+import { DateInput } from '@webapp/components/form/DateTimeInput'
+import { DateFormats, Dates } from '@openforis/arena-core'
 
-const DateEditor = ({ date, onChange }) => {
-  const [year, month, day] = R.pipe(R.defaultTo('--'), R.split('-'))(date)
-
-  const yearRef = useRef(null)
-  const monthRef = useRef(null)
-  const dayRef = useRef(null)
-
-  const onChangeDate = () => onChange(`${yearRef.current.value}-${monthRef.current.value}-${dayRef.current.value}`)
-
-  return (
-    <span className="date">
-      <input type="text" ref={yearRef} size="4" maxLength="4" value={year} onChange={onChangeDate} />
-      -
-      <input type="text" ref={monthRef} size="2" maxLength="2" value={month} onChange={onChangeDate} />
-      -
-      <input type="text" ref={dayRef} size="2" maxLength="2" value={day} onChange={onChangeDate} />
-    </span>
-  )
-}
-
-DateEditor.propTypes = {
-  date: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-}
-
-DateEditor.defaultProps = {
-  date: null,
-}
-
-const DateContainer = ({ date, keyLabel, readOnly, onChange }) => {
+const DateContainer = ({ date, keyLabel, readOnly, onChange: onChangeProp }) => {
   const i18n = useI18n()
+  const dateFormatted = Dates.convertDate({ dateStr: date, formatTo: DateFormats.dateDisplay })
+
+  const onChange = useCallback(
+    (newDate) => {
+      const newDateFormatted = newDate
+        ? Dates.convertDate({
+            dateStr: newDate,
+            formatFrom: DateFormats.dateDisplay,
+            formatTo: DateFormats.dateStorage,
+          })
+        : null
+      onChangeProp(newDateFormatted)
+    },
+    [onChangeProp]
+  )
 
   return (
     <div className="date-container">
       <span className="date-label">{i18n.t(keyLabel)}</span>
-      {readOnly ? <span className="date">{date}</span> : <DateEditor date={date} onChange={onChange} />}
+      {readOnly ? <span className="date">{date}</span> : <DateInput onChange={onChange} value={dateFormatted} />}
     </div>
   )
 }

diff --git a/webapp/views/App/views/Home/SurveyInfo/CyclesEditor/CyclesEditor.scss b/webapp/views/App/views/Home/SurveyInfo/CyclesEditor/CyclesEditor.scss
@@ -27,7 +27,10 @@
       }
 
       .date-container {
-        margin-left: 10px;
+        margin-left: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
       }
 
       .date-label {
@@ -37,14 +40,6 @@
         font-weight: 600;
       }
 
-      .date {
-        margin-left: 5px;
-
-        input {
-          padding: 0.25rem 0.1rem;
-        }
-      }
-
       .btn-delete {
         padding: 0.1rem;
       }