From f8752f99af6e36607ff795082719cf72b34694e9 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Tue, 30 Jul 2024 23:45:23 +0200
Subject: [PATCH] Improve Wireguard tables

---
 client/src/pages/vpn/wireguard.interfaces.vue | 5 +++--
 client/src/pages/vpn/wireguard.peers.vue      | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/vpn/wireguard.interfaces.vue b/client/src/pages/vpn/wireguard.interfaces.vue
index e8557ca..81e220e 100644
--- a/client/src/pages/vpn/wireguard.interfaces.vue
+++ b/client/src/pages/vpn/wireguard.interfaces.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { apiCall } from '../../api';
 import getPlugins from '../../plugins';
+import ArrayDisplay from '~/components/display/ArrayDisplay.vue';
 const p = getPlugins();
 
 let interfaces = $ref({});
@@ -10,7 +11,7 @@ let selection = $ref([] as number[]);
 const columns = [
   { heading: 'Name', path: 'name' },
   { heading: 'Listen Port', path: 'listen_port' },
-  { heading: 'Peers', path: 'peers' },
+  { heading: 'Peers', path: 'peers', component: markRaw(ArrayDisplay), componentProp: 'data' },
   { heading: 'Comment', path: 'comment' },
 
 ];
@@ -68,4 +69,4 @@ onMounted(async() => {
     <button :disabled="selection.length != 1" @click="editInterface">Edit</button>
     <button :disabled="selection.length != 1" @click="deleteInterface">Delete</button>
   </TableView>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/src/pages/vpn/wireguard.peers.vue b/client/src/pages/vpn/wireguard.peers.vue
index 55bc357..0ab2d5f 100644
--- a/client/src/pages/vpn/wireguard.peers.vue
+++ b/client/src/pages/vpn/wireguard.peers.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { apiCall } from '../../api';
 import getPlugins from '../../plugins';
+import ArrayDisplay from '~/components/display/ArrayDisplay.vue';
 const p = getPlugins();
 
 let peers = $ref({});
@@ -9,7 +10,7 @@ let selection = $ref([] as number[]);
 
 const columns = [
   { heading: 'Name', path: 'name' },
-  { heading: 'Allowed IPs', path: 'allowed_ips' },
+  { heading: 'Allowed IPs', path: 'allowed_ips', component: markRaw(ArrayDisplay), componentProp: 'data' },
   { heading: 'Endpoint', path: 'endpoint' },
   { heading: 'Persistent Keepalive', path: 'persistent_keepalive' },
   { heading: 'Comment', path: 'comment' },