Including add and delete button

adobe-rnd · Dec 4, 2024 · 9041601 · 9041601
1 parent d6b2b0f
commit 9041601
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 22 deletions.
diff --git a/blocks/form/components/repeat/repeat.js b/blocks/form/components/repeat/repeat.js
@@ -38,7 +38,7 @@ function createButton(label, icon) {
   return button;
 }
 
-function insertRemoveButton(fieldset, wrapper, form) {
+export function insertRemoveButton(fieldset, wrapper, form) {
   const label = fieldset.dataset?.repeatDeleteButtonLabel || 'Remove';
   const removeButton = createButton(label, 'remove');
   removeButton.addEventListener('click', () => {
@@ -56,7 +56,7 @@ function insertRemoveButton(fieldset, wrapper, form) {
   fieldset.append(removeButton);
 }
 
-const add = (wrapper, form, actions) => (e) => {
+export const add = (wrapper, form, actions) => (e) => {
   const fieldset = wrapper['#repeat-template'];
   const max = wrapper.getAttribute('data-max');
   const min = wrapper.getAttribute('data-min');
@@ -88,19 +88,27 @@ function getInstances(el) {
   return siblings;
 }
 
+export function insertAddButton(wrapper, form) {
+  const actions = document.createElement('div');
+  actions.className = 'repeat-actions';
+  const addLabel = wrapper?.dataset?.repeatAddButtonLabel || 'Add';
+  const addButton = createButton(addLabel, 'add');
+  addButton.addEventListener('click', add(wrapper, form, actions));
+  actions.appendChild(addButton);
+  wrapper.append(actions);
+}
+
 export default function transferRepeatableDOM(form) {
   form.querySelectorAll('[data-repeatable="true"][data-index="0"]').forEach((el) => {
     const instances = getInstances(el);
-    const actions = document.createElement('div');
     const wrapper = document.createElement('div');
     wrapper.dataset.min = el.dataset.min || 0;
     wrapper.dataset.max = el.dataset.max;
     wrapper.dataset.variant = el.dataset.variant || 'addRemoveAll';
     el.insertAdjacentElement('beforebegin', wrapper);
     wrapper.append(...instances);
-    const addLabel = el.dataset?.repeatAddButtonLabel || 'Add';
-    const addButton = createButton(addLabel, 'add');
-    addButton.addEventListener('click', add(wrapper, form, actions));
+    wrapper.querySelector('.item-remove')?.remove();
+    wrapper.querySelector('.repeat-actions')?.remove();
     const cloneNode = el.cloneNode(true);
     cloneNode.removeAttribute('id');
     wrapper['#repeat-template'] = cloneNode;
@@ -111,9 +119,7 @@ export default function transferRepeatableDOM(form) {
       update(el, 0, wrapper['#repeat-template-label']);
       el.setAttribute('data-index', 0);
     }
-    actions.className = 'repeat-actions';
-    actions.appendChild(addButton);
-    wrapper.append(actions);
+    insertAddButton(wrapper, form);
     wrapper.className = 'repeat-wrapper';
   });
 }
diff --git a/blocks/form/form.js b/blocks/form/form.js
@@ -10,7 +10,7 @@ import {
 import GoogleReCaptcha from './integrations/recaptcha.js';
 import componentDecorator from './mappings.js';
 import DocBasedFormToAF from './transform.js';
-import transferRepeatableDOM from './components/repeat/repeat.js';
+import transferRepeatableDOM, { insertAddButton, insertRemoveButton } from './components/repeat/repeat.js';
 import { handleSubmit } from './submit.js';
 import { getSubmitBaseUrl, emailPattern } from './constant.js';
 
@@ -149,6 +149,23 @@ function createLegend(fd) {
   return createLabel(fd, 'legend');
 }
 
+function createRepetablePanel(wrapper, fd) {
+  setConstraints(wrapper, fd);
+  wrapper.dataset.repeatable = true;
+  wrapper.dataset.index = fd.index || 0;
+  if (fd.properties) {
+    Object.keys(fd.properties).forEach((key) => {
+      if (!key.startsWith('fd:')) {
+        wrapper.dataset[key] = fd.properties[key];
+      }
+    });
+  }
+  if (fd?.index === 0) {
+    insertAddButton(wrapper, wrapper);
+    insertRemoveButton(wrapper, wrapper);
+  }
+}
+
 function createFieldSet(fd) {
   const wrapper = createFieldWrapper(fd, 'fieldset', createLegend);
   wrapper.id = fd.id;
@@ -157,16 +174,7 @@ function createFieldSet(fd) {
     wrapper.classList.add('panel-wrapper');
   }
   if (fd.repeatable === true) {
-    setConstraints(wrapper, fd);
-    wrapper.dataset.repeatable = true;
-    wrapper.dataset.index = fd.index || 0;
-    if (fd.properties) {
-      Object.keys(fd.properties).forEach((key) => {
-        if (!key.startsWith('fd:')) {
-          wrapper.dataset[key] = fd.properties[key];
-        }
-      });
-    }
+    createRepetablePanel(wrapper, fd);
   }
   return wrapper;
 }

diff --git a/component-models.json b/component-models.json
@@ -2682,7 +2682,7 @@
                 "value": "noButtons"
               },
               {
-                "name": "Add & Remove All",
+                "name": "Add & Remove on All",
                 "value": "addRemoveAll"
               },
               {

diff --git a/models/form-components/_panel.json b/models/form-components/_panel.json
@@ -65,7 +65,7 @@
                                     "value": "noButtons"
                                 },
                                 {
-                                    "name": "Add & Remove All",
+                                    "name": "Add & Remove on All",
                                     "value": "addRemoveAll"
                                 },
                                 {