diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index e08274d..32a5299 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -31,7 +31,7 @@ </button> <form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline"> - <input class="form-control w-100" type="search" placeholder="Search" aria-label="Search"> + <input class="form-control w-100" type="search" placeholder="Search" aria-label="Search" @input="searchEventItems($event.target.value)"> </form> <div class="collapse navbar-collapse" id="navbarSupportedContent"> @@ -77,7 +77,7 @@ export default { ...mapGetters(['getEventSlug', 'getActiveView']), }, methods: { - ...mapActions(['changeEvent', 'changeView']), + ...mapActions(['changeEvent', 'changeView','searchEventItems']), ...mapMutations(['setLayout']) } }; diff --git a/src/store/index.js b/src/store/index.js index 6883c73..ebe6a90 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -63,7 +63,7 @@ const store = new Vuex.Store({ }, changeEvent({ dispatch, getters}, eventName) { router.push({path: `/${eventName.slug}/${getters.getActiveView}`}); - dispatch('loadEventItems', eventName); + dispatch('loadEventItems'); }, changeView({ getters }, link) { router.push({path: `/${getters.getEventSlug}/${link.path}`}); @@ -75,6 +75,10 @@ const store = new Vuex.Store({ const { data } = await axios.get(`/1/${getters.getEventSlug}/items`); commit('replaceLoadedItems', data); }, + async searchEventItems({ commit, getters }, query) { + const {data} = await axios.get(`/1/${getters.getEventSlug}/items/${btoa(query)}`); + commit('replaceLoadedItems', data); + }, async loadBoxes({ commit }) { const { data } = await axios.get('/1/boxes'); commit('replaceBoxes', data);