Use FormRowTextList everywhere

This allows us to remove the TextList jquery code that the TT version uses.
metabrainz · Sep 6, 2024 · ef0676f · ef0676f
1 parent 0c5b544
commit ef0676f
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 102 deletions.
diff --git a/root/artist/edit_form.tt b/root/artist/edit_form.tt
@@ -26,8 +26,20 @@
           </span>
           [% field_errors(r.form, 'area.name') %]
         [% END %]
-        [%- form_row_text_list(r, 'ipi_codes', add_colon(l('IPI codes')), l('IPI code')) -%]
-        [%- form_row_text_list(r, 'isni_codes', add_colon(l('ISNI codes')), l('ISNI code')) -%]
+        [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+           repeatable => form_to_json(form.field('ipi_codes')),
+           label => add_colon(l('IPI codes')),
+           addButtonId => 'add-ipi-code',
+           addButtonLabel => lp('Add IPI code', 'interactive'),
+           removeButtonLabel => lp('Remove IPI code', 'interactive'),
+         }) %]
+        [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+           repeatable => form_to_json(form.field('isni_codes')),
+           label => add_colon(l('ISNI codes')),
+           addButtonId => 'add-isni-code',
+           addButtonLabel => lp('Add ISNI code', 'interactive'),
+           removeButtonLabel => lp('Remove ISNI code', 'interactive'),
+         }) %]
       </fieldset>
 
       <fieldset>

diff --git a/root/components/forms.tt b/root/components/forms.tt
@@ -133,40 +133,6 @@
     [% END %]
 [%- END -%]
 
-[%- MACRO form_row_text_list(r, field_name, label, item_name) BLOCK # Converted to React at root/static/scripts/edit/components/FormTowTextList.js
--%] 
-    [% WRAPPER form_row %]
-      <label>[% label || r.form.field(field_name).label %]</label>
-      <div class="form-row-text-list">
-          <div style="display: none;"
-               class="text-list-row [%- r.form.field(field_name).html_name _ "-template" -%]">
-              <input type="text" value="" class="value with-button" />
-              <button type="button" class="nobutton icon remove-item" title="[% l('Remove {item}', item => item_name) %]"></button>
-          </div>
-          [% FOR value=r.form.field(field_name).value -%]
-          <div class="text-list-row">
-              <input type="text" value="[% value %]" name="[% r.form.field(field_name).html_name %].[% loop.index() %]" class="value with-button" />
-              <button type="button" class="nobutton icon remove-item" title="[% l('Remove {item}', item => item_name) %]"></button>
-          </div>
-          [% END -%]
-          <div class="form-row-add">
-            <button type="button" class="with-label add-item">
-              [% l('Add {item}', item => item_name) %]
-            </button>
-          </div>
-      </div>
-      <script>
-         [%- IF r.form.field(field_name).value.size -%]
-           MB.Form.TextList("[%- r.form.field(field_name).html_name -%]").init([% r.form.field(field_name).value.size %]);
-         [%- ELSE -%]
-           MB.Form.TextList("[%- r.form.field(field_name).html_name -%]").add('');
-         [%- END -%]
-      </script>
-
-      [% field_errors(r.form, field_name) %]
-    [% END %]
-[%- END -%]
-
 [%- MACRO form_row_date(r, field_name, label) BLOCK # Converted to React at root/components/FormRowPartialDate.js
 -%]
     [% WRAPPER form_row %]

diff --git a/root/label/edit_form.tt b/root/label/edit_form.tt
@@ -29,8 +29,20 @@
             LC- [% r.text('label_code', size => 5, class => "label-code", pattern => "[0-9]*") -%]
             [%- field_errors(form, 'label_code') -%]
         [% END %]
-        [%- form_row_text_list(r, 'ipi_codes', add_colon(l('IPI codes')), l('IPI code')) -%]
-        [%- form_row_text_list(r, 'isni_codes', add_colon(l('ISNI codes')), l('ISNI code')) -%]
+        [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+           repeatable => form_to_json(form.field('ipi_codes')),
+           label => add_colon(l('IPI codes')),
+           addButtonId => 'add-ipi-code',
+           addButtonLabel => lp('Add IPI code', 'interactive'),
+           removeButtonLabel => lp('Remove IPI code', 'interactive'),
+         }) %]
+        [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+           repeatable => form_to_json(form.field('isni_codes')),
+           label => add_colon(l('ISNI codes')),
+           addButtonId => 'add-isni-code',
+           addButtonLabel => lp('Add ISNI code', 'interactive'),
+           removeButtonLabel => lp('Remove ISNI code', 'interactive'),
+         }) %]
       </fieldset>
 
       [% date_range_fieldset(r, 'label', l('This label has ended.')) %]

diff --git a/root/recording/edit_form.tt b/root/recording/edit_form.tt
@@ -42,7 +42,13 @@
         [%- END -%]
       [%- END -%]
       [%- form_row_checkbox(r, 'video', l('Video')) -%]
-      [%- form_row_text_list(r, 'isrcs', add_colon(l('ISRCs')), l('ISRC')) -%]
+      [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+          repeatable => form_to_json(form.field('isrcs')),
+          label => add_colon(l('ISRCs')),
+          addButtonId => 'add-isrc',
+          addButtonLabel => lp('Add ISRC', 'interactive'),
+          removeButtonLabel => lp('Remove ISRC', 'interactive'),
+        }) %]
     </fieldset>
 
     [% PROCESS 'forms/relationship-editor.tt' %]

diff --git a/root/static/scripts/artist/edit.js b/root/static/scripts/artist/edit.js
@@ -8,6 +8,7 @@
  */
 
 import './components/ArtistCreditRenamer.js';
+import '../edit/components/FormRowTextList.js';
 import '../relationship-editor/components/RelationshipEditorWrapper.js';
 
 import typeBubble from '../edit/typeBubble.js';

diff --git a/root/static/scripts/edit.js b/root/static/scripts/edit.js
@@ -21,7 +21,6 @@ require('./edit/MB/Control/Bubble.js');
 require('./edit/URLCleanup.js');
 require('./edit/MB/edit.js');
 require('./edit/MB/reltypeslist.js');
-require('./edit/MB/TextList.js');
 require('./edit/check-duplicates.js');
 
 require('./guess-case/MB/Control/GuessCase.js');
diff --git a/root/static/scripts/edit/MB/TextList.js b/root/static/scripts/edit/MB/TextList.js
diff --git a/root/static/scripts/label/edit.js b/root/static/scripts/label/edit.js
@@ -7,6 +7,8 @@
  * later version: http://www.gnu.org/licenses/gpl-2.0.txt
  */
 
+import '../edit/components/FormRowTextList.js';
+
 import typeBubble from '../edit/typeBubble.js';
 
 const typeIdField = 'select[name=edit-label\\.type_id]';

diff --git a/root/static/scripts/recording/edit.js b/root/static/scripts/recording/edit.js
@@ -8,3 +8,4 @@
  */
 
 import './RecordingName.js';
+import '../edit/components/FormRowTextList.js';
diff --git a/root/static/scripts/work/edit.js b/root/static/scripts/work/edit.js
@@ -17,6 +17,8 @@ import {flushSync} from 'react-dom';
 import * as ReactDOMClient from 'react-dom/client';
 import {legacy_createStore as createStore} from 'redux';
 
+import '../edit/components/FormRowTextList.js';
+
 import {LANGUAGE_MUL_ID, LANGUAGE_ZXX_ID} from '../common/constants.js';
 import {groupBy} from '../common/utility/arrays.js';
 import getScriptArgs from '../common/utility/getScriptArgs.js';

diff --git a/root/work/edit_form.tt b/root/work/edit_form.tt
@@ -13,7 +13,13 @@
       [%- form_row_text_long(r, 'comment', add_colon(l('Disambiguation'))) -%]
       [%- form_row_select(r, 'type_id', add_colon(l('Type'))) -%]
       <div id="work-languages-editor"></div>
-      [%- form_row_text_list(r, 'iswcs', add_colon(l('ISWCs')), l('ISWC')) -%]
+      [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+          repeatable => form_to_json(form.field('iswcs')),
+          label => add_colon(l('ISWCs')),
+          addButtonId => 'add-iswc',
+          addButtonLabel => lp('Add ISWC', 'interactive'),
+          removeButtonLabel => lp('Remove ISWC', 'interactive'),
+        }) %]
     </fieldset>
 
     <fieldset>