start multiple add and delete logic

- need variable to know if plugin contains multiple
- need rename multiple default by adding _example

src/ui/static/js/services.js

@@ -247,20 +247,67 @@ class Multiple {
         if (
           e.target.closest("button").hasAttribute(`${this.prefix}-multiple-add`)
         ) {
-          console.log("click");
+          //get plugin from btn
+          const btn = e.target.closest("button");
+          const serviceName = btn.getAttribute(`${this.prefix}-multiple-add`);
+          //get all multiple groups
+          const multipleEls = document.querySelectorAll(
+            `[${this.prefix}-settings-multiple="${serviceName}"]`
+          );
+          const multipleCount = multipleEls.length;
+          //the default (schema) group is the last group
+          const schema = multipleEls[multipleEls.length - 1];
+          //clone it and change name by total - 1 (schema is hidden)
+          const clone = schema.cloneNode(true);
+          const cloneTitles = clone.querySelectorAll("h5");
+          const cloneInps = clone.querySelectorAll("input");
+          const cloneSelects = clone.querySelectorAll("select");
+
+          cloneTitles.forEach((title) => {
+            title.textContent = `${title.textContent} #${multipleCount}`;
+          });
+
+          cloneInps.forEach((inp) => {
+            const currID = inp.getAttribute("id");
+            const currName = inp.getAttribute("name");
+            inp.setAttribute("id", `${currID}_${multipleCount}`);
+            inp.setAttribute("name", `${currName}_${multipleCount}`);
+          });
+
+          cloneSelects.forEach((select) => {
+            const currID = select.getAttribute("id");
+            const currName = select.getAttribute("name");
+            select.setAttribute("id", `${currID}_${multipleCount}`);
+            select.setAttribute("name", `${currName}_${multipleCount}`);
+          });
+          //insert new group before first one
+          const firstMultiple = multipleEls[0];
+          firstMultiple.insertAdjacentElement("beforebegin", clone);
         }
       } catch (err) {}
 
-      //add using example
       //REMOVE BTN
-      if (
-        e.target
-          .closest("button")
-          .hasAttribute(`${this.prefix}-multiple-delete`)
-      ) {
-        console.log("click");
-      }
-      //remove last child
+      try {
+        if (
+          e.target
+            .closest("button")
+            .hasAttribute(`${this.prefix}-multiple-delete`)
+        ) {
+          //remove the first element (last created)
+          //unless it is the schema (length 1)
+          const btn = e.target.closest("button");
+          const serviceName = btn.getAttribute(
+            `${this.prefix}-multiple-delete`
+          );
+          const multipleEls = document.querySelectorAll(
+            `[${this.prefix}-settings-multiple="${serviceName}"]`
+          );
+          if (multipleEls.length === 1) return;
+          const firstMultiple = multipleEls[0];
+          firstMultiple.remove();
+        }
+        //remove last child
+      } catch (err) {}
     });
   }
 }
@@ -271,3 +318,4 @@ const setPopover = new Popover("main", "services");
 const setTabs = new Tabs("[services-tabs]", "services");
 const setModal = new ServiceModal();
 const format = new FormatValue();
+const setMultiple = new Multiple("services");

src/ui/templates/settings_plugins.html

@@ -212,14 +212,14 @@
     >
       {{plugin['name']}}
     </h5>
-    <button {{current_endpoint}}-multiple-add type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
+    <button {{current_endpoint}}-multiple-add="{{plugin['name']}}" type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
       Add
     </button>
-    <button {{current_endpoint}}-multiple- type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
+    <button {{current_endpoint}}-multiple-delete="{{plugin['name']}}" type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
       Remove
     </button>
   </div>
-  <div {{current_endpoint}}-settings-multiple class="w-full grid grid-cols-12">
+  <div {{current_endpoint}}-settings-multiple="{{plugin['name']}}" class="w-full grid grid-cols-12">
 
     {% for setting, value in plugin["settings"].items() %}
     {% if current_endpoint