mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
update easy mode store and component
* Format easy mode in order to handle multiple settings * Add Multiple to easy mode component * Update store to handle update setting regular on easy mode * Update store to handle update setting multiple on easy mode * Update store to handle add multiple on easy mode
This commit is contained in:
Jordan Blasenhauer
parent
e206257d2e
commit
204fbee3ff
5 changed files with 328 additions and 23 deletions
|
|
@ -241,7 +241,7 @@ function updateStates() {
|
|||
*/
|
||||
function setValidity() {
|
||||
const [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr, id] =
|
||||
useCheckPluginsValidity(advancedForm.templateBase);
|
||||
useCheckPluginsValidity(advancedForm.templateBase, "advanced");
|
||||
data.isRegErr = isRegErr;
|
||||
data.isReqErr = isReqErr;
|
||||
data.settingErr = settingErr;
|
||||
|
|
@ -357,8 +357,8 @@ onUnmounted(() => {
|
|||
data.isReqErr || data.isRegErr
|
||||
? true
|
||||
: advancedForm.isUpdateData
|
||||
? false
|
||||
: true
|
||||
? false
|
||||
: true
|
||||
"
|
||||
@click="advancedForm.submit()"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import Title from "@components/Widget/Title.vue";
|
|||
import Subtitle from "@components/Widget/Subtitle.vue";
|
||||
import Button from "@components/Widget/Button.vue";
|
||||
import Text from "@components/Widget/Text.vue";
|
||||
import GroupMultiple from "@components/Forms/Group/Multiple.vue";
|
||||
import MessageUnmatch from "@components/Message/Unmatch.vue";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { useCheckPluginsValidity } from "@utils/global.js";
|
||||
|
|
@ -113,7 +114,7 @@ watch(
|
|||
*/
|
||||
function setValidity() {
|
||||
const [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr, id] =
|
||||
useCheckPluginsValidity(easyForm.templateUI);
|
||||
useCheckPluginsValidity(easyForm.templateUI, "easy");
|
||||
|
||||
data.stepErr = id + 1;
|
||||
data.isRegErr = isRegErr;
|
||||
|
|
@ -220,11 +221,21 @@ onUnmounted(() => {
|
|||
<Subtitle type="content" :subtitle="step.subtitle" />
|
||||
|
||||
<Container class="layout-settings min-h-[300px]">
|
||||
<template
|
||||
v-for="(setting, name, index) in step.settings"
|
||||
:key="name"
|
||||
>
|
||||
<Fields :setting="setting" />
|
||||
<template v-for="plugin in step.plugins">
|
||||
<template
|
||||
v-for="(setting, name, index) in plugin.settings"
|
||||
:key="name"
|
||||
>
|
||||
<Fields :setting="setting" />
|
||||
</template>
|
||||
<GroupMultiple
|
||||
@delete="
|
||||
(multName, groupName) =>
|
||||
easyForm.delMultiple(plugin.id, multName, groupName)
|
||||
"
|
||||
@add="(multName) => easyForm.addMultiple(plugin.id, multName)"
|
||||
:multiples="plugin.multiples"
|
||||
/>
|
||||
</template>
|
||||
</Container>
|
||||
</Container>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -103,12 +103,12 @@ export const createFormStore = (storeName, formType) => {
|
|||
|
||||
// Get the index of plugin using pluginId
|
||||
const index = templateBase.value.findIndex(
|
||||
(plugin) => plugin.id === pluginId,
|
||||
(plugin) => plugin.id === pluginId
|
||||
);
|
||||
|
||||
// For back end, we need to keep the group but updating values to default in order to delete it
|
||||
for (const [settName, setting] of Object.entries(
|
||||
templateBase.value[index].multiples[multName][groupName],
|
||||
templateBase.value[index].multiples[multName][groupName]
|
||||
)) {
|
||||
setting.value = setting.default;
|
||||
}
|
||||
|
|
@ -120,7 +120,7 @@ export const createFormStore = (storeName, formType) => {
|
|||
|
||||
/**
|
||||
* @name addMultiple
|
||||
* @description This function will add a group of multiple in the template with default values.
|
||||
* @description This function is a wrapper for any mode that will add a group of multiple in the template with default values.
|
||||
* Each plugin has a key "multiples_schema" with each multiples group and their default values.
|
||||
* We will retrieve the wanted multiple group and add it on the "multiples" key that contains the multiples that apply to the plugin.
|
||||
* @param {string} pluginId - id of the plugin on the template array.
|
||||
|
|
@ -129,21 +129,37 @@ export const createFormStore = (storeName, formType) => {
|
|||
*/
|
||||
function addMultiple(pluginId, multName) {
|
||||
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
|
||||
if (type.value === "advanced")
|
||||
return _addMultipleAdvanced(pluginId, multName);
|
||||
if (type.value === "easy") return _addMultipleEasy(pluginId, multName);
|
||||
}
|
||||
|
||||
/**
|
||||
* @name _addMultipleAdvanced
|
||||
* @description This function will add a group of multiple in the template with default values.
|
||||
* Each plugin has a key "multiples_schema" with each multiples group and their default values.
|
||||
* We will retrieve the wanted multiple group and add it on the "multiples" key that contains the multiples that apply to the plugin.
|
||||
* @param {string} pluginId - id of the plugin on the template array.
|
||||
* @param {string} multName - multiple group name to add
|
||||
* @returns {void}
|
||||
*/
|
||||
function _addMultipleAdvanced(pluginId, multName) {
|
||||
if (!_isFormTypeAllowed(["advanced"])) return;
|
||||
|
||||
// Get the index of plugin using pluginId
|
||||
const index = templateBase.value.findIndex(
|
||||
(plugin) => plugin.id === pluginId,
|
||||
(plugin) => plugin.id === pluginId
|
||||
);
|
||||
// Get the right multiple schema
|
||||
const multipleSchema = JSON.parse(
|
||||
JSON.stringify(templateBase.value[index]?.multiples_schema[multName]),
|
||||
JSON.stringify(templateBase.value[index]?.multiples_schema[multName])
|
||||
);
|
||||
const newMultiple = {};
|
||||
|
||||
// Get the highest id in Object.keys(plugin?.multiples[multName])
|
||||
const nextGroupId =
|
||||
Math.max(
|
||||
...Object.keys(templateBase.value[index]?.multiples[multName]),
|
||||
...Object.keys(templateBase.value[index]?.multiples[multName])
|
||||
) + 1;
|
||||
|
||||
// Set the default values as value
|
||||
|
|
@ -160,6 +176,64 @@ export const createFormStore = (storeName, formType) => {
|
|||
_updateTempState();
|
||||
}
|
||||
|
||||
/**
|
||||
* @name _addMultipleEasy
|
||||
* @description This function will add a group of multiple in the template with default values.
|
||||
* Each plugin has a key "multiples_schema" with each multiples group and their default values.
|
||||
* We will retrieve the wanted multiple group and add it on the "multiples" key that contains the multiples that apply to the plugin.
|
||||
* @param {string} pluginId - id of the plugin on the template array.
|
||||
* @param {string} multName - multiple group name to add
|
||||
* @returns {void}
|
||||
*/
|
||||
function _addMultipleEasy(pluginId, multName) {
|
||||
if (!_isFormTypeAllowed(["easy"])) return;
|
||||
|
||||
console.log(pluginId, multName);
|
||||
for (let i = 0; i < templateBase.value.length; i++) {
|
||||
const step = templateBase.value[i];
|
||||
if (!"plugins" in step) continue;
|
||||
const plugins = step.plugins;
|
||||
// Get the index of plugin using pluginId
|
||||
const index = plugins.findIndex((plugin) => plugin.id === pluginId);
|
||||
// Case no plugin found, continue
|
||||
if (index < 0) continue;
|
||||
|
||||
// Get the right multiple schema
|
||||
const multipleSchema = JSON.parse(
|
||||
JSON.stringify(
|
||||
templateBase.value[i]["plugins"][index]?.multiples_schema[multName]
|
||||
)
|
||||
);
|
||||
const newMultiple = {};
|
||||
|
||||
// Get the highest id in Object.keys(plugin?.multiples[multName])
|
||||
const nextGroupId =
|
||||
Math.max(
|
||||
...Object.keys(
|
||||
templateBase.value[i]["plugins"][index]?.multiples[multName]
|
||||
)
|
||||
) + 1;
|
||||
|
||||
// Set the default values as value
|
||||
for (const [key, value] of Object.entries(multipleSchema)) {
|
||||
value.value = value.default;
|
||||
newMultiple[`${key}${nextGroupId > 0 ? "_" + nextGroupId : ""}`] =
|
||||
value;
|
||||
}
|
||||
// Add new group as first key of plugin.multiples.multName
|
||||
templateBase.value[i]["plugins"][index].multiples[multName][
|
||||
nextGroupId
|
||||
] = newMultiple;
|
||||
// We need to show the new group on UI too
|
||||
templateUI.value[i]["plugins"][index].multiples[multName][nextGroupId] =
|
||||
newMultiple;
|
||||
updateCount.value++;
|
||||
break;
|
||||
}
|
||||
|
||||
_updateTempState();
|
||||
}
|
||||
|
||||
/**
|
||||
* @name useListenTempFields
|
||||
* @description This will add an handler to all needed event listeners to listen to input, select... fields in order to update the template settings.
|
||||
|
|
@ -219,10 +293,12 @@ export const createFormStore = (storeName, formType) => {
|
|||
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
|
||||
|
||||
const templates = [templateBase.value, templateUI.value];
|
||||
|
||||
// Filter to avoid multiple calls
|
||||
if (!e.target.closest("[data-is='form']")) return;
|
||||
if (!e.target?.closest("[data-is='form']")) return;
|
||||
if (e.type === "change" && e.target.tagName === "INPUT") return;
|
||||
// Wait some ms that previous update logic is done like datepicker
|
||||
|
||||
setTimeout(() => {
|
||||
let inpId, inpValue;
|
||||
|
||||
|
|
@ -246,7 +322,6 @@ export const createFormStore = (storeName, formType) => {
|
|||
|
||||
// Case target is not an input-like
|
||||
if (!inpId) return;
|
||||
|
||||
// update settings
|
||||
_useUpdateTempSettings(templates, inpId, inpValue, e.target);
|
||||
_useUpdateTempMultiples(templates, inpId, inpValue, e.target);
|
||||
|
|
@ -256,7 +331,7 @@ export const createFormStore = (storeName, formType) => {
|
|||
|
||||
/**
|
||||
* @name _useUpdateTempSettings
|
||||
* @description This function will loop on template settings in order to update the setting value.
|
||||
* @description This function is a wrapper to work with any mode that will loop on template settings in order to update the setting value.
|
||||
* This will check each plugin.settings (what I call regular) instead of other type of settings like multiples (in plugin.multiples).
|
||||
* This function needs to be call in _useUpdateTemp.
|
||||
* @param {array} templates - Templates array with plugins list and detail settings
|
||||
|
|
@ -270,6 +345,29 @@ export const createFormStore = (storeName, formType) => {
|
|||
// Case get data-group attribute, this is not a regular setting
|
||||
if (target.closest("[data-group]")) return;
|
||||
|
||||
if (type.value === "easy")
|
||||
return _useUpdateTempSettingsEasy(templates, inpId, inpValue, target);
|
||||
if (type.value === "advanced")
|
||||
return _useUpdateTempSettingsAdvanced(
|
||||
templates,
|
||||
inpId,
|
||||
inpValue,
|
||||
target
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @name _useUpdateTempSettingsAdvanced
|
||||
* @description This function will loop on template settings in order to update the setting value.
|
||||
* This will check each plugin.settings (what I call regular) instead of other type of settings like multiples (in plugin.multiples).
|
||||
* @param {array} templates - Templates array with plugins list and detail settings
|
||||
* @param {string|number} inpId - Input id to update
|
||||
* @param {string|number} inpValue - Input value to update
|
||||
* @returns {void}
|
||||
*/
|
||||
function _useUpdateTempSettingsAdvanced(templates, inpId, inpValue) {
|
||||
if (!_isFormTypeAllowed(["advanced"])) return;
|
||||
|
||||
for (let i = 0; i < templates.length; i++) {
|
||||
const template = templates[i];
|
||||
|
||||
|
|
@ -291,20 +389,91 @@ export const createFormStore = (storeName, formType) => {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @name _useUpdateTempSettingsEasy
|
||||
* @description This function will loop on template settings in order to update the setting value.
|
||||
* This will check each plugin.settings (what I call regular) instead of other type of settings like multiples (in plugin.multiples).
|
||||
* @param {array} templates - Templates array with plugins list and detail settings
|
||||
* @param {string|number} inpId - Input id to update
|
||||
* @param {string|number} inpValue - Input value to update
|
||||
* @returns {void}
|
||||
*/
|
||||
function _useUpdateTempSettingsEasy(templates, inpId, inpValue) {
|
||||
if (!_isFormTypeAllowed(["easy"])) return;
|
||||
|
||||
for (let i = 0; i < templates.length; i++) {
|
||||
const template = templates[i];
|
||||
|
||||
// Try to update settings
|
||||
let isSettingUpdated = false;
|
||||
|
||||
for (let i = 0; i < template.length; i++) {
|
||||
const step = template[i];
|
||||
if (!("plugins" in step)) continue;
|
||||
const plugins = step.plugins;
|
||||
if (plugins.length <= 0) continue;
|
||||
|
||||
for (let j = 0; j < plugins.length; j++) {
|
||||
const plugin = plugins[j];
|
||||
const settings = plugin?.settings;
|
||||
if (!settings) continue;
|
||||
for (const [key, value] of Object.entries(settings)) {
|
||||
if (value.id === inpId) {
|
||||
value.value = inpValue;
|
||||
isSettingUpdated = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (isSettingUpdated) break;
|
||||
}
|
||||
if (isSettingUpdated) break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @name _useUpdateTempMultiples
|
||||
* @description This function will loop on template multiples in order to update the setting value.
|
||||
* @description This function is wrapper for any mode that will loop on template multiples in order to update the setting value.
|
||||
* This will check each plugin.multiples that can be found in the template.
|
||||
* This function needs to be call in _useUpdateTemp.
|
||||
* @param {array} templates - Templates array with plugins list and detail settings
|
||||
* @param {string|number} inpId - Input id to update
|
||||
* @param {string|number} inpValue - Input value to update
|
||||
* @param {event} target - Target element that trigger the event
|
||||
* @returns {void}
|
||||
*/
|
||||
function _useUpdateTempMultiples(templates, inpId, inpValue, target) {
|
||||
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
|
||||
// Case get data-group attribute, this is not a regular setting
|
||||
if (!target.closest("[data-group='multiple']")) return;
|
||||
|
||||
if (type.value === "easy")
|
||||
return _useUpdateTempMultiplesEasy(templates, inpId, inpValue, target);
|
||||
if (type.value === "advanced")
|
||||
return _useUpdateTempMultiplesAdvanced(
|
||||
templates,
|
||||
inpId,
|
||||
inpValue,
|
||||
target
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @name _useUpdateTempMultiplesAdvanced
|
||||
* @description This function will loop on template multiples in order to update the setting value.
|
||||
* This will check each plugin.multiples that can be found in the template.
|
||||
* @param {array} templates - Templates array with plugins list and detail settings
|
||||
* @param {string|number} inpId - Input id to update
|
||||
* @param {string|number} inpValue - Input value to update
|
||||
* @param {event} target - Target element that trigger the event
|
||||
* @returns {void}
|
||||
*/
|
||||
function _useUpdateTempMultiplesAdvanced(
|
||||
templates,
|
||||
inpId,
|
||||
inpValue,
|
||||
target
|
||||
) {
|
||||
const multName =
|
||||
target
|
||||
.closest("[data-group='multiple']")
|
||||
|
|
@ -321,6 +490,7 @@ export const createFormStore = (storeName, formType) => {
|
|||
// Case we found the inpId, we update the value
|
||||
// Case we didn't find existing inpId, we create a new one
|
||||
let isSettingUpdated = false;
|
||||
|
||||
for (let i = 0; i < template.length; i++) {
|
||||
const plugin = template[i];
|
||||
const multiples = plugin?.multiples;
|
||||
|
|
@ -342,6 +512,61 @@ export const createFormStore = (storeName, formType) => {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @name _useUpdateTempMultiplesEasy
|
||||
* @description This function will loop on template multiples in order to update the setting value.
|
||||
* This will check each plugin.multiples that can be found in the template.
|
||||
* @param {array} templates - Templates array with plugins list and detail settings
|
||||
* @param {string|number} inpId - Input id to update
|
||||
* @param {string|number} inpValue - Input value to update
|
||||
* @param {event} target - Target element that trigger the event
|
||||
* @returns {void}
|
||||
*/
|
||||
function _useUpdateTempMultiplesEasy(templates, inpId, inpValue, target) {
|
||||
const multName =
|
||||
target
|
||||
.closest("[data-group='multiple']")
|
||||
.getAttribute("data-mult-name") || "";
|
||||
const groupName =
|
||||
target
|
||||
.closest("[data-group='multiple']")
|
||||
.getAttribute("data-group-name") || "";
|
||||
|
||||
for (let i = 0; i < templates.length; i++) {
|
||||
const template = templates[i];
|
||||
|
||||
// Try to update settings
|
||||
let isSettingUpdated = false;
|
||||
|
||||
for (let i = 0; i < template.length; i++) {
|
||||
const step = template[i];
|
||||
if (!("plugins" in step)) continue;
|
||||
const plugins = step.plugins;
|
||||
if (plugins.length <= 0) continue;
|
||||
|
||||
for (let j = 0; j < plugins.length; j++) {
|
||||
const plugin = plugins[j];
|
||||
const multiples = plugin?.multiples;
|
||||
// Case no multiples, continue
|
||||
if (!multiples || Object.keys(multiples).length <= 0) continue;
|
||||
// Check if can find mult name in multiples
|
||||
if (!(multName in multiples)) continue;
|
||||
// Check if can find group name in multiples
|
||||
if (!(groupName in multiples[multName])) continue;
|
||||
const settings = multiples[multName][groupName];
|
||||
for (const [key, value] of Object.entries(settings)) {
|
||||
if (value.id !== inpId) continue;
|
||||
value.value = inpValue;
|
||||
isSettingUpdated = true;
|
||||
break;
|
||||
}
|
||||
if (isSettingUpdated) break;
|
||||
}
|
||||
if (isSettingUpdated) break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @name submit
|
||||
* @description Case we have at least one setting updating, we will allow to submit the form.
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ function useSubmitForm(data) {
|
|||
|
||||
/**
|
||||
* @name useCheckPluginsValidity
|
||||
* @description Check all items keys if at least one match exactly the filter value.
|
||||
* @description This is a wrapper that will call the correct function to check if plugin settings are valid based on the template and mode.
|
||||
* @example
|
||||
* const template = [
|
||||
* {
|
||||
|
|
@ -88,9 +88,28 @@ function useSubmitForm(data) {
|
|||
* },
|
||||
* ];
|
||||
* @param template - Template with plugins list and detail settings
|
||||
* @param {string} mode - Mode to check, can be "advanced", "easy"...
|
||||
* @returns {array} - Array with error flags and error details
|
||||
*/
|
||||
function useCheckPluginsValidity(template) {
|
||||
function useCheckPluginsValidity(template, mode) {
|
||||
let isRegErr = false;
|
||||
let isReqErr = false;
|
||||
let settingErr = "";
|
||||
let pluginErr = "";
|
||||
let settingNameErr = "";
|
||||
let id = 0;
|
||||
|
||||
if (mode === "advanced") return useCheckAdvancedValidity(template);
|
||||
if (mode === "easy") return useCheckEasyValidity(template);
|
||||
}
|
||||
|
||||
/**
|
||||
* @name useCheckAdvancedValidity
|
||||
* @description Check if plugin settings are valid based on the advanced mode.
|
||||
* @param template - Template with plugins list and detail settings
|
||||
* @returns {array} - Array with error flags and error details
|
||||
*/
|
||||
function useCheckAdvancedValidity(template) {
|
||||
let isRegErr = false;
|
||||
let isReqErr = false;
|
||||
let settingErr = "";
|
||||
|
|
@ -124,6 +143,56 @@ function useCheckPluginsValidity(template) {
|
|||
return [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr, id];
|
||||
}
|
||||
|
||||
/**
|
||||
* @name useCheckEasyValidity
|
||||
* @description Check if plugin settings are valid based on the easy mode.
|
||||
* @param template - Template with plugins list and detail settings
|
||||
* @returns {array} - Array with error flags and error details
|
||||
*/
|
||||
function useCheckEasyValidity(template) {
|
||||
let isRegErr = false;
|
||||
let isReqErr = false;
|
||||
let settingErr = "";
|
||||
let pluginErr = "";
|
||||
let settingNameErr = "";
|
||||
let id = 0;
|
||||
|
||||
for (let i = 0; i < template.length; i++) {
|
||||
const step = template[i];
|
||||
id = i;
|
||||
if (!("plugins" in step)) continue;
|
||||
const plugins = step.plugins;
|
||||
if (plugins.length <= 0) continue;
|
||||
|
||||
for (let j = 0; j < plugins.length; j++) {
|
||||
const plugin = plugins[j];
|
||||
const settings = plugin?.settings;
|
||||
if (!settings) continue;
|
||||
for (const [key, value] of Object.entries(settings)) {
|
||||
if (value.required && !value.value) {
|
||||
isReqErr = true;
|
||||
settingErr = key;
|
||||
settingNameErr = value.name;
|
||||
pluginErr = plugin.name;
|
||||
break;
|
||||
}
|
||||
if (value.pattern && value.value) {
|
||||
const regex = new RegExp(value.pattern);
|
||||
if (!regex.test(value.value)) {
|
||||
isRegErr = true;
|
||||
settingErr = key;
|
||||
settingNameErr = value.name;
|
||||
pluginErr = plugin.name;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr, id];
|
||||
}
|
||||
|
||||
/**
|
||||
* @name useUUID
|
||||
* @description This function return a unique identifier using uuidv4 and a random number.
|
||||
|
|
|
|||
Loading…
Reference in a new issue