fix conflict between settings multiple/regular

* fix issue that settings regular logic overrided some data attribute on multiple setting resulting of issue with simple mode

src/ui/static/js/services.js

@@ -9,6 +9,12 @@ import {
 
 class ServiceModal {
   constructor() {
+    this.multSettingsName = JSON.parse(
+      document
+        .querySelector("input[data-plugins-multiple]")
+        .getAttribute("data-plugins-multiple")
+        .replaceAll(`'`, `"`),
+    );
     //modal elements
     this.modal = document.querySelector("[data-services-modal]");
     this.modalTitle = this.modal.querySelector("[data-services-modal-title]");
@@ -55,6 +61,7 @@ class ServiceModal {
     this.container = document.querySelector("main");
     this.currAction = "";
     this.currMethod = "";
+
     this.init();
   }
 
@@ -267,16 +274,22 @@ class ServiceModal {
   // Avoid multiple settings because it is handle by Multiple class
   getSettingsNoMultiple(target) {
     const servicesSettings = target
-    .closest("[data-services-service]")
-    .querySelector("[data-services-settings]")
-    .getAttribute("data-value");
+      .closest("[data-services-service]")
+      .querySelector("[data-services-settings]")
+      .getAttribute("data-value");
     const settings = JSON.parse(servicesSettings);
-    // Loop
-    console.log(settings);
+    this.multSettingsName.forEach((name) => {
+      // check if a settings is starting with a multiple name
+      // if yes, remove it
+      for (const [key, value] of Object.entries(settings)) {
+        if (key.startsWith(name)) {
+          delete settings[key];
+        }
+      }
+    });
     return settings;
   }
 
-
   resetSimpleMode() {
     // reset button
     this.backBtn.setAttribute("disabled", "");
@@ -520,9 +533,12 @@ class ServiceModal {
     parentEl = this.modal,
     attMethodName = "data-default-method",
     attValueName = "data-default-value",
+    avoidMultiple = true,
   ) {
     // Start with input-like (input, checkbox)
-    const inps = parentEl.querySelectorAll("input");
+    const inps = avoidMultiple
+      ? parentEl.querySelectorAll("input:not([data-is-multiple])")
+      : parentEl.querySelectorAll("input");
     inps.forEach((inp) => {
       // form related values are excludes
       const inpName = inp.getAttribute("name");
@@ -539,7 +555,9 @@ class ServiceModal {
     });
 
     // Select only
-    const selects = parentEl.querySelectorAll("select");
+    const selects = avoidMultiple
+      ? parentEl.querySelectorAll("select:not([data-is-multiple])")
+      : parentEl.querySelectorAll("select");
     selects.forEach((select) => {
       if (
         this.isAvoidInpList(
@@ -848,7 +866,10 @@ class ServiceModal {
         const method = setMethodUI ? "ui" : data["method"];
         const global = data["global"];
         try {
-          const inps = this.modal.querySelectorAll(`[name='${key}']`);
+          // get only inputs without attribute data-is-multiple
+          const inps = this.modal.querySelectorAll(
+            `[name='${key}']:not([data-is-multiple])`,
+          );
 
           inps.forEach((inp) => {
             //form related values are excludes
@@ -924,13 +945,10 @@ class Multiple {
     this.prefix = prefix;
     this.container = document.querySelector("main");
     this.formContainer = document.querySelector(formContainerSelector);
-    this.pluginDataStr =  document.querySelector('input[data-plugins]').getAttribute('data-plugins');
-    this.pluginData = JSON.parse(JSON.stringify(this.pluginDataStr));
     this.init();
   }
 
   init() {
-
     window.addEventListener("load", () => {
       this.hiddenIfNoMultiples();
     });
@@ -972,7 +990,8 @@ class Multiple {
       } catch (err) {}
       // New service button
       try {
-        if (e.target
+        if (
+          e.target
             .closest("button")
             .getAttribute(`data-${this.prefix}-action`) === "new"
         ) {
@@ -1198,6 +1217,7 @@ class Multiple {
   getMultiplesOnly(settings) {
     //get schema settings
     const multiples = {};
+
     const schemaSettings = this.formContainer.querySelectorAll(
       `[data-setting-container$="SCHEMA"]`,
     );

src/ui/templates/services.html

@@ -16,7 +16,16 @@
         {% endif %}
     {% endfor %}
 
-    <input class="hidden" data-plugins="{{plugins}}" />
+    {# Get name of multiples #}
+    {% set multiple_settings = [] %}
+    {% for plugin in plugins%}
+        {% for setting, value in plugin.get('settings', {}).items() %}
+            {% if value.get("multiple", "") %}
+                {% if multiple_settings.append(setting) %}{% endif %}
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
+    <input class="hidden" data-plugins-multiple='{{multiple_settings}}'' />
     <!-- actions -->
     <div data-{{attribute_name}}-service
          class="col-span-12 relative flex justify-center min-w-0 break-words rounded-2xl bg-clip-border">

src/ui/templates/setting_checkbox.html

@@ -1,6 +1,7 @@
 {% if setting_input and setting_input["type"] == "check" %}
     {% set inp_name = setting_input['name'] %}
-    {% set inp_name_mult = inp_name + "_SCHEMA" if setting_input["is_multiple"] else inp_name %}
+    {% set is_multiple = setting_input["is_multiple"] %}
+    {% set inp_name_mult = inp_name + "_SCHEMA" if is_multiple else inp_name %}
     {% set inp_id = setting_input['id'] %}
     {% set inp_regex = setting_input['regex'] %}
     {% set inp_default = setting_input['default'] %}
@@ -27,6 +28,7 @@
                 {% for level_name, value in inp_levels.items() %}
                  data-security-level-{{level_name}}="{{value}}"
                 {% endfor %}
+                {% if is_multiple %} data-is-multiple {% endif %}
                 />
         <svg data-checkbox-handler="{{ inp_id }}"
                 class="pointer-events-none	absolute fill-white dark:fill-gray-300 left-0 top-0 translate-x-1 translate-y-2 h-3 w-3"

src/ui/templates/setting_input.html

@@ -1,7 +1,8 @@
 
 {% if setting_input and setting_input["type"] != "select" and setting_input["type"] != "check" %}
     {% set inp_name = setting_input['name'] %}
-    {% set inp_name_mult = inp_name + "_SCHEMA" if setting_input["is_multiple"] else inp_name %}
+    {% set is_multiple = setting_input["is_multiple"] %}
+    {% set inp_name_mult = inp_name + "_SCHEMA" if is_multiple else inp_name %}
     {% set inp_type = setting_input['type'] %}
     {% set inp_default = setting_input['default'] %}
     {% set inp_value = setting_input['value'] %}
@@ -26,6 +27,7 @@
                 {% for level_name, value in inp_levels.items() %}
                  data-security-level-{{level_name}}="{{value}}"
                 {% endfor %}
+                {% if is_multiple %} data-is-multiple {% endif %}
                  />
         {% if inp_type == "password" %}
             <div data-setting-password-container class="absolute flex right-2 h-5 w-5">

src/ui/templates/setting_select.html

@@ -1,6 +1,7 @@
 {% if setting_input and setting_input["type"] == "select" %}
     {% set inp_name = setting_input['name'] %}
-    {% set inp_name_mult = inp_name + "_SCHEMA" if setting_input["is_multiple"] else inp_name %}
+    {% set is_multiple = setting_input["is_multiple"] %}
+    {% set inp_name_mult = inp_name + "_SCHEMA" if is_multiple else inp_name %}
     {% set inp_default = setting_input['default'] %}
     {% set inp_value = setting_input['value'] %}
     {% set inp_method = setting_input['method'] %}
@@ -22,6 +23,7 @@
             {% for level_name, value in inp_levels.items() %}
                 data-security-level-{{level_name}}="{{value}}"
             {% endfor %}
+            {% if is_multiple %} data-is-multiple {% endif %}
             >
         {% for item in inp_items %}
             <option {% if not item %}label="empty"{% endif %}

src/ui/templates/settings_simple.html

@@ -44,7 +44,7 @@
             </div>
             <!-- end plugin multiple handler-->
             <!-- multiple settings -->
-                <div data-{{ attribute_name }}-settings-multiple="{{ setting_input['multiple_name'] }}_SCHEMA" class=" col-span-12 bg-gray-50 dark:bg-slate-900/30 hidden w-full my-4 grid-cols-12 border dark:border-gray-700 rounded">
+                <div data-{{ attribute_name }}-settings-multiple="{{ setting_input['multiple_name'] }}_SCHEMA" class=" col-span-12 bg-gray-50 dark:bg-slate-900/30 hidden w-full mt-4 grid-cols-12 border dark:border-gray-700 rounded">
                     {% for setting in setting_input.get("multiples") %}
                         {% set setting_input = { "name" : setting.get("name"), "context" : setting.get("context"), "method" : setting.get("method", "default"), "help" : setting.get("help"), "label" : setting.get("label"), "id" : setting.get("id"), "type" : setting.get("type"), "default" : setting.get("default", "default"), "select" : setting.get("select"), "regex" : setting.get("regex"), "value" : setting.get("value", setting.get('default')), "is_multiple" : True, "levels" : {} } %}
                         <div data-setting-container="{{ setting }}_SCHEMA" data-{{ attribute_name }}-type="{{ setting_input['type'] }}" data-{{ attribute_name }}-context="{{ setting_input['context'] }}" class="relative mx-2 md:mx-3 my-2 md:my-3 col-span-12 md:col-span-6 2xl:col-span-4" id="form-edit-{{ attribute_name }}-{{ setting }}_SCHEMA">