Add flexsearch

nuxt.config.js

@@ -58,7 +58,8 @@ export default {
 		'~/plugins/buefy',
 		'~/plugins/v-clipboard',
 		'~/plugins/vue-isyourpasswordsafe',
-		'~/plugins/vue-timeago'
+		'~/plugins/vue-timeago',
+		'~/plugins/flexsearch'
 	],
 	serverMiddleware: [
 		{ path: '/', handler: serveStatic(path.join(__dirname, 'uploads')) }

package.json

@@ -46,6 +46,7 @@
 		"express": "^4.16.4",
 		"express-rate-limit": "^3.4.0",
 		"file-saver": "^2.0.1",
+		"flexsearch": "^0.6.22",
 		"fluent-ffmpeg": "^2.1.2",
 		"fs-jetpack": "^2.2.2",
 		"helmet": "^3.15.1",

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',

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;
+	}
+};

yarn.lock

@@ -3618,6 +3618,11 @@ flatten@^1.0.2:
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
   integrity sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=
 
+flexsearch@^0.6.22:
+  version "0.6.22"
+  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.6.22.tgz#7e3966a3c117ffc4381f5ad065f0a89b2b7418ed"
+  integrity sha512-Nit36q5LQlFEaLPckjN3xO9y0dZEb6rTDT7MIqlNdLe+5kGiHcBvAiBZBUR5DNZ+ySW6WGF8gCaud4eQocTUnw==
+
 fluent-ffmpeg@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/fluent-ffmpeg/-/fluent-ffmpeg-2.1.2.tgz#c952de2240f812ebda0aa8006d7776ee2acf7d74"