Remove interpolation from MultiSelect, OrderedMultiSelect, and Select…

… components
rdmorganiser · Nov 16, 2023 · 2c6c487 · 2c6c487
1 parent 42e08cf
commit 2c6c487
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 41 deletions.
diff --git a/rdmo/management/assets/js/components/edit/EditCatalog.js b/rdmo/management/assets/js/components/edit/EditCatalog.js
@@ -95,8 +95,8 @@ const EditCatalog = ({ config, catalog, elements, elementActions }) => {
           }
         </Tabs>
 
-        <OrderedMultiSelect config={config} element={catalog} field="sections"
-                            options={sections} verboseName="section"
+        <OrderedMultiSelect config={config} element={catalog} field="sections" options={sections}
+                            addText={gettext('Add existing section')} createText={gettext('Create new section')}
                             onChange={updateCatalog} onCreate={createSection} onEdit={editSection} />
 
         {get(config, 'settings.groups') && <Select config={config} element={catalog} field="groups"

diff --git a/rdmo/management/assets/js/components/edit/EditCondition.js b/rdmo/management/assets/js/components/edit/EditCondition.js
@@ -111,7 +111,7 @@ const EditCondition = ({ config, condition, elements, elementActions }) => {
         <Checkbox config={config} element={condition} field="locked"
                   onChange={updateCondition} />
 
-        <Select config={config} element={condition} field="source" verboseName={gettext('attribute')}
+        <Select config={config} element={condition} field="source" createText={gettext('Create new attribute')}
                 options={attributes} onChange={updateCondition} onCreate={createAttribute} onEdit={editAttribute} />
 
         <Select config={config} element={condition} field="relation"

diff --git a/rdmo/management/assets/js/components/edit/EditOptionSet.js b/rdmo/management/assets/js/components/edit/EditOptionSet.js
@@ -95,12 +95,12 @@ const EditOptionSet = ({ config, optionset, elements, elementActions }) => {
           </div>
         </div>
 
-        <OrderedMultiSelect config={config} element={optionset} field="options"
-                            options={options} verboseName="option"
+        <OrderedMultiSelect config={config} element={optionset} field="options" options={options}
+                            addText={gettext('Add existing option')} createText={gettext('Create new option')}
                             onChange={updateOptionSet} onCreate={createOption} onEdit={editOption} />
 
-        <MultiSelect config={config} element={optionset} field="conditions"
-                     options={conditions} verboseName="condition"
+        <MultiSelect config={config} element={optionset} field="conditions" options={conditions}
+                     addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
                      onChange={updateOptionSet} onCreate={createCondition} onEdit={editCondition} />
 
         <Select config={config} element={optionset} field="provider_key"

diff --git a/rdmo/management/assets/js/components/edit/EditPage.js b/rdmo/management/assets/js/components/edit/EditPage.js
@@ -152,17 +152,18 @@ const EditPage = ({ config, page, elements, elementActions }) => {
           }
         </Tabs>
 
-        <Select config={config} element={page} field="attribute" verboseName={gettext('attribute')}
+        <Select config={config} element={page} field="attribute" createText={gettext('Create new attribute')}
                 options={attributes} onChange={updatePage} onCreate={createAttribute} onEdit={editAttribute} />
 
         <OrderedMultiSelect config={config} element={page} field="elements"
-                            values={elementValues} options={elementOptions} verboseName={gettext('element')}
-                            verboseNameCreate={gettext('question')} verboseNameAltCreate={gettext('question set')}
+                            values={elementValues} options={elementOptions}
+                            addText={gettext('Add existing element')} createText={gettext('Create new question')}
+                            altCreateText={gettext('Create new question set')}
                             onChange={updatePage} onCreate={createQuestion} onAltCreate={createQuestionSet}
                             onEdit={editElement} />
 
-        <MultiSelect config={config} element={page} field="conditions"
-                     options={conditions} verboseName="condition"
+        <MultiSelect config={config} element={page} field="conditions" options={conditions}
+                     addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
                      onChange={updatePage} onCreate={createCondition} onEdit={editCondition} />
 
         {get(config, 'settings.multisite') && <Select config={config} element={page} field="editors"

diff --git a/rdmo/management/assets/js/components/edit/EditQuestion.js b/rdmo/management/assets/js/components/edit/EditQuestion.js
@@ -135,7 +135,7 @@ const EditQuestion = ({ config, question, elements, elementActions}) => {
           }
         </Tabs>
 
-        <Select config={config} element={question} field="attribute" verboseName={gettext('attribute')}
+        <Select config={config} element={question} field="attribute" createText={gettext('Create new attribute')}
                 options={attributes} onChange={updateQuestion} onCreate={createAttribute} onEdit={editAttribute} />
 
         <div className="row">
@@ -159,13 +159,13 @@ const EditQuestion = ({ config, question, elements, elementActions}) => {
 
         <Tabs id="#question-tabs2" defaultActiveKey={0} animation={false}>
           <Tab key={0} eventKey={0} title={gettext('Conditions')}>
-            <MultiSelect config={config} element={question} field="conditions"
-                         options={conditions} verboseName="condition"
+            <MultiSelect config={config} element={question} field="conditions" options={conditions}
+                         addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
                          onChange={updateQuestion} onCreate={createCondition} onEdit={editCondition} />
           </Tab>
           <Tab key={1} eventKey={1} title={gettext('Option sets')}>
-            <MultiSelect config={config} element={question} field="optionsets"
-                         options={optionsets} verboseName="optionset"
+            <MultiSelect config={config} element={question} field="optionsets" options={optionsets}
+                         addText={gettext('Add existing optionset')} createText={gettext('Create new optionset')}
                          onChange={updateQuestion} onCreate={createOptionSet} onEdit={editOptionSet} />
           </Tab>
           <Tab key={2} eventKey={2} title={gettext('Range')}>

diff --git a/rdmo/management/assets/js/components/edit/EditQuestionSet.js b/rdmo/management/assets/js/components/edit/EditQuestionSet.js
@@ -161,17 +161,18 @@ const EditQuestionSet = ({ config, questionset, elements, elementActions }) => {
           }
         </Tabs>
 
-        <Select config={config} element={questionset} field="attribute" verboseName={gettext('attribute')}
+        <Select config={config} element={questionset} field="attribute" createText={gettext('Create new attribute')}
                 options={attributes} onChange={updateQuestionSet} onCreate={createAttribute} onEdit={editAttribute} />
 
         <OrderedMultiSelect config={config} element={questionset} field="elements"
-                            values={elementValues} options={elementOptions} verboseName={gettext('element')}
-                            verboseNameCreate={gettext('question')} verboseNameAltCreate={gettext('question set')}
+                            values={elementValues} options={elementOptions}
+                            addText={gettext('Add existing element')} createText={gettext('Create new question')}
+                            altCreateText={gettext('Create new question set')}
                             onChange={updateQuestionSet} onCreate={createQuestion} onAltCreate={createQuestionSet}
                             onEdit={editElement}/>
 
-        <MultiSelect config={config} element={questionset} field="conditions"
-                     options={conditions} verboseName="condition"
+        <MultiSelect config={config} element={questionset} field="conditions" options={conditions}
+                     addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
                      onChange={updateQuestionSet} onCreate={createCondition} onEdit={editCondition} />
 
         {get(config, 'settings.multisite') && <Select config={config} element={questionset} field="editors"

diff --git a/rdmo/management/assets/js/components/edit/EditSection.js b/rdmo/management/assets/js/components/edit/EditSection.js
@@ -94,8 +94,8 @@ const EditSection = ({ config, section, elements, elementActions }) => {
           }
         </Tabs>
 
-        <OrderedMultiSelect config={config} element={section} field="pages"
-                            options={pages} verboseName="page"
+        <OrderedMultiSelect config={config} element={section} field="pages" options={pages}
+                            addText={gettext('Add existing page')} createText={gettext('Create new page')}
                             onChange={updateSection} onCreate={createPage} onEdit={editPage} />
 
         {get(config, 'settings.multisite') && <Select config={config} element={section} field="editors"

diff --git a/rdmo/management/assets/js/components/edit/EditTask.js b/rdmo/management/assets/js/components/edit/EditTask.js
@@ -99,8 +99,8 @@ const EditTask = ({ config, task, elements, elementActions}) => {
           }
         </Tabs>
 
-        <MultiSelect config={config} element={task} field="conditions"
-                     options={conditions} verboseName="condition"
+        <MultiSelect config={config} element={task} field="conditions" options={conditions}
+                     addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
                      onChange={updateTask} onCreate={createCondition} onEdit={editCondition} />
 
         <Select config={config} element={task} field="start_attribute"

diff --git a/rdmo/management/assets/js/components/edit/common/MultiSelect.js b/rdmo/management/assets/js/components/edit/common/MultiSelect.js
@@ -10,7 +10,7 @@ import Link from 'rdmo/core/assets/js/components/Link'
 
 import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
 
-const MultiSelect = ({ config, element, field, options, verboseName, onChange, onCreate, onEdit }) => {
+const MultiSelect = ({ config, element, field, options, addText, createText, onChange, onCreate, onEdit }) => {
   const id = getId(element, field),
         label = getLabel(config, element, field),
         help = getHelp(config, element, field),
@@ -82,15 +82,15 @@ const MultiSelect = ({ config, element, field, options, verboseName, onChange, o
       </div>
 
       <button className="btn btn-primary btn-xs" onClick={() => handleAdd()} disabled={element.read_only}>
-        {interpolate(gettext('Add %s'), [verboseName])}
+        {addText}
       </button>
 
       {
         onCreate &&
         <button className="btn btn-success btn-xs ml-10" onClick={onCreate}
                 disabled={element.read_only || isNil(element.id)}
                 title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
-          {interpolate(gettext('Create new %s'), [verboseName])}
+          {createText}
         </button>
       }
 
@@ -104,7 +104,8 @@ MultiSelect.propTypes = {
   element: PropTypes.object,
   field: PropTypes.string,
   options: PropTypes.array,
-  verboseName: PropTypes.string,
+  addText: PropTypes.string,
+  createText: PropTypes.string,
   onChange: PropTypes.func,
   onCreate: PropTypes.func,
   onEdit: PropTypes.func

diff --git a/rdmo/management/assets/js/components/edit/common/OrderedMultiSelect.js b/rdmo/management/assets/js/components/edit/common/OrderedMultiSelect.js
@@ -202,8 +202,8 @@ class OrderedMultiSelect extends Component {
   }
 
   render() {
-    const { config, element, field, verboseName, verboseNameCreate,
-            verboseNameAltCreate, onCreate, onAltCreate } = this.props
+    const { config, element, field, addText, createText, altCreateText,
+            onCreate, onAltCreate } = this.props
 
     const id = getId(element, field),
           label = getLabel(config, element, field),
@@ -239,22 +239,22 @@ class OrderedMultiSelect extends Component {
 
         <button className="btn btn-primary btn-xs" onClick={() => this.handleAdd()}
                 disabled={element.read_only}>
-          {interpolate(gettext('Add existing %s'), [verboseName])}
+          {addText}
         </button>
         {
           onCreate &&
           <button className="btn btn-success btn-xs ml-10" onClick={onCreate}
                   disabled={element.read_only || isNil(element.id)}
                   title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
-            {interpolate(gettext('Create new %s'), [verboseNameCreate || verboseName])}
+            {createText}
           </button>
         }
         {
           onAltCreate &&
           <button className="btn btn-success btn-xs ml-10" onClick={onAltCreate}
                   disabled={element.read_only || isNil(element.id)}
                   title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
-            {interpolate(gettext('Create new %s'), [verboseNameAltCreate || verboseName])}
+            {altCreateText}
           </button>
         }
 
@@ -284,9 +284,9 @@ OrderedMultiSelect.propTypes = {
   fields: PropTypes.array,
   options: PropTypes.array.isRequired,
   values: PropTypes.array,
-  verboseName: PropTypes.string.isRequired,
-  verboseNameCreate: PropTypes.string,
-  verboseNameAltCreate: PropTypes.string,
+  addText: PropTypes.string.isRequired,
+  createText: PropTypes.string,
+  altCreateText: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   onCreate: PropTypes.func,
   onAltCreate: PropTypes.func,

diff --git a/rdmo/management/assets/js/components/edit/common/Select.js b/rdmo/management/assets/js/components/edit/common/Select.js
@@ -11,7 +11,7 @@ import Link from 'rdmo/core/assets/js/components/Link'
 
 import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
 
-const Select = ({ config, element, field, options, verboseName, isMulti, onChange, onCreate, onEdit }) => {
+const Select = ({ config, element, field, options, createText, isMulti, onChange, onCreate, onEdit }) => {
   const id = getId(element, field),
         label = getLabel(config, element, field),
         help = getHelp(config, element, field),
@@ -68,7 +68,7 @@ const Select = ({ config, element, field, options, verboseName, isMulti, onChang
         onCreate &&
         <button className="btn btn-success btn-xs mt-10" onClick={onCreate} disabled={isNil(element.id)}
                 title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
-          {interpolate(gettext('Create new %s'), [verboseName])}
+          {createText}
         </button>
       }
 
@@ -86,7 +86,7 @@ Select.propTypes = {
   element: PropTypes.object,
   field: PropTypes.string,
   options: PropTypes.array,
-  verboseName: PropTypes.string,
+  createText: PropTypes.string,
   isMulti: PropTypes.bool,
   onChange: PropTypes.func,
   onCreate: PropTypes.func,