feat(AdvacedTable): Started on advanced query logic

backend/logic/actions/songs.js

@@ -209,10 +209,10 @@ export default {
 	 * @param pageSize - the size per page
 	 * @param properties - the properties to return for each song
 	 * @param sort - the sort object
-	 * @param filter - the filter object
+	 * @param queries - the queries array
 	 * @param cb
 	 */
-	getData: isAdminRequired(async function getSet(session, page, pageSize, properties, sort, filter, cb) {
+	getData: isAdminRequired(async function getSet(session, page, pageSize, properties, sort, queries, cb) {
 		async.waterfall(
 			[
 				next => {
@@ -223,7 +223,7 @@ export default {
 							pageSize,
 							properties,
 							sort,
-							filter
+							queries
 						},
 						this
 					)

backend/logic/songs.js

@@ -214,27 +214,28 @@ class _SongsModule extends CoreClass {
 	 * @param {string} payload.pageSize - the page size
 	 * @param {string} payload.properties - the properties to return for each song
 	 * @param {string} payload.sort - the sort object
-	 * @param {string} payload.filter - the filter object
+	 * @param {string} payload.queries - the queries array
 	 * @returns {Promise} - returns a promise (resolve, reject)
 	 */
 	GET_DATA(payload) {
 		return new Promise((resolve, reject) => {
-			const { page, pageSize, properties, sort, filter } = payload;
+			const { page, pageSize, properties, sort, queries } = payload;
 
 			console.log("GET_DATA", payload);
 
 			const regexFilter = {};
-			// eslint-disable-next-line no-restricted-syntax
-			for (const [filterKey, filterValue] of Object.entries(filter)) {
-				const isRegex =
-					filterValue.length > 2 &&
-					filterValue.indexOf("/") === 0 &&
-					filterValue.lastIndexOf("/") === filterValue.length - 1;
-				let query;
-				if (isRegex) query = filterValue.slice(1, filterValue.length - 1);
-				else query = filterValue.replaceAll(/[.*+?^${}()|[\]\\]/g, "\\$&");
-				regexFilter[filterKey] = new RegExp(`${query}`, "i");
-			}
+			queries.forEach(query => {
+				const { data, filter } = query;
+				if (filter.type === "regex") {
+					let q;
+					if (data.length > 2 && data.indexOf("/") === 0 && data.lastIndexOf("/") === data.length - 1) {
+						q = data.slice(1, data.length - 1);
+					} else {
+						q = data.replaceAll(/[.*+?^${}()|[\]\\]/g, "\\$&");
+					}
+					regexFilter[filter.name] = new RegExp(`${q}`, "i");
+				}
+			});
 			console.log(regexFilter);
 
 			async.waterfall(

frontend/src/components/AdvancedTable.vue

@@ -32,28 +32,14 @@
 								</option>
 							</select>
 						</div>
-						<div class="control select">
-							<select
-								v-if="query.filter.type"
-								v-model="query.type"
-							>
-								<option
-									v-for="type in filterTypes"
-									:key="type"
-									:value="type"
-								>
-									{{ type }}
-								</option>
-							</select>
-						</div>
 						<p class="control is-expanded">
 							<input
-								v-if="query.type === 'regex'"
-								v-model="query.regex"
+								v-if="query.filter.type === 'regex'"
+								v-model="query.data"
 								class="input"
 								type="text"
 								placeholder="Search value"
-								@keyup.enter="changeFilter()"
+								@keyup.enter="getData()"
 							/>
 						</p>
 						<div class="control">
@@ -73,7 +59,7 @@
 							</button>
 						</div>
 					</div>
-					<a class="button is-info" @click="changeFilter()">
+					<a class="button is-info" @click="getData()">
 						<i class="material-icons icon-with-button">search</i>
 						Search
 					</a>
@@ -426,9 +412,8 @@ export default {
 
 		if (this.filters.length > 0)
 			this.advancedQuery.push({
-				regex: "",
-				filter: this.filters[0],
-				type: this.filters[0].type
+				data: "",
+				filter: {}
 			});
 
 		ws.onConnect(this.init);
@@ -444,7 +429,7 @@ export default {
 				this.pageSize,
 				this.properties,
 				this.sort,
-				this.filter,
+				this.advancedQuery,
 				res => {
 					console.log(111, res);
 					new Toast(res.message);
@@ -479,18 +464,6 @@ export default {
 				this.getData();
 			}
 		},
-		changeFilter() {
-			this.advancedQuery.forEach(query => {
-				const { regex } = query;
-				const { name } = query.filter;
-				if (this.filter[name] !== undefined && regex === "") {
-					delete this.filter[name];
-				} else if (this.filter[name] !== regex) {
-					this.filter[name] = regex;
-				}
-			});
-			this.getData();
-		},
 		toggleColumnVisibility(column) {
 			if (this.shownColumns.indexOf(column.name) !== -1) {
 				if (this.shownColumns.length <= 2)
@@ -504,7 +477,7 @@ export default {
 			} else {
 				this.shownColumns.push(column.name);
 			}
-			this.getData();
+			return this.getData();
 		},
 		clickItem(itemIndex, event) {
 			const { shiftKey, ctrlKey } = event;
@@ -556,9 +529,8 @@ export default {
 		addQueryItem() {
 			if (this.filters.length > 0)
 				this.advancedQuery.push({
-					regex: "",
-					filter: this.filters[0],
-					type: this.filters[0].type
+					data: "",
+					filter: {}
 				});
 		},
 		removeQueryItem(index) {

frontend/src/pages/Admin/tabs/Test.vue

@@ -12,6 +12,7 @@
 						class="song-thumbnail"
 						:src="slotProps.item.thumbnail"
 						onerror="this.src='/assets/notes-transparent.png'"
+						loading="lazy"
 					/>
 				</template>
 				<template #column-thumbnailUrl="slotProps">