[#3782] fix all required fields to show correct status

akvo · Sep 17, 2019 · 5669d6c · 5669d6c · martinchristov · Sep 18, 2019
1 parent 782f7a2
commit 5669d6c
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 21 deletions.
diff --git a/akvo/rsr/spa/app/modules/editor/reducer.js b/akvo/rsr/spa/app/modules/editor/reducer.js
@@ -150,6 +150,9 @@ export default (state = initialState, action) => {
         Object.keys(action.item).forEach(prop => { updatedItem[prop] = action.item[prop] })
       }
       set(newState[sectionKey].fields, `${setName}[${itemIndex}]`, updatedItem)
+      if(action.validate){
+        newState[sectionKey].errors = validateSection(sectionKey, state.validations, newState[sectionKey].fields)
+      }
       return newState
     case actionTypes.EDIT_SET_ITEM:
       newState.saving = true

diff --git a/akvo/rsr/spa/app/modules/editor/section9/docs/docs.jsx b/akvo/rsr/spa/app/modules/editor/section9/docs/docs.jsx
@@ -32,7 +32,7 @@ const Docs = ({ formPush, validations, dispatch, initialValues }) => {
     dispatch({ type: actionTypes.ADD_SET_ITEM, sectionIndex: 9, setName: 'docs', item: {categories: []} })
   }
   const handleNewDocumentUploaded = (id, document) => {
-    dispatch({ type: actionTypes.ADDED_SET_ITEM, sectionIndex: 9, setName: 'docs', item: {id, document} })
+    dispatch({ type: actionTypes.ADDED_SET_ITEM, sectionIndex: 9, setName: 'docs', item: {id, document}, validate: true })
   }
   const handleDocumentUpdated = (itemIndex, itemId) => (document) => {
     dispatch({ type: actionTypes.EDIT_SET_ITEM, sectionIndex: 9, setName: 'docs', itemIndex, itemId, fields: { document }})
@@ -50,7 +50,6 @@ const Docs = ({ formPush, validations, dispatch, initialValues }) => {
       setUploadOn({ ...uploadOn, ...val })
     }
   }
-  console.log(uploadOn)
   return (
     <div>
       <h3>{t('Documents')}</h3>
@@ -80,13 +79,17 @@ const Docs = ({ formPush, validations, dispatch, initialValues }) => {
               <Radio.Button value="upload">{t('Upload')}</Radio.Button>
             </Radio.Group>
             </Condition>
+            <div className="url-input-wrapper">
             {!uploadOn[index] &&
               <FinalField
                 name={`${name}.url`}
                 control="input"
                 placeholder="https://..."
+                withLabel
+                label={<span />}
               />
             }
+            </div>
             {uploadOn[index] &&
               <FinalField
                 name={`${name}.id`}
@@ -108,22 +111,49 @@ const Docs = ({ formPush, validations, dispatch, initialValues }) => {
               />
             }
           </Item>
-          <Item label={<InputLabel tooltip={t('Enter the title of your document.')}>{t('title')}</InputLabel>}>
-            <FinalField name={`${name}.title`} control="input" />
-          </Item>
+          <FinalField
+            name={`${name}.title`}
+            control="input"
+            withLabel
+            optional={isOptional}
+            dict={{
+              label: t('title'),
+              tooltip: t('Enter the title of your document.')
+            }}
+          />
           <Row gutter={16}>
             {fieldExists('titleLanguage') &&
             <Col span={12}>
-              <Item label={<InputLabel optional tooltip={t('Select the language of the document title.')}>{t('title language')}</InputLabel>}>
-                <FinalField name={`${name}.titleLanguage`} control="select" options={LANGUAGE_OPTIONS} showSearch optionFilterProp="children" />
-              </Item>
+              <FinalField
+                name={`${name}.titleLanguage`}
+                control="select"
+                options={LANGUAGE_OPTIONS}
+                showSearch
+                optionFilterProp="children"
+                withLabel
+                optional={isOptional}
+                dict={{
+                  tooltip: 'Select the language of the document title.',
+                  label: 'title language'
+                }}
+              />
             </Col>
             }
             {fieldExists('language') &&
             <Col span={12}>
-              <Item label={<InputLabel optional tooltip={t('Select the language that the document is written in.')}>{t('document language')}</InputLabel>}>
-                <FinalField name={`${name}.language`} control="select" options={LANGUAGE_OPTIONS} showSearch optionFilterProp="children" />
-              </Item>
+              <FinalField
+                name={`${name}.language`}
+                control="select"
+                options={LANGUAGE_OPTIONS}
+                showSearch
+                optionFilterProp="children"
+                withLabel
+                optional={isOptional}
+                dict={{
+                  label: t('document language'),
+                  tooltip: t('Select the language that the document is written in.')
+                }}
+              />
             </Col>
             }
             {fieldExists('documentDate') && (
@@ -135,15 +165,18 @@ const Docs = ({ formPush, validations, dispatch, initialValues }) => {
             )}
             {fieldExists('format') && (
             <Col span={12}>
-              <Item label={<InputLabel optional={isOptional('format')}>{t('document format')}</InputLabel>}>
-                <FinalField
-                  name={`${name}.format`}
-                  control="select"
-                  options={MIME_LIST.map(({ title, mime }) => ({ value: mime, label: title, small: mime }))}
-                  showSearch optionFilterProp="children"
-                  dropdownMatchSelectWidth={false}
-                />
-              </Item>
+              <FinalField
+                name={`${name}.format`}
+                control="select"
+                options={MIME_LIST.map(({ title, mime }) => ({ value: mime, label: title, small: mime }))}
+                showSearch optionFilterProp="children"
+                dropdownMatchSelectWidth={false}
+                withLabel
+                optional={isOptional}
+                dict={{
+                  label: 'document format'
+                }}
+              />
             </Col>
             )}
           </Row>

diff --git a/akvo/rsr/spa/app/modules/editor/section9/docs/validations.js b/akvo/rsr/spa/app/modules/editor/section9/docs/validations.js
@@ -3,7 +3,7 @@ import { validationType, transformUndefined } from '../../../../utils/validation
 
 const RSR = yup.object().shape({
   url: yup.string().transform(transformUndefined).when('document', {
-    is: value => value === null,
+    is: value => value === null || value === undefined || value === '',
     then: yup.string().required()
   }),
   title: yup.string().transform(transformUndefined).required(),

diff --git a/akvo/rsr/spa/app/modules/editor/section9/styles.scss b/akvo/rsr/spa/app/modules/editor/section9/styles.scss
@@ -18,4 +18,13 @@
       margin-right: 2px;
     }
   }
+  .url-input-wrapper{
+    .ant-form-item-label{
+      padding: 0;
+    }
+    .ant-form-item{
+      padding-bottom: 0;
+      margin-bottom: 0;
+    }
+  }
 }