Merge pull request #251 from Zephyrrus/fix/paginate_search

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

src/api/routes/search/searchGET.js

@@ -20,7 +20,7 @@ class configGET extends Route {
 	async run(req, res, db, user) {
 		let count = 0;
 
-		const { q } = req.query;
+		const { q, albumId } = req.query;
 		const parsed = searchQuery.parse(q, options);
 
 		let files = db.table('files')
@@ -28,6 +28,12 @@ class configGET extends Route {
 			.where({ 'files.userId': user.id })
 			.orderBy('files.createdAt', 'desc');
 
+		if (albumId) {
+			files
+				.join('albumsFiles', 'albumsFiles.fileId', 'files.id')
+				.where({ albumId });
+		}
+
 		files = queryHelper.processQuery(db, files, parsed);
 
 		// const query = files.toString();

src/api/routes/service/statsGET.js

@@ -17,8 +17,8 @@ class filesGET extends Route {
 					[category]: {
 						...dbRes,
 						meta: {
-							cached: true,
-							generatedOn: moment().format('MMMM Do YYYY, h:mm:ss a z'), // pg returns this as a date, sqlite3 returns an unix timestamp :<
+							cached: false,
+							generatedOn: moment().format('MMMM Do YYYY, h:mm:ss a z'),
 							type: StatsGenerator.Type.HIDDEN
 						}
 					}

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>

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

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) {