From 105f360550520b32a13e5733bbb21a4046764b2b Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Sat, 13 Jul 2024 17:28:38 +0200
Subject: [PATCH] stash

---
 web/src/components/AsyncLoader.vue        | 133 ++++++++++++++++++++++
 web/src/components/Navbar.vue             |  17 +--
 web/src/components/Timeline.vue           |  24 ++--
 web/src/components/inputs/AsyncButton.vue |  47 ++++++++
 web/src/components/inputs/SearchBox.vue   |  29 +++++
 web/src/store.js                          |   8 +-
 web/src/views/Items.vue                   | 128 +++++++++++----------
 web/src/views/Ticket.vue                  | 111 +++++++++---------
 web/src/views/Tickets.vue                 |  95 ++++++++--------
 web/src/views/admin/Notifications.vue     |  37 +++++-
 10 files changed, 441 insertions(+), 188 deletions(-)
 create mode 100644 web/src/components/AsyncLoader.vue
 create mode 100644 web/src/components/inputs/AsyncButton.vue
 create mode 100644 web/src/components/inputs/SearchBox.vue

diff --git a/web/src/components/AsyncLoader.vue b/web/src/components/AsyncLoader.vue
new file mode 100644
index 0000000..393175c
--- /dev/null
+++ b/web/src/components/AsyncLoader.vue
@@ -0,0 +1,133 @@
+<template>
+    <div class="async-wrapper" :class="{ 'loaded': loaded }">
+        <div class="deferred">
+            <slot></slot>
+        </div>
+        <div class="loader-wrapper">
+            <div class="loader-ellipsis">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'AsyncLoader',
+    props: {
+        loaded: {
+            type: Boolean,
+            default: false
+        }
+    }
+};
+</script>
+
+<style>
+.async-wrapper {
+    position: relative;
+}
+
+.async-wrapper > .deferred {
+    width: 100%;
+    height: 100%;
+    display: none;
+}
+
+.async-wrapper.loaded > .deferred {
+    display: block;
+}
+
+.async-wrapper > .loader-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.async-wrapper > .loader-wrapper > .loader-ellipsis {
+    color: #17a2b8;
+}
+
+.async-wrapper.loaded > .loader-wrapper > .loader-ellipsis {
+    display: none;
+}
+
+
+.async-wrapper > .loader-wrapper > .loader-ellipsis,
+.async-wrapper > .loader-wrapper > .loader-ellipsis div {
+    box-sizing: border-box;
+}
+
+.async-wrapper > .loader-wrapper > .loader-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.async-wrapper > .loader-wrapper > .loader-ellipsis div {
+    position: absolute;
+    top: 33.33333px;
+    width: 13.33333px;
+    height: 13.33333px;
+    border-radius: 50%;
+    background: currentColor;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.async-wrapper > .loader-wrapper > .loader-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: loader-ellipsis1 0.6s infinite;
+}
+
+.async-wrapper > .loader-wrapper > .loader-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: loader-ellipsis2 0.6s infinite;
+}
+
+.async-wrapper > .loader-wrapper > .loader-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: loader-ellipsis2 0.6s infinite;
+}
+
+.async-wrapper > .loader-wrapper > .loader-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: loader-ellipsis3 0.6s infinite;
+}
+
+@keyframes loader-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes loader-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+
+@keyframes loader-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(24px, 0);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
index fb0736b..686f324 100644
--- a/web/src/components/Navbar.vue
+++ b/web/src/components/Navbar.vue
@@ -29,16 +29,7 @@
                 </router-link>
             </li>
         </ul>
-        <form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline mr-1" v-if="hasPermissions">
-            <input
-                class="form-control w-100"
-                type="search"
-                placeholder="Search"
-                aria-label="Search"
-                @input="searchEventItems($event.target.value)"
-                disabled
-            >
-        </form>
+        <SearchBox v-if="hasPermissions" class="mt-1 my-lg-auto my-xl-auto w-100 d-inline mr-1"/>
         <div class="custom-control-inline mr-1" v-if="hasPermissions">
             <div class="btn-group btn-group-toggle mr-1" v-if="isItemView()">
                 <button :class="['btn', 'btn-info', { active: layout === 'cards' }]" @click="setLayout('cards')">
@@ -103,9 +94,13 @@
 
 <script>
 import {mapState, mapActions, mapMutations, mapGetters} from 'vuex';
+import SearchBox from "@/components/inputs/SearchBox.vue";
 
 export default {
     name: 'Navbar',
+    components: {
+        SearchBox
+    },
     data: () => ({
         views: [
             {'title': 'items', 'path': 'items'},
@@ -122,7 +117,7 @@ export default {
         ...mapGetters(['getEventSlug', 'getActiveView', "checkPermission", "hasPermissions", "layout", "route"]),
     },
     methods: {
-        ...mapActions(['changeEvent', 'changeView', 'searchEventItems']),
+        ...mapActions(['changeEvent', 'changeView']),
         ...mapMutations(['logout']),
         navigateTo(link) {
             if (this.route.path !== link)
diff --git a/web/src/components/Timeline.vue b/web/src/components/Timeline.vue
index 6130656..28a21b5 100644
--- a/web/src/components/Timeline.vue
+++ b/web/src/components/Timeline.vue
@@ -40,10 +40,10 @@
                 <div class="">
                     <textarea placeholder="add comment..." v-model="newComment" class="form-control">
                     </textarea>
-                    <button class="btn btn-primary float-right" @click="addCommentAndClear">
+                    <AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear">
                         <font-awesome-icon icon="comment"/>
                         Save Comment
-                    </button>
+                    </AsyncButton>
                 </div>
             </div>
         </li>
@@ -58,10 +58,10 @@
                 <div>
                     <textarea placeholder="reply mail..." v-model="newMail" class="form-control">
                     </textarea>
-                    <button class="btn btn-primary float-right" @click="sendMailAndClear">
+                    <AsyncButton class="btn btn-primary float-right" :task="sendMailAndClear">
                         <font-awesome-icon icon="envelope"/>
                         Send Mail
-                    </button>
+                    </AsyncButton>
                 </div>
             </div>
         </li>
@@ -73,15 +73,16 @@
 import TimelineMail from "@/components/TimelineMail.vue";
 import TimelineComment from "@/components/TimelineComment.vue";
 import TimelineStateChange from "@/components/TimelineStateChange.vue";
-import {mapGetters} from "vuex";
+import {mapActions, mapGetters} from "vuex";
 import TimelineAssignment from "@/components/TimelineAssignment.vue";
 import TimelineRelatedItem from "@/components/TimelineRelatedItem.vue";
 import TimelineShippingVoucher from "@/components/TimelineShippingVoucher.vue";
+import AsyncButton from "@/components/inputs/AsyncButton.vue";
 
 export default {
     name: 'Timeline',
     components: {
-        TimelineShippingVoucher,
+        TimelineShippingVoucher, AsyncButton,
         TimelineRelatedItem, TimelineAssignment, TimelineStateChange, TimelineComment, TimelineMail
     },
     props: {
@@ -103,12 +104,15 @@ export default {
         },
     },
     methods: {
-        sendMailAndClear: function () {
-            this.$emit('sendMail', this.newMail);
+        ...mapActions(['sendMail', 'postComment']),
+        sendMailAndClear: async function () {
+            //this.$emit('sendMail', this.newMail);
+            await this.sendMail(this.newMail);
             this.newMail = "";
         },
-        addCommentAndClear: function () {
-            this.$emit('addComment', this.newComment);
+        addCommentAndClear: async function () {
+            //this.$emit('addComment', this.newComment);
+            await this.postComment(this.newComment);
             this.newComment = "";
         }
     }
diff --git a/web/src/components/inputs/AsyncButton.vue b/web/src/components/inputs/AsyncButton.vue
new file mode 100644
index 0000000..a3c1712
--- /dev/null
+++ b/web/src/components/inputs/AsyncButton.vue
@@ -0,0 +1,47 @@
+<template>
+    <button @click.stop="handleClick" :disabled="disabled">
+        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"
+              :class="{'d-none': !disabled}"></span>
+        <span class="ml-2" :class="{'d-none': !disabled}">In Progress...</span>
+        <span :class="{'d-none': disabled}"><slot></slot></span>
+    </button>
+</template>
+
+<script>
+
+export default {
+    name: 'AsyncButton',
+    data() {
+        return {
+            disabled: false,
+        };
+    },
+    props: {
+        task: {
+            type: Function,
+            required: true,
+        },
+    },
+    methods: {
+        async handleClick() {
+            console.log("AsyncButton.handleClick() called");
+            if (this.task && typeof this.task === 'function') {
+                this.disabled = true;
+                try {
+                    await this.task();
+                } catch (e) {
+                    console.error(e);
+                } finally {
+                    this.disabled = false;
+                }
+            }
+        },
+    }
+};
+</script>
+
+<style scoped>
+.spinner-border {
+    vertical-align: -0.125em;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/inputs/SearchBox.vue b/web/src/components/inputs/SearchBox.vue
new file mode 100644
index 0000000..47c9331
--- /dev/null
+++ b/web/src/components/inputs/SearchBox.vue
@@ -0,0 +1,29 @@
+<template>
+    <form class="form-inline">
+        <input
+            class="form-control w-100"
+            type="search"
+            placeholder="Search"
+            aria-label="Search"
+            v-model="search_query"
+            @input="searchEventItems(search_query)"
+        >
+    </form>
+</template>
+
+<script>
+
+import {mapActions} from "vuex";
+
+export default {
+    name: 'SearchBox',
+    data() {
+        return {
+            search_query: ''
+        }
+    },
+    methods: {
+        ...mapActions(['searchEventItems']),
+    }
+};
+</script>
\ No newline at end of file
diff --git a/web/src/store.js b/web/src/store.js
index 2d9a54b..622b9e9 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -46,6 +46,7 @@ const store = createStore({
             states: 0,
             messageTemplates: 0,
             shippingVouchers: 0,
+            userNotificationChannels: 0,
         },
         persistent_loaded: false,
         shared_loaded: false,
@@ -240,6 +241,10 @@ const store = createStore({
             state.shippingVouchers = codes;
             state.fetchedData = {...state.fetchedData, shippingVouchers: Date.now()};
         },
+        setUserNotificationChannels(state, channels) {
+            state.userNotificationChannels = channels;
+            state.fetchedData = {...state.fetchedData, userNotificationChannels: Date.now()};
+        },
     },
     actions: {
         async login({commit}, {username, password, remember}) {
@@ -529,9 +534,10 @@ const store = createStore({
         },
         async fetchUserNotificationChannels({commit, state}) {
             if (!state.user.token) return;
+            if (state.fetchedData.userNotificationChannels > Date.now() - 1000 * 60 * 60 * 24) return;
             const {data, success} = await http.get('/2/user_notification_channels/', state.user.token);
             if (data && success) {
-                state.userNotificationChannels = data;
+                commit('setUserNotificationChannels', data);
             }
         },
     },
diff --git a/web/src/views/Items.vue b/web/src/views/Items.vue
index 9d127f0..5abcf5d 100644
--- a/web/src/views/Items.vue
+++ b/web/src/views/Items.vue
@@ -1,77 +1,82 @@
 <template>
-    <div class="container-fluid px-xl-5 mt-3">
-        <Modal title="Edit Item" v-if="editingItem" @close="closeEditingModal()">
-            <template #body>
-                <EditItem
-                    :item="editingItem"
-                    badge="uid"
+    <AsyncLoader :loaded="loadedItems.length > 0">
+        <div class="container-fluid px-xl-5 mt-3">
+            <Modal title="Edit Item" v-if="editingItem" @close="closeEditingModal()">
+                <template #body>
+                    <EditItem
+                        :item="editingItem"
+                        badge="uid"
+                    />
+                </template>
+                <template #buttons>
+                    <button type="button" class="btn btn-secondary" @click="closeEditingModal()">Cancel</button>
+                    <button type="button" class="btn btn-success" @click="saveEditingItem()">Save Changes</button>
+                </template>
+            </Modal>
+            <Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
+            <div class="row" v-if="layout === 'table'">
+                <div class="col-xl-8 offset-xl-2">
+                    <Table
+                        :columns="['uid', 'description', 'box']"
+                        :items="loadedItems"
+                        :keyName="'uid'"
+                        @itemActivated="openLightboxModalWith($event)"
+                    >
+                        <template #actions="{ item }">
+                            <div class="btn-group">
+                                <button class="btn btn-success"
+                                        @click.stop="confirm('return Item?') && markItemReturned(item)"
+                                        title="returned">
+                                    <font-awesome-icon icon="check"/>
+                                </button>
+                                <button class="btn btn-secondary" @click.stop="openEditingModalWith(item)" title="edit">
+                                    <font-awesome-icon icon="edit"/>
+                                </button>
+                                <button class="btn btn-danger" @click.stop="confirm('delete Item?') && deleteItem(item)"
+                                        title="delete">
+                                    <font-awesome-icon icon="trash"/>
+                                </button>
+                            </div>
+                        </template>
+                    </Table>
+                </div>
+            </div>
+            <Cards
+                v-if="layout === 'cards'"
+                :columns="['uid', 'description', 'box']"
+                :items="loadedItems"
+                :keyName="'uid'"
+                v-slot="{ item }"
+                @itemActivated="openLightboxModalWith($event)"
+            >
+                <AuthenticatedImage v-if="item.file" cached
+                                    :src="`/media/2/256/${item.file}/`"
+                                    class="card-img-top img-fluid"
                 />
-            </template>
-            <template #buttons>
-                <button type="button" class="btn btn-secondary" @click="closeEditingModal()">Cancel</button>
-                <button type="button" class="btn btn-success" @click="saveEditingItem()">Save Changes</button>
-            </template>
-        </Modal>
-        <Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
-        <div class="row" v-if="layout === 'table'">
-            <div class="col-xl-8 offset-xl-2">
-                <Table
-                    :columns="['uid', 'description', 'box']"
-                    :items="loadedItems"
-                    :keyName="'uid'"
-                    @itemActivated="openLightboxModalWith($event)"
-                >
-                    <template #actions="{ item }">
+                <div class="card-body">
+                    <h6 class="card-title">{{ item.description }}</h6>
+                    <h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
+                    <div class="row mx-auto mt-2">
                         <div class="btn-group">
-                            <button class="btn btn-success"
+                            <button class="btn btn-outline-success"
                                     @click.stop="confirm('return Item?') && markItemReturned(item)" title="returned">
                                 <font-awesome-icon icon="check"/>
                             </button>
-                            <button class="btn btn-secondary" @click.stop="openEditingModalWith(item)" title="edit">
+                            <button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item)"
+                                    title="edit">
                                 <font-awesome-icon icon="edit"/>
                             </button>
-                            <button class="btn btn-danger" @click.stop="confirm('delete Item?') && deleteItem(item)"
+                            <button class="btn btn-outline-danger"
+                                    @click.stop="confirm('delete Item?') && deleteItem(item)"
                                     title="delete">
                                 <font-awesome-icon icon="trash"/>
                             </button>
                         </div>
-                    </template>
-                </Table>
-            </div>
-        </div>
-        <Cards
-            v-if="layout === 'cards'"
-            :columns="['uid', 'description', 'box']"
-            :items="loadedItems"
-            :keyName="'uid'"
-            v-slot="{ item }"
-            @itemActivated="openLightboxModalWith($event)"
-        >
-            <AuthenticatedImage v-if="item.file" cached
-                                :src="`/media/2/256/${item.file}/`"
-                                class="card-img-top img-fluid"
-            />
-            <div class="card-body">
-                <h6 class="card-title">{{ item.description }}</h6>
-                <h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
-                <div class="row mx-auto mt-2">
-                    <div class="btn-group">
-                        <button class="btn btn-outline-success"
-                                @click.stop="confirm('return Item?') && markItemReturned(item)" title="returned">
-                            <font-awesome-icon icon="check"/>
-                        </button>
-                        <button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item)" title="edit">
-                            <font-awesome-icon icon="edit"/>
-                        </button>
-                        <button class="btn btn-outline-danger" @click.stop="confirm('delete Item?') && deleteItem(item)"
-                                title="delete">
-                            <font-awesome-icon icon="trash"/>
-                        </button>
                     </div>
                 </div>
-            </div>
-        </Cards>
-    </div>
+            </Cards>
+        </div>
+    </AsyncLoader>
 </template>
 
 <script>
@@ -82,6 +87,7 @@ import EditItem from '@/components/EditItem';
 import {mapActions, mapGetters, mapState} from 'vuex';
 import Lightbox from '../components/Lightbox';
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+import AsyncLoader from "@/components/AsyncLoader.vue";
 
 export default {
     name: 'Items',
@@ -89,7 +95,7 @@ export default {
         lightboxHash: null,
         editingItem: null,
     }),
-    components: {AuthenticatedImage, Lightbox, Table, Cards, Modal, EditItem},
+    components: {AsyncLoader, AuthenticatedImage, Lightbox, Table, Cards, Modal, EditItem},
     computed: {
         ...mapState(['loadedItems']),
         ...mapGetters(['layout']),
diff --git a/web/src/views/Ticket.vue b/web/src/views/Ticket.vue
index cf1ce88..63f3515 100644
--- a/web/src/views/Ticket.vue
+++ b/web/src/views/Ticket.vue
@@ -1,74 +1,77 @@
 <template>
-    <div class="container-fluid px-xl-5 mt-3">
-        <div class="row">
-            <div class="col-xl-8 offset-xl-2">
-                <div class="card bg-dark text-light mb-2" id="filters">
-                    <div class="card-header">
-                        <h3>Ticket #{{ ticket.id }} - {{ ticket.name }}</h3>
-                    </div>
-                    <Timeline :timeline="ticket.timeline" @sendMail="handleMail" @addComment="handleComment"/>
-                    <div class="card-footer d-flex justify-content-between">
-                        <button class="btn btn-secondary mr-2" @click="$router.go(-1)">Back</button>
-                        <!--button class="btn btn-danger" @click="deleteItem({type: 'tickets', id: ticket.id})">
-                            <font-awesome-icon icon="trash"/>
-                            Delete
-                        </button-->
-                        <div class="btn-group">
-                            <select class="form-control" v-model="selected_assignee">
-                                <option v-for="user in users" :value="user.username">{{ user.username }}</option>
-                            </select>
-                            <button class="form-control btn btn-success"
-                                    @click="assignTicket(ticket)"
-                                    :disabled="!selected_assignee || (selected_assignee == ticket.assigned_to)">
-                                Assign&nbsp;Ticket
-                            </button>
+    <AsyncLoader :loaded="ticket.id">
+        <div class="container-fluid px-xl-5 mt-3">
+            <div class="row">
+                <div class="col-xl-8 offset-xl-2">
+                    <div class="card bg-dark text-light mb-2" id="filters">
+                        <div class="card-header">
+                            <h3>Ticket #{{ ticket.id }} - {{ ticket.name }}</h3>
                         </div>
-                        <div class="btn-group">
-                            <select class="form-control" v-model="selected_state">
-                                <option v-for="status in state_options" :value="status.value">{{
-                                        status.text
-                                    }}
-                                </option>
-                            </select>
-                            <button class="form-control btn btn-success"
-                                    @click="changeTicketStatus(ticket)"
-                                    :disabled="(selected_state == ticket.state)">
-                                Change&nbsp;Status
-                            </button>
+                        <Timeline :timeline="ticket.timeline" @sendMail="handleMail" @addComment="handleComment"/>
+                        <div class="card-footer d-flex justify-content-between">
+                            <button class="btn btn-secondary mr-2" @click="$router.go(-1)">Back</button>
+                            <!--button class="btn btn-danger" @click="deleteItem({type: 'tickets', id: ticket.id})">
+                                <font-awesome-icon icon="trash"/>
+                                Delete
+                            </button-->
+                            <div class="btn-group">
+                                <select class="form-control" v-model="selected_assignee">
+                                    <option v-for="user in users" :value="user.username">{{ user.username }}</option>
+                                </select>
+                                <button class="form-control btn btn-success"
+                                        @click="assignTicket(ticket)"
+                                        :disabled="!selected_assignee || (selected_assignee == ticket.assigned_to)">
+                                    Assign&nbsp;Ticket
+                                </button>
+                            </div>
+                            <div class="btn-group">
+                                <select class="form-control" v-model="selected_state">
+                                    <option v-for="status in state_options" :value="status.value">{{
+                                            status.text
+                                        }}
+                                    </option>
+                                </select>
+                                <button class="form-control btn btn-success"
+                                        @click="changeTicketStatus(ticket)"
+                                        :disabled="(selected_state == ticket.state)">
+                                    Change&nbsp;Status
+                                </button>
+                            </div>
                         </div>
-                    </div>
-                    <div class="card-footer d-flex justify-content-between">
-                        <ClipboardButton :payload="shippingEmail" class="btn btn-primary">
-                            <font-awesome-icon icon="clipboard"/>
-                            Copy&nbsp;DHL&nbsp;contact&nbsp;to&nbsp;clipboard
-                        </ClipboardButton>
-                        <div class="btn-group">
-                            <select class="form-control" v-model="shipping_voucher_type">
-                                <option v-for="type in availableShippingVoucherTypes.filter(t=>t.count>0)"
-                                        :value="type.id">{{ type.name }}
-                                </option>
-                            </select>
-                            <button class="form-control btn btn-success"
-                                    @click="claimShippingVoucher({ticket: ticket.id, shipping_voucher_type}).then(()=>shipping_voucher_type=null)"
-                                    :disabled="!shipping_voucher_type">
-                                Claim&nbsp;Shipping&nbsp;Voucher
-                            </button>
+                        <div class="card-footer d-flex justify-content-between">
+                            <ClipboardButton :payload="shippingEmail" class="btn btn-primary">
+                                <font-awesome-icon icon="clipboard"/>
+                                Copy&nbsp;DHL&nbsp;contact&nbsp;to&nbsp;clipboard
+                            </ClipboardButton>
+                            <div class="btn-group">
+                                <select class="form-control" v-model="shipping_voucher_type">
+                                    <option v-for="type in availableShippingVoucherTypes.filter(t=>t.count>0)"
+                                            :value="type.id">{{ type.name }}
+                                    </option>
+                                </select>
+                                <button class="form-control btn btn-success"
+                                        @click="claimShippingVoucher({ticket: ticket.id, shipping_voucher_type}).then(()=>shipping_voucher_type=null)"
+                                        :disabled="!shipping_voucher_type">
+                                    Claim&nbsp;Shipping&nbsp;Voucher
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </AsyncLoader>
 </template>
 
 <script>
 import {mapActions, mapGetters, mapState} from 'vuex';
 import Timeline from "@/components/Timeline.vue";
 import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
+import AsyncLoader from "@/components/AsyncLoader.vue";
 
 export default {
     name: 'Ticket',
-    components: {ClipboardButton, Timeline},
+    components: {AsyncLoader, ClipboardButton, Timeline},
     data() {
         return {
             selected_state: null,
diff --git a/web/src/views/Tickets.vue b/web/src/views/Tickets.vue
index 37de2fb..f1497bb 100644
--- a/web/src/views/Tickets.vue
+++ b/web/src/views/Tickets.vue
@@ -1,51 +1,53 @@
 <template>
-    <div class="container-fluid px-xl-5 mt-3">
-        <div class="row">
-            <div class="col-xl-8 offset-xl-2">
-                <SlotTable
-                    :columns="['id', 'name', 'state', 'last_activity', 'assigned_to', 'actions', 'actions2']"
-                    :items="tickets.map(formatTicket)"
-                    :keyName="'id'"
-                    v-if="layout === 'table'"
-                >
-                    <template v-slot:actions="{item}">
-                        <div class="btn-group">
-                            <a class="btn btn-primary" :href="'/'+ getEventSlug + '/ticket/' + item.id" title="view"
-                               @click.prevent="gotoDetail(item)">
-                                <font-awesome-icon icon="eye"/>
-                                View
-                            </a>
-                        </div>
-                    </template>
-                </SlotTable>
+    <AsyncLoader :loaded="tickets.length > 0">
+        <div class="container-fluid px-xl-5 mt-3">
+            <div class="row">
+                <div class="col-xl-8 offset-xl-2">
+                    <SlotTable
+                        :columns="['id', 'name', 'state', 'last_activity', 'assigned_to', 'actions', 'actions2']"
+                        :items="tickets.map(formatTicket)"
+                        :keyName="'id'"
+                        v-if="layout === 'table'"
+                    >
+                        <template v-slot:actions="{item}">
+                            <div class="btn-group">
+                                <a class="btn btn-primary" :href="'/'+ getEventSlug + '/ticket/' + item.id" title="view"
+                                   @click.prevent="gotoDetail(item)">
+                                    <font-awesome-icon icon="eye"/>
+                                    View
+                                </a>
+                            </div>
+                        </template>
+                    </SlotTable>
+                </div>
             </div>
-        </div>
-        <CollapsableCards v-if="layout === 'tasks'" :items="tickets"
-                          :columns="['id', 'name', 'last_activity', 'assigned_to']"
-                          :keyName="'state'" :sections="['pending_new', 'pending_open','pending_shipping',
+            <CollapsableCards v-if="layout === 'tasks'" :items="tickets"
+                              :columns="['id', 'name', 'last_activity', 'assigned_to']"
+                              :keyName="'state'" :sections="['pending_new', 'pending_open','pending_shipping',
                           'pending_physical_confirmation','pending_return','pending_postponed'].map(stateInfo)">
-            <template #section_header="{index, section, count}">
-                {{ section.text }} <span class="badge badge-light ml-1">{{ count }}</span>
-            </template>
-            <template #section_body="{item}">
-                <tr>
-                    <td>{{ item.id }}</td>
-                    <td>{{ item.name }}</td>
-                    <td>{{ item.last_activity }}</td>
-                    <td>{{ item.assigned_to }}</td>
-                    <td>
-                        <div class="btn-group">
-                            <a class="btn btn-primary" :href="'/'+ getEventSlug + '/ticket/' + item.id" title="view"
-                               @click.prevent="gotoDetail(item)">
-                                <font-awesome-icon icon="eye"/>
-                                View
-                            </a>
-                        </div>
-                    </td>
-                </tr>
-            </template>
-        </CollapsableCards>
-    </div>
+                <template #section_header="{index, section, count}">
+                    {{ section.text }} <span class="badge badge-light ml-1">{{ count }}</span>
+                </template>
+                <template #section_body="{item}">
+                    <tr>
+                        <td>{{ item.id }}</td>
+                        <td>{{ item.name }}</td>
+                        <td>{{ item.last_activity }}</td>
+                        <td>{{ item.assigned_to }}</td>
+                        <td>
+                            <div class="btn-group">
+                                <a class="btn btn-primary" :href="'/'+ getEventSlug + '/ticket/' + item.id" title="view"
+                                   @click.prevent="gotoDetail(item)">
+                                    <font-awesome-icon icon="eye"/>
+                                    View
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </CollapsableCards>
+        </div>
+    </AsyncLoader>
 </template>
 
 <script>
@@ -56,10 +58,11 @@ import {mapActions, mapGetters, mapState} from 'vuex';
 import Lightbox from '../components/Lightbox';
 import SlotTable from "@/components/SlotTable.vue";
 import CollapsableCards from "@/components/CollapsableCards.vue";
+import AsyncLoader from "@/components/AsyncLoader.vue";
 
 export default {
     name: 'Tickets',
-    components: {Lightbox, SlotTable, Cards, Modal, EditItem, CollapsableCards},
+    components: {AsyncLoader, Lightbox, SlotTable, Cards, Modal, EditItem, CollapsableCards},
     computed: {
         ...mapState(['tickets']),
         ...mapGetters(['stateInfo', 'getEventSlug', 'layout']),
diff --git a/web/src/views/admin/Notifications.vue b/web/src/views/admin/Notifications.vue
index 312a902..71cb630 100644
--- a/web/src/views/admin/Notifications.vue
+++ b/web/src/views/admin/Notifications.vue
@@ -1,9 +1,36 @@
 <template>
-    <ul>
-        <li v-for="channel in userNotificationChannels" :key="channel.id">
-            {{ channel.id }} - {{ channel.channel_type }} - {{ channel.channel_target }} - {{ channel.event_filter }} - {{ channel.active }} - {{ channel.created }} - {{ channel.user }}
-        </li>
-    </ul>
+    <div>
+        <Table :items="userNotificationChannels.map(channel => ({...channel, username: channel.user.username || {}}))"
+               :columns="['id', 'username', 'channel_type', 'channel_target', 'event_filter', /*'active', 'created'*/]">
+            <template #actions="{ item }">
+                <div class="btn-group">
+                    <button class="btn btn-danger" @click.stop="">
+                        <font-awesome-icon icon="trash"/>
+                        delete
+                    </button>
+                </div>
+            </template>
+        </Table>
+        <div class="card bg-dark">
+            <div class="card-body">
+                <div class="input-group">
+                    <select class="form-control">
+                        <option value="1">user</option>
+                        <option value="2">admin</option>
+                    </select>
+                    <select class="form-control">
+                        <option value="email">Email</option>
+                        <option value="telegram">Telegram</option>
+                    </select>
+                    <input type="text" class="form-control" placeholder="channel_target">
+                    <input type="text" class="form-control" value="*">
+                    <div class="input-group-append">
+                        <button class="btn btn-primary">Add</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>