Merge branch 'master' into fix/now-function-timezone-offset

openforis · Sep 29, 2023 · 182fd1d · 182fd1d
2 parents 93adf94 + 90ed1d1
commit 182fd1d
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 72 deletions.
diff --git a/webapp/views/App/views/Home/Dashboard/Helper/Helper.js b/webapp/views/App/views/Home/Dashboard/Helper/Helper.js
@@ -21,19 +21,13 @@ const HelperFirstTimeSurvey = () => {
           values={{ surveyName: Survey.getName(surveyInfo).toUpperCase() }}
           components={{
             title: <h2 />,
-            linkWithIcon: (
-              <LinkWithIcon
-                to={appModuleUri(homeModules.surveyInfo)}
-                className="btn-s btn-transparent"
-                iconLeft={<span className="icon icon-pencil icon-14px" />}
-              />
-            ),
+            linkWithIcon: <LinkWithIcon to={appModuleUri(homeModules.surveyInfo)} iconLeft="icon-pencil" />,
             basicLink: <Link to={appModuleUri(homeModules.surveyInfo)} className="btn-s btn-transparent" />,
           }}
-        ></Trans>
+        />
 
         <div className="helper__first_time_help-survey-info">
-          <SurveyInfo />
+          <SurveyInfo firstTime />
         </div>
       </div>
 
@@ -42,15 +36,9 @@ const HelperFirstTimeSurvey = () => {
           i18nKey="homeView.dashboard.surveyPropUpdate.secondary"
           values={{ surveyName: Survey.getName(surveyInfo).toUpperCase() }}
           components={{
-            linkWithIcon: (
-              <LinkWithIcon
-                to={appModuleUri(designerModules.formDesigner)}
-                className="btn-s btn-transparent"
-                iconLeft={<span className="icon icon-quill icon-14px" />}
-              />
-            ),
+            linkWithIcon: <LinkWithIcon to={appModuleUri(designerModules.formDesigner)} iconLeft="icon-quill" />,
           }}
-        ></Trans>
+        />
       </div>
     </div>
   )
@@ -71,15 +59,9 @@ const HelperWithoutAttributes = () => {
             values={{ surveyName: Survey.getName(surveyInfo).toUpperCase() }}
             components={{
               title: <h2 />,
-              linkWithIcon: (
-                <LinkWithIcon
-                  to={appModuleUri(designerModules.formDesigner)}
-                  className="btn-s btn-transparent"
-                  iconLeft={<span className="icon icon-pencil icon-14px" />}
-                />
-              ),
+              linkWithIcon: <LinkWithIcon to={appModuleUri(designerModules.formDesigner)} iconLeft="icon-pencil" />,
             }}
-          ></Trans>
+          />
         </div>
       </div>
     </>
@@ -98,9 +80,9 @@ const HelpersByType = {
 
 const LinkWithIcon = ({ to, iconLeft, iconRight, children }) => (
   <Link to={to} className="btn-s btn-transparent">
-    {iconLeft}
+    {iconLeft && <span className={`icon ${iconLeft} icon-14px`} />}
     {children}
-    {iconRight}
+    {iconRight && <span className={`icon ${iconRight} icon-14px`} />}
   </Link>
 )
 

diff --git a/webapp/views/App/views/Home/Dashboard/SurveyInfo/SurveyInfo.js b/webapp/views/App/views/Home/Dashboard/SurveyInfo/SurveyInfo.js
@@ -1,6 +1,7 @@
 import './SurveyInfo.scss'
 
 import React, { useCallback } from 'react'
+import PropTypes from 'prop-types'
 import { useDispatch } from 'react-redux'
 import { Link, useNavigate } from 'react-router-dom'
 
@@ -18,7 +19,9 @@ import Header from '@webapp/components/header'
 import ButtonPublishSurvey from '@webapp/components/buttonPublishSurvey'
 import { Button, ButtonMenu } from '@webapp/components'
 
-const SurveyInfo = () => {
+const SurveyInfo = (props) => {
+  const { firstTime } = props
+
   const i18n = useI18n()
   const dispatch = useDispatch()
   const navigate = useNavigate()
@@ -84,9 +87,11 @@ const SurveyInfo = () => {
             {i18n.t(canEditSurvey ? 'homeView.surveyInfo.editInfo' : 'homeView.surveyInfo.viewInfo')}
           </Link>
 
-          {canEditSurvey && <ButtonPublishSurvey className="btn-transparent" disabled={!Survey.isDraft(surveyInfo)} />}
+          {!firstTime && canEditSurvey && (
+            <ButtonPublishSurvey className="btn-transparent" disabled={!Survey.isDraft(surveyInfo)} />
+          )}
 
-          {canExportSurvey && (
+          {!firstTime && canExportSurvey && (
             <ButtonMenu
               className="btn-s btn-transparent btn-menu-export"
               iconClassName="icon-download2 icon-14px"
@@ -176,4 +181,12 @@ const SurveyInfo = () => {
   )
 }
 
+SurveyInfo.propTypes = {
+  firstTime: PropTypes.bool,
+}
+
+SurveyInfo.defaultProps = {
+  firstTime: false,
+}
+
 export default SurveyInfo
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;
       }