update builder + fix raw mode

* raw mode editor now will rerender and reset on template switch
* remove useless console.log
* update builder for raw and easy mode

src/ui/builder/advanced_mode.py

@@ -5,9 +5,8 @@ def advanced_mode_builder(templates: list[dict], plugins: list, global_config: d
     """Render forms with global config data.
     ATM we don't need templates but we need to pass at least one to the function (it will simply not override anything).
     """
-
-    # We need
     settings = get_service_settings(service_name, global_config, total_config)
+
     builder = [
         {
             "type": "card",

src/ui/builder/raw_mode.py

@@ -46,3 +46,4 @@ def raw_mode_builder(templates: list[dict], plugins: list, global_config: dict,
         }
     ]
     return builder
+

src/ui/builder/utils/form.py

@@ -2,6 +2,19 @@ import copy
 from typing import Union
 
 
+def get_setting_data(template_settings: dict, settings: dict, setting: str, value: dict, is_multiple_setting: bool = False, is_new: bool = False) -> tuple:
+    template_value = template_settings.get(setting, None)
+    current_value = settings[setting].get("value", None) if setting in settings else None
+    default_value = value.get("default")
+    is_disabled_method = (
+        True if settings.get(setting, {}).get("method", "ui") not in ("ui", "default", "manual") and not is_new and not is_multiple_setting else False
+    )
+    is_current_from_template = True if settings.get(setting, {}).get("template", None) is not None and template_value is not None else False
+    is_current_default = current_value is not None and current_value == default_value
+    setting_value = current_value if current_value is not None and not is_new and not is_multiple_setting else default_value
+    return template_value, current_value, default_value, is_disabled_method, is_current_from_template, is_current_default, setting_value
+
+
 def get_service_settings(service_name: str, global_config: dict, total_config: dict) -> dict:
     """
     total_config is a dict that contains global settings and services settings (format SERVICE_NAME_SETTING - www.example.com_USE_ANTIBOT for example -).
@@ -62,6 +75,7 @@ def get_forms(
     # Copy of the plugins, and get the plugins by context if needed
     # In services page, we want only multisite settings, but in global config we want both
     plugins_base = get_plugins_multisite(plugins) if only_multisite else plugins
+
     # This template will be used to show default value or value if exists
     templates = [
         {
@@ -109,7 +123,7 @@ def set_easy(template: list, plugins_base: list, settings: dict, is_new: bool) -
     template_settings = template.get("settings")
     plugins = copy.deepcopy(plugins_base)
     steps = template.get("steps")
-
+    print(steps)
     for step in steps:
         step_settings = step.get("settings", {})
         # Loop on step settings to set the settings value
@@ -140,7 +154,7 @@ def set_easy(template: list, plugins_base: list, settings: dict, is_new: bool) -
     return steps
 
 
-def set_raw(template: list, plugins_base: list, settings: dict, is_new: bool) -> dict:
+def set_raw(template: list, plugins_base: list, settings: dict, is_new: bool = False) -> dict:
     """
     Set the raw form based on the template and plugins data.
     It consists of keeping only the value or default value for each plugin settings.
@@ -153,31 +167,32 @@ def set_raw(template: list, plugins_base: list, settings: dict, is_new: bool) ->
     for plugin in plugins:
         for setting, value in plugin.get("settings").items():
 
-            # we want to show none default value even if this is a disabled method
+            is_multiple_setting = "multiple" in value
 
-            # if setting in settings and settings[setting].get("method", "ui") not in ("ui", "default", "manual") and :
-            #     continue
+            # By default, we will loop on one setting (not multiple)
+            total_settings = {setting: value}
 
-            raw_value = None
+            # Case multiple, retrieve all settings that start with setting name
+            if is_multiple_setting:
+                # get all settings that start with setting name
+                total_settings = {k: v for k, v in settings.items() if k.startswith(f"{setting}")}
 
-            # Start by setting template value if exists
-            if setting in template_settings:
-                # Update value or set default as value
-                raw_value = template_settings.get(setting, None)
+            # Loop in a same way it is a multiple or regular setting
+            for mult_setting, mult_value in total_settings.items():
 
-            # Then override by service settings
-            if setting in settings:
+                # Get setting data
+                # We need to send setting and not mult_setting because mult_setting is unknown on plugin side
+                template_value, current_value, default_value, is_disabled_method, is_current_from_template, is_current_default, setting_value = (
+                    get_setting_data(template_settings, settings, mult_setting, mult_value)
+                )
 
-                # Check if the service setting is not default value to add it
-                default_val = value.get("default")
-                val = settings[setting].get("value", value.get("value", value.get("default")))
+                if current_value is not None:
+                    raw_settings[mult_setting] = current_value
+                    continue
 
-                if val != default_val:
-                    raw_value = val
-
-            # Add value only if exists
-            if raw_value:
-                raw_settings[setting] = raw_value
+                if template_value is not None:
+                    raw_settings[mult_setting] = template_value
+                    continue
 
     return raw_settings
 
@@ -385,8 +400,8 @@ def set_multiples(template, format_plugins, settings):
 
 
 def format_setting(
-    setting_name: str,
-    setting_value: Union[str, int],
+    name: str,
+    value: Union[str, int],
     total_settings: Union[str, int],
     loop_id: Union[str, int],
     template_settings: dict,
@@ -398,60 +413,37 @@ def format_setting(
     This will only set value for none multiple settings.
     Additionnel set_multiples function will handle multiple settings.
     """
-    # add zindex for field in case not a multiple
-    # Case multiple, this will be set on the group level
-    if not "multiple" in setting_value:
-        setting_value["containerClass"] = f"z-{total_settings - loop_id}"
 
-    # regex by pattern
-    setting_value["pattern"] = setting_value.get("regex", "")
+    is_multiple_setting = value.get("multiple", False)
+
+    template_value, current_value, default_value, is_disabled_method, is_current_from_template, is_current_default, setting_value = get_setting_data(
+        template_settings, settings, name, value, is_multiple_setting, is_new
+    )  # regex by pattern
+
+    value["pattern"] = value.get("regex", "")
 
     # set inpType based on type define for each settings
     inpType = (
         "checkbox"
-        if setting_value.get("type") == "check"
-        else ("select" if setting_value.get("type") == "select" else "datepicker" if setting_value.get("type") == "date" else "input")
+        if value.get("type") == "check"
+        else ("select" if value.get("type") == "select" else "datepicker" if value.get("type") == "date" else "input")
     )
-    setting_value["inpType"] = inpType
+    value["inpType"] = inpType
 
-    # set name using the label
-    setting_value["name"] = setting_value.get("label")
-
-    # case select
     if inpType == "select":
         # replace "select" key by "values"
-        setting_value["values"] = setting_value.pop("select")
+        value["values"] = value.pop("select")
 
-    # add columns
-    setting_value["columns"] = {"pc": 4, "tablet": 6, "mobile": 12}
-
-    # By default, the input is enabled unless specific method
-    setting_value["disabled"] = False
-
-    setting_value["value"] = setting_value.get("default")
-
-    # Start by setting template value if exists
-    if setting_name in template_settings and not "multiple" in setting_value:
-        # Update value or set default as value
-        setting_value["value"] = template_settings.get(setting_name, setting_value.get("default"))
-
-    # Then override by service settings if not a multiple
-    # Case multiple, we need to keep the default value and override only each multiple group
-    if setting_name in settings and not "multiple" in setting_value:
-        setting_value["value"] = settings[setting_name].get("value", setting_value.get("value", setting_value.get("default")))
-        setting_value["method"] = settings[setting_name].get("method", "ui")
-
-    # Add prev_value in order to check if value has changed to submit it
-    setting_value["prev_value"] = setting_value.get("value")
-
-    # Then override by service settings
-    if setting_name in settings:
-        setting_value["disabled"] = False if settings[setting_name].get("method", "ui") in ("ui", "default", "manual") or is_new else True
+    value["columns"] = {"pc": 4, "tablet": 6, "mobile": 12}
+    value["disabled"] = is_disabled_method
+    value["value"] = default_value
+    value["name"] = value.get("label")
+    value["prev_value"] = value.get("value")
 
     # Prepare popover checking "help", "context"
     popovers = []
 
-    if (setting_value.get("disabled", False)) and settings[setting_name].get("method", "ui") not in ("ui", "default", "manual"):
+    if is_disabled_method:
         popovers.append(
             {
                 "iconName": "trespass",
@@ -459,21 +451,37 @@ def format_setting(
             }
         )
 
-    if setting_value.get("context"):
+    if value.get("context"):
         popovers.append(
             {
-                "iconName": ("disk" if setting_value.get("context") == "multisite" else "globe"),
-                "text": ("inp_popover_multisite" if setting_value.get("context") == "multisite" else "inp_popover_global"),
+                "iconName": ("disk" if value.get("context") == "multisite" else "globe"),
+                "text": ("inp_popover_multisite" if value.get("context") == "multisite" else "inp_popover_global"),
             }
         )
 
-    if setting_value.get("help"):
+    if value.get("help"):
         popovers.append(
             {
                 "iconName": "info",
-                "text": setting_value.get("help"),
+                "text": value.get("help"),
             }
         )
 
-    setting_value["popovers"] = popovers
-    return setting_value
+    value["popovers"] = popovers
+
+    # Case multiple, stop here
+    if "multiple" in value:
+        return value
+
+    # Else, we can add additionnal final data
+    value["method"] = settings.get(name, {}).get("method", "ui")
+    value["containerClass"] = f"z-{total_settings - loop_id}"
+
+    if current_value is not None and not is_current_default:
+        value["value"] = current_value
+    elif template_value is not None:
+        value["value"] = template_value
+    else:
+        value["value"] = setting_value
+
+    return value

src/ui/client/dashboard/components/Form/Easy.vue

@@ -101,7 +101,6 @@ const data = reactive({
 watch(
   () => props.template,
   () => {
-    console.log("Template changed");
     setup();
   }
 );

src/ui/client/dashboard/components/Form/Raw.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, reactive, onMounted, computed, onBeforeMount } from "vue";
+import { defineProps, reactive, onMounted, onBeforeMount, watch } from "vue";
 import Container from "@components/Widget/Container.vue";
 import Title from "@components/Widget/Title.vue";
 import Subtitle from "@components/Widget/Subtitle.vue";
@@ -60,8 +60,27 @@ const props = defineProps({
 
 const data = reactive({
   isValid: true,
+  // This will be use to unmount and remount the editor (create a new editor instance because it is vanilla js)
+  isRender: true,
 });
 
+watch(
+  () => props.template,
+  () => {
+    // Unmount editor
+    data.isRender = false;
+    // Prepare data
+    rawForm.setRawData(json2raw(props.template), true);
+    updateRaw(rawForm.rawData);
+    rawForm.setOperation(props.operation);
+    rawForm.setOldServerName(props.oldServerName);
+    // Remount, wait some time to be sure the editor is unmounted
+    setTimeout(() => {
+      data.isRender = true;
+    }, 50);
+  }
+);
+
 /**
  *  @name updateRaw
  *  @description Get the raw data from editor, update the raw store with it and check if it is valid JSON.
@@ -184,6 +203,7 @@ onMounted(() => {
 
     <Container class="form-raw-editor-container layout-settings">
       <Editor
+        v-if="data.isRender"
         @inp="(v) => updateRaw(v)"
         v-bind="editorData"
         :value="rawForm.rawData"

src/ui/client/dashboard/store/form.js

@@ -72,7 +72,6 @@ export const createFormStore = (storeName, formType) => {
       templateUI.value = JSON.parse(JSON.stringify(tempData));
       templateUIFormat.value = templateUI.value;
       _updateTempState();
-      console.log("format", formattedData.value);
     }
 
     /**

src/ui/client/dashboard/utils/global.js

@@ -152,7 +152,7 @@ function useEqualStr(type, compare) {
   try {
     return String(type).toLowerCase() === compare.toLowerCase() ? true : false;
   } catch (e) {
-    console.log(e);
+    console.error(e);
     return false;
   }
 }

src/ui/client/legacy/static/js/utils/dashboard.js

@@ -114,7 +114,6 @@ class Filter {
     });
     // If no match is found, hide the container and display the no match element
     if (!this.isAtLeastOneMatch()) {
-      console.log("run");
       if (this.containerEl) this.containerEl.classList.add("hidden");
       if (this.noMatchEl) this.noMatchEl.classList.remove("hidden");
     }
@@ -153,7 +152,6 @@ class Filter {
   }
 
   filterBool(value, filterEls, filterAtt) {
-    console.log(value, filterEls, filterAtt);
     // Check if value is undefined or null
     if (value === undefined || value === null || value === "all") return;
 
@@ -163,7 +161,6 @@ class Filter {
       const truthyValues = ["yes", "true", "1", true];
       const isValueElTruthy = truthyValues.includes(elValue);
       const isValueTruthy = truthyValues.includes(value);
-      console.log(value, isValueTruthy);
       if (isValueElTruthy === isValueTruthy) {
         continue;
       }
@@ -241,7 +238,7 @@ class Filter {
   updateValue(handler, value) {
     // find on list of dict the matching handler and update the value
     const index = this.filters.findIndex(
-      (filter) => filter.handler === handler,
+      (filter) => filter.handler === handler
     );
     this.filters[index].value = value;
   }
@@ -301,7 +298,7 @@ class Dropdown {
           const btn = e.target.closest("button");
           const btnValue = btn.getAttribute("value");
           const btnSetting = btn.getAttribute(
-            `data-${this.prefix}-setting-select-dropdown-btn`,
+            `data-${this.prefix}-setting-select-dropdown-btn`
           );
           //stop if same value to avoid new fetching
           const isSameVal = this.isSameValue(btnSetting, btnValue);
@@ -323,7 +320,7 @@ class Dropdown {
 
   closeAllDrop() {
     const drops = document.querySelectorAll(
-      `[data-${this.prefix}-setting-select-dropdown]`,
+      `[data-${this.prefix}-setting-select-dropdown]`
     );
     drops.forEach((drop) => {
       drop.classList.add("hidden");
@@ -331,8 +328,8 @@ class Dropdown {
       document
         .querySelector(
           `svg[data-${this.prefix}-setting-select="${drop.getAttribute(
-            `data-${this.prefix}-setting-select-dropdown`,
-          )}"]`,
+            `data-${this.prefix}-setting-select-dropdown`
+          )}"]`
         )
         .classList.remove("rotate-180");
     });
@@ -340,7 +337,7 @@ class Dropdown {
 
   isSameValue(btnSetting, value) {
     const selectCustom = document.querySelector(
-      `[data-${this.prefix}-setting-select-text="${btnSetting}"]`,
+      `[data-${this.prefix}-setting-select-text="${btnSetting}"]`
     );
     const currVal = selectCustom.textContent;
     return currVal === value ? true : false;
@@ -348,30 +345,30 @@ class Dropdown {
 
   setSelectNewValue(btnSetting, value) {
     const selectCustom = document.querySelector(
-      `[data-${this.prefix}-setting-select="${btnSetting}"]`,
+      `[data-${this.prefix}-setting-select="${btnSetting}"]`
     );
     selectCustom.querySelector(
-      `[data-${this.prefix}-setting-select-text]`,
+      `[data-${this.prefix}-setting-select-text]`
     ).textContent = value;
   }
 
   hideDropdown(btnSetting) {
     //hide dropdown
     const dropdownEl = document.querySelector(
-      `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
+      `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`
     );
     dropdownEl.classList.add("hidden");
     dropdownEl.classList.remove("flex");
     //svg effect
     const dropdownChevron = document.querySelector(
-      `svg[data-${this.prefix}-setting-select="${btnSetting}"]`,
+      `svg[data-${this.prefix}-setting-select="${btnSetting}"]`
     );
     dropdownChevron.classList.remove("rotate-180");
   }
 
   changeDropBtnStyle(btnSetting, selectedBtn) {
     const dropdownEl = document.querySelector(
-      `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
+      `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`
     );
     //reset dropdown btns
     const btnEls = dropdownEl.querySelectorAll("button");
@@ -381,7 +378,7 @@ class Dropdown {
         "bg-primary",
         "dark:bg-primary",
         "text-gray-300",
-        "text-gray-300",
+        "text-gray-300"
       );
       btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
     });
@@ -389,7 +386,7 @@ class Dropdown {
     selectedBtn.classList.remove(
       "bg-white",
       "dark:bg-slate-700",
-      "text-gray-700",
+      "text-gray-700"
     );
     selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
   }
@@ -400,10 +397,10 @@ class Dropdown {
       .getAttribute(`data-${this.prefix}-setting-select`);
     //toggle dropdown
     const dropdownEl = document.querySelector(
-      `[data-${this.prefix}-setting-select-dropdown="${attribute}"]`,
+      `[data-${this.prefix}-setting-select-dropdown="${attribute}"]`
     );
     const dropdownChevron = document.querySelector(
-      `svg[data-${this.prefix}-setting-select="${attribute}"]`,
+      `svg[data-${this.prefix}-setting-select="${attribute}"]`
     );
     dropdownEl.classList.toggle("hidden");
     dropdownEl.classList.toggle("flex");