feat(AdvancedTable): Reset and select query operator buttons, and reset popup position

backend/logic/actions/songs.js

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

backend/logic/songs.js

@@ -215,11 +215,12 @@ class _SongsModule extends CoreClass {
 	 * @param {string} payload.properties - the properties to return for each song
 	 * @param {string} payload.sort - the sort object
 	 * @param {string} payload.queries - the queries array
+	 * @param {string} payload.operator - the operator for queries
 	 * @returns {Promise} - returns a promise (resolve, reject)
 	 */
 	GET_DATA(payload) {
 		return new Promise((resolve, reject) => {
-			const { page, pageSize, properties, sort, queries } = payload;
+			const { page, pageSize, properties, sort, queries, operator } = payload;
 
 			console.log("GET_DATA", payload);
 
@@ -236,16 +237,20 @@ class _SongsModule extends CoreClass {
 				return newQuery;
 			});
 
+			const queryObject = {};
+			if (operator === "and") queryObject.$and = newQueries;
+			else queryObject.$or = newQueries;
+
 			async.waterfall(
 				[
 					next => {
-						SongsModule.SongModel.find({ $and: newQueries }).count((err, count) => {
+						SongsModule.SongModel.find(queryObject).count((err, count) => {
 							next(err, count);
 						});
 					},
 
 					(count, next) => {
-						SongsModule.SongModel.find({ $and: newQueries })
+						SongsModule.SongModel.find(queryObject)
 							.sort(sort)
 							.skip(pageSize * (page - 1))
 							.limit(pageSize)

frontend/src/components/AdvancedTable.vue

@@ -89,12 +89,40 @@
 								</button>
 							</div>
 						</div>
-						<a class="button is-info" @click="getData()">
-							<i class="material-icons icon-with-button"
-								>search</i
-							>
-							Search
-						</a>
+						<div class="advanced-query-bottom">
+							<div class="control select">
+								<select v-model="queryOperator">
+									<option
+										v-for="operator in queryOperators"
+										:key="operator.name"
+										:value="operator.name"
+									>
+										{{ operator.displayName }}
+									</option>
+								</select>
+							</div>
+							<div class="control is-expanded">
+								<button
+									class="button is-info"
+									@click="getData()"
+								>
+									<i class="material-icons icon-with-button"
+										>search</i
+									>
+									Search
+								</button>
+							</div>
+							<div class="control">
+								<button
+									class="button is-warning material-icons"
+									@click="resetQuery()"
+									content="Reset query"
+									v-tippy="{ theme: 'info' }"
+								>
+									refresh
+								</button>
+							</div>
+						</div>
 					</template>
 				</tippy>
 				<tippy
@@ -406,6 +434,7 @@
 				<span
 					class="material-icons drag-icon"
 					@mousedown.left="onDragBox"
+					@dblclick="resetBulkActionsPosition()"
 				>
 					drag_indicator
 				</span>
@@ -468,6 +497,17 @@ export default {
 				};
 			},
 			advancedQuery: [],
+			queryOperator: "or",
+			queryOperators: [
+				{
+					name: "or",
+					displayName: "OR"
+				},
+				{
+					name: "and",
+					displayName: "AND"
+				}
+			],
 			resizing: {},
 			allFilterTypes: {
 				contains: {
@@ -552,15 +592,9 @@ export default {
 		const pageSize = parseInt(localStorage.getItem("adminPageSize"));
 		if (!Number.isNaN(pageSize)) this.pageSize = pageSize;
 
-		if (this.filters.length > 0)
-			this.advancedQuery.push({
-				data: "",
-				filter: {},
-				filterType: ""
-			});
+		this.addQueryItem();
 
-		this.bulkPopup.top = document.body.clientHeight - 56;
-		this.bulkPopup.left = document.body.clientWidth / 2 - 200;
+		this.resetBulkActionsPosition();
 
 		ws.onConnect(this.init);
 	},
@@ -576,6 +610,7 @@ export default {
 				this.properties,
 				this.sort,
 				this.advancedQuery,
+				this.queryOperator,
 				res => {
 					console.log(111, res);
 					if (res.status === "success") {
@@ -684,17 +719,22 @@ export default {
 			this.data[itemIndex].highlighted = true;
 		},
 		addQueryItem() {
-			if (this.filters.length > 0)
-				this.advancedQuery.push({
-					data: "",
-					filter: {},
-					filterType: ""
-				});
+			this.advancedQuery.push({
+				data: "",
+				filter: {},
+				filterType: ""
+			});
 		},
 		removeQueryItem(index) {
 			if (this.advancedQuery.length > 1)
 				this.advancedQuery.splice(index, 1);
 		},
+		resetQuery() {
+			this.advancedQuery = [];
+			this.queryOperator = "or";
+			this.addQueryItem();
+			this.getData();
+		},
 		columnResizingMouseDown(column, event) {
 			this.resizing.resizing = true;
 			this.resizing.resizingColumn = column;
@@ -783,6 +823,10 @@ export default {
 				document.onmouseup = null;
 				document.onmousemove = null;
 			};
+		},
+		resetBulkActionsPosition() {
+			this.bulkPopup.top = document.body.clientHeight - 56;
+			this.bulkPopup.left = document.body.clientWidth / 2 - 200;
 		}
 	}
 };
@@ -988,8 +1032,11 @@ export default {
 }
 
 .advanced-query {
-	display: flex;
 	margin-bottom: 5px;
+}
+.advanced-query,
+.advanced-query-bottom {
+	display: flex;
 
 	& > .control {
 		& > input,
@@ -1016,6 +1063,10 @@ export default {
 		}
 	}
 }
+.advanced-query-bottom .button {
+	font-size: 16px !important;
+	width: 100%;
+}
 
 .bulk-popup {
 	display: flex;