Implemented a basic array display for the table

client/src/components/display/ArrayDisplay.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  data: any[],
+  component?: string,
+  componentProp?: '',
+  ellipsis?: number
+}>(), {
+  data: () => [],
+  component: '',
+  componentProp: '',
+  ellipsis: 2,
+});
+
+
+</script>
+<template>
+  <div class="pillbar">
+    <div v-for="(item, index) of props.data.slice(0, ellipsis)" :key="index" class="pill">
+      <component v-bind="{[props.componentProp]: item}" :is="props.component" v-if="props.component !== ''"/>
+      <template v-else>{{ item }}</template>
+    </div>
+    <div v-if="props.data.length >= props.ellipsis" class="pill">...</div>
+  </div>
+</template>
+<style scoped>
+  .pillbar {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+  .pill {
+    border: 1px solid var(--cl-fg);
+    padding: 0.25rem;
+  }
+</style>

client/src/pages/firewall/forward_rules.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 rules = $ref([]);
@@ -9,9 +10,9 @@ let selection = $ref([] as number[]);
 
 const columns = [
   {heading: 'Name', path: 'name'},
-  {heading: 'Source', path: 'source_addresses'},
+  {heading: 'Source', path: 'source_addresses', component: markRaw(ArrayDisplay), componentProp: 'data'},
-  {heading: 'Destination', path: 'destination_addresses'},
+  {heading: 'Destination', path: 'destination_addresses', component: markRaw(ArrayDisplay), componentProp: 'data'},
-  {heading: 'Service', path: 'services'},
+  {heading: 'Service', path: 'services', component: markRaw(ArrayDisplay), componentProp: 'data'},
   {heading: 'Verdict', path: 'verdict'},
   {heading: 'Counter', path: 'counter'},
   {heading: 'Comment', path: 'comment'},
@@ -58,11 +59,11 @@ onMounted(async() => {
 
 <template>
   <div>
-    <TableView title="Forward Rules" :columns="columns" :loading="loading" @dragged-row="draggedRow" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, draggable: true}">
+    <TableView v-model:selection="selection" v-model:data="rules" title="Forward Rules" :columns="columns" :loading="loading" :table-props="{sort:true, sortSelf: true, draggable: true}" @dragged-row="draggedRow">
       <button @click="load">Refresh</button>
       <router-link class="button" to="/firewall/forward_rules/edit">Create</router-link>
       <router-link class="button" :class="{ disabled: selection.length != 1 }" :to="'/firewall/forward_rules/edit/' + selection[0]">Edit</router-link>
-      <button @click="deleteRule" :disabled="selection.length != 1">Delete</button>
+      <button :disabled="selection.length != 1" @click="deleteRule">Delete</button>
     </TableView>
   </div>
 </template>