mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
enhance form store and components
* add draft state select on templates component * add possibility to switch between modes on /modes page * update form store to retrieve the current draft state if updated * update each mode builder to fit new params and data
This commit is contained in:
Jordan Blasenhauer
parent
ec287ae44a
commit
7e59c11f41
9 changed files with 384 additions and 17 deletions
|
|
@ -1,13 +1,111 @@
|
|||
from .utils.form import get_forms, get_service_settings
|
||||
from typing import Union
|
||||
|
||||
|
||||
def advanced_mode_builder(templates: list[dict], plugins: list, global_config: dict, total_config: dict, service_name: str, is_new: bool = False) -> str:
|
||||
def advanced_mode_builder(
|
||||
templates: list[dict],
|
||||
plugins: list,
|
||||
global_config: dict,
|
||||
total_config: dict,
|
||||
operation: str,
|
||||
mode: str,
|
||||
service_name: str,
|
||||
is_new: bool = False,
|
||||
is_draft: Union[None, bool] = False,
|
||||
) -> str:
|
||||
"""Render forms with global config data.
|
||||
ATM we don't need templates but we need to pass at least one to the function (it will simply not override anything).
|
||||
"""
|
||||
settings = get_service_settings(service_name, global_config, total_config)
|
||||
|
||||
builder = [
|
||||
{
|
||||
"type": "tabs",
|
||||
"widgets": [
|
||||
{
|
||||
"type": "Buttongroup",
|
||||
"data": {
|
||||
"buttons": [
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_switch_mode",
|
||||
"id": "services-switch-mode",
|
||||
"color": "sky",
|
||||
"iconColor": "white",
|
||||
"iconName": "redirect",
|
||||
"modal": {
|
||||
"widgets": [
|
||||
{"type": "Title", "data": {"title": "services_switch_mode_title"}},
|
||||
{"type": "Text", "data": {"text": "services_switch_mode_subtitle"}},
|
||||
{
|
||||
"type": "ButtonGroup",
|
||||
"data": {
|
||||
"buttons": [
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_mode_easy",
|
||||
"id": "switch-mode-btn-easy",
|
||||
"color": "back",
|
||||
"attrs": {
|
||||
"role": "link",
|
||||
"data-link": f"modes?service_name={'' if is_new else service_name}&mode=easy&operation={operation}",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_mode_advanced",
|
||||
"id": "switch-mode-btn-advanced",
|
||||
"color": "back",
|
||||
"attrs": {
|
||||
"role": "link",
|
||||
"data-link": f"modes?service_name={'' if is_new else service_name}&mode=advanced&operation={operation}",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_mode_raw",
|
||||
"id": "switch-mode-btn-raw",
|
||||
"color": "back",
|
||||
"attrs": {
|
||||
"role": "link",
|
||||
"data-link": f"modes?service_name={'' if is_new else service_name}&mode=raw&operation={operation}",
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
"type": "ButtonGroup",
|
||||
"data": {
|
||||
"buttons": [
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "action_close",
|
||||
"id": "close-service-btn-new",
|
||||
"color": "close",
|
||||
"attrs": {"data-close-modal": ""},
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
"type": "card",
|
||||
"maxWidthScreen": "3xl",
|
||||
|
|
@ -31,9 +129,10 @@ def advanced_mode_builder(templates: list[dict], plugins: list, global_config: d
|
|||
"templates": get_forms(templates, plugins, settings, ("advanced",), is_new, True),
|
||||
"operation": "new" if is_new else "edit",
|
||||
"oldServerName": service_name if service_name else "",
|
||||
"isDraft": False if is_draft is None else "yes" if is_draft else "no",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
]
|
||||
return builder
|
||||
|
|
|
|||
|
|
@ -1,7 +1,18 @@
|
|||
from .utils.form import get_forms, get_service_settings
|
||||
from typing import Union
|
||||
|
||||
|
||||
def easy_mode_builder(templates: list[dict], plugins: list, global_config: dict, total_config: dict, service_name: str, is_new: bool = False) -> str:
|
||||
def easy_mode_builder(
|
||||
templates: list[dict],
|
||||
plugins: list,
|
||||
global_config: dict,
|
||||
total_config: dict,
|
||||
operation: str,
|
||||
mode: str,
|
||||
service_name: str,
|
||||
is_new: bool = False,
|
||||
is_draft: Union[None, bool] = False,
|
||||
) -> str:
|
||||
"""Render forms with global config data.
|
||||
ATM we don't need templates but we need to pass at least one to the function (it will simply not override anything).
|
||||
"""
|
||||
|
|
@ -9,6 +20,93 @@ def easy_mode_builder(templates: list[dict], plugins: list, global_config: dict,
|
|||
# We need
|
||||
settings = get_service_settings(service_name, global_config, total_config)
|
||||
builder = [
|
||||
{
|
||||
"type": "tabs",
|
||||
"widgets": [
|
||||
{
|
||||
"type": "Buttongroup",
|
||||
"data": {
|
||||
"buttons": [
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_switch_mode",
|
||||
"id": "services-switch-mode",
|
||||
"color": "sky",
|
||||
"iconColor": "white",
|
||||
"iconName": "redirect",
|
||||
"modal": {
|
||||
"widgets": [
|
||||
{"type": "Title", "data": {"title": "services_switch_mode_title"}},
|
||||
{"type": "Text", "data": {"text": "services_switch_mode_subtitle"}},
|
||||
{
|
||||
"type": "ButtonGroup",
|
||||
"data": {
|
||||
"buttons": [
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_mode_easy",
|
||||
"id": "switch-mode-btn-easy",
|
||||
"color": "back",
|
||||
"attrs": {
|
||||
"role": "link",
|
||||
"data-link": f"modes?service_name={'' if is_new else service_name}&mode=easy&operation={operation}",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_mode_advanced",
|
||||
"id": "switch-mode-btn-advanced",
|
||||
"color": "back",
|
||||
"attrs": {
|
||||
"role": "link",
|
||||
"data-link": f"modes?service_name={'' if is_new else service_name}&mode=advanced&operation={operation}",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_mode_raw",
|
||||
"id": "switch-mode-btn-raw",
|
||||
"color": "back",
|
||||
"attrs": {
|
||||
"role": "link",
|
||||
"data-link": f"modes?service_name={'' if is_new else service_name}&mode=raw&operation={operation}",
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
"type": "ButtonGroup",
|
||||
"data": {
|
||||
"buttons": [
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "action_close",
|
||||
"id": "close-service-btn-new",
|
||||
"color": "close",
|
||||
"attrs": {"data-close-modal": ""},
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
"type": "card",
|
||||
"maxWidthScreen": "3xl",
|
||||
|
|
@ -32,9 +130,10 @@ def easy_mode_builder(templates: list[dict], plugins: list, global_config: dict,
|
|||
"templates": get_forms(templates, plugins, settings, ("easy",), is_new, True),
|
||||
"operation": "new" if is_new else "edit",
|
||||
"oldServerName": service_name if service_name else "",
|
||||
"isDraft": False if is_draft is None else "yes" if is_draft else "no",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
]
|
||||
return builder
|
||||
|
|
|
|||
|
|
@ -1,7 +1,18 @@
|
|||
from .utils.form import get_forms, get_service_settings
|
||||
from typing import Union
|
||||
|
||||
|
||||
def raw_mode_builder(templates: list[dict], plugins: list, global_config: dict, total_config: dict, service_name: str, is_new: bool = False) -> str:
|
||||
def raw_mode_builder(
|
||||
templates: list[dict],
|
||||
plugins: list,
|
||||
global_config: dict,
|
||||
operation: str,
|
||||
mode: str,
|
||||
total_config: dict,
|
||||
service_name: str,
|
||||
is_new: bool = False,
|
||||
is_draft: Union[None, bool] = False,
|
||||
) -> str:
|
||||
"""Render forms with global config data.
|
||||
ATM we don't need templates but we need to pass at least one to the function (it will simply not override anything).
|
||||
"""
|
||||
|
|
@ -10,6 +21,93 @@ def raw_mode_builder(templates: list[dict], plugins: list, global_config: dict,
|
|||
settings = get_service_settings(service_name, global_config, total_config)
|
||||
|
||||
builder = [
|
||||
{
|
||||
"type": "tabs",
|
||||
"widgets": [
|
||||
{
|
||||
"type": "Buttongroup",
|
||||
"data": {
|
||||
"buttons": [
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_switch_mode",
|
||||
"id": "services-switch-mode",
|
||||
"color": "sky",
|
||||
"iconColor": "white",
|
||||
"iconName": "redirect",
|
||||
"modal": {
|
||||
"widgets": [
|
||||
{"type": "Title", "data": {"title": "services_switch_mode_title"}},
|
||||
{"type": "Text", "data": {"text": "services_switch_mode_subtitle"}},
|
||||
{
|
||||
"type": "ButtonGroup",
|
||||
"data": {
|
||||
"buttons": [
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_mode_easy",
|
||||
"id": "switch-mode-btn-easy",
|
||||
"color": "back",
|
||||
"attrs": {
|
||||
"role": "link",
|
||||
"data-link": f"modes?service_name={'' if is_new else service_name}&mode=easy&operation={operation}",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_mode_advanced",
|
||||
"id": "switch-mode-btn-advanced",
|
||||
"color": "back",
|
||||
"attrs": {
|
||||
"role": "link",
|
||||
"data-link": f"modes?service_name={'' if is_new else service_name}&mode=advanced&operation={operation}",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "services_mode_raw",
|
||||
"id": "switch-mode-btn-raw",
|
||||
"color": "back",
|
||||
"attrs": {
|
||||
"role": "link",
|
||||
"data-link": f"modes?service_name={'' if is_new else service_name}&mode=raw&operation={operation}",
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
"type": "ButtonGroup",
|
||||
"data": {
|
||||
"buttons": [
|
||||
{
|
||||
"type": "Button",
|
||||
"data": {
|
||||
"text": "action_close",
|
||||
"id": "close-service-btn-new",
|
||||
"color": "close",
|
||||
"attrs": {"data-close-modal": ""},
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
"type": "card",
|
||||
"maxWidthScreen": "3xl",
|
||||
|
|
@ -33,9 +131,10 @@ def raw_mode_builder(templates: list[dict], plugins: list, global_config: dict,
|
|||
"templates": get_forms(templates, plugins, settings, ("raw",), is_new, True),
|
||||
"operation": "new" if is_new else "edit",
|
||||
"oldServerName": service_name if service_name else "",
|
||||
"isDraft": False if is_draft is None else "yes" if is_draft else "no",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
]
|
||||
return builder
|
||||
|
|
|
|||
|
|
@ -4304,10 +4304,10 @@ templates_ui = {
|
|||
}
|
||||
|
||||
|
||||
output_advanced = advanced_mode_builder(templates_ui, plugins, global_config, total_config, service_name)
|
||||
output_easy = easy_mode_builder(templates_ui, plugins, global_config, total_config, service_name)
|
||||
output_raw = raw_mode_builder(templates_ui, plugins, global_config, total_config, service_name)
|
||||
output_advanced = advanced_mode_builder(templates=templates_ui, plugins=plugins, global_config=global_config, total_config=total_config, service_name=service_name, operation="edit", is_draft="yes", mode="advanced")
|
||||
# output_easy = easy_mode_builder(templates_ui, plugins, global_config, total_config, service_name)
|
||||
# output_raw = raw_mode_builder(templates_ui, plugins, global_config, total_config, service_name)
|
||||
|
||||
save_builder("advanced", output_advanced, update_page=False)
|
||||
save_builder("easy", output_easy, update_page=False)
|
||||
save_builder("raw", output_raw, update_page=False)
|
||||
save_builder(page_name="modes", output=output_advanced, script_name="modes")
|
||||
# save_builder("easy", output_easy, update_page=False)
|
||||
# save_builder("raw", output_raw, update_page=False)
|
||||
|
|
@ -331,8 +331,8 @@ onMounted(() => {
|
|||
advancedForm.setTemplate(props.template);
|
||||
advancedForm.setOperation(props.operation);
|
||||
advancedForm.setOldServerName(props.oldServerName);
|
||||
easyForm.setEndpoint(props.endpoint);
|
||||
easyForm.setMethod(props.method);
|
||||
advancedForm.setEndpoint(props.endpoint);
|
||||
advancedForm.setMethod(props.method);
|
||||
updateStates();
|
||||
// I want updatInp to access event, data.base and the container attribute
|
||||
advancedForm.useListenTempFields();
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import { useDisplayStore } from "@store/global.js";
|
|||
* @param {Object} templates - List of advanced templates that contains settings. Must be a dict with mode as key, then the template name as key with a list of data (different for each modes).
|
||||
* @param {String} [operation="edit"] - Operation type (edit, new, delete).
|
||||
* @param {String} [oldServerName=""] - Old server name. This is a server name before any changes.
|
||||
* @param {String|Boolean} [isDraft=false] - Is draft mode. "yes" or "no" to set a draft select. Else will be ignored.
|
||||
* @param {Array} [display=[]] - Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef.
|
||||
*/
|
||||
|
||||
|
|
@ -41,6 +42,11 @@ const props = defineProps({
|
|||
required: false,
|
||||
default: "edit",
|
||||
},
|
||||
isDraft: {
|
||||
type: [String, Boolean],
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
oldServerName: {
|
||||
type: String,
|
||||
required: false,
|
||||
|
|
@ -72,6 +78,26 @@ const comboboxTemplate = {
|
|||
],
|
||||
};
|
||||
|
||||
const draftSelect = {
|
||||
id: `draft-select-${uuidv4()}`,
|
||||
name: `draft-select-${uuidv4()}`,
|
||||
disabled: false,
|
||||
required: false,
|
||||
onlyDown: true,
|
||||
maxBtnChars: 24,
|
||||
value: props.isDraft,
|
||||
values: ["yes", "no"],
|
||||
containerClass: "setting",
|
||||
label: "dashboard_draft",
|
||||
popovers: [
|
||||
{
|
||||
text: "dashboard_draft_desc",
|
||||
iconName: "info",
|
||||
},
|
||||
],
|
||||
columns: { pc: 3, tablet: 12, mobile: 12 },
|
||||
};
|
||||
|
||||
const comboboxModes = {
|
||||
id: `combobox-modes-${uuidv4()}`,
|
||||
name: `combobox-modes-${uuidv4()}`,
|
||||
|
|
@ -173,6 +199,7 @@ onBeforeMount(() => {
|
|||
:values="data.modes"
|
||||
@inp="data.currModeName = $event"
|
||||
/>
|
||||
<Select data-draft-state v-if="props.isDraft" v-bind="draftSelect" />
|
||||
</Grid>
|
||||
<Advanced
|
||||
v-if="data.currModeName === 'advanced'"
|
||||
|
|
|
|||
|
|
@ -103,6 +103,8 @@
|
|||
"dashboard_no_match": "No match found",
|
||||
"dashboard_no_match_filter": "No match found with filter",
|
||||
"dashboard_something_wrong": "Something is wrong",
|
||||
"dashboard_draft": "Select draft",
|
||||
"dashboard_draft_desc": "Draft will not apply the configuration. Else the service will be online and apply the configuration.",
|
||||
"inp_input_valid": "input valid",
|
||||
"inp_input_error_no_match": "No match found",
|
||||
"inp_input_error_required": "input is required",
|
||||
|
|
@ -333,6 +335,9 @@
|
|||
"services_no_easy_mode": "No easy mode for this template",
|
||||
"services_clone_title": "Clone service",
|
||||
"services_clone_subtitle": "Choose a mode to clone service",
|
||||
"services_switch_mode": "Switch mode",
|
||||
"services_switch_mode_title": "Switch mode",
|
||||
"services_switch_mode_subtitle": "Choose a mode to switch",
|
||||
"logs_title": "Logs",
|
||||
"logs_not_found": "No logs found",
|
||||
"logs_no_files_found": "No log files found",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -34,6 +34,7 @@ export const createFormStore = (storeName, formType) => {
|
|||
const formattedData = ref({});
|
||||
// Get additionnal data for submit
|
||||
const operation = ref("");
|
||||
const draftState = ref("");
|
||||
const oldServerName = ref("");
|
||||
const endpoint = ref("");
|
||||
const method = ref("POST");
|
||||
|
|
@ -48,6 +49,26 @@ export const createFormStore = (storeName, formType) => {
|
|||
operation.value = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @name setMethod
|
||||
* @description Set the method when we will submit the form.
|
||||
* @param {String} method - Method to set
|
||||
* @returns {Void}
|
||||
*/
|
||||
function setMethod(value) {
|
||||
method.value = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @name setEndpoint
|
||||
* @description Set the endpoint when we will submit the form.
|
||||
* @param {String} endpoint - Endpoint to set
|
||||
* @returns {Void}
|
||||
*/
|
||||
function setEndpoint(value) {
|
||||
endpoint.value = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @name setOldServerName
|
||||
* @description Set the operation when we will submit the form.
|
||||
|
|
@ -307,6 +328,7 @@ export const createFormStore = (storeName, formType) => {
|
|||
* @returns {Void}
|
||||
*/
|
||||
function useListenTempFields() {
|
||||
window.addEventListener("click", _listenDraftSelect);
|
||||
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
|
||||
window.addEventListener("input", _useUpdateTemp);
|
||||
window.addEventListener("change", _useUpdateTemp);
|
||||
|
|
@ -325,11 +347,25 @@ export const createFormStore = (storeName, formType) => {
|
|||
* @returns {Void}
|
||||
*/
|
||||
function useUnlistenTempFields() {
|
||||
window.removeEventListener("click", _listenDraftSelect);
|
||||
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
|
||||
window.removeEventListener("change", _useUpdateTemp);
|
||||
window.removeEventListener("click", _useUpdateTemp);
|
||||
}
|
||||
|
||||
/**
|
||||
* @name _listenDraftSelect
|
||||
* @description Look for a draft select (with attribut data-draft-state) and update the draft state when changing the select value.
|
||||
* @param {Event} e - Event object, get it by default in the event listener.
|
||||
* @returns {Void}
|
||||
*/
|
||||
function _listenDraftSelect(e) {
|
||||
if (!e.target?.closest("[data-draft-state]")) return;
|
||||
draftState.value = e.target
|
||||
.closest("[data-draft-state]")
|
||||
.querySelector("select").value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @name _useUpdateTemp
|
||||
* @description This function will check if the target is a setting input-like field.
|
||||
|
|
@ -642,6 +678,7 @@ export const createFormStore = (storeName, formType) => {
|
|||
data["operation"] = operation.value;
|
||||
data["OLD_SERVER_NAME"] = oldServerName.value;
|
||||
data["mode"] = type.value;
|
||||
data["IS_DRAFT"] = draftState.value;
|
||||
useSubmitForm(data, endpoint, method);
|
||||
}
|
||||
|
||||
|
|
@ -750,6 +787,8 @@ export const createFormStore = (storeName, formType) => {
|
|||
setRawData,
|
||||
setOldServerName,
|
||||
setOperation,
|
||||
setMethod,
|
||||
setEndpoint,
|
||||
addMultiple,
|
||||
delMultiple,
|
||||
useListenTempFields,
|
||||
|
|
|
|||
Loading…
Reference in a new issue