From 3847a89594dcd0047559b52ce6bb1003a105adc5 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Sun, 12 Mar 2023 20:27:36 +0100
Subject: [PATCH 1/3] add table selection, rework column definitions

---
 client/src/components/NiceTable.vue | 83 ++++++++++++++++++++++++++---
 client/src/pages/firewall/Rules.vue | 11 +++-
 2 files changed, 85 insertions(+), 9 deletions(-)

diff --git a/client/src/components/NiceTable.vue b/client/src/components/NiceTable.vue
index 08a57e0..d7b8baa 100644
--- a/client/src/components/NiceTable.vue
+++ b/client/src/components/NiceTable.vue
@@ -1,15 +1,33 @@
 <script setup lang="ts">
+import { useKeyModifier } from '@vueuse/core';
+
+const shiftState = $(useKeyModifier('Shift'));
+const ctrlState = $(useKeyModifier('Control'));
+
 const props = defineModel<{
-  columns?: Record<string, string>,
+  columns?: {
+    heading: string,
+    path: string,
+    component?: Component,
+  }[],
   data?: Record<string, any>[],
+  sort?: boolean,
   sortSelf?: boolean,
   sortBy?: string,
   sortDesc?: boolean,
 }>();
-let { columns, data, sortSelf, sortBy, sortDesc } = $(props);
+let { columns, data, sort, sortSelf, sortBy, sortDesc } = $(props);
+
+const emit = defineEmits<{
+  (event: 'rowAction', index: number): void,
+  (event: 'selectionChanged'): void
+}>();
+
+let selection = $ref([] as number[]);
 
 const displayData = $computed(() => (sortSelf && sortBy !== '')
   ? data?.sort((a, b) => {
+    selection = [];
     let result;
     if (a[sortBy ?? ''] > b[sortBy ?? '']) result = 1;
     else if (a[sortBy ?? ''] === b[sortBy ?? '']) result = 0;
@@ -21,35 +39,84 @@ const displayData = $computed(() => (sortSelf && sortBy !== '')
   : data);
 
 function toggleSorting(columnName: string) {
+  if (!sort) return;
   if (columnName === sortBy) sortDesc = !sortDesc;
   else {
     sortDesc = false;
     sortBy = columnName;
   }
 }
+
+function rowSelection(index: number) {
+  if (shiftState) {
+    let last = selection[selection.length-1];
+    let start = index;
+    let end = last;
+    if (last < start) {
+      start = last;
+      end = index;
+    }
+    for (let i = start; i < end; i++ ) {
+      if (!selection.includes(i)) {
+        selection =  [...selection, i];
+      }
+    }
+  } else if (ctrlState) {
+    if (selection.includes(index)) {
+      // remove if already exists
+      selection.splice(selection.indexOf(index), 1);
+    } else {
+      selection =  [...selection, index];
+    }
+  } else {
+    if (selection.includes(index)) {
+      selection = [];
+    } else {
+      selection = [index];
+    }
+  }
+  emit("selectionChanged");
+}
+
+function atPath(value: any, path: string): any {
+  for (const segment of path.split(".")) {
+    value = value[segment];
+  }
+  return value;
+}
 </script>
 
 <template>
   <table>
     <thead>
       <tr>
-        <th v-for="[name, heading] in Object.entries(columns ?? {})" :key="name" @click="toggleSorting(name)">
+        <th v-for="{heading, path} of columns" :key="path" @click="() => toggleSorting(path)">
           <div class="flex-row">
             {{ heading }}
-            <i-mdi-arrow-down v-if="name === sortBy && sortDesc"/>
-            <i-mdi-arrow-up v-else-if="name === sortBy"/>
+            <template v-if="sort">
+              <i-mdi-arrow-down v-if="path === sortBy && sortDesc"/>
+              <i-mdi-arrow-up v-else-if="path === sortBy"/>
+            </template>
           </div>
         </th>
       </tr>
     </thead>
     <tbody>
-      <!-- eslint-disable-next-line vue/require-v-for-key -->
-      <tr v-for="row of displayData">
-        <td v-for="[column] in Object.entries(columns ?? {})" :key="column" v-text="row[column]"/>
+      <tr v-for="(row, index) in displayData" :key="index"
+          @click="() => rowSelection(index)"
+          @dblclick="() => emit('rowAction', index)"
+          :class="{'selected': selection.includes(index)}">
+        <td v-for="{path, component} of columns" :key="path">
+          {{ component ? "" : atPath(row, path) }}
+          <component v-if="component" :is="component"/>
+        </td>
       </tr>
     </tbody>
   </table>
 </template>
 
 <style scoped>
+.selected {
+  background-color: red;
+}
 </style>
\ No newline at end of file
diff --git a/client/src/pages/firewall/Rules.vue b/client/src/pages/firewall/Rules.vue
index 876efbb..d0d9369 100644
--- a/client/src/pages/firewall/Rules.vue
+++ b/client/src/pages/firewall/Rules.vue
@@ -2,6 +2,15 @@
 import { apiCall } from "../../api";
 
 let rules = $ref([]);
+const columns = [
+  {heading: 'Name', path: 'name'},
+  {heading: 'Source', path: 'match.source_addresses'},
+  {heading: 'Destination', path: 'match.destination_addresses'},
+  {heading: 'Service', path: 'match.services'},
+  {heading: 'Verdict', path: 'verdict'},
+  {heading: 'Counter', path: 'counter'},
+  {heading: 'Comment', path: 'comment'},
+];
 
 async function loadRules(){
   let res = await apiCall("Firewall.GetForwardRules", {});
@@ -24,6 +33,6 @@ onMounted(async() => {
     <PageHeader title="Forward Rules">
       <button @click="loadRules">Load Rules</button>
     </PageHeader>
-    <NiceTable :columns="{name: 'Name', verdict: 'Verdict'}" :sort-self="false" v-model:data="rules"/>
+    <NiceTable :columns="columns" v-model:data="rules"/>
   </div>
 </template>
\ No newline at end of file

From d97f7a4e935a359f55ab1b4887b4c1e17578f420 Mon Sep 17 00:00:00 2001
From: adroslice <adriel.m.slice@gmail.com>
Date: Sun, 12 Mar 2023 21:16:01 +0100
Subject: [PATCH 2/3] Added Drag&Drop to NiceTable

---
 client/src/components/NiceTable.vue | 37 ++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/client/src/components/NiceTable.vue b/client/src/components/NiceTable.vue
index d7b8baa..f936233 100644
--- a/client/src/components/NiceTable.vue
+++ b/client/src/components/NiceTable.vue
@@ -84,6 +84,22 @@ function atPath(value: any, path: string): any {
   }
   return value;
 }
+
+let draggedRow = $ref(-1);
+let draggedOverRow = $ref(-1);
+function dragDropRow() {
+  if (data) {
+    const row = data[draggedRow];
+    data.splice(draggedRow, 1);
+    data.splice(draggedOverRow, 0, row);
+    data = data;
+  }
+  // Reset drag data
+  draggedRow = 0;
+  draggedOverRow = 0;
+  // Kill selection
+  selection = [];
+}
 </script>
 
 <template>
@@ -103,9 +119,17 @@ function atPath(value: any, path: string): any {
     </thead>
     <tbody>
       <tr v-for="(row, index) in displayData" :key="index"
+          draggable="true"
           @click="() => rowSelection(index)"
           @dblclick="() => emit('rowAction', index)"
-          :class="{'selected': selection.includes(index)}">
+          @dragstart="() => draggedRow = index"
+          @dragenter="() => draggedOverRow = index"
+          @dragend="() => dragDropRow()"
+          :class="{
+            'selected': selection.includes(index),
+            'dragged-over-before': index === draggedOverRow && draggedOverRow < draggedRow,
+            'dragged-over-after': index === draggedOverRow && draggedOverRow > draggedRow,
+          }">
         <td v-for="{path, component} of columns" :key="path">
           {{ component ? "" : atPath(row, path) }}
           <component v-if="component" :is="component"/>
@@ -119,4 +143,15 @@ function atPath(value: any, path: string): any {
 .selected {
   background-color: red;
 }
+
+.dragged-over-before {
+  border-top: 0.25rem solid var(--cl-fg);
+}
+.dragged-over-after {
+  border-bottom: 0.25rem solid var(--cl-fg);
+}
+
+tr {
+  cursor: grab;
+}
 </style>
\ No newline at end of file

From 262ecc81d43f441278b192b824a678233e07b47f Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Mon, 13 Mar 2023 21:31:16 +0100
Subject: [PATCH 3/3] fix shift selection bugs

---
 client/src/components/NiceTable.vue | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/client/src/components/NiceTable.vue b/client/src/components/NiceTable.vue
index f936233..ade930a 100644
--- a/client/src/components/NiceTable.vue
+++ b/client/src/components/NiceTable.vue
@@ -49,16 +49,20 @@ function toggleSorting(columnName: string) {
 
 function rowSelection(index: number) {
   if (shiftState) {
-    let last = selection[selection.length-1];
-    let start = index;
-    let end = last;
-    if (last < start) {
-      start = last;
-      end = index;
-    }
-    for (let i = start; i < end; i++ ) {
-      if (!selection.includes(i)) {
-        selection =  [...selection, i];
+    if (selection.length === 0) {
+      selection = [index];
+    } else {
+      let last = selection[selection.length-1];
+      let start = index;
+      let end = last;
+      if (last < start) {
+        start = last;
+        end = index;
+      }
+      for (let i = start; i <= end; i++ ) {
+        if (!selection.includes(i)) {
+          selection =  [...selection, i];
+        }
       }
     }
   } else if (ctrlState) {