fix filter settings + loop rendering

* fix Filter component not using update template (keeping previosu one) in case user is updating value by watching the props template and rerun filter everytime the template is changing, and not only if a filter value is changed
* add unique id to multiples settings in order to them to be catch by useUpdateTemplate utils
* fix for-loop settings watch :key by changing id by name in order to avoid a bad behavior with filtering (setting value id was static but not others components)
* start useUpdateTempMultiples to update multiple settings
* update Filter component by now checking multiples and returning only matching settings keeping the format

src/client/tests/globalconfig.py

@@ -3016,6 +3016,7 @@
     "USE_UI": {"value": "yes", "global": True, "method": "ui"},
     "USE_CORS": {"value": "yes", "global": True, "method": "scheduler"},
     "REVERSE_PROXY_HOST_1": {"value": "yes", "global": True, "method": "scheduler"},
+    "REVERSE_PROXY_HOST": {"value": "no", "global": True, "method": "ui"},
 }
 
 
@@ -3207,7 +3208,13 @@ def get_multiple_from_template(template, multiples):
                     for multSett, multValue in mult_settings.items():
                         new_multiple_group[f"{multSett}{f'_{prefix}' if prefix != '0' else ''}"] = multValue
 
-                    multiple_template[mult_name][prefix] = copy.deepcopy(new_multiple_group)
+                    new_multiple_group = copy.deepcopy(new_multiple_group)
+
+                    # Update id for each settings
+                    for multSett, multValue in new_multiple_group.items():
+                        multValue["id"] = f"{multValue['id']}{f'-{prefix}' if prefix != '0' else ''}"
+
+                    multiple_template[mult_name][prefix] = new_multiple_group
 
                 # We can now add the template value to setting using the same setting name with prefix
                 multiple_template[mult_name][prefix][setting]["value"] = value
@@ -3258,7 +3265,14 @@ def get_multiple_from_settings(settings, multiples):
                     for multSett, multValue in mult_settings.items():
                         new_multiple_group[f"{multSett}{f'_{prefix}' if prefix != '0' else ''}"] = multValue
 
-                    multiple_settings[mult_name][prefix] = copy.deepcopy(new_multiple_group)
+                    new_multiple_group = copy.deepcopy(new_multiple_group)
+
+                    # Update id for each settings
+                    for multSett, multValue in new_multiple_group.items():
+                        multValue["id"] = f"{multValue['id']}{f'-{prefix}' if prefix != '0' else ''}"
+
+                    multiple_settings[mult_name][prefix] = new_multiple_group
+
                 # We can now add the template value to setting using the same setting name with prefix
                 multiple_settings[mult_name][prefix][setting]["value"] = value.get("value", multiple_settings[mult_name][prefix][setting]["value"])
                 multiple_settings[mult_name][prefix][setting]["method"] = value.get("method", "ui")

src/client/vite/src/components/Form/Advanced.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, reactive, onMounted, onUnmounted, KeepAlive } from "vue";
+import { defineProps, reactive, onMounted, onUnmounted } from "vue";
 import MessageUnmatch from "@components/Message/Unmatch.vue";
 import Container from "@components/Widget/Container.vue";
 import Fields from "@components/Form/Fields.vue";
@@ -14,7 +14,7 @@ import { plugin_types } from "@utils/variables";
 
 import {
   useCheckPluginsValidity,
-  useUpdateTempSettings,
+  useUpdateTemplate,
   useListenTemp,
   useUnlistenTemp,
 } from "@utils/form.js";
@@ -239,7 +239,7 @@ function getPluginNames(template) {
 
 function updateTemplate(e) {
   if (!e.target.closest("[data-advanced-form-plugin]")) return;
-  useUpdateTempSettings(e, data.base);
+  useUpdateTemplate(e, data.base);
 }
 
 onMounted(() => {
@@ -284,30 +284,25 @@ onUnmounted(() => {
     </Filter>
     <MessageUnmatch v-if="!data.format.length" />
     <template v-for="plugin in data.format">
-      <KeepAlive>
-        <Container
-          data-is="content"
-          data-advanced-form-plugin
-          v-if="plugin.name === data.currPlugin"
-          class="form-advanced-plugin-container"
-        >
-          <Title type="content" :title="plugin.name" />
-          <Subtitle type="content" :subtitle="plugin.description" />
+      <Container
+        data-is="content"
+        data-advanced-form-plugin
+        v-if="plugin.name === data.currPlugin"
+        class="form-advanced-plugin-container"
+      >
+        <Title type="content" :title="plugin.name" />
+        <Subtitle type="content" :subtitle="plugin.description" />
 
-          <Container class="layout-settings">
-            <template
-              v-for="(setting, name, index) in plugin.settings"
-              :key="index"
-            >
-              <Fields :setting="setting" />
-            </template>
-          </Container>
-          <GroupMultiple
-            v-if="plugin.multiples"
-            :multiples="plugin.multiples"
-          />
+        <Container class="layout-settings">
+          <template
+            v-for="(setting, name, index) in plugin.settings"
+            :key="name"
+          >
+            <Fields :setting="setting" />
+          </template>
         </Container>
-      </KeepAlive>
+        <GroupMultiple v-if="plugin.multiples" :multiples="plugin.multiples" />
+      </Container>
     </template>
     <Button
       v-if="data.format.length"

src/client/vite/src/components/Form/Easy.vue

@@ -9,7 +9,7 @@ import Text from "@components/Widget/Text.vue";
 import { v4 as uuidv4 } from "uuid";
 import {
   useCheckPluginsValidity,
-  useUpdateTempSettings,
+  useUpdateTemplate,
   useListenTemp,
   useUnlistenTemp,
 } from "@utils/form.js";
@@ -94,7 +94,7 @@ function setValidity() {
 
 function updateTemplate(e) {
   if (!e.target.closest("[data-easy-form-step]")) return;
-  useUpdateTempSettings(e, data.base);
+  useUpdateTemplate(e, data.base);
 }
 
 const buttonSave = {
@@ -164,10 +164,7 @@ onUnmounted(() => {
         <Subtitle type="content" :subtitle="step.subtitle" />
 
         <Container class="layout-settings">
-          <template
-            v-for="(setting, name, index) in step.settings"
-            :key="index"
-          >
+          <template v-for="(setting, name, index) in step.settings" :key="name">
             <Fields :setting="setting" />
           </template>
         </Container>

src/client/vite/src/components/Forms/Group/Multiple.vue

@@ -155,9 +155,9 @@ import Container from "@components/Widget/Container.vue";
 const props = defineProps({
   // id && value && method
   multiples: {
-    type: String,
+    type: Object,
     required: false,
-    default: "",
+    default: {},
   },
   columns: {
     type: [Object, Boolean],
@@ -207,6 +207,22 @@ const buttonDelete = {
   containerClass: "flex justify-center",
 };
 
+// Check if at least one input is disabled (this means a method different than ui, default or manual is used)
+// If true, disable the delete button
+function setDeleteState(group) {
+  // Loop on group keys and check if at least one input is disabled
+  let isDisabled = false;
+  for (const [key, value] of Object.entries(group)) {
+    if (value.disabled) {
+      isDisabled = true;
+      break;
+    }
+  }
+  const delBtn = JSON.parse(JSON.stringify(buttonDelete));
+  delBtn.disabled = isDisabled;
+  return delBtn;
+}
+
 function setInvisible(id) {
   multiples.invisible.push(id);
 }
@@ -223,13 +239,13 @@ function toggleVisible(id) {
   }
 }
 
-function delGroup(multName, groupName) {
+function delGroup(group, multName, groupName) {
   multiples.toDelete.push({ multName: multName, groupName: groupName });
 }
 </script>
 
 <template>
-  <template v-for="(multObj, multName, id) in props.multiples">
+  <template :key="multName" v-for="(multObj, multName, id) in props.multiples">
     <Container
       data-is="multiple"
       class="layout-settings-multiple"
@@ -245,9 +261,11 @@ function delGroup(multName, groupName) {
       </Container>
 
       <template
+        :key="groupId"
         v-for="(group, groupName, groupId) in props.multiples[multName]"
       >
         <Container
+          data-group="multiple"
           class="layout-settings-multiple-group"
           :aria-hidden="multiples.invisible.includes(`${multName}${id}`)"
           v-show="
@@ -257,12 +275,15 @@ function delGroup(multName, groupName) {
           <Subtitle
             :subtitle="`${multName.replaceAll('-', ' ')} #${+groupName + 1}`"
           />
-          <template v-for="(setting, settingName, settingId) in group">
-            <Fields :setting="setting" :tabId="props.tabId" />
+          <template
+            :key="settingName"
+            v-for="(setting, settingName, settingId) in group"
+          >
+            <Fields :setting="setting" />
           </template>
           <ButtonGroup
-            @click="delGroup(multName, groupName)"
-            :buttons="[buttonDelete]"
+            @click="delGroup(group, multName, groupName)"
+            :buttons="[setDeleteState(group)]"
           />
         </Container>
       </template>

src/client/vite/src/components/Widget/Filter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, reactive } from "vue";
+import { defineProps, reactive, watch } from "vue";
 import Container from "@components/Widget/Container.vue";
 
 import Input from "@components/Forms/Field/Input.vue";
@@ -73,6 +73,12 @@ const filters = reactive({
   base: JSON.parse(JSON.stringify(props.filters)),
 });
 
+watch(props.data, () => {
+  filters.base.forEach((filter) => {
+    filterData(filter, filter.value);
+  });
+});
+
 function filterData(filter, value) {
   // Loop on filter.base and update the "value" key when matching filterName
   filters.base.forEach((f) => {
@@ -92,25 +98,14 @@ function filterData(filter, value) {
   // Specific settings filtering from advanced template
   const filterSettings = getFilters.filter((f) => f.filter === "settings");
   if (filterSettings.length) {
-    template.forEach((plugin, id) => {
-      // loop on plugin settings dict
-      const settings = [];
-      for (const [key, value] of Object.entries(plugin.settings)) {
-        // add to value the key as setting_name
-        settings.push({ ...value, setting_name: key });
-      }
-      const filterSettingsData = useFilter(settings, filterSettings);
-      // Transform list of dict by a dict of dict with setting_name as key and add update plugin settings
-      const settingsData = {};
-      filterSettingsData.forEach((setting) => {
-        settingsData[setting.setting_name] = setting;
-      });
-      template[id].settings = settingsData;
-    });
-
-    // Case no settings found, remove plugin
+    filterRegularSettings(filterSettings, template);
+    filterMultiplesSettings(filterSettings, template);
+    // Case no settings or multiple found, remove plugin
     template = template.filter((plugin) => {
-      return Object.keys(plugin.settings).length > 0;
+      return (
+        Object.keys(plugin?.settings || {}).length > 0 ||
+        Object.keys(plugin?.multiples || {}).length > 0
+      );
     });
   }
 
@@ -138,6 +133,54 @@ function filterData(filter, value) {
 
   emits("filter", template);
 }
+
+function filterRegularSettings(filterSettings, template) {
+  template.forEach((plugin, id) => {
+    // loop on plugin settings dict
+    const settings = [];
+    for (const [key, value] of Object.entries(plugin.settings)) {
+      // add to value the key as setting_name
+      settings.push({ ...value, setting_name: key });
+    }
+    const filterSettingsData = useFilter(settings, filterSettings);
+    // Transform list of dict by a dict of dict with setting_name as key and add update plugin settings
+    const settingsData = {};
+    filterSettingsData.forEach((setting) => {
+      settingsData[setting.setting_name] = setting;
+    });
+    template[id].settings = settingsData;
+  });
+}
+
+function filterMultiplesSettings(filterSettings, template) {
+  template.forEach((plugin, id) => {
+    // loop on plugin settings dict
+    const filterMultiple = {};
+    const multiples = plugin?.multiples;
+    if (!multiples || Object.keys(multiples).length <= 0) return;
+    for (const [multName, multGroups] of Object.entries(multiples)) {
+      for (const [groupId, groupSettings] of Object.entries(multGroups)) {
+        // Check if inpid is mathing a groupSettings key
+        const settings = [];
+        for (const [key, value] of Object.entries(groupSettings)) {
+          settings.push({ ...value, setting_name: key });
+        }
+        const filterSettingsData = useFilter(settings, filterSettings);
+        const settingsData = {};
+        filterSettingsData.forEach((setting) => {
+          settingsData[setting.setting_name] = setting;
+          delete settingsData[setting.setting_name]?.setting_name;
+        });
+        // Check if at least one setting is matching
+        if (Object.keys(settingsData).length > 0) {
+          if (!filterMultiple[multName]) filterMultiple[multName] = {};
+          filterMultiple[multName][groupId] = settingsData;
+        }
+      }
+    }
+    template[id].multiples = filterMultiple;
+  });
+}
 </script>
 
 <template>