add validity check on easy mode

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

@@ -11,7 +11,7 @@ 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 } from "@utils/form.js";
+import { useFilter, useCheckPluginsValidity } from "@utils/form.js";
 /**
   @name Form/Advanced.vue
   @description This component is used to create a complete advanced form with plugin selection.
@@ -78,33 +78,12 @@ const data = reactive({
   pluginErr: "",
   // Add filtering and check validity with regex and required
   format: computed(() => {
+    // Check validity
+    setValidity();
+
     // Deep copy
     const template = JSON.parse(JSON.stringify(data.base));
 
-    // Check validity
-    data.isReqErr = false;
-    data.isRegErr = false;
-
-    template.forEach((plugin) => {
-      for (const [key, value] of Object.entries(plugin.settings)) {
-        if (value.required && !value.value) {
-          data.isReqErr = true;
-          data.settingErr = key;
-          data.pluginErr = plugin.name;
-          break;
-        }
-        if (value.pattern && value.value) {
-          const regex = new RegExp(value.pattern);
-          if (!regex.test(value.value)) {
-            data.isRegErr = true;
-            data.settingErr = key;
-            data.pluginErr = plugin.name;
-            break;
-          }
-        }
-      }
-    });
-
     // Add filter logic
     const filterPlugin = [
       {
@@ -164,6 +143,15 @@ const data = reactive({
   }),
 });
 
+function setValidity() {
+  const [isRegErr, isReqErr, settingErr, pluginErr, id] =
+    useCheckPluginsValidity(data.base);
+  data.isRegErr = isRegErr;
+  data.isReqErr = isReqErr;
+  data.settingErr = settingErr;
+  data.pluginErr = pluginErr;
+}
+
 function getFirstPlugin(template) {
   try {
     return template[0]["name"];
@@ -310,6 +298,7 @@ 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);
@@ -372,11 +361,11 @@ onUnmounted(() => {
       :textClass="'setting-error'"
       :text="
         data.isReqErr
-          ? $t('inp_plugin_setting_required', {
+          ? $t('dashboard_advanced_required', {
               plugin: data.pluginErr,
               setting: data.settingErr,
             })
-          : $t('inp_plugin_setting_invalid', {
+          : $t('dashboard_advanced_invalid', {
               plugin: data.pluginErr,
               setting: data.settingErr,
             })

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

@@ -1,12 +1,15 @@
 <script setup>
-import { defineProps, reactive, onMounted, computed, KeepAlive } from "vue";
+import { defineProps, reactive, onMounted, computed } from "vue";
 import Container from "@components/Widget/Container.vue";
 import Fields from "@components/Form/Fields.vue";
 import Title from "@components/Widget/Title.vue";
 import Subtitle from "@components/Widget/Subtitle.vue";
 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";
+
 /**
   @name Form/Easy.vue
   @description This component is used to create a complete easy form with plugin selection.
@@ -61,12 +64,31 @@ const props = defineProps({
 });
 
 const data = reactive({
+  base: JSON.parse(JSON.stringify(props.template)),
   currStep: 0,
   totalSteps: Object.keys(props.template).length,
   isFinalStep: computed(() => data.currStep === data.totalSteps - 1),
   isFirstStep: computed(() => data.currStep === 0),
+  isRegErr: false,
+  isReqErr: false,
+  settingErr: "",
+  stepErr: "",
+  checkValidity: computed(() => {
+    setValidity();
+  }),
 });
 
+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;
+}
+
 const buttonSave = {
   id: uuidv4(),
   text: "action_save",
@@ -93,6 +115,7 @@ const buttonNext = {
 onMounted(() => {
   // Restart step one every time the component is mounted
   data.currStep = 0;
+  setValidity();
 });
 </script>
 
@@ -108,21 +131,28 @@ onMounted(() => {
     <Subtitle type="card" :subtitle="'dashboard_easy_mode_subtitle'" />
 
     <template v-for="(step, id) in props.template">
-      <KeepAlive>
-        <Container v-if="data.currStep === id" class="col-span-12 w-full">
-          <Title type="card" :title="step.title" />
-          <Subtitle type="card" :subtitle="step.subtitle" />
+      <Container v-if="data.currStep === id" class="col-span-12 w-full">
+        <Title
+          type="card"
+          :title="
+            $t('dashboard_easy_mode_title', {
+              step: id + 1,
+              total: data.totalSteps,
+              name: step.title,
+            })
+          "
+        />
+        <Subtitle type="card" :subtitle="step.subtitle" />
 
-          <Container class="grid grid-cols-12 w-full relative">
-            <template
-              v-for="(setting, name, index) in step.settings"
-              :key="index"
-            >
-              <Fields :setting="setting" />
-            </template>
-          </Container>
+        <Container class="grid grid-cols-12 w-full relative">
+          <template
+            v-for="(setting, name, index) in step.settings"
+            :key="index"
+          >
+            <Fields :setting="setting" />
+          </template>
         </Container>
-      </KeepAlive>
+      </Container>
     </template>
     <Flex :flexClass="'justify-center'">
       <Button
@@ -137,7 +167,25 @@ onMounted(() => {
         :disabled="data.isFinalStep"
         v-bind="buttonNext"
       />
-      <Button :disabled="!data.isFinalStep" v-bind="buttonSave" />
+      <Button
+        :disabled="!data.isFinalStep || data.isRegErr || data.isReqErr"
+        v-bind="buttonSave"
+      />
     </Flex>
+    <Text
+      v-if="data.isRegErr || data.isReqErr"
+      :textClass="'setting-error'"
+      :text="
+        data.isReqErr
+          ? $t('dashboard_easy_required', {
+              step: data.stepErr,
+              setting: data.settingErr,
+            })
+          : $t('dashboard_easy_invalid', {
+              step: data.stepErr,
+              setting: data.settingErr,
+            })
+      "
+    />
   </Container>
 </template>

vuejs/client/src/lang/en.json

@@ -84,11 +84,16 @@
   "dashboard_status_info": "status loading or waiting or unknown.",
   "dashboard_raw_mode": "raw mode",
   "dashboard_raw_mode_subtitle": "Raw mode shows settings as raw key-value pairs of settings.",
-  "dashboard_raw_invalid": "Invalid raw format.",
+  "dashboard_raw_invalid": "raw format is invalid",
   "dashboard_advanced_mode": "Advanced mode",
   "dashboard_advanced_mode_subtitle": "Advanced mode show settings by plugin in dedicated fields.",
+  "dashboard_advanced_invalid": "{plugin} {setting} is invalid",
+  "dashboard_advanced_required": "{plugin} {setting} is required",
   "dashboard_easy_mode" : "Easy mode",
+  "dashboard_easy_mode_title": "Step {step} of {total}  -  {name}",
   "dashboard_easy_mode_subtitle": "Easy mode will guide you using steps and additional information to help you configure your settings.",
+  "dashboard_easy_invalid": "{setting} in the step {step} is invalid",
+  "dashboard_easy_required": "{setting} in the step {step} is required",
   "inp_input_valid": "input valid",
   "inp_input_error_required": "input is required",
   "inp_input_error": "input is invalid",
@@ -113,8 +118,6 @@
   "inp_editor_desc" : "Editor input behaving like a code editor.",
   "inp_input_clipboard_copied": "copied to clipboard",
   "inp_input_clipboard_desc": "Copy to clipboard on click.",
-  "inp_plugin_setting_invalid": "{plugin} {setting} is invalid",
-  "inp_plugin_setting_required": "{plugin} {setting} is required",
   "action_send": "send {name}",
   "action_start": "start {name}",
   "action_disable": "disable {name}",

vuejs/client/src/pages/global-config/globalConfig.vue

@@ -9465,7 +9465,7 @@ const data = {
               mobile: 12,
             },
             disabled: false,
-            value: "yes",
+            value: "yeds",
             popovers: [
               {
                 iconColor: "orange",
@@ -9535,7 +9535,7 @@ const data = {
               mobile: 12,
             },
             disabled: false,
-            value: "yes",
+            value: "ydsssses",
             popovers: [
               {
                 iconColor: "orange",

vuejs/client/src/utils/form.js

@@ -250,4 +250,58 @@ function isItemSelect(filters, item) {
   return false;
 }
 
-export { useForm, useFilter, isItemKeyword, isItemSelect };
+/**
+  @name useCheckPluginsValidity
+  @description  Check all items keys if at least one match exactly the filter value.
+  @example 
+    const template = [
+  {
+    name: "test",
+    settings: {
+      test: {
+        required: true,
+        value: "",
+        pattern: "^[a-zA-Z0-9]*$",
+      },
+    },
+  },
+  @param template - Template with plugins list and detail settings
+*/
+function useCheckPluginsValidity(template) {
+  let isRegErr = false;
+  let isReqErr = false;
+  let settingErr = "";
+  let pluginErr = "";
+  let id = 0;
+
+  template.forEach((plugin, index) => {
+    id = index;
+    for (const [key, value] of Object.entries(plugin.settings)) {
+      if (value.required && !value.value) {
+        isReqErr = true;
+        settingErr = key;
+        pluginErr = plugin.name;
+        break;
+      }
+      if (value.pattern && value.value) {
+        const regex = new RegExp(value.pattern);
+        if (!regex.test(value.value)) {
+          isRegErr = true;
+          settingErr = key;
+          pluginErr = plugin.name;
+          break;
+        }
+      }
+    }
+  });
+
+  return [isRegErr, isReqErr, settingErr, pluginErr, id];
+}
+
+export {
+  useForm,
+  useFilter,
+  isItemKeyword,
+  isItemSelect,
+  useCheckPluginsValidity,
+};