From 03be53bdafa2c76fed0aac4c90a5f6bd60775d06 Mon Sep 17 00:00:00 2001 From: Jordan Blasenhauer Date: Mon, 19 Aug 2024 14:33:02 +0200 Subject: [PATCH] unban form send from UI --- src/ui/client/builder/pages/bans.py | 2 + .../dashboard/components/Widget/Tabulator.vue | 1 + src/ui/client/dashboard/pages/bans/Bans.vue | 82 ++++++++++++++++++- src/ui/client/dashboard/pages/bans/index.html | 2 +- src/ui/client/dashboard/store/global.js | 24 +++++- 5 files changed, 108 insertions(+), 3 deletions(-) diff --git a/src/ui/client/builder/pages/bans.py b/src/ui/client/builder/pages/bans.py index 709b70cba..af3574e20 100644 --- a/src/ui/client/builder/pages/bans.py +++ b/src/ui/client/builder/pages/bans.py @@ -44,6 +44,7 @@ def bans_tabs(): def ban_item(id: str, ip: str, reason: str, ban_start_date: int, ban_end_date: int, remain: str) -> dict: return { + "id": id, "check": get_fields_from_field( checkbox_widget( id=f"check-ban-{id}", @@ -52,6 +53,7 @@ def ban_item(id: str, ip: str, reason: str, ban_start_date: int, ban_end_date: i hideLabel=True, value="no", columns={"pc": 12, "tablet": 12, "mobile": 12}, + attrs={"data-ban-id": id}, ) ), "ip": text_widget(text=ip)["data"], diff --git a/src/ui/client/dashboard/components/Widget/Tabulator.vue b/src/ui/client/dashboard/components/Widget/Tabulator.vue index f793af155..790ef2bc5 100644 --- a/src/ui/client/dashboard/components/Widget/Tabulator.vue +++ b/src/ui/client/dashboard/components/Widget/Tabulator.vue @@ -291,6 +291,7 @@ onMounted(() => { a11yTable(table.instance); // Add table instance to store in order to use it in other components tableStore.setTable(props.id, table.instance); + tableStore.setDefaultTableData(props.id, props.items); setTimeout(() => { table.instance.redraw(); }, 20); diff --git a/src/ui/client/dashboard/pages/bans/Bans.vue b/src/ui/client/dashboard/pages/bans/Bans.vue index 889acdd4d..fea3a3e2a 100644 --- a/src/ui/client/dashboard/pages/bans/Bans.vue +++ b/src/ui/client/dashboard/pages/bans/Bans.vue @@ -2,7 +2,7 @@ import { reactive, onBeforeMount, onMounted } from "vue"; import DashboardLayout from "@components/Dashboard/Layout.vue"; import BuilderBans from "@components/Builder/Bans.vue"; -import { useGlobal } from "@utils/global.js"; +import { useGlobal, useSubmitForm } from "@utils/global.js"; import { useDisplayStore } from "@store/global.js"; /** @@ -18,6 +18,85 @@ const bans = reactive({ builder: "", }); +// Bans table actions +import { useTableStore } from "@store/global.js"; + +const tableStore = useTableStore(); +const tableId = "table-bans-list"; +const bansToSubmit = new Set([]); + +/** + * @name updateTableData + * @description Update table data with the send one. + * @param {Array} data - The data to update. + * @returns {Void} + */ +function updateTableData(data) { + const tableEl = tableStore.getTableById(tableId); + tableEl.clearData(); + tableEl.updateOrAddData(data); +} + +/** + * @name banActions + * @description Define all the ban table actions (submit form, unselect, select...) + * @returns {Void} + */ +function banActions() { + window.addEventListener("click", (e) => { + // select all rows : set all rows checkbox to yes + add ip to bansToSubmit + if (e.target.closest("button[data-select-rows]")) { + const tableData = JSON.parse( + JSON.stringify(tableStore.getDefaultTableDataById(tableId)) + ); + bansToSubmit.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); + } + updateTableData(tableData); + return; + } + + // unselect all rows : reset to default the table + clear bansToSubmit arrau + if (e.target.closest("button[data-unselect-rows]")) { + updateTableData( + JSON.parse(JSON.stringify(tableStore.getDefaultTableDataById(tableId))) + ); + // clear bansToSubmit + bansToSubmit.clear(); + return; + } + + // listen to checkbox, look to the state and update bansToSubmit base on it + if ( + e.target.closest("input[type=checkbox]") && + e.target.closest("[data-is='table']") + ) { + 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 tableData = tableEl.getData(); + const item = tableData.find((el) => el.id === checkboxId); + isChecked + ? bansToSubmit.add(item.ip.text) + : bansToSubmit.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]) }; + useSubmitForm(data, "/unban", "POST"); + } + }); +} + onBeforeMount(() => { // Get builder data const dataAtt = "data-server-builder"; @@ -32,6 +111,7 @@ onBeforeMount(() => { onMounted(() => { // Set the page title useGlobal(); + banActions(); }); diff --git a/src/ui/client/dashboard/pages/bans/index.html b/src/ui/client/dashboard/pages/bans/index.html index ecb5532af..b2f34bd39 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/store/global.js b/src/ui/client/dashboard/store/global.js index 88593b09b..c0c6ccae2 100644 --- a/src/ui/client/dashboard/store/global.js +++ b/src/ui/client/dashboard/store/global.js @@ -80,11 +80,24 @@ export const useDisplayStore = defineStore("display", () => { */ export const useTableStore = defineStore("table", () => { const tables = ref({}); + const tablesDefaultData = ref({}); function setTable(id, tabulatorInstance) { tables.value[id] = tabulatorInstance; } + function setDefaultTableData(id, data) { + tablesDefaultData.value[id] = data; + } + + function getDefaultTableDataById(id) { + return tablesDefaultData.value[id]; + } + + function getDefaultTablesData() { + return tablesDefaultData.value; + } + function getTableById(id) { return tables.value[id]; } @@ -101,5 +114,14 @@ export const useTableStore = defineStore("table", () => { return !!(id in tables.value); } - return { setTable, getTableById, getTables, removeTable, isTable }; + return { + setTable, + getTableById, + getTables, + removeTable, + isTable, + setDefaultTableData, + getDefaultTableDataById, + getDefaultTablesData, + }; });