unban form send from UI

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"],

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);

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();
 });
 </script>
 

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,
+  };
 });