Add flexsearch

2 files changed, 39 insertions, 1 deletions

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 027bdf2..eaeb4f7 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -79,6 +79,13 @@
 	<Waterfall
 		:gutterWidth="10"
 		:gutterHeight="4">
+		<!-- Gotta implement search and pagination here -->
+		<input v-model="searchTerm"
+			type="text"
+			placeholder="Search..."
+			@input="search()"
+			@keyup.enter="search()">
+
 		<WaterfallItem v-for="(item, index) in files"
 			v-if="showWaterfall && item.thumb"
 			:key="index"
@@ -153,14 +160,29 @@ export default {
 		}
 	},
 	data() {
-		return { showWaterfall: true };
+		return {
+			showWaterfall: true,
+			searchTerm: null
+		};
 	},
 	computed: {
 		config() {
 			return this.$store.state.config;
 		}
 	},
+	mounted() {
+		this.$search.items(this.files);
+	},
 	methods: {
+		async search() {
+			const data = await this.$search.do(this.searchTerm, [
+				'name',
+				'original',
+				'type',
+				'albums:name'
+			]);
+			console.log('> Search result data', data);
+		},
 		deleteFile(file, index) {
 			this.$dialog.confirm({
 				title: 'Deleting file',
diff --git a/src/site/plugins/flexsearch.js b/src/site/plugins/flexsearch.js
new file mode 100644
index 0000000..595b180
--- /dev/null
+++ b/src/site/plugins/flexsearch.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import FlexSearch from 'flexsearch';
+const search = new FlexSearch('speed');
+
+// https://github.com/nextapps-de/flexsearch
+
+Vue.prototype.$search = {
+	items: async items => {
+		await search.clear();
+		await search.add(items);
+	},
+	do: async (term, field) => {
+		const results = await search.search(term, { field });
+		return results;
+	}
+};