Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add form comp method prop + update instances page

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-08-15 14:00:33 +02:00
parent cf822d9ea9
commit 3502f91aaf
14 changed files with 304 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

269
src/ui/client/builder/pages/configs.py
View file

@ -6,6 +6,9 @@ from .utils.widgets import (
text_widget,
tabulator_widget,
input_widget,
select_widget,
editor_widget,
checkbox_widget,
icons_widget,
regular_widget,
unmatch_widget,
@ -27,7 +30,7 @@ columns = [
]
def configs_filter(types: Optional[list] = None) -> list: # healths = "up", "down", "loading"
def configs_filter(config_types: Optional[list] = None) -> list: # healths = "up", "down", "loading"
filters = [
{
"type": "like",
@ -104,10 +107,7 @@ def configs_item(
is_global: bool, # "yes" or "no"
filename: str = "",
config_type: str = "",
types: Optional[list] = None,
services: Optional[list] = None,
config_value: str = "",
is_new: bool = False,
config_services: Optional[list] = None,
display_index: int = 1,
):
global_text = "yes" if is_global else "no"
@ -169,7 +169,7 @@ def configs_item(
services_items = []
# get id
for index, service in enumerate(services):
for index, service in enumerate(config_services):
services_items.append(
{
"id": text_widget(text=index)["data"],
@ -202,8 +202,8 @@ def configs_item(
"type": "like",
"fields": ["name"],
"setting": {
"id": "input-search-service",
"name": "input-search-service",
"id": f"input-search-service-{filename}-{global_text}",
"name": f"input-search-service-{filename}-{global_text}",
"label": "configs_search_service", # keep it (a18n)
"value": "",
"inpType": "input",
@ -237,26 +237,32 @@ def configs_item(
iconName="check" if is_global == "up" else "cross" if is_global == "down" else "search",
value=global_text,
)["data"],
"services": services_detail,
"actions": {"buttons": actions},
}
def configs_form(
def config_form(
is_global: bool, # "yes" or "no"
filename: str = "",
config_type: str = "",
types: Optional[list] = None,
filename: str,
config_type: str,
config_value: str,
config_types: Optional[list] = None,
config_services: Optional[list] = None,
services: Optional[list] = None,
config_value: str = "",
is_new: bool = False,
display_index: int = 1,
is_new: bool = False,
) -> dict:
# difference between edit or new form
enabled_value_field_only = False if is_new else True
config_services = [] if is_global else config_services
global_text = "yes" if is_global else "no"
filename = "new" if is_new else filename
return {
"type": "card",
"maxWidthScreen": "md",
"display": ["main", 2],
"display": ["main", display_index],
"widgets": [
title_widget(
title="configs_create_title", # keep it (a18n)
@ -270,49 +276,117 @@ def configs_form(
fields=[
get_fields_from_field(
input_widget(
id="instance-name",
name="instance-name",
label="configs_name", # keep it (a18n)
id=f"configs-name-{filename}-{global_text}",
name="filename",
label="configs_filename", # keep it (a18n)
value="",
required=True,
pattern="", # add your pattern if needed
columns={"pc": 12, "tablet": 12, "mobile": 12},
placeholder="configs_name_placeholder", # keep it (a18n)
placeholder="configs_filename_add_placeholder", # keep it (a18n)
disabled=enabled_value_field_only,
popovers=[
{
"iconName": "yellow-darker",
"text": "configs_filename_add_warning_desc", # can't add a service with same name and same type of existing one, will not be save.
},
{
"iconName": "info",
"text": "configs_name_desc",
}
"text": "configs_filename_add_desc",
},
],
)
),
get_fields_from_field(
input_widget(
id="instance-hostname",
name="instance-hostname",
label="configs_hostname", # keep it (a18n)
value="",
pattern="", # add your pattern if needed
select_widget(
id=f"configs-type-{filename}-{global_text}",
name="type",
label="configs_type", # keep it (a18n)
value=config_type,
values=config_types,
required=True,
requiredValues=config_types,
columns={"pc": 12, "tablet": 12, "mobile": 12},
placeholder="configs_hostname_placeholder", # keep it (a18n)
disabled=enabled_value_field_only,
popovers=[
{
"iconName": "info",
"text": "configs_hostname_desc",
}
"text": "configs_type_desc",
},
],
)
),
get_fields_from_field(
checkbox_widget(
id=f"configs-global-{filename}-{global_text}",
name="global",
label="configs_global", # keep it (a18n)
value=is_global,
disabled=enabled_value_field_only,
pattern="", # add your pattern if needed
columns={"pc": 12, "tablet": 12, "mobile": 12},
placeholder="configs_global_placeholder", # keep it (a18n)
popovers=[
{
"iconName": "yellow-darker",
"text": "configs_global_warning_desc", # if check, will apply to all services even if services are selected.
},
{
"iconName": "info",
"text": "configs_global_desc",
},
],
)
),
get_fields_from_field(
select_widget(
id=f"configs-services-{filename}-{global_text}",
name="services",
label="configs_services", # keep it (a18n)
value=config_services,
values=services,
columns={"pc": 12, "tablet": 12, "mobile": 12},
disabled=enabled_value_field_only,
popovers=[
{
"iconName": "info",
"text": "config_services_desc",
},
],
)
),
get_fields_from_field(
editor_widget(
id=f"configs-value-{filename}-{global_text}",
name="value",
label="configs_value", # keep it (a18n)
value=config_value,
pattern="", # add your pattern if needed
columns={"pc": 12, "tablet": 12, "mobile": 12},
placeholder="configs_value_placeholder", # keep it (a18n)
disabled=enabled_value_field_only,
popovers=[
{
"iconName": "yellow-darker",
"text": "configs_value_warning_desc", # config will not be save in case of script error
},
{
"iconName": "info",
"text": "configs_value_desc",
},
],
)
),
],
buttons=[
button_widget(
id="create-instance-submit",
text="action_create",
iconName="plus",
id=f"configs-submit-{filename}-{global_text}",
text="action_create" if is_new else "action_edit", # keep it (a18n)
iconName="plus" if is_new else "pen",
iconColor="white",
color="success",
color="success" if is_new else "edit",
size="normal",
type="submit",
containerClass="flex justify-center",
)
],
),
@ -328,7 +402,7 @@ def configs_tabs():
buttons=[
button_widget(
text="configs_tab_list",
display=["main", 1],
display=["main", 0],
size="tab",
color="info",
iconColor="white",
@ -337,7 +411,7 @@ def configs_tabs():
button_widget(
text="configs_tab_add",
color="success",
display=["main", 2],
display=["main", 1],
size="tab",
iconColor="white",
iconName="plus",
@ -348,55 +422,90 @@ def configs_tabs():
}
def configs_list(instances: Optional[list] = None, types: Optional[list] = None, methods: Optional[list] = None, healths: Optional[list] = None) -> dict:
if instances is None or len(instances) == 0:
return {
"type": "card",
"gridLayoutClass": "transparent",
"widgets": [
unmatch_widget(text="configs_not_found"),
],
}
items = []
for instance in instances:
items.append(
instance_item(
instance_name=instance.get("name", ""),
hostname=instance.get("hostname", ""),
instance_type=instance.get("type", ""),
method=instance.get("method", ""),
health=instance.get("health", ""),
creation_date=instance.get("creation_date", ""),
last_seen=instance.get("last_seen", ""),
)
)
def fallback_message(msg: str):
return {
"type": "card",
"display": ["main", 1],
"gridLayoutClass": "transparent",
"widgets": [
title_widget(
title="configs_list_title", # keep it (a18n)
),
subtitle_widget(
subtitle="configs_list_subtitle", # keep it (a18n)
),
tabulator_widget(
id="table-instances",
columns=columns,
items=items,
filters=configs_filter(types=types, methods=methods, healths=healths),
),
unmatch_widget(text=msg),
],
}
def configs_builder(instances: Optional[list] = None, types: Optional[list] = None, methods: Optional[list] = None, healths: Optional[list] = None) -> list:
def configs_builder(configs: Optional[list] = None, config_types: Optional[list] = None, services: Optional[list] = None) -> list:
if config_types is None or len(config_types) == 0:
return fallback_message("configs_missing_types")
if services is None or len(services) == 0:
return fallback_message("configs_missing_services")
configs_items = []
configs_form = []
# Start adding the new config form
configs_form.append(
config_form(
is_new=True,
display_index=1,
is_global=True,
config_types=config_types,
services=services,
filename="",
config_type="",
config_value="",
config_services=[],
)
)
if config is None or len(configs) == 0:
return [
# Tabs is button group with display value and a size tab inside a tabs container
user_management_tabs(),
fallback_message("user_management_users_not_found"),
] + configs_form
# Start adding the new config form
# display_index start at 2 because 1 is the new and 0 is the configs table
for index, config in enumerate(configs):
display_index = index + 2
configs_items.append(
configs_item(
is_global=config.get("is_global", ""),
filename=config.get("filename", ""),
config_services=config.get("config_services", ""),
config_type=config.get("config_type", ""),
health=config.get("health", ""),
creation_date=config.get("creation_date", ""),
last_seen=config.get("last_seen", ""),
display_index=display_index,
)
)
configs_form.append(
config_form(
username=user.get("username"),
role=user.get("role"),
roles=roles_form,
display_index=display_index,
)
)
return [
# Tabs is button group with display value and a size tab inside a tabs container
configs_tabs(),
configs_list(instances=instances, types=types, methods=methods, healths=healths),
configs_new_form(),
]
user_management_tabs(),
{
"type": "card",
"maxWidthScreen": "3xl",
"display": ["main", 0],
"widgets": [
title_widget(title="user_management_list_title"), # keep it (a18n)
subtitle_widget(subtitle="user_management_list_subtitle"), # keep it (a18n)
tabulator_widget(
id="table-configs",
columns=columns,
items=configs_items,
layout="fitColumns",
filters=configs_filter(config_types=config_types),
),
],
},
] + configs_form

5
src/ui/client/builder/pages/instances.py
View file

@ -172,6 +172,7 @@ def instance_item(
attrs={
"data-submit-form": f"""{{ "instance_hostname" : "{hostname}" }}""",
"data-submit-endpoint": "/ping",
"data-submit-method": "POST",
},
),
]
@ -211,6 +212,7 @@ def instance_item(
attrs={
"data-submit-form": f"""{{ "instance_hostname" : "{hostname}" }}""",
"data-submit-endpoint": "/reload",
"data-submit-method": "POST",
},
),
]
@ -254,6 +256,7 @@ def instance_item(
attrs={
"data-submit-form": f"""{{ "instance_hostname" : "{hostname}" }}""",
"data-submit-endpoint": "/delete",
"data-submit-method": "DELETE",
},
),
]
@ -293,6 +296,7 @@ def instances_new_form() -> dict:
regular_widget(
maxWidthScreen="xs",
endpoint="/add",
method="PUT",
fields=[
get_fields_from_field(
input_widget(
@ -416,6 +420,7 @@ def instances_list(instances: Optional[list] = None, types: Optional[list] = Non
),
tabulator_widget(
id="table-instances",
layout="fitDataFill",
columns=columns,
items=items,
filters=instances_filter(types=types, methods=methods, healths=healths),

48
src/ui/client/builder/pages/utils/widgets.py
View file

@ -11,6 +11,8 @@ def advanced_widget(
template: dict,
containerClass: str = "",
operation: str = "edit",
endpoint: str = "",
method: str = "POST",
oldServerName: str = "",
columns: dict = {"pc":"12","tablet":"12","mobile":"12"}
):
@ -20,9 +22,11 @@ def advanced_widget(
PARAMETERS
- `template` **Object** Template object with plugin and settings data.
- `containerClass` **string** Container additional class (optional, default `""`)
- `operation` **string** Operation type (edit, new, delete). (optional, default `"edit"`)
- `oldServerName` **string** Old server name. This is a server name before any changes. (optional, default `""`)
- `containerClass` **String** Container additional class (optional, default `""`)
- `operation` **String** Operation type (edit, new, delete). (optional, default `"edit"`)
- `endpoint` **String** Form endpoint. Case none, will be ignored. (optional, default `""`)
- `method` **String** Http method to be used on form submit. (optional, default `"POST"`)
- `oldServerName` **String** Old server name. This is a server name before any changes. (optional, default `""`)
- `columns` **Object** Columns object. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`)
EXAMPLE
@ -62,7 +66,7 @@ def advanced_widget(
# List of params that will be add only if not default value
list_params = [("containerClass", containerClass, ""),("operation", operation, "edit"),("oldServerName", oldServerName, ""),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})]
list_params = [("containerClass", containerClass, ""),("operation", operation, "edit"),("endpoint", endpoint, ""),("method", method, "POST"),("oldServerName", oldServerName, ""),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -628,6 +632,8 @@ def easy_widget(
template: dict,
containerClass: str = "",
operation: str = "edit",
endpoint: str = "",
method: str = "POST",
oldServerName: str = "",
columns: dict = {"pc":"12","tablet":"12","mobile":"12"}
):
@ -637,9 +643,11 @@ def easy_widget(
PARAMETERS
- `template` **Object** Template object with plugin and settings data.
- `containerClass` **string** Container additional class (optional, default `""`)
- `operation` **string** Operation type (edit, new, delete). (optional, default `"edit"`)
- `oldServerName` **string** Old server name. This is a server name before any changes. (optional, default `""`)
- `containerClass` **String** Container additional class (optional, default `""`)
- `operation` **String** Operation type (edit, new, delete). (optional, default `"edit"`)
- `endpoint` **String** Form endpoint. Case none, will be ignored. (optional, default `""`)
- `method` **String** Http method to be used on form submit. (optional, default `"POST"`)
- `oldServerName` **String** Old server name. This is a server name before any changes. (optional, default `""`)
- `columns` **Object** Columns object. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`)
EXAMPLE
@ -679,7 +687,7 @@ def easy_widget(
# List of params that will be add only if not default value
list_params = [("containerClass", containerClass, ""),("operation", operation, "edit"),("oldServerName", oldServerName, ""),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})]
list_params = [("containerClass", containerClass, ""),("operation", operation, "edit"),("endpoint", endpoint, ""),("method", method, "POST"),("oldServerName", oldServerName, ""),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -990,7 +998,7 @@ def grid_layout_widget(
- `gridLayoutClass` **String** Additional class (optional, default `"items-start"`)
- `display` **Array** 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. (optional, default `[]`)
- `tabId` **String** Case the container is converted to an anchor with a link, we can define the tabId, by default it is the contentIndex (optional, default `contentIndex`)
- `maxWidthScreen` **string** Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl, 3xl) (optional, default `"2xl"`)
- `maxWidthScreen` **String** Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl, 3xl) (optional, default `"2xl"`)
EXAMPLE
@ -1559,6 +1567,8 @@ def raw_widget(
operation: str = "edit",
oldServerName: str = "",
containerClass: str = "",
endpoint: str = "",
method: str = "POST",
columns: dict = {"pc":"12","tablet":"12","mobile":"12"}
):
"""
@ -1569,7 +1579,9 @@ def raw_widget(
- `template` **Object** Template object with plugin and settings data.
- `operation` **String** Operation type (edit, new, delete). (optional, default `"edit"`)
- `oldServerName` **String** Old server name. This is a server name before any changes. (optional, default `""`)
- `containerClass` **string** Container additional class (optional, default `""`)
- `containerClass` **String** Container additional class (optional, default `""`)
- `endpoint` **String** Form endpoint. Case none, will be ignored. (optional, default `""`)
- `method` **String** Http method to be used on form submit. (optional, default `"POST"`)
- `columns` **Object** Columns object. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`)
EXAMPLE
@ -1590,7 +1602,7 @@ def raw_widget(
# List of params that will be add only if not default value
list_params = [("operation", operation, "edit"),("oldServerName", oldServerName, ""),("containerClass", containerClass, ""),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})]
list_params = [("operation", operation, "edit"),("oldServerName", oldServerName, ""),("containerClass", containerClass, ""),("endpoint", endpoint, ""),("method", method, "POST"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -1602,6 +1614,7 @@ def regular_widget(
buttons: dict,
containerClass: str = "",
endpoint: str = "",
method: str = "POST",
maxWidthScreen: str = "lg",
columns: dict = {"pc":"12","tablet":"12","mobile":"12"}
):
@ -1612,9 +1625,10 @@ def regular_widget(
- `fields` **Object** List of Fields component to display
- `buttons` **Object** We need to send a regular ButtonGroup buttons prop
- `containerClass` **string** Container additional class (optional, default `""`)
- `endpoint` **string** Form endpoint. Case none, will be ignored. (optional, default `""`)
- `maxWidthScreen` **string** Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl) (optional, default `"lg"`)
- `containerClass` **String** Container additional class (optional, default `""`)
- `endpoint` **String** Form endpoint. Case none, will be ignored. (optional, default `""`)
- `method` **String** Http method to be used on form submit. (optional, default `"POST"`)
- `maxWidthScreen` **String** Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl) (optional, default `"lg"`)
- `columns` **Object** Columns object. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`)
EXAMPLE
@ -1653,7 +1667,7 @@ def regular_widget(
# List of params that will be add only if not default value
list_params = [("containerClass", containerClass, ""),("endpoint", endpoint, ""),("maxWidthScreen", maxWidthScreen, "lg"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})]
list_params = [("containerClass", containerClass, ""),("endpoint", endpoint, ""),("method", method, "POST"),("maxWidthScreen", maxWidthScreen, "lg"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -2071,8 +2085,8 @@ def templates_widget(
PARAMETERS
- `templates` **Object** 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).
- `operation` **string** Operation type (edit, new, delete). (optional, default `"edit"`)
- `oldServerName` **string** Old server name. This is a server name before any changes. (optional, default `""`)
- `operation` **String** Operation type (edit, new, delete). (optional, default `"edit"`)
- `oldServerName` **String** Old server name. This is a server name before any changes. (optional, default `""`)
EXAMPLE

2
src/ui/client/dashboard/components/Dashboard/LangSwitch.vue
View file

@ -18,7 +18,7 @@ const lang = reactive({
* @name updateLangStorage
* @description This function will update the language in the session storage and reload the page.
* On reload, we will retrieve the language from the session storage and set it.
* @param {string} lang - The language to set.
* @param {String} lang - The language to set.
* @returns {void}
*/
function updateLangStorage(lang) {

20
src/ui/client/dashboard/components/Form/Advanced.vue
View file

@ -46,9 +46,11 @@ import { v4 as uuidv4 } from "uuid";
* ],
* }
* @param {Object} template - Template object with plugin and settings data.
* @param {string} [containerClass=""] - Container additional class
* @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} [containerClass=""] - Container additional class
* @param {String} [operation="edit"] - Operation type (edit, new, delete).
* @param {String} [endpoint=""] - Form endpoint. Case none, will be ignored.
* @param {String} [method="POST"] - Http method to be used on form submit.
* @param {String} [oldServerName=""] - Old server name. This is a server name before any changes.
* @param {Object} [columns={ "pc": "12", "tablet": "12", "mobile": "12" }] - Columns object.
*/
@ -71,6 +73,16 @@ const props = defineProps({
required: false,
default: "edit",
},
endpoint: {
type: String,
required: false,
default: "",
},
method: {
type: String,
required: false,
default: "POST",
},
oldServerName: {
type: String,
required: false,
@ -287,6 +299,8 @@ onMounted(() => {
advancedForm.setTemplate(props.template);
advancedForm.setOperation(props.operation);
advancedForm.setOldServerName(props.oldServerName);
easyForm.setEndpoint(props.endpoint);
easyForm.setMethod(props.method);
updateStates();
// I want updatInp to access event, data.base and the container attribute
advancedForm.useListenTempFields();

22
src/ui/client/dashboard/components/Form/Easy.vue
View file

@ -50,9 +50,11 @@ import { useEasyForm } from "@store/form.js";
* ],
* }
* @param {Object} template - Template object with plugin and settings data.
* @param {string} [containerClass=""] - Container additional class
* @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} [containerClass=""] - Container additional class
* @param {String} [operation="edit"] - Operation type (edit, new, delete).
* @param {String} [endpoint=""] - Form endpoint. Case none, will be ignored.
* @param {String} [method="POST"] - Http method to be used on form submit.
* @param {String} [oldServerName=""] - Old server name. This is a server name before any changes.
* @param {Object} [columns={ "pc": "12", "tablet": "12", "mobile": "12" }] - Columns object.
*/
@ -70,6 +72,16 @@ const props = defineProps({
required: false,
default: "edit",
},
endpoint: {
type: String,
required: false,
default: "",
},
method: {
type: String,
required: false,
default: "POST",
},
oldServerName: {
type: String,
required: false,
@ -175,6 +187,10 @@ onMounted(() => {
setup();
// I want updatInp to access event, data.base and the container attribute
easyForm.useListenTempFields();
easyForm.setOperation(props.operation);
easyForm.setOldServerName(props.oldServerName);
easyForm.setEndpoint(props.endpoint);
easyForm.setMethod(props.method);
window.addEventListener("input", listenToValidate);
});

16
src/ui/client/dashboard/components/Form/Raw.vue
View file

@ -23,7 +23,9 @@ import { useRawForm } from "@store/form.js";
* @param {Object} template - Template object with plugin and settings data.
* @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} [containerClass=""] - Container additional class
* @param {String} [containerClass=""] - Container additional class
* @param {String} [endpoint=""] - Form endpoint. Case none, will be ignored.
* @param {String} [method="POST"] - Http method to be used on form submit.
* @param {Object} [columns={ "pc": "12", "tablet": "12", "mobile": "12" }] - Columns object.
*/
@ -41,6 +43,16 @@ const props = defineProps({
required: false,
default: "edit",
},
endpoint: {
type: String,
required: false,
default: "",
},
method: {
type: String,
required: false,
default: "POST",
},
oldServerName: {
type: String,
required: false,
@ -186,6 +198,8 @@ onBeforeMount(() => {
onMounted(() => {
rawForm.setOperation(props.operation);
rawForm.setOldServerName(props.oldServerName);
rawForm.setEndpoint(props.endpoint);
rawForm.setMethod(props.method);
});
</script>

14
src/ui/client/dashboard/components/Form/Regular.vue
View file

@ -35,9 +35,10 @@ import Text from "@components/Widget/Text.vue";
* ],
* @param {Object} fields - List of Fields component to display
* @param {Object} buttons - We need to send a regular ButtonGroup buttons prop
* @param {string} [containerClass=""] - Container additional class
* @param {string} [endpoint=""] - Form endpoint. Case none, will be ignored.
* @param {string} [maxWidthScreen="lg"] - Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl)
* @param {String} [containerClass=""] - Container additional class
* @param {String} [endpoint=""] - Form endpoint. Case none, will be ignored.
* @param {String} [method="POST"] - Http method to be used on form submit.
* @param {String} [maxWidthScreen="lg"] - Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl)
* @param {Object} [columns={ "pc": "12", "tablet": "12", "mobile": "12" }] - Columns object.
*/
@ -63,6 +64,11 @@ const props = defineProps({
required: false,
default: "",
},
method: {
type: String,
required: false,
default: "POST",
},
containerClass: {
type: String,
required: false,
@ -95,7 +101,7 @@ onMounted(() => {
<Container
data-is="form"
:tag="'form'"
method="POST"
:method="props.method"
:action="data.endpoint"
:columns="props.columns"
:containerClass="`form-regular-container`"

4
src/ui/client/dashboard/components/Form/Templates.vue
View file

@ -24,8 +24,8 @@ import { v4 as uuidv4 } from "uuid";
* }
* }
* @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} [operation="edit"] - Operation type (edit, new, delete).
* @param {String} [oldServerName=""] - Old server name. This is a server name before any changes.
*/
const props = defineProps({

2
src/ui/client/dashboard/components/Widget/GridLayout.vue
View file

@ -26,7 +26,7 @@ import { useDisplayStore } from "@store/global.js";
* @param {String} [gridLayoutClass="items-start"] - Additional class
* @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.
* @param {String} [tabId=contentIndex] - Case the container is converted to an anchor with a link, we can define the tabId, by default it is the contentIndex
* @param {string} [maxWidthScreen="2xl"] - Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl, 3xl)
* @param {String} [maxWidthScreen="2xl"] - Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl, 3xl)
*/
const props = defineProps({

2
src/ui/client/dashboard/pages/configs/index.html
View file

File diff suppressed because one or more lines are too long

2
src/ui/client/dashboard/pages/instances/index.html
View file

File diff suppressed because one or more lines are too long

4
src/ui/client/dashboard/store/form.js
View file

@ -35,6 +35,8 @@ export const createFormStore = (storeName, formType) => {
// Get additionnal data for submit
const operation = ref("");
const oldServerName = ref("");
const endpoint = ref("");
const method = ref("POST");
/**
* @name setOperation
@ -640,7 +642,7 @@ export const createFormStore = (storeName, formType) => {
data["operation"] = operation.value;
data["OLD_SERVER_NAME"] = oldServerName.value;
data["mode"] = type.value;
useSubmitForm(data);
useSubmitForm(data, endpoint, method);
}
/**

14
src/ui/client/dashboard/utils/global.js
View file

@ -30,12 +30,15 @@ function useSubmitAttr(e) {
if (!e.target.hasAttribute("data-submit-form")) return;
try {
const data = JSON.parse(e.target.getAttribute("data-submit-form"));
const submitEndpoint = e.target.hasAttribute("data-submit-endpoint")
const endpoint = e.target.hasAttribute("data-submit-endpoint")
? `${window.location.origin}${
window.location.pathname
}${e.target.getAttribute("data-submit-endpoint")}`
: "";
useSubmitForm(data, submitEndpoint);
const method = e.target.hasAttribute("data-submit-endpoint")
? e.target.getAttribute("data-submit-method")
: "POST";
useSubmitForm(data, endpoint, method);
} catch (e) {
console.error(e);
}
@ -52,14 +55,15 @@ function useSubmitAttr(e) {
* }
* @param {Object} data - Object with the form data to submit.
* @param {String} [submitEndpoint=""] - The endpoint to submit the form.
* @param {String} [method="POST"] - The http method
* @returns {Void}
*/
function useSubmitForm(data, submitEndpoint = "") {
function useSubmitForm(data, submitEndpoint = "", method = "POST") {
// Create a form element
const form = document.createElement("form");
form.style.display = "none";
form.method = "POST";
if (submitEndpoint) form.action = submitEndpoint;
form.method = method;
form.action = submitEndpoint;
// Retrieve csrf token form data-crfs-token
try {
const csrfToken = document.querySelector("[data-csrf-token]");