diff --git a/src/ui/client/builder/pages/bans.py b/src/ui/client/builder/pages/bans.py
index af3574e20..438ae5bb5 100644
--- a/src/ui/client/builder/pages/bans.py
+++ b/src/ui/client/builder/pages/bans.py
@@ -6,6 +6,7 @@ from .utils.widgets import (
text_widget,
tabulator_widget,
unmatch_widget,
+ input_widget,
datepicker_widget,
checkbox_widget,
)
@@ -323,16 +324,15 @@ def bans_add() -> dict:
bans_add_columns = [
add_column(title="IP", field="ip", formatter="fields"),
add_column(title="Ban end", field="ban_end", formatter="fields"),
- add_column(title="delete", field="delete", formatter="buttongroup", maxWidth=100),
]
default_add_ban = [
{
"id": 1,
"ip": get_fields_from_field(
- datepicker_widget(
+ input_widget(
id="datepicker-add-ban-ip-1",
- name="datepicker-add-ban-ip-1",
+ name="ip",
label="bans_add_ban_ip", # keep it (a18n)
hideLabel=True,
value="",
@@ -342,28 +342,12 @@ def bans_add() -> dict:
"ban_end": get_fields_from_field(
datepicker_widget(
id="datepicker-add-ban-end-1",
- name="datepicker-add-ban-end-1",
+ name="ban_end",
label="bans_add_end_date", # keep it (a18n)
hideLabel=True,
value="",
)
),
- # Need to create a script on Page.vue level to retrive table data and remove by id
- "delete": button_group_widget(
- buttons=[
- button_widget(
- id="delete-ban-1",
- type="button",
- text="action_delete", # keep it (a18n)
- hideText=True,
- iconName="trash",
- iconColor="white",
- color="error",
- size="normal",
- attrs={"data-delete-row": "1"}, # we will use this attrs to remove the row
- ),
- ]
- )["data"],
}
]
@@ -388,12 +372,13 @@ def bans_add() -> dict:
title_widget("bans_add_title"), # keep it (a18n)
subtitle_widget("bans_add_subtitle"), # keep it (a18n)
tabulator_widget(
- id="table-register-plugins",
+ id="table-add-bans",
columns=bans_add_columns,
items=default_add_ban,
layout="fitColumns",
actionsButtons=bans_add_table_actions,
itemsBeforePagination=20,
+ isPagination=False,
),
add_ban_action,
],
diff --git a/src/ui/client/dashboard/components/Widget/Tabulator.vue b/src/ui/client/dashboard/components/Widget/Tabulator.vue
index 790ef2bc5..2e03ae416 100644
--- a/src/ui/client/dashboard/components/Widget/Tabulator.vue
+++ b/src/ui/client/dashboard/components/Widget/Tabulator.vue
@@ -334,6 +334,7 @@ onUnmounted(() => {
:buttons="props.actionsButtons"
/>
{
- // select all rows : set all rows checkbox to yes + add ip to bansToSubmit
+ // select all rows : set all rows checkbox to yes + add ip to unbans
if (e.target.closest("button[data-select-rows]")) {
const tableData = JSON.parse(
- JSON.stringify(tableStore.getDefaultTableDataById(tableId))
+ JSON.stringify(tableStore.getDefaultTableDataById(tableUnbanId))
);
- bansToSubmit.clear();
+ unbans.clear();
for (let i = 0; i < tableData.length; i++) {
const item = tableData[i];
item.check.setting.value = "yes";
- // add ip to bansToSubmit
- bansToSubmit.add(item.ip.text);
+ // add ip to unbans
+ unbans.add(item.ip.text);
}
- updateTableData(tableData);
+ updateTableData(tableUnbanId, tableData);
return;
}
- // unselect all rows : reset to default the table + clear bansToSubmit arrau
+ // unselect all rows : reset to default the table + clear unbans arrau
if (e.target.closest("button[data-unselect-rows]")) {
updateTableData(
- JSON.parse(JSON.stringify(tableStore.getDefaultTableDataById(tableId)))
+ tableUnbanId,
+ JSON.parse(
+ JSON.stringify(tableStore.getDefaultTableDataById(tableUnbanId))
+ )
);
- // clear bansToSubmit
- bansToSubmit.clear();
+ // clear unbans
+ unbans.clear();
return;
}
- // listen to checkbox, look to the state and update bansToSubmit base on it
+ // listen to checkbox, look to the state and update unbans base on it
if (
e.target.closest("input[type=checkbox]") &&
- e.target.closest("[data-is='table']")
+ e.target.closest(`#${tableUnbanId}`)
) {
const checkboxEl = e.target.closest("input[type=checkbox]");
const isChecked = checkboxEl.checked;
const checkboxId = +checkboxEl.getAttribute("data-ban-id");
- const tableEl = tableStore.getTableById(tableId);
+ const tableEl = tableStore.getTableById(tableUnbanId);
const tableData = tableEl.getData();
const item = tableData.find((el) => el.id === checkboxId);
- isChecked
- ? bansToSubmit.add(item.ip.text)
- : bansToSubmit.delete(item.ip.text);
+ isChecked ? unbans.add(item.ip.text) : unbans.delete(item.ip.text);
return;
}
// send current selected ips
if (e.target.closest("button[data-unban]")) {
- // transform bansToSubmit to array
- const data = { bans: JSON.stringify([...bansToSubmit]) };
+ // transform unbans to array
+ const data = { bans: JSON.stringify([...unbans]) };
useSubmitForm(data, "/unban", "POST");
}
});
}
+/**
+ * @name updateItemId
+ * @description Replace default item id by new noe
+ * @param {Object} item - item
+ * @param {String|Number} id - new id
+ * @returns {item} - updated item
+ */
+function updateItemId(item, id) {
+ item.id = +id;
+ item.ban_end.setting.id = item.ban_end.setting.id.replace("-1", `-${id}`);
+ item.ip.setting.id = item.ip.setting.id.replace("-1", `-${id}`);
+}
+
+/**
+ * @name addBanHandler
+ * @description Define all the ban table actions (submit form, unselect, select...)
+ * @returns {Void}
+ */
+function addBanHandler() {
+ window.addEventListener("click", (e) => {
+ // select all rows : set all rows checkbox to yes + add ip to unbans
+ if (e.target.closest("button[data-add-row]")) {
+ addCount++;
+ const tableData = JSON.parse(
+ JSON.stringify(tableStore.getDefaultTableDataById(tableAddbanId))
+ );
+ const item = JSON.parse(JSON.stringify(tableData[0]));
+ updateItemId(item, addCount);
+ const tableEl = tableStore.getTableById(tableAddbanId);
+ tableEl.addData(item);
+ return;
+ }
+
+ if (e.target.closest("button[data-delete-all]")) {
+ updateTableData(
+ tableAddbanId,
+ JSON.parse(
+ JSON.stringify(tableStore.getDefaultTableDataById(tableAddbanId))
+ )
+ );
+ return;
+ }
+
+ // send current selected ips
+ if (e.target.closest("button#add-bans-btn")) {
+ // transform unbans to array
+ const bans = [];
+ const tabulatorRows = document
+ .querySelector(`#${tableAddbanId}`)
+ .querySelectorAll(".tabulator-row");
+
+ console.log();
+
+ for (let i = 0; i < tabulatorRows.length; i++) {
+ const row = tabulatorRows[i];
+ const ip = row.querySelector("input[name=ip]").value;
+ const banEndVal = row
+ .querySelector("input[name=ban_end]")
+ .getAttribute("data-timestamp");
+ const banEnd = !isNaN(banEndVal) ? banEndVal : "";
+ bans.push({ ip: ip, ban_end: banEnd, reason: "ui" });
+ }
+ const data = { bans: JSON.stringify(bans) };
+ useSubmitForm(data, "/ban", "POST");
+ }
+ });
+}
+
onBeforeMount(() => {
// Get builder data
const dataAtt = "data-server-builder";
@@ -111,7 +183,8 @@ onBeforeMount(() => {
onMounted(() => {
// Set the page title
useGlobal();
- banActions();
+ unbanHandler();
+ addBanHandler();
});
diff --git a/src/ui/client/dashboard/pages/bans/index.html b/src/ui/client/dashboard/pages/bans/index.html
index b2f34bd39..2ef59dbd3 100644
--- a/src/ui/client/dashboard/pages/bans/index.html
+++ b/src/ui/client/dashboard/pages/bans/index.html
@@ -20,7 +20,7 @@
>
diff --git a/src/ui/client/dashboard/utils/tabulator.js b/src/ui/client/dashboard/utils/tabulator.js
index e9cb2a3a3..4a0442fec 100644
--- a/src/ui/client/dashboard/utils/tabulator.js
+++ b/src/ui/client/dashboard/utils/tabulator.js
@@ -202,12 +202,14 @@ function _a11ySortable() {
* @returns {Void}
*/
function _a11yFooter() {
- const tableFooter = document.querySelector(".tabulator-footer");
- // query button and select tag
- const interactiveElements = tableFooter.querySelectorAll("button, select");
- for (let i = 0; i < interactiveElements.length; i++) {
- interactiveElements[i].setAttribute("tabindex", contentIndex);
- }
+ try {
+ const tableFooter = document.querySelector(".tabulator-footer");
+ // query button and select tag
+ const interactiveElements = tableFooter.querySelectorAll("button, select");
+ for (let i = 0; i < interactiveElements.length; i++) {
+ interactiveElements[i].setAttribute("tabindex", contentIndex);
+ }
+ } catch (e) {}
}
/**