Added list view for notifications.

ui/app/assets/css/style.css

@@ -345,3 +345,11 @@ hr {
   word-break: break-word;
   text-wrap: auto;
 }
+
+table.is-fixed {
+  table-layout: fixed;
+}
+
+div.is-centered {
+  justify-content: center;
+}

ui/app/pages/notifications.vue

@@ -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="column is-12" v-if="!toggleForm && notifications && notifications.length > 0">
-        <div class="columns is-multiline" v-if="notifications && notifications.length > 0">
+        <template v-if="'list' === display_style">
-          <div class="column is-6" v-for="item in notifications" :key="item.id">
+          <div class="table-container">
-            <div class="card is-flex is-full-height is-flex-direction-column">
+            <table class="table is-striped is-hoverable is-fullwidth is-bordered"
-              <header class="card-header">
+              style="min-width: 850px; table-layout: fixed;">
-                <div class="card-header-title is-text-overflow is-block">
+              <thead>
-                  {{ item.request.method.toUpperCase() }}({{ ucFirst(item.request.type) }}) @
+                <tr class="has-text-centered is-unselectable">
-                  <NuxtLink target="_blank" :href="item.request.url">{{ item.name }}</NuxtLink>
+                  <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">
+                <div class="card-content" v-if="item?.raw">
-                  <a class="has-text-info" v-tooltip="'Export target.'" @click.prevent="exportItem(item)">
+                  <div class="content">
-                    <span class="icon"><i class="fa-solid fa-file-export" /></span>
+                    <pre><code>{{ filterItem(item) }}</code></pre>
-                  </a>
+                  </div>
-                  <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-footer mt-auto">
-              <div class="card-content is-flex-grow-1">
+                  <div class="card-footer-item">
-                <div class="content">
+                    <button class="button is-warning is-fullwidth" @click="editItem(item);">
-                  <p>
+                      <span class="icon"><i class="fa-solid fa-trash-can" /></span>
-                    <span class="icon"><i class="fa-solid fa-list-ul" /></span>
+                      <span>Edit</span>
-                    <span>On: {{ join_events(item.on) }}</span>
+                    </button>
-                  </p>
+                  </div>
-                  <p v-if="item.request?.headers && item.request.headers.length > 0">
+                  <div class="card-footer-item">
-                    <span class="icon"><i class="fa-solid fa-heading" /></span>
+                    <button class="button is-danger is-fullwidth" @click="deleteItem(item)">
-                    <span>{{item.request.headers.map(h => h.key).join(', ')}}</span>
+                      <span class="icon"><i class="fa-solid fa-trash" /></span>
-                  </p>
+                      <span>Delete</span>
-                </div>
+                    </button>
-              </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>
               </div>
             </div>
           </div>
-        </div>
+        </template>
-        <Message title="No Endpoints" class="is-background-warning-80 has-text-dark" icon="fas fa-exclamation-circle"
+      </div>
-          v-if="!notifications || notifications.length < 1">
+
+      <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 allowedEvents = ref<string[]>([])
-const notifications = ref([])
+const notifications = ref<notification[]>([])
-const target = ref({})
+const target = ref<notification>({
-const targetRef = ref('')
+  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 filterItem = (item: notification) => {
-  const { raw, ...rest } = item
+  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 => {
+const exportItem = async (item: notification) => {
-  let data = JSON.parse(JSON.stringify(item))
+  const data: notificationImport = {
+    ...JSON.parse(JSON.stringify(item)),
+    _type: 'notification',
+    _version: '1.0',
+  }
+
   const keys = ['id', 'raw']
   keys.forEach(k => {
-    if (data.hasOwnProperty(k)) {
+    if (Object.prototype.hasOwnProperty.call(data, k)) {
-      delete data[k]
+      delete (data as any)[k]
     }
   })
 
-  // -- Remove authorization headers
+  if (data.request?.headers?.length) {
-  if (data.request?.headers && data.request.headers.length > 0) {
+    data.request.headers = data.request.headers.filter(
-    data.request.headers = data.request.headers.filter(h => h.key.toLowerCase() !== 'authorization')
+      h => 'authorization' !== h.key.toLowerCase(),
+    )
   }
 
-  data['_type'] = 'notification'
+  copyText(encode(data))
-  data['_version'] = '1.0'
-
-  return copyText(encode(data))
 }
 </script>

ui/app/pages/tasks.vue

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

ui/app/types/notification.d.ts

@@ -16,6 +16,7 @@ type notification = {
   name: string;
   request: notificationRequest;
   on: string[];
+  raw?: boolean;
 };
 
 type notificationImport = notification & {