handle settings type multiple (fetch, add, remove) on services

src/ui/static/css/dashboard.css

@@ -843,14 +843,6 @@ h6 {
   grid-column: auto;
 }
 
-.col-span-6 {
-  grid-column: span 6 / span 6;
-}
-
-.col-span-4 {
-  grid-column: span 4 / span 4;
-}
-
 .float-right {
   float: right;
 }
@@ -931,16 +923,16 @@ h6 {
   margin-right: 0.625rem;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
 .mx-3 {
   margin-left: 0.75rem;
   margin-right: 0.75rem;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .my-5 {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
@@ -1014,6 +1006,10 @@ h6 {
   margin-left: 1.5rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -1038,10 +1034,6 @@ h6 {
   margin-top: 0.125rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
 .ml-0 {
   margin-left: 0px;
 }
@@ -1182,10 +1174,6 @@ h6 {
   height: 25rem;
 }
 
-.h-7 {
-  height: 1.75rem;
-}
-
 .h-1\/3 {
   height: 33.333333%;
 }
@@ -1206,10 +1194,6 @@ h6 {
   max-height: 7.5rem;
 }
 
-.max-h-16 {
-  max-height: 4rem;
-}
-
 .max-h-80 {
   max-height: 20rem;
 }
@@ -1326,18 +1310,10 @@ h6 {
   width: 20rem;
 }
 
-.w-7 {
-  width: 1.75rem;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
 
-.min-w-\[750px\] {
-  min-width: 750px;
-}
-
 .min-w-\[900px\] {
   min-width: 900px;
 }
@@ -1444,11 +1420,6 @@ h6 {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-y-12 {
-  --tw-translate-y: 3rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-x-1 {
   --tw-translate-x: 0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1489,11 +1460,6 @@ h6 {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-y-19 {
-  --tw-translate-y: 4.75rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1700,6 +1666,16 @@ h6 {
   border-top-right-radius: 0.25rem;
 }
 
+.rounded-b-lg {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
 .rounded-b {
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -1710,16 +1686,6 @@ h6 {
   border-top-right-radius: 1rem;
 }
 
-.rounded-t-lg {
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
-}
-
-.rounded-b-lg {
-  border-bottom-right-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
-}
-
 .border-2 {
   border-width: 2px;
 }
@@ -1869,10 +1835,6 @@ h6 {
   background-color: rgb(64 187 107 / 0.8);
 }
 
-.bg-opacity-0 {
-  --tw-bg-opacity: 0;
-}
-
 .bg-none {
   background-image: none;
 }
@@ -2099,6 +2061,11 @@ h6 {
   padding-right: 0.75rem;
 }
 
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
@@ -2129,6 +2096,11 @@ h6 {
   padding-right: 0.125rem;
 }
 
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
 .py-1\.4 {
   padding-top: 0.35rem;
   padding-bottom: 0.35rem;
@@ -2144,31 +2116,6 @@ h6 {
   padding-bottom: 1.25rem;
 }
 
-.py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
-.py-0\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-}
-
-.py-1\.5 {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
-
-.py-0\.6 {
-  padding-top: 0.15rem;
-  padding-bottom: 0.15rem;
-}
-
-.py-2\.5 {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-}
-
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -2310,10 +2257,6 @@ h6 {
   text-transform: uppercase;
 }
 
-.lowercase {
-  text-transform: lowercase;
-}
-
 .capitalize {
   text-transform: capitalize;
 }
@@ -2342,22 +2285,14 @@ h6 {
   line-height: 1;
 }
 
-.leading-tight {
-  line-height: 1.25;
-}
-
-.leading-3 {
-  line-height: 0.75rem;
-}
-
-.leading-4 {
-  line-height: 1rem;
-}
-
 .leading-6 {
   line-height: 1.5rem;
 }
 
+.leading-tight {
+  line-height: 1.25;
+}
+
 .tracking-tight-rem {
   letter-spacing: -0.025rem;
 }
@@ -2967,6 +2902,16 @@ h6 {
   border-color: rgb(58 65 111 / var(--tw-border-opacity));
 }
 
+.dark .dark\:border-slate-850 {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 28 68 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(73 80 87 / var(--tw-border-opacity));
+}
+
 .dark .dark\:bg-slate-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(5 17 57 / var(--tw-bg-opacity));
@@ -3186,11 +3131,6 @@ h6 {
     grid-column-start: 5;
   }
 
-  .sm\:my-0 {
-    margin-top: 0px;
-    margin-bottom: 0px;
-  }
-
   .sm\:mx-6 {
     margin-left: 1.5rem;
     margin-right: 1.5rem;
@@ -3423,11 +3363,6 @@ h6 {
     margin-right: 2rem;
   }
 
-  .lg\:mx-0 {
-    margin-left: 0px;
-    margin-right: 0px;
-  }
-
   .lg\:mt-0 {
     margin-top: 0px;
   }

src/ui/static/js/services.js

@@ -236,12 +236,32 @@ class ServiceModal {
 class Multiple {
   constructor(prefix) {
     this.prefix = prefix;
-    this.container = document.querySelector(`[${this.prefix}-modal-form]`);
+    this.container = document.querySelector("main");
+    this.modalForm = document.querySelector(`[${this.prefix}-modal-form]`);
     this.init();
   }
 
   init() {
     this.container.addEventListener("click", (e) => {
+      //edit button
+      try {
+        if (
+          e.target.closest("button").getAttribute("services-action") === "edit"
+        ) {
+          //remove all multiples
+          this.removeMultiples();
+          //set multiple service values
+          const servicesSettings = e.target
+            .closest("[services-service]")
+            .querySelector("[services-settings]")
+            .getAttribute("value");
+          const obj = JSON.parse(servicesSettings);
+          this.updateModalMultiples(obj);
+        }
+      } catch (err) {}
+    });
+
+    this.modalForm.addEventListener("click", (e) => {
       //ADD BTN
       try {
         if (
@@ -252,37 +272,70 @@ class Multiple {
           const serviceName = btn.getAttribute(`${this.prefix}-multiple-add`);
           //get all multiple groups
           const multipleEls = document.querySelectorAll(
-            `[${this.prefix}-settings-multiple="${serviceName}"]`
+            `[${this.prefix}-settings-multiple*="${serviceName}"]`
+          );
+          const count = Number(
+            multipleEls[1]
+              .getAttribute(`${this.prefix}-settings-multiple`)
+              .substring(
+                multipleEls[1].getAttribute(`${this.prefix}-settings-multiple`)
+                  .length - 1
+              )
           );
-          const multipleCount = multipleEls.length;
           //the default (schema) group is the last group
-          const schema = multipleEls[multipleEls.length - 1];
+          const schema = document.querySelector(
+            `[${this.prefix}-settings-multiple="${serviceName}_SCHEMA"]`
+          );
           //clone it and change name by total - 1 (schema is hidden)
           const clone = schema.cloneNode(true);
-          const cloneTitles = clone.querySelectorAll("h5");
+          console.log(clone.getAttribute("services-settings-multiple"));
-          const cloneInps = clone.querySelectorAll("input");
+          const name = clone
-          const cloneSelects = clone.querySelectorAll("select");
+            .getAttribute("services-settings-multiple")
+            .replace(`SCHEMA`, `${count + 1}`);
+          clone.setAttribute("services-settings-multiple", name);
+          clone.classList.remove("hidden");
+          clone.classList.add("grid");
 
-          cloneTitles.forEach((title) => {
+          try {
-            title.textContent = `${title.textContent} #${multipleCount}`;
+            const cloneContainer = clone.querySelectorAll(
-          });
+              "[setting-container]"
+            );
+            cloneContainer.forEach((ctnr) => {
+              const newName = ctnr
+                .getAttribute("setting-container")
+                .replace("SCHEMA", `${count + 1}`);
+              ctnr.setAttribute("setting-container", newName);
+            });
+          } catch (err) {}
 
-          cloneInps.forEach((inp) => {
+          try {
-            const currID = inp.getAttribute("id");
+            const cloneTitles = clone.querySelectorAll("h5");
-            const currName = inp.getAttribute("name");
+            cloneTitles.forEach((title) => {
-            inp.setAttribute("id", `${currID}_${multipleCount}`);
+              title.textContent = `${title.textContent} #${count + 1}`;
-            inp.setAttribute("name", `${currName}_${multipleCount}`);
+            });
-          });
+          } catch (err) {}
 
-          cloneSelects.forEach((select) => {
+          try {
-            const currID = select.getAttribute("id");
+            const cloneInps = clone.querySelectorAll("input");
-            const currName = select.getAttribute("name");
+            cloneInps.forEach((inp) => {
-            select.setAttribute("id", `${currID}_${multipleCount}`);
+              const currID = inp.getAttribute("id");
-            select.setAttribute("name", `${currName}_${multipleCount}`);
+              const currName = inp.getAttribute("name");
-          });
+              inp.setAttribute("id", `${currID}_${count + 1}`);
+              inp.setAttribute("name", `${currName}_${count + 1}`);
+            });
+          } catch (err) {}
+
+          try {
+            const cloneSelects = clone.querySelectorAll("select");
+            cloneSelects.forEach((select) => {
+              const currID = select.getAttribute("id");
+              const currName = select.getAttribute("name");
+              select.setAttribute("id", `${currID}_${count + 1}`);
+              select.setAttribute("name", `${currName}_${count + 1}`);
+            });
+          } catch (err) {}
           //insert new group before first one
-          const firstMultiple = multipleEls[0];
+          schema.insertAdjacentElement("afterend", clone);
-          firstMultiple.insertAdjacentElement("beforebegin", clone);
         }
       } catch (err) {}
 
@@ -293,23 +346,146 @@ class Multiple {
             .closest("button")
             .hasAttribute(`${this.prefix}-multiple-delete`)
         ) {
-          //remove the first element (last created)
+          const multContainer = e.target.closest(
-          //unless it is the schema (length 1)
+            "[services-settings-multiple]"
-          const btn = e.target.closest("button");
-          const serviceName = btn.getAttribute(
-            `${this.prefix}-multiple-delete`
           );
-          const multipleEls = document.querySelectorAll(
+          multContainer.remove();
-            `[${this.prefix}-settings-multiple="${serviceName}"]`
-          );
-          if (multipleEls.length === 1) return;
-          const firstMultiple = multipleEls[0];
-          firstMultiple.remove();
         }
         //remove last child
       } catch (err) {}
     });
   }
+
+  removeMultiples() {
+    const multiPlugins = document.querySelectorAll(
+      `[${this.prefix}-settings-multiple]`
+    );
+    multiPlugins.forEach((multiGrp) => {
+      if (
+        !multiGrp.getAttribute("services-settings-multiple").includes("SCHEMA")
+      )
+        multiGrp.remove();
+    });
+  }
+
+  updateModalMultiples(settings) {
+    //filter to get only multiples of services
+    const multipleSettings = {};
+    for (const [key, data] of Object.entries(settings)) {
+      if (!isNaN(key[key.length - 1]) && key[key.length - 2] === "_") {
+        multipleSettings[key] = {
+          value: data["value"],
+          method: data["method"],
+        };
+      }
+    }
+
+    //add them to the right plugin
+    for (const [key, data] of Object.entries(multipleSettings)) {
+      const num = key[key.length - 1];
+      const getSchemaKey = key.substring(0, key.length - 2);
+      const getSchemaSetting = document.querySelector(
+        `[setting-container="${getSchemaKey}_SCHEMA"]`
+      );
+      const cloneSchemaSetting = getSchemaSetting.cloneNode(true);
+      //replace info
+      cloneSchemaSetting.setAttribute("setting-container", key);
+      const title = cloneSchemaSetting.querySelector("h5");
+      title.textContent = `${title.textContent} #${num}`;
+      //replace input info
+      try {
+        const inp = cloneSchemaSetting.querySelector("input");
+        inp.setAttribute("id", `${key}`);
+        inp.setAttribute("name", `${key}`);
+      } catch (err) {}
+      //or select
+      try {
+        const select = cloneSchemaSetting.querySelector("select");
+        select.setAttribute("id", `${key}`);
+        select.setAttribute("name", `${key}`);
+      } catch (err) {}
+      getSchemaSetting.insertAdjacentElement("beforebegin", cloneSchemaSetting);
+    }
+    //get multiple for all plugins
+    const multiPlugins = document.querySelectorAll(
+      `[${this.prefix}-settings-multiple]`
+    );
+
+    multiPlugins.forEach((defaultGrp) => {
+      //get group number for the multiples settings
+      const multipleEls = defaultGrp.querySelectorAll("[setting-container]");
+      const multNum = new Set();
+      multipleEls.forEach((setting) => {
+        const name = setting.getAttribute("setting-container");
+        if (!isNaN(name[name.length - 1])) multNum.add(name[name.length - 1]);
+      });
+      //create a different group for each number
+      multNum.forEach((num) => {
+        const newGroup = defaultGrp.cloneNode(true);
+        newGroup.classList.add("grid");
+        newGroup.classList.remove("hidden");
+        //change groupe name
+        const currName = newGroup.getAttribute(
+          `${this.prefix}-settings-multiple`
+        );
+        newGroup.setAttribute(
+          `${this.prefix}-settings-multiple`,
+          currName.replace("SCHEMA", num)
+        );
+
+        //remove elements that not fit num unless schema if no custom value
+        const newGroupSettings = newGroup.querySelectorAll(
+          "[setting-container]"
+        );
+        newGroupSettings.forEach((setting) => {
+          //remove logic
+          const settingName = setting.getAttribute("setting-container");
+          if (
+            (!settingName.endsWith(num) && !settingName.endsWith("SCHEMA")) ||
+            (settingName.endsWith("SCHEMA") &&
+              document.querySelector(`${settingName.replace("SCHEMA", num)}`))
+          ) {
+            return setting.remove();
+          }
+          //else update info by num
+          setting.setAttribute(
+            "setting-container",
+            setting.getAttribute("setting-container").replace(`SCHEMA`, num)
+          );
+          const title = setting.querySelector("h5");
+          if (!title.textContent.includes(`#${num}`))
+            title.textContent = `${title.textContent} #${num}`;
+          //replace input info
+          try {
+            const inp = setting.querySelector("input");
+            inp.setAttribute("id", setting.getAttribute("setting-container"));
+            inp.setAttribute("name", setting.getAttribute("setting-container"));
+          } catch (err) {}
+          //or select
+          try {
+            const select = setting.querySelector("select");
+            select.setAttribute(
+              "id",
+              setting.getAttribute("setting-container")
+            );
+            select.setAttribute(
+              "name",
+              setting.getAttribute("setting-container")
+            );
+          } catch (err) {}
+        });
+        defaultGrp.insertAdjacentElement("afterend", newGroup);
+      });
+    });
+    //remove custom multiple from schema
+    multiPlugins.forEach((defaultGrp) => {
+      const multipleEls = defaultGrp.querySelectorAll("[setting-container]");
+      multipleEls.forEach((setting) => {
+        const settingName = setting.getAttribute("setting-container");
+        if (!settingName.endsWith("SCHEMA")) setting.remove();
+      });
+    });
+  }
 }
 
 const setCheckbox = new Checkbox("[services-modal-form]");

src/ui/static/js/utils.js

@@ -907,7 +907,6 @@ class FormatValue {
 
   init() {
     this.inputs.forEach((inp) => {
-      console.log(inp);
       inp.setAttribute("value", inp.getAttribute("value").trim());
     });
   }

src/ui/templates/settings_plugins.html

@@ -5,6 +5,7 @@
   {% set plugins = config["CONFIG"].get_plugins() %} 
 <!-- plugin item -->
 {% for plugin in plugins %}
+
 <div
   {{current_endpoint}}-item="{{plugin['id']}}"
   id="{{plugin['id']}}"
@@ -215,17 +216,14 @@
     <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-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="{{plugin['name']}}" class="w-full grid grid-cols-12">
+  <div {{current_endpoint}}-settings-multiple="{{plugin['name']}}_SCHEMA" class="hidden w-full mb-8 grid-cols-12 border dark:border-gray-700">
 
     {% for setting, value in plugin["settings"].items() %}
     {% if current_endpoint
       == "global-config" and value['context'] == "global" and value['multiple'] or current_endpoint ==
       "services" and value['context'] == "multisite" and value['multiple'] %}
-    <div    
+    <div  setting-container="{{setting}}_SCHEMA"
       class="    
       mx-0 sm:mx-4  my-2 col-span-12 md:mx-6 md:my-3 md:col-span-6 2xl:mx-6 2xl:my-3 2xl:col-span-4"
       id="form-edit-{{current_endpoint}}-{{ value["id"] }}">
@@ -394,6 +392,11 @@
       <!--end invalid feedback-->
     </div>
     {% endif %} {% endfor %}
+    <div class="col-span-12 flex justify-center my-4">
+      <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>
     <!-- end plugin settings -->
   </div>
   {%endif %}