refactor temp update + add it on easy mode

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

@@ -11,7 +11,13 @@ import Button from "@components/Widget/Button.vue";
 import Text from "@components/Widget/Text.vue";
 import { v4 as uuidv4 } from "uuid";
 import { plugin_types } from "@utils/variables";
-import { useFilter, useCheckPluginsValidity } from "@utils/form.js";
+import {
+  useFilter,
+  useCheckPluginsValidity,
+  useUpdateTempSettings,
+  useListenTemp,
+  useUnlistenTemp,
+} from "@utils/form.js";
 /**
   @name Form/Advanced.vue
   @description This component is used to create a complete advanced form with plugin selection.
@@ -174,6 +180,11 @@ function getPluginNames(template) {
   }
 }
 
+function updateTemplate(e) {
+  if (!e.target.closest("[data-advanced-form-plugin]")) return;
+  useUpdateTempSettings(e, data.base);
+}
+
 const comboboxPlugin = {
   id: uuidv4(),
   name: uuidv4(),
@@ -253,62 +264,19 @@ const buttonSave = {
   containerClass: "flex justify-center",
 };
 
-function updateInp(e) {
-  // Check if target is child of data-advanced-form
-  if (!e.target.closest("[data-advanced-form-plugin]")) return;
-
-  // Wait some ms that previous update logic is done like datepicker
-  setTimeout(() => {
-    let inpId, inpValue;
-
-    // Case target is input (a little different for datepicker)
-    if (e.target.tagName === "INPUT") {
-      inpId = e.target.id;
-      inpValue = e.target.hasAttribute("data-timestamp")
-        ? e.target.getAttribute("data-timestamp")
-        : e.target.value;
-    }
-
-    // Case target is select
-    if (
-      e.target.closest("[data-field-container]") &&
-      e.target.hasAttribute("data-setting-id") &&
-      e.target.hasAttribute("data-setting-value")
-    ) {
-      inpId = e.target.getAttribute("data-setting-id");
-      inpValue = e.target.getAttribute("data-setting-value");
-    }
-
-    // Case target is not an input-like
-    if (!inpId) return;
-
-    data.base.find((plugin) => {
-      const settings = plugin["settings"];
-      // loop on each settings from plugin
-      for (const [key, value] of Object.entries(settings)) {
-        if (value.id === inpId) {
-          value.value = inpValue;
-        }
-      }
-    });
-  }, 50);
-}
-
 onMounted(() => {
   // Get first props.forms template name
   data.currPlugin = getFirstPlugin(props.template);
   data.plugins = getPluginNames(props.template);
   setValidity();
   // Store update data on
-  window.addEventListener("input", updateInp);
-  window.addEventListener("change", updateInp);
-  window.addEventListener("click", updateInp);
+
+  // I want updatInp to access event, data.base and the container attribut
+  useListenTemp(updateTemplate);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("input", updateInp);
-  window.removeEventListener("change", updateInp);
-  window.removeEventListener("click", updateInp);
+  useUnlistenTemp(updateTemplate);
 });
 </script>
 

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

@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, reactive, onMounted, computed } from "vue";
+import { defineProps, reactive, onMounted, onUnmounted, computed } from "vue";
 import Container from "@components/Widget/Container.vue";
 import Fields from "@components/Form/Fields.vue";
 import Title from "@components/Widget/Title.vue";
@@ -8,7 +8,12 @@ import Flex from "@components/Widget/Flex.vue";
 import Button from "@components/Widget/Button.vue";
 import Text from "@components/Widget/Text.vue";
 import { v4 as uuidv4 } from "uuid";
-import { useCheckPluginsValidity } from "@utils/form.js";
+import {
+  useCheckPluginsValidity,
+  useUpdateTempSettings,
+  useListenTemp,
+  useUnlistenTemp,
+} from "@utils/form.js";
 
 /**
   @name Form/Easy.vue
@@ -82,13 +87,17 @@ function setValidity() {
   const [isRegErr, isReqErr, settingErr, pluginErr, id] =
     useCheckPluginsValidity(data.base);
 
-  console.log(isRegErr, isReqErr, settingErr, pluginErr, id);
   data.stepErr = id;
   data.isRegErr = isRegErr;
   data.isReqErr = isReqErr;
   data.settingErr = settingErr;
 }
 
+function updateTemplate(e) {
+  if (!e.target.closest("[data-easy-form-step]")) return;
+  useUpdateTempSettings(e, data.base);
+}
+
 const buttonSave = {
   id: uuidv4(),
   text: "action_save",
@@ -116,6 +125,11 @@ onMounted(() => {
   // Restart step one every time the component is mounted
   data.currStep = 0;
   setValidity();
+  useListenTemp(updateTemplate);
+});
+
+onUnmounted(() => {
+  useUnlistenTemp(updateTemplate);
 });
 </script>
 
@@ -130,8 +144,12 @@ onMounted(() => {
     <Title type="card" :title="'dashboard_easy_mode'" />
     <Subtitle type="card" :subtitle="'dashboard_easy_mode_subtitle'" />
 
-    <template v-for="(step, id) in props.template">
-      <Container v-if="data.currStep === id" class="col-span-12 w-full">
+    <template v-for="(step, id) in data.base">
+      <Container
+        data-easy-form-step
+        v-if="data.currStep === id"
+        class="col-span-12 w-full"
+      >
         <Title
           type="card"
           :title="

vuejs/client/src/utils/form.js

@@ -298,10 +298,63 @@ function useCheckPluginsValidity(template) {
   return [isRegErr, isReqErr, settingErr, pluginErr, id];
 }
 
+function useListenTemp(handler) {
+  window.addEventListener("input", handler);
+  window.addEventListener("change", handler);
+  window.addEventListener("click", handler);
+}
+
+function useUnlistenTemp(handler) {
+  window.removeEventListener("input", handler);
+  window.removeEventListener("change", handler);
+  window.removeEventListener("click", handler);
+}
+
+function useUpdateTempSettings(e, template) {
+  // Wait some ms that previous update logic is done like datepicker
+  setTimeout(() => {
+    let inpId, inpValue;
+
+    // Case target is input (a little different for datepicker)
+    if (e.target.tagName === "INPUT") {
+      inpId = e.target.id;
+      inpValue = e.target.hasAttribute("data-timestamp")
+        ? e.target.getAttribute("data-timestamp")
+        : e.target.value;
+    }
+
+    // Case target is select
+    if (
+      e.target.closest("[data-field-container]") &&
+      e.target.hasAttribute("data-setting-id") &&
+      e.target.hasAttribute("data-setting-value")
+    ) {
+      inpId = e.target.getAttribute("data-setting-id");
+      inpValue = e.target.getAttribute("data-setting-value");
+    }
+
+    // Case target is not an input-like
+    if (!inpId) return;
+
+    template.find((plugin) => {
+      const settings = plugin["settings"];
+      // loop on each settings from plugin
+      for (const [key, value] of Object.entries(settings)) {
+        if (value.id === inpId) {
+          value.value = inpValue;
+        }
+      }
+    });
+  }, 50);
+}
+
 export {
   useForm,
   useFilter,
   isItemKeyword,
   isItemSelect,
   useCheckPluginsValidity,
+  useUpdateTempSettings,
+  useListenTemp,
+  useUnlistenTemp,
 };