Add help text to options (#479)

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/management/assets/js/components/edit/EditOption.js

@@ -92,6 +92,8 @@ 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} />
                   </div>
                 </div>
               </Tab>

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;

rdmo/management/tests/test_import_options.py

@@ -18,9 +18,9 @@ def test_create_optionsets(db, settings):
     elements = elements.values()
     import_elements(elements)
 
-    assert len(root) == len(elements) == 12
+    assert len(root) == len(elements) == 13
     assert OptionSet.objects.count() == 4
-    assert Option.objects.count() == 8
+    assert Option.objects.count() == 9
     assert all(element['created'] is True for element in elements)
     assert all(element['updated'] is False for element in elements)
 
@@ -35,7 +35,7 @@ def test_update_optionsets(db, settings):
     elements = elements.values()
     import_elements(elements)
 
-    assert len(root) == len(elements) == 12
+    assert len(root) == len(elements) == 13
     assert all(element['created'] is False for element in elements)
     assert all(element['updated'] is True for element in elements)
 
@@ -52,7 +52,7 @@ def test_create_options(db, settings):
     elements = elements.values()
     import_elements(elements)
 
-    assert len(root) == len(elements) == Option.objects.count() == 8
+    assert len(root) == len(elements) == Option.objects.count() == 9
     assert all(element['created'] is True for element in elements)
     assert all(element['updated'] is False for element in elements)
 
@@ -67,7 +67,7 @@ def test_update_options(db, settings):
     elements = elements.values()
     import_elements(elements)
 
-    assert len(root) == len(elements) == 8
+    assert len(root) == len(elements) == 9
     assert all(element['created'] is False for element in elements)
     assert all(element['updated'] is True for element in elements)
 

rdmo/options/imports.py

@@ -65,6 +65,7 @@ def import_option(element, save=False, user=None):
     option.additional_input = element.get('additional_input')
 
     set_lang_field(option, 'text', element)
+    set_lang_field(option, 'help', element)
 
     validate_instance(option, element, OptionLockedValidator, OptionUniqueURIValidator)
 

rdmo/options/migrations/0033_option_help.py

@@ -0,0 +1,38 @@
+# Generated by Django 4.2.5 on 2023-10-04 07:15
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('options', '0032_alter_option_additional_input'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='option',
+            name='help_lang1',
+            field=models.TextField(blank=True, help_text='The help text for this option in the primary language.', null=True, verbose_name='Help (primary)'),
+        ),
+        migrations.AddField(
+            model_name='option',
+            name='help_lang2',
+            field=models.TextField(blank=True, help_text='The help text for this option in the secondary language.', null=True, verbose_name='Help (secondary)'),
+        ),
+        migrations.AddField(
+            model_name='option',
+            name='help_lang3',
+            field=models.TextField(blank=True, help_text='The help text for this option in the tertiary language.', null=True, verbose_name='Help (tertiary)'),
+        ),
+        migrations.AddField(
+            model_name='option',
+            name='help_lang4',
+            field=models.TextField(blank=True, help_text='The help text for this option in the quaternary language.', null=True, verbose_name='Help (quaternary)'),
+        ),
+        migrations.AddField(
+            model_name='option',
+            name='help_lang5',
+            field=models.TextField(blank=True, help_text='The help text for this option in the quinary language.', null=True, verbose_name='Help (quinary)'),
+        ),
+    ]

rdmo/options/models.py

@@ -211,6 +211,31 @@ class Option(models.Model, TranslationMixin):
         verbose_name=_('Text (quinary)'),
         help_text=_('The text for this option in the quinary language.')
     )
+    help_lang1 = models.TextField(
+        null=True, blank=True,
+        verbose_name=_('Help (primary)'),
+        help_text=_('The help text for this option in the primary language.')
+    )
+    help_lang2 = models.TextField(
+        null=True, blank=True,
+        verbose_name=_('Help (secondary)'),
+        help_text=_('The help text for this option in the secondary language.')
+    )
+    help_lang3 = models.TextField(
+        null=True, blank=True,
+        verbose_name=_('Help (tertiary)'),
+        help_text=_('The help text for this option in the tertiary language.')
+    )
+    help_lang4 = models.TextField(
+        null=True, blank=True,
+        verbose_name=_('Help (quaternary)'),
+        help_text=_('The help text for this option in the quaternary language.')
+    )
+    help_lang5 = models.TextField(
+        null=True, blank=True,
+        verbose_name=_('Help (quinary)'),
+        help_text=_('The help text for this option in the quinary language.')
+    )
     additional_input = models.CharField(
         max_length=256, blank=True, default=False, choices=ADDITIONAL_INPUT_CHOICES,
         verbose_name=_('Additional input'),
@@ -233,6 +258,14 @@ def save(self, *args, **kwargs):
     def text(self):
         return self.trans('text')
 
+    @property
+    def help(self):
+        return self.trans('help')
+
+    @property
+    def text_and_help(self):
+        return f'{self.text} [{self.help}]' if self.help else self.text
+
     @property
     def label(self):
         return f'{self.uri} ("{self.text}")'

rdmo/options/renderers/mixins.py

@@ -49,6 +49,7 @@ def render_option(self, xml, option):
 
             for lang_code, lang_string, lang_field in get_languages():
                 self.render_text_element(xml, 'text', {'lang': lang_code}, option['text_%s' % lang_code])
+                self.render_text_element(xml, 'help', {'lang': lang_code}, option['help_%s' % lang_code])
 
             self.render_text_element(xml, 'additional_input', {}, option['additional_input'])
             xml.endElement('option')

rdmo/options/serializers/export.py

@@ -19,6 +19,7 @@ class Meta:
         )
         trans_fields = (
             'text',
+            'help'
         )
 
 

rdmo/options/serializers/v1/option.py

@@ -39,6 +39,7 @@ class Meta:
             'comment',
             'locked',
             'text',
+            'help',
             'label',
             'additional_input',
             'optionsets',
@@ -51,6 +52,7 @@ class Meta:
         )
         trans_fields = (
             'text',
+            'help'
         )
         parent_fields = (
             ('optionsets', 'optionset', 'option', 'optionset_options'),

rdmo/projects/serializers/v1/page.py

@@ -16,6 +16,8 @@ class Meta:
         fields = (
             'id',
             'text',
+            'help',
+            'text_and_help',
             'additional_input'
         )