feat: add new search input

For now, it clones the autocomplete from buefy, untill a PR or resolution to the opened issue about not being able to manipulate how the suggestions are applied is found

1 files changed, 10 insertions, 11 deletions

diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index d623b5c..cfd68ba 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -16,17 +16,7 @@
 						</div>
 						<div class="level-right">
 							<div class="level-item">
-								<b-field>
-									<b-input
-										class="lolisafe-input"
-										placeholder="Search"
-										type="search" />
-									<p class="control">
-										<b-button type="is-lolisafe">
-											Search
-										</b-button>
-									</p>
-								</b-field>
+								<Search @search="onSearch" />
 							</div>
 						</div>
 					</nav>
@@ -68,11 +58,13 @@ import { mapState, mapGetters, mapActions } from 'vuex';
 
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import Grid from '~/components/grid/Grid.vue';
+import Search from '~/components/search/Search.vue';
 
 export default {
 	components: {
 		Sidebar,
 		Grid,
+		Search,
 	},
 	middleware: ['auth', ({ store }) => {
 		store.commit('images/resetState');
@@ -82,6 +74,7 @@ export default {
 		return {
 			current: 1,
 			isLoading: false,
+			search: '',
 		};
 	},
 	computed: {
@@ -98,6 +91,9 @@ export default {
 	watch: {
 		current: 'fetchPaginate',
 	},
+	created() {
+		this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load
+	},
 	methods: {
 		...mapActions({
 			fetch: 'images/fetch',
@@ -107,6 +103,9 @@ export default {
 			await this.fetch(this.current);
 			this.isLoading = false;
 		},
+		onSearch(query) {
+			this.searc = query;
+		},
 	},
 };
 </script>