Merge pull request #251 from Zephyrrus/fix/paginate_search

fix: pagination not working when searching & fix: search not working on albums

3 files changed, 55 insertions, 14 deletions

diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index cf27a15..faaf27c 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -19,13 +19,13 @@
 							</div>
 							<div class="level-item">
 								<h2 class="subtitle is-5">
-									({{ totalFiles }} files)
+									({{ totalFiles }} files)<span v-if="search.length" class="asterisk is-size-6">*</span>
 								</h2>
 							</div>
 						</div>
 						<div class="level-right">
 							<div class="level-item">
-								<Search :hidden-hints="['album']" />
+								<Search @search="onSearch" />
 							</div>
 						</div>
 					</nav>
@@ -80,7 +80,8 @@ export default {
 	}],
 	data() {
 		return {
-			current: 1
+			current: 1,
+			search: ''
 		};
 	},
 	computed: {
@@ -105,7 +106,36 @@ export default {
 			fetch: 'images/fetchByAlbumId'
 		}),
 		fetchPaginate() {
-			this.fetch({ id: this.id, page: this.current });
+			// eslint-disable-next-line no-negated-condition
+			if (!this.search.length) {
+				this.fetch({ id: this.id, page: this.current });
+			} else {
+				this.$handler.executeAction('images/search', {
+					q: this.search,
+					page: this.current,
+					albumId: this.id
+				});
+			}
+		},
+		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:');
+		},
+		async onSearch(query) {
+			this.search = this.sanitizeQuery(query);
+
+			// eslint-disable-next-line no-negated-condition
+			if (!this.search.length) {
+				this.current = 1;
+				await this.fetch({ id: this.id, page: this.current });
+			} else {
+				this.$handler.executeAction('images/search', {
+					q: this.search,
+					page: this.current,
+					albumId: this.id
+				});
+			}
 		}
 	}
 };
@@ -125,4 +155,8 @@ export default {
 	.pagination-slot > .pagination-previous, .pagination-slot > .pagination-next {
 		display: none !important;
 	}
+	.asterisk {
+		vertical-align: text-top;
+		color: red;
+	}
 </style>
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 35ff2f0..4877e15 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -97,7 +97,17 @@ export default {
 		}),
 		async fetchPaginate() {
 			this.isLoading = true;
-			await this.fetch(this.current);
+
+			// eslint-disable-next-line no-negated-condition
+			if (!this.search.length) {
+				await this.fetch(this.current);
+			} else {
+				this.$handler.executeAction('images/search', {
+					q: this.search,
+					page: this.current
+				});
+			}
+
 			this.isLoading = false;
 		},
 		sanitizeQuery(qry) {
@@ -106,16 +116,15 @@ export default {
 			return (qry || '').replace(/(\w+):\s+/gi, '$1:');
 		},
 		async onSearch(query) {
-			this.search = query;
+			this.search = this.sanitizeQuery(query);
 
-			const sanitizedQ = this.sanitizeQuery(query);
 			// eslint-disable-next-line no-negated-condition
-			if (!sanitizedQ.length) {
+			if (!this.search.length) {
 				this.current = 1;
 				await this.fetch(this.current);
 			} else {
 				this.$handler.executeAction('images/search', {
-					q: this.sanitizeQuery(query),
+					q: this.search,
 					page: this.current
 				});
 			}
diff --git a/src/site/store/images.js b/src/site/store/images.js
index 535e7cd..0932aca 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -109,15 +109,13 @@ export const actions = {
 
 		return response;
 	},
-	async search({ commit, dispatch }, { q, albumId, page }) {
-		const optionalAlbum = albumId ? `&albumId=${albumId}` : '';
-
+	async search({ commit, dispatch, state }, { q, albumId, page }) {
 		page = page || 1;
 
 		try {
-			const response = await this.$axios.$get(`search/?q=${encodeURI(q)}${optionalAlbum}`);
+			const response = await this.$axios.$get('search', { params: { q: encodeURI(q), limit: state.pagination.limit, page, albumId } });
 
-			commit('setFilesAndMeta', { ...response, page });
+			commit('setFilesAndMeta', { ...response, page, name: state.albumName });
 
 			return response;
 		} catch (e) {