speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-10 10:38:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implemented a basic array display for the table

Browse source
This commit is contained in:
adroslice 2024-05-18 21:32:52 +02:00
parent f30b93d5dc
commit fc18e9e8ac
2 changed files with 41 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
client/src/components/display/ArrayDisplay.vue Normal file
View file

@ -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>

11
client/src/pages/firewall/forward_rules.vue
View file

@ -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: 'Destination', path: 'destination_addresses'},
{heading: 'Service', path: 'services'},
{heading: 'Source', path: 'source_addresses', component: markRaw(ArrayDisplay), componentProp: 'data'},
{heading: 'Destination', path: 'destination_addresses', component: markRaw(ArrayDisplay), componentProp: 'data'},
{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>