fix: pagination not working when searching

fix: search not working on albums

1 files changed, 38 insertions, 4 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>