migrate to vue 3

web/src/views/Items.vue

@@ -93,7 +93,7 @@ export default {
         ...mapGetters(['layout']),
     },
     methods: {
-        ...mapActions(['deleteItem', 'markItemReturned']),
+        ...mapActions(['deleteItem', 'markItemReturned', 'loadEventItems', 'updateItem']),
         openLightboxModalWith(item) {
             this.lightboxHash = item.file;
         },
@@ -107,12 +107,15 @@ export default {
             this.editingItem = null;
         },
         saveEditingItem() { // Saves the edited copy of the item.
-            this.$store.dispatch('updateItem', this.editingItem);
+            this.updateItem(this.editingItem);
             this.closeEditingModal();
         },
         confirm(message) {
             return window.confirm(message);
         }
+    },
+    mounted() {
+        this.loadEventItems();
     }
 };
 </script>

web/src/views/Login.vue

@@ -100,7 +100,7 @@ export default {
 </script>
 
 <style scoped>
-input{
+input {
     background-color: var(--dark);
     border: var(--gray) 1px solid;;
 

web/src/views/admin/Admin.vue

@@ -6,7 +6,7 @@
                     <div class="card-header">
                         <ul class="nav nav-tabs card-header-tabs">
                             <li class="nav-item">
-                                <router-link class="nav-link" :to="{name: 'admin'}" active-class="active" exact>Dashboard</router-link>
+                                <router-link class="nav-link" :to="{name: 'admin'}" active-class="dummy" exact-active-class="active">Dashboard</router-link>
                             </li>
                             <li class="nav-item">
                                 <router-link class="nav-link" :to="{name: 'events'}" active-class="active">Events</router-link>

web/src/views/admin/Debug.vue

@@ -22,27 +22,13 @@
             {{ box.name }}
         </li>
     </ul>
-    <h3 class="text-center">Mails</h3>
-    <!--p>{{ mails }}</p-->
-    <ul>
-        <li v-for="mail in mails" :key="mail.id">
-            {{ mail.id }}
-        </li>
-    </ul>
     <h3 class="text-center">Issues</h3>
     <!--p>{{ issues }}</p-->
     <ul>
-        <li v-for="issue in issues" :key="issue.id">
+        <li v-for="issue in tickets" :key="issue.id">
             {{ issue.id }}
         </li>
     </ul>
-    <h3 class="text-center">System Events</h3>
-    <!--p>{{ systemEvents }}</p-->
-    <ul>
-        <li v-for="systemEvent in systemEvents" :key="systemEvent.id">
-            {{ systemEvent.id }}
-        </li>
-    </ul>
     </div>
 </template>
 
@@ -54,19 +40,17 @@ export default {
     name: 'Debug',
     components: {Table},
     computed: {
-        ...mapState(['events', 'loadedItems', 'loadedBoxes', 'mails', 'issues', 'systemEvents']),
+        ...mapState(['events', 'loadedItems', 'loadedBoxes', 'tickets']),
         qr_url() {
             return window.location.href;
         }
     },
     methods: {
-        ...mapActions(['changeEvent', 'loadMails', 'loadIssues', 'loadSystemEvents']),
+        ...mapActions(['changeEvent', 'loadTickets']),
 
     },
     mounted() {
-        this.loadMails();
-        this.loadIssues();
-        this.loadSystemEvents();
+        this.loadTickets();
     }
 };
 </script>