diff --git a/vuejs/client/src/components/Form/Advanced.vue b/vuejs/client/src/components/Form/Advanced.vue
index 73a2d9d92..f0b9e866c 100644
--- a/vuejs/client/src/components/Form/Advanced.vue
+++ b/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,
})
diff --git a/vuejs/client/src/components/Form/Easy.vue b/vuejs/client/src/components/Form/Easy.vue
index fe4c6baba..5a4184e5b 100644
--- a/vuejs/client/src/components/Form/Easy.vue
+++ b/vuejs/client/src/components/Form/Easy.vue
@@ -1,12 +1,15 @@
@@ -108,21 +131,28 @@ onMounted(() => {
-
-
-
-
+
+
+
-
-
-
-
-
+
+
+
+
-
+
+
diff --git a/vuejs/client/src/lang/en.json b/vuejs/client/src/lang/en.json
index 2d7f88267..efaa61140 100644
--- a/vuejs/client/src/lang/en.json
+++ b/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}",
diff --git a/vuejs/client/src/pages/global-config/globalConfig.vue b/vuejs/client/src/pages/global-config/globalConfig.vue
index c3b0fdee6..67f6f74a8 100644
--- a/vuejs/client/src/pages/global-config/globalConfig.vue
+++ b/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",
diff --git a/vuejs/client/src/utils/form.js b/vuejs/client/src/utils/form.js
index e03305d71..cb0679051 100644
--- a/vuejs/client/src/utils/form.js
+++ b/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,
+};