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

2 files changed, 18 insertions, 13 deletions

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