add ban form working

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

src/ui/client/dashboard/components/Widget/Tabulator.vue

@@ -334,6 +334,7 @@ onUnmounted(() => {
       :buttons="props.actionsButtons"
     />
     <div
+      :id="props.id"
       :class="[props.isStriped ? 'striped' : '']"
       ref="tableEl"
       data-is="table-content"

src/ui/client/dashboard/pages/bans/Bans.vue

@@ -22,8 +22,11 @@ const bans = reactive({
 import { useTableStore } from "@store/global.js";
 
 const tableStore = useTableStore();
-const tableId = "table-bans-list";
-const bansToSubmit = new Set([]);
+const tableUnbanId = "table-bans-list";
+const unbans = new Set([]);
+
+const tableAddbanId = "table-add-bans";
+let addCount = 1;
 
 /**
  *  @name updateTableData
@@ -31,72 +34,141 @@ const bansToSubmit = new Set([]);
  *  @param {Array} data - The data to update.
  *  @returns {Void}
  */
-function updateTableData(data) {
+function updateTableData(tableId, data) {
   const tableEl = tableStore.getTableById(tableId);
   tableEl.clearData();
   tableEl.updateOrAddData(data);
 }
 
 /**
- *  @name banActions
- *  @description Define all the ban table actions (submit form, unselect, select...)
+ *  @name unbanHandler
+ *  @description Define all the unban table actions (submit form, unselect, select...)
  *  @returns {Void}
  */
-function banActions() {
+function unbanHandler() {
   window.addEventListener("click", (e) => {
-    // 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();
 });
 </script>
 

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) {}
 }
 
 /**