feat: Add hiding to recommendations as a prop

fix: change some of the regexes to remove , and ; as separator support because the query parser doesn't understad them and I don't feel like dealing with all the edge cases introduces by it

4 files changed, 50 insertions, 22 deletions

diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
index 57226a9..72a5707 100644
--- a/src/site/components/search/Search.vue
+++ b/src/site/components/search/Search.vue
@@ -12,7 +12,8 @@
 					placeholder="Search"
 					type="search"
 					open-on-focus
-					@typing="handleTyping">
+					@typing="handleTyping"
+					@keydown.native.enter="onSubmit">
 					<template slot-scope="props">
 						<b>{{ props.option.name }}:</b>
 						<small>
@@ -37,6 +38,12 @@ export default {
 	components: {
 		SearchInput,
 	},
+	props: {
+		hiddenHints: {
+			type: Array,
+			default: () => [],
+		},
+	},
 	data() {
 		return {
 			query: '',
@@ -66,11 +73,17 @@ export default {
 					'valueFormat': 'specific date',
 					'hint': '',
 				},
+				{
+					'name': 'file',
+					'valueFormat': 'generated name',
+					'hint': '',
+				},
 			],
 			filteredHints: [],
 		};
 	},
 	created() {
+		this.hints = this.hints.filter(({ name }) => this.hiddenHints.indexOf(name) === -1);
 		this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load
 	},
 	methods: {
@@ -83,15 +96,19 @@ export default {
 		handleTyping(qry) {
 			qry = qry || '';
 			// get the last word or group of words
-			const lastWord = (qry.match(/("[^"]*")|[^;, ]+/g) || ['']).pop().toLowerCase();
+			let lastWord = (qry.match(/("[^"]*")|[^\s]+/g) || ['']).pop().toLowerCase();
 			// if there's an open/unbalanced quote, don't autosuggest
 			if (/^[^"]*("[^"]*"[^"]*)*(")[^"]*$/.test(qry)) { this.filteredHints = []; return; }
 			// don't autosuggest if we have an open query but no text yet
-			if (/:[\s|;|,]?$/gi.test(qry)) { this.filteredHints = []; return; }
+			if (/:\s+$/gi.test(qry)) { this.filteredHints = []; return; }
 			// if the above query didn't match (all quotes are balanced
 			// and the previous tag has value
 			// check if we're about to start a new tag
-			if (/[\s|;|,]+$/gi.test(qry)) { this.filteredHints = this.hints; return; }
+			if (/\s+$/gi.test(qry)) { this.filteredHints = this.hints; return; }
+
+			// ignore starting `-` from lastword, because - is used to
+			// exclude something, so -alb should autosuggest album
+			lastWord = lastWord.replace(/^-/, '');
 
 			// if we got here, then we handled all special cases
 			// now take last word, and check if we can autosuggest a tag
@@ -100,11 +117,11 @@ export default {
 				.toLowerCase()
 				.indexOf(lastWord) === 0);
 		},
-		sanitizeQuery(qry) {
-			// \w+:\s+? to transform 'tag: 123' into 'tag:123'
-		},
-		onSubmit() {
-			this.$emit('search', this.query);
+		onSubmit(event) {
+			if (event.key === 'Enter') {
+				if (/:$/gi.test(this.query)) { return; }
+			}
+			this.$emit('search', this.query, event);
 		},
 	},
 };
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index a4aa440..7e96b33 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -25,17 +25,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 :hidden-hints="['album']" />
 							</div>
 						</div>
 					</nav>
@@ -43,7 +33,8 @@
 					<hr>
 
 					<Grid
-						v-if="totalFiles"
+						v-if="
+							totalFiles"
 						:files="images.files"
 						:total="totalFiles">
 						<template v-slot:pagination>
@@ -64,8 +55,12 @@
 								aria-current-label="Current page" />
 						</template>
 					</Grid>
+					</search>
 				</div>
 			</div>
+			</nav>
+		</div>
+		</div>
 		</div>
 	</section>
 </template>
@@ -75,11 +70,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', ({ route, store }) => {
 		store.commit('images/resetState');
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index cfd68ba..096f4e3 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -103,8 +103,16 @@ export default {
 			await this.fetch(this.current);
 			this.isLoading = false;
 		},
+		sanitizeQuery(qry) {
+			// remove spaces between a search type selector `album:`
+			// and the value (ex `tag: 123` -> `tag:123`)
+			return (qry || '').replace(/(\w+):\s+/gi, '$1:');
+		},
 		onSearch(query) {
-			this.searc = query;
+			this.search = query;
+			this.$handler.executeAction('images/search', {
+				q: this.sanitizeQuery(query),
+			});
 		},
 	},
 };
diff --git a/src/site/store/images.js b/src/site/store/images.js
index 4737c26..0488573 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -108,6 +108,12 @@ export const actions = {
 
 		return response;
 	},
+	async search({ commit }, { q, albumId }) {
+		const optionalAlbum = albumId ? `&albumId=${albumId}` : '';
+		const response = await this.$axios.$get(`search/?q=${encodeURI(q)}${optionalAlbum}`);
+
+		return response;
+	},
 };
 
 export const mutations = {