From 55cef1128eaa59c79122fccc3f3ce63fed42f3e4 Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Tue, 5 Nov 2024 23:36:05 +0100
Subject: [PATCH] extract the search box into its own component

---
 web/src/components/Navbar.vue           | 17 ++++------
 web/src/components/inputs/SearchBox.vue | 43 +++++++++++++++++++++++++
 web/src/store.js                        | 13 ++++++--
 3 files changed, 59 insertions(+), 14 deletions(-)
 create mode 100644 web/src/components/inputs/SearchBox.vue

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/inputs/SearchBox.vue b/web/src/components/inputs/SearchBox.vue
new file mode 100644
index 0000000..eb32b07
--- /dev/null
+++ b/web/src/components/inputs/SearchBox.vue
@@ -0,0 +1,43 @@
+<template>
+    <input
+        class="form-control w-100"
+        type="search"
+        placeholder="Search"
+        aria-label="Search"
+        v-model="search_query"
+        @keyup.enter="dispatchSearch"
+    >
+</template>
+
+<script>
+
+import {mapActions, mapGetters} from "vuex";
+
+export default {
+    name: 'SearchBox',
+    data() {
+        return {
+            search_query: ''
+        }
+    },
+    computed: {
+        ...mapGetters(['getActiveView'])
+    },
+    methods: {
+        ...mapActions(['searchEventItems', 'searchEventTickets']),
+        isItemView() {
+            return this.getActiveView === 'items' || this.getActiveView === 'item';
+        },
+        isTicketView() {
+            return this.getActiveView === 'tickets' || this.getActiveView === 'ticket';
+        },
+        dispatchSearch() {
+            if (this.isItemView()) {
+                this.searchEventItems(this.search_query);
+            } else if (this.isTicketView()) {
+                this.searchEventTickets(this.search_query);
+            }
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/web/src/store.js b/web/src/store.js
index 6cef8c6..53d01b6 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -23,6 +23,7 @@ const store = createStore({
 
         lastEvent: '37C3',
         lastUsed: {},
+        searchQuery: '',
         remember: false,
         user: {
             username: null,
@@ -355,10 +356,9 @@ const store = createStore({
             }
         },
         async searchEventItems({commit, getters, state}, query) {
-            const foo = utf8.encode(query);
-            const bar = base64.encode(foo);
+            const encoded_query = base64.encode(utf8.encode(query));
 
-            const {data, success} = await http.get(`/2/${getters.getEventSlug}/items/${bar}/`, state.user.token);
+            const {data, success} = await http.get(`/2/${getters.getEventSlug}/items/${encoded_query}/`, state.user.token);
             if (data && success)
                 commit('replaceLoadedItems', data);
         },
@@ -407,6 +407,13 @@ const store = createStore({
             if (data && success)
                 commit('replaceTickets', data);
         },
+        async searchEventTickets({commit, getters, state}, query) {
+            const encoded_query = base64.encode(utf8.encode(query));
+
+            const {data, success} = await http.get(`/2/${getters.getEventSlug}/tickets/${encoded_query}/`, state.user.token);
+            if (data && success)
+                commit('replaceTickets', data);
+        },
         async sendMail({commit, dispatch, state}, {id, message}) {
             const {data, success} = await http.post(`/2/tickets/${id}/reply/`, {message}, state.user.token);
             if (data && success) {