Refactor options

rdmo/core/static/core/css/base.scss

@@ -75,6 +75,10 @@ a {
             color: #a94442;
         }
     }
+
+    &.disabled {
+        cursor: not-allowed;
+    }
 }
 
 code {

rdmo/core/static/core/css/utils.scss

@@ -1,6 +1,92 @@
+.flip {
+    transform: rotate(180deg) scaleX(-1);
+}
+
+.w-100 {
+    width: 100%;
+}
+.mt-0 {
+    margin-top: 0;
+}
+.mt-5 {
+    margin-top: 5px;
+}
+.mt-10 {
+    margin-top: 10px;
+}
+.mt-20 {
+    margin-top: 20px;
+}
+.mr-0 {
+    margin-right: 0;
+}
+.mr-5 {
+    margin-right: 5px;
+}
+.mr-10 {
+    margin-right: 10px;
+}
+.mr-20 {
+    margin-right: 20px;
+}
 .mb-0 {
     margin-bottom: 0;
 }
+.mb-5 {
+    margin-bottom: 5px;
+}
+.mb-10 {
+    margin-bottom: 10px;
+}
 .mb-20 {
     margin-bottom: 20px;
 }
+.ml-0 {
+    margin-left: 0;
+}
+.ml-5 {
+    margin-left: 5px;
+}
+.ml-10 {
+    margin-left: 10px;
+}
+.ml-20 {
+    margin-left: 20px;
+}
+
+.pt-0 {
+    padding-top: 0;
+}
+.pt-10 {
+    padding-top: 10px;
+}
+.pt-20 {
+    padding-top: 20px;
+}
+.pr-0 {
+    padding-right: 0;
+}
+.pr-10 {
+    padding-right: 10px;
+}
+.pr-20 {
+    padding-right: 20px;
+}
+.pb-0 {
+    padding-bottom: 0;
+}
+.pb-10 {
+    padding-bottom: 10px;
+}
+.pb-20 {
+    padding-bottom: 20px;
+}
+.pl-0 {
+    padding-left: 0;
+}
+.pl-10 {
+    padding-left: 10px;
+}
+.pl-20 {
+    padding-left: 20px;
+}

rdmo/core/xml.py

@@ -2,6 +2,7 @@
 import re
 
 import defusedxml.ElementTree as ET
+from packaging.version import parse
 
 log = logging.getLogger(__name__)
 
@@ -117,12 +118,15 @@ def strip_ns(tag, ns_map):
 
 
 def convert_elements(elements, version):
-    # in future versions, this method can be extended
-    # using packaging.version.parse
-    if version is None:
-        return convert_legacy_elements(elements)
-    else:
-        return elements
+    parsed_version = parse('1.11.0') if version is None else parse(version)
+
+    if parsed_version < parse('2.0.0'):
+        elements = convert_legacy_elements(elements)
+
+    if parsed_version < parse('2.1.0'):
+        elements = convert_additional_input(elements)
+
+    return elements
 
 
 def convert_legacy_elements(elements):
@@ -211,6 +215,18 @@ def convert_legacy_elements(elements):
     return elements
 
 
+def convert_additional_input(elements):
+    for uri, element in elements.items():
+        if element['model'] == 'options.option':
+            additional_input = element.get('additional_input')
+            if additional_input == 'True':
+                element['additional_input'] = 'text'
+            else:
+                element['additional_input'] = ''
+
+    return elements
+
+
 def order_elements(elements):
     ordered_elements = {}
     for uri, element in elements.items():

rdmo/management/assets/js/actions/configActions.js

@@ -17,12 +17,13 @@ export function fetchConfig() {
     CoreApi.fetchSettings(),
     CoreApi.fetchSites(),
     ManagementApi.fetchMeta(),
+    OptionsApi.fetchAdditionalInputs(),
     OptionsApi.fetchProviders(),
     QuestionsApi.fetchValueTypes(),
     QuestionsApi.fetchWidgetTypes()
-  ]).then(([relations, groups, settings, sites, meta, providers,
+  ]).then(([relations, groups, settings, sites, meta, additionalInputs, providers,
             valueTypes, widgetTypes]) => dispatch(fetchConfigSuccess({
-    relations, groups, settings, sites, meta, providers, valueTypes, widgetTypes
+    relations, groups, settings, sites, meta, additionalInputs, providers, valueTypes, widgetTypes
   })))
 }
 

rdmo/management/assets/js/api/OptionsApi.js

@@ -51,6 +51,10 @@ class OptionsApi extends BaseApi {
     return this.delete(`/api/v1/options/options/${option.id}/`)
   }
 
+  static fetchAdditionalInputs() {
+    return this.get('/api/v1/options/additionalinputs/')
+  }
+
   static fetchProviders() {
     return this.get('/api/v1/options/providers/')
   }

rdmo/management/assets/js/components/edit/EditOption.js

@@ -4,6 +4,7 @@ import { Tabs, Tab } from 'react-bootstrap'
 import get from 'lodash/get'
 
 import Checkbox from './common/Checkbox'
+import Radio from './common/Radio'
 import Select from './common/Select'
 import Text from './common/Text'
 import Textarea from './common/Textarea'
@@ -19,7 +20,7 @@ import useDeleteModal from '../../hooks/useDeleteModal'
 
 const EditOption = ({ config, option, elements, elementActions }) => {
 
-  const { sites } = config
+  const { additionalInputs, sites } = config
   const { elementAction, parent } = elements
 
   const updateOption = (key, value) => elementActions.updateElement(option, {[key]: value})
@@ -81,10 +82,6 @@ const EditOption = ({ config, option, elements, elementActions }) => {
             <Checkbox config={config} element={option} field="locked"
                       onChange={updateOption} />
           </div>
-          <div className="col-sm-6">
-            <Checkbox config={config} element={option} field="additional_input"
-                      onChange={updateOption} />
-          </div>
         </div>
 
         <Tabs id="#option-tabs" defaultActiveKey={0} animation={false}>
@@ -95,13 +92,20 @@ const EditOption = ({ config, option, elements, elementActions }) => {
                   <div className="col-sm-12">
                     <Text config={config} element={option} field={`text_${lang_code }`}
                           onChange={updateOption} />
+                    <Textarea config={config} element={option} field={`help_${lang_code }`}
+                              onChange={updateOption} />
+                    <Textarea config={config} element={option} field={`view_text_${lang_code }`}
+                              onChange={updateOption} />
                   </div>
                 </div>
               </Tab>
             ))
           }
         </Tabs>
 
+        <Radio config={config} element={option} field="additional_input"
+               options={additionalInputs} onChange={updateOption} />
+
         {get(config, 'settings.multisite') && <Select config={config} element={option} field="editors"
                                                       options={sites} onChange={updateOption} isMulti />}
       </div>

rdmo/management/assets/js/components/edit/common/Radio.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import isEmpty from 'lodash/isEmpty'
+import isNil from 'lodash/isNil'
+import get from 'lodash/get'
+
+import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
+
+const Radio = ({ config, element, field, options, onChange }) => {
+  const id = getId(element, field),
+        label = getLabel(config, element, field),
+        help = getHelp(config, element, field),
+        warnings = get(element, ['warnings', field]),
+        errors = get(element, ['errors', field])
+
+  const className = classNames({
+    'form-group': true,
+    'has-warning': !isEmpty(warnings),
+    'has-error': !isEmpty(errors)
+  })
+
+  const value = isNil(element[field]) ? '' : element[field]
+
+  return (
+    <div className={className}>
+      <label className="control-label" htmlFor={id}>{label}</label>
+
+      <div>
+      {
+        options.map((option, index) => (
+          <label key={index} className="radio-inline">
+            <input type="radio" name="inlineRadioOptions" disabled={element.read_only}
+                   checked={value === option.id}
+                   value={option.id} onChange={event => onChange(field, event.target.value)}/>
+            <span>{option.text}</span>
+          </label>
+        ))
+      }
+      </div>
+
+      {help && <p className="help-block">{help}</p>}
+
+      {errors && <ul className="help-block list-unstyled">
+        {errors.map((error, index) => <li key={index}>{error}</li>)}
+      </ul>}
+    </div>
+  )
+}
+
+Radio.propTypes = {
+  config: PropTypes.object,
+  element: PropTypes.object,
+  field: PropTypes.string,
+  options: PropTypes.array,
+  onChange: PropTypes.func
+}
+
+export default Radio

rdmo/management/assets/scss/management.scss

@@ -3,103 +3,6 @@ $icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
 @import '~font-awesome/css/font-awesome.css';
 @import 'rdmo/core/assets/scss/variables';
 
-a.disabled {
-    cursor: not-allowed;
-}
-
-.flip {
-    transform: rotate(180deg) scaleX(-1);
-}
-
-.w-100 {
-    width: 100%;
-}
-.mt-0 {
-    margin-top: 0;
-}
-.mt-5 {
-    margin-top: 5px;
-}
-.mt-10 {
-    margin-top: 10px;
-}
-.mt-20 {
-    margin-top: 20px;
-}
-.mr-0 {
-    margin-right: 0;
-}
-.mr-5 {
-    margin-right: 5px;
-}
-.mr-10 {
-    margin-right: 10px;
-}
-.mr-20 {
-    margin-right: 20px;
-}
-.mb-0 {
-    margin-bottom: 0;
-}
-.mb-5 {
-    margin-bottom: 5px;
-}
-.mb-10 {
-    margin-bottom: 10px;
-}
-.mb-20 {
-    margin-bottom: 20px;
-}
-.ml-0 {
-    margin-left: 0;
-}
-.ml-5 {
-    margin-left: 5px;
-}
-.ml-10 {
-    margin-left: 10px;
-}
-.ml-20 {
-    margin-left: 20px;
-}
-
-.pt-0 {
-    padding-top: 0;
-}
-.pt-10 {
-    padding-top: 10px;
-}
-.pt-20 {
-    padding-top: 20px;
-}
-.pr-0 {
-    padding-right: 0;
-}
-.pr-10 {
-    padding-right: 10px;
-}
-.pr-20 {
-    padding-right: 20px;
-}
-.pb-0 {
-    padding-bottom: 0;
-}
-.pb-10 {
-    padding-bottom: 10px;
-}
-.pb-20 {
-    padding-bottom: 20px;
-}
-.pl-0 {
-    padding-left: 0;
-}
-.pl-10 {
-    padding-left: 10px;
-}
-.pl-20 {
-    padding-left: 20px;
-}
-
 .form-group {
     .react-select__control {
         min-height: 34px;