Added list view for notifications.
This commit is contained in:
arabcoders
parent
da53055be8
commit
4b0522e72e
4 changed files with 184 additions and 111 deletions
|
|
@ -345,3 +345,11 @@ hr {
|
|||
word-break: break-word;
|
||||
text-wrap: auto;
|
||||
}
|
||||
|
||||
table.is-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
div.is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,3 @@
|
|||
<style scoped>
|
||||
table.is-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
div.table-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mt-1 columns is-multiline">
|
||||
|
|
@ -37,7 +23,15 @@ div.is-centered {
|
|||
</button>
|
||||
</p>
|
||||
<p class="control" v-if="notifications.length > 0">
|
||||
<button class="button is-info" @click="reloadContent" :class="{ 'is-loading': isLoading }"
|
||||
<button v-tooltip.bottom="'Change display style'" class="button has-tooltip-bottom"
|
||||
@click="() => display_style = display_style === 'cards' ? 'list' : 'cards'">
|
||||
<span class="icon"><i class="fa-solid"
|
||||
:class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p class="control" v-if="notifications.length > 0">
|
||||
<button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }"
|
||||
:disabled="!socket.isConnected || isLoading || notifications.length < 1">
|
||||
<span class="icon"><i class="fas fa-refresh"></i></span>
|
||||
</button>
|
||||
|
|
@ -52,65 +46,126 @@ div.is-centered {
|
|||
</div>
|
||||
|
||||
<div class="column is-12" v-if="toggleForm">
|
||||
<NotificationForm :addInProgress="addInProgress" :reference="targetRef" :item="target"
|
||||
<NotificationForm :addInProgress="addInProgress" :reference="targetRef as string" :item="target"
|
||||
@cancel="resetForm(true);" @submit="updateItem" :allowedEvents="allowedEvents" />
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="!toggleForm">
|
||||
<div class="columns is-multiline" v-if="notifications && notifications.length > 0">
|
||||
<div class="column is-6" v-for="item in notifications" :key="item.id">
|
||||
<div class="card is-flex is-full-height is-flex-direction-column">
|
||||
<header class="card-header">
|
||||
<div class="card-header-title is-text-overflow is-block">
|
||||
{{ item.request.method.toUpperCase() }}({{ ucFirst(item.request.type) }}) @
|
||||
<NuxtLink target="_blank" :href="item.request.url">{{ item.name }}</NuxtLink>
|
||||
<div class="column is-12" v-if="!toggleForm && notifications && notifications.length > 0">
|
||||
<template v-if="'list' === display_style">
|
||||
<div class="table-container">
|
||||
<table class="table is-striped is-hoverable is-fullwidth is-bordered"
|
||||
style="min-width: 850px; table-layout: fixed;">
|
||||
<thead>
|
||||
<tr class="has-text-centered is-unselectable">
|
||||
<th width="80%">
|
||||
<span class="icon"><i class="fa-solid fa-paper-plane" /></span>
|
||||
<span>Targets</span>
|
||||
</th>
|
||||
<th width="20%">
|
||||
<span class="icon"><i class="fa-solid fa-gear" /></span>
|
||||
<span>Actions</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in notifications" :key="item.id">
|
||||
<td class="is-text-overflow is-vcentered">
|
||||
<div>
|
||||
{{ item.request.method.toUpperCase() }}({{ ucFirst(item.request.type) }}) @
|
||||
<NuxtLink target="_blank" :href="item.request.url">{{ item.name }}</NuxtLink>
|
||||
</div>
|
||||
<div class="is-unselectable">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-list-ul" /></span>
|
||||
<span>On: {{ join_events(item.on) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-vcentered is-items-center">
|
||||
<div class="field is-grouped is-grouped-centered">
|
||||
<div class="control">
|
||||
<button class="button is-info is-small is-fullwidth" v-tooltip="'Export'"
|
||||
@click="exportItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-warning is-small is-fullwidth" v-tooltip="'Edit'"
|
||||
@click="editItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-cog" /></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-danger is-small is-fullwidth" v-tooltip="'Delete'"
|
||||
@click="deleteItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="columns is-multiline" v-if="notifications && notifications.length > 0">
|
||||
<div class="column is-6" v-for="item in notifications" :key="item.id">
|
||||
<div class="card is-flex is-full-height is-flex-direction-column">
|
||||
<header class="card-header">
|
||||
<div class="card-header-title is-text-overflow is-block">
|
||||
{{ item.request.method.toUpperCase() }}({{ ucFirst(item.request.type) }}) @
|
||||
<NuxtLink target="_blank" :href="item.request.url">{{ item.name }}</NuxtLink>
|
||||
</div>
|
||||
<div class="card-header-icon">
|
||||
<a class="has-text-info" v-tooltip="'Export target.'" @click.prevent="exportItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
</a>
|
||||
<button @click="item.raw = !item.raw">
|
||||
<span class="icon"><i class="fa-solid"
|
||||
:class="{ 'fa-arrow-down': !item?.raw, 'fa-arrow-up': item?.raw }" /></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-content is-flex-grow-1">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="icon"><i class="fa-solid fa-list-ul" /></span>
|
||||
<span>On: {{ join_events(item.on) }}</span>
|
||||
</p>
|
||||
<p v-if="item.request?.headers && item.request.headers.length > 0">
|
||||
<span class="icon"><i class="fa-solid fa-heading" /></span>
|
||||
<span>{{item.request.headers.map(h => h.key).join(', ')}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-header-icon">
|
||||
<a class="has-text-info" v-tooltip="'Export target.'" @click.prevent="exportItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
</a>
|
||||
<button @click="item.raw = !item.raw">
|
||||
<span class="icon"><i class="fa-solid"
|
||||
:class="{ 'fa-arrow-down': !item?.raw, 'fa-arrow-up': item?.raw }" /></span>
|
||||
</button>
|
||||
<div class="card-content" v-if="item?.raw">
|
||||
<div class="content">
|
||||
<pre><code>{{ filterItem(item) }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-content is-flex-grow-1">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="icon"><i class="fa-solid fa-list-ul" /></span>
|
||||
<span>On: {{ join_events(item.on) }}</span>
|
||||
</p>
|
||||
<p v-if="item.request?.headers && item.request.headers.length > 0">
|
||||
<span class="icon"><i class="fa-solid fa-heading" /></span>
|
||||
<span>{{item.request.headers.map(h => h.key).join(', ')}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content" v-if="item?.raw">
|
||||
<div class="content">
|
||||
<pre><code>{{ filterItem(item) }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer mt-auto">
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning is-fullwidth" @click="editItem(item);">
|
||||
<span class="icon"><i class="fa-solid fa-trash-can" /></span>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-danger is-fullwidth" @click="deleteItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
<div class="card-footer mt-auto">
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning is-fullwidth" @click="editItem(item);">
|
||||
<span class="icon"><i class="fa-solid fa-trash-can" /></span>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-danger is-fullwidth" @click="deleteItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Message title="No Endpoints" class="is-background-warning-80 has-text-dark" icon="fas fa-exclamation-circle"
|
||||
v-if="!notifications || notifications.length < 1">
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="!toggleForm && (!notifications || notifications.length < 1)">
|
||||
<Message title="No Endpoints" class="is-background-warning-80 has-text-dark" icon="fas fa-exclamation-circle">
|
||||
There are no notifications endpoints configured to receive web notifications.
|
||||
</Message>
|
||||
</div>
|
||||
|
|
@ -139,16 +194,30 @@ div.is-centered {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import type { notification, notificationImport } from '~/types/notification'
|
||||
|
||||
const toast = useNotification()
|
||||
const config = useConfigStore()
|
||||
const socket = useSocketStore()
|
||||
const box = useConfirm()
|
||||
const display_style = useStorage<string>("tasks_display_style", "cards")
|
||||
|
||||
const allowedEvents = ref([])
|
||||
const notifications = ref([])
|
||||
const target = ref({})
|
||||
const targetRef = ref('')
|
||||
const allowedEvents = ref<string[]>([])
|
||||
const notifications = ref<notification[]>([])
|
||||
const target = ref<notification>({
|
||||
name: '',
|
||||
on: [],
|
||||
request: {
|
||||
method: 'POST',
|
||||
url: '',
|
||||
type: 'json',
|
||||
headers: [],
|
||||
data_key: '',
|
||||
},
|
||||
})
|
||||
const targetRef = ref<string | null>('')
|
||||
const toggleForm = ref(false)
|
||||
const isLoading = ref(false)
|
||||
const initialLoad = ref(true)
|
||||
|
|
@ -206,6 +275,7 @@ const resetForm = (closeForm = false) => {
|
|||
url: '',
|
||||
type: 'json',
|
||||
headers: [],
|
||||
data_key: '',
|
||||
},
|
||||
}
|
||||
targetRef.value = null
|
||||
|
|
@ -214,13 +284,13 @@ const resetForm = (closeForm = false) => {
|
|||
}
|
||||
}
|
||||
|
||||
const updateData = async notifications => {
|
||||
const updateData = async (items: notification[]) => {
|
||||
const response = await request('/api/notifications', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(notifications),
|
||||
body: JSON.stringify(items),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
|
@ -234,13 +304,13 @@ const updateData = async notifications => {
|
|||
return true
|
||||
}
|
||||
|
||||
const deleteItem = async item => {
|
||||
const deleteItem = async (item: notification) => {
|
||||
if (true !== box.confirm(`Delete '${item.name}'?`)) {
|
||||
return
|
||||
}
|
||||
|
||||
const index = notifications.value.findIndex(i => i?.id === item.id)
|
||||
if (index > -1) {
|
||||
if (0 <= index) {
|
||||
notifications.value.splice(index, 1)
|
||||
} else {
|
||||
toast.error('Notification target not found.')
|
||||
|
|
@ -249,18 +319,21 @@ const deleteItem = async item => {
|
|||
}
|
||||
|
||||
const status = await updateData(notifications.value)
|
||||
|
||||
if (!status) {
|
||||
return
|
||||
}
|
||||
if (!status) return
|
||||
|
||||
toast.success('Notification target deleted.')
|
||||
}
|
||||
|
||||
const updateItem = async ({ reference, item }) => {
|
||||
const updateItem = async ({
|
||||
reference,
|
||||
item,
|
||||
}: {
|
||||
reference: string | null;
|
||||
item: notification;
|
||||
}) => {
|
||||
if (reference) {
|
||||
const index = notifications.value.findIndex(i => i?.id === reference)
|
||||
if (index > -1) {
|
||||
if (0 <= index) {
|
||||
notifications.value[index] = item
|
||||
}
|
||||
} else {
|
||||
|
|
@ -269,10 +342,7 @@ const updateItem = async ({ reference, item }) => {
|
|||
|
||||
try {
|
||||
const status = await updateData(notifications.value)
|
||||
|
||||
if (!status) {
|
||||
return
|
||||
}
|
||||
if (!status) return
|
||||
|
||||
toast.success(`Notification target ${reference ? 'updated' : 'added'}.`)
|
||||
resetForm(true)
|
||||
|
|
@ -281,18 +351,19 @@ const updateItem = async ({ reference, item }) => {
|
|||
}
|
||||
}
|
||||
|
||||
const filterItem = item => {
|
||||
const { raw, ...rest } = item
|
||||
const filterItem = (item: notification) => {
|
||||
const { raw, ...rest } = item as any
|
||||
return JSON.stringify(rest, null, 2)
|
||||
}
|
||||
|
||||
const editItem = item => {
|
||||
const editItem = (item: notification) => {
|
||||
target.value = item
|
||||
targetRef.value = item.id
|
||||
targetRef.value = item.id ?? null
|
||||
toggleForm.value = true
|
||||
}
|
||||
|
||||
const join_events = events => (!events || events.length < 1) ? 'ALL' : events.map(e => ucFirst(e)).join(', ')
|
||||
const join_events = (events: string[]) =>
|
||||
!events || events.length < 1 ? 'ALL' : events.map(e => ucFirst(e)).join(', ')
|
||||
|
||||
const sendTest = async () => {
|
||||
if (true !== box.confirm('Send test notification?')) {
|
||||
|
|
@ -310,7 +381,7 @@ const sendTest = async () => {
|
|||
}
|
||||
|
||||
toast.success('Test notification sent.')
|
||||
} catch (e) {
|
||||
} catch (e: any) {
|
||||
console.error(e)
|
||||
toast.error(`Failed to send test notification. ${e.message}`)
|
||||
} finally {
|
||||
|
|
@ -320,23 +391,26 @@ const sendTest = async () => {
|
|||
|
||||
onMounted(async () => socket.isConnected ? await reloadContent(true) : '')
|
||||
|
||||
const exportItem = async item => {
|
||||
let data = JSON.parse(JSON.stringify(item))
|
||||
const exportItem = async (item: notification) => {
|
||||
const data: notificationImport = {
|
||||
...JSON.parse(JSON.stringify(item)),
|
||||
_type: 'notification',
|
||||
_version: '1.0',
|
||||
}
|
||||
|
||||
const keys = ['id', 'raw']
|
||||
keys.forEach(k => {
|
||||
if (data.hasOwnProperty(k)) {
|
||||
delete data[k]
|
||||
if (Object.prototype.hasOwnProperty.call(data, k)) {
|
||||
delete (data as any)[k]
|
||||
}
|
||||
})
|
||||
|
||||
// -- Remove authorization headers
|
||||
if (data.request?.headers && data.request.headers.length > 0) {
|
||||
data.request.headers = data.request.headers.filter(h => h.key.toLowerCase() !== 'authorization')
|
||||
if (data.request?.headers?.length) {
|
||||
data.request.headers = data.request.headers.filter(
|
||||
h => 'authorization' !== h.key.toLowerCase(),
|
||||
)
|
||||
}
|
||||
|
||||
data['_type'] = 'notification'
|
||||
data['_version'] = '1.0'
|
||||
|
||||
return copyText(encode(data))
|
||||
copyText(encode(data))
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,3 @@
|
|||
<style scoped>
|
||||
table.is-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
div.is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<div class="mt-1 columns is-multiline">
|
||||
|
|
|
|||
1
ui/app/types/notification.d.ts
vendored
1
ui/app/types/notification.d.ts
vendored
|
|
@ -16,6 +16,7 @@ type notification = {
|
|||
name: string;
|
||||
request: notificationRequest;
|
||||
on: string[];
|
||||
raw?: boolean;
|
||||
};
|
||||
|
||||
type notificationImport = notification & {
|
||||
|
|
|
|||
Loading…
Reference in a new issue