feat(AdvancedTable): Advanced filter operator styling and added NOR option

backend/logic/songs.js

@@ -241,6 +241,7 @@ class _SongsModule extends CoreClass {
 			if (newQueries.length > 0) {
 				if (operator === "and") queryObject.$and = newQueries;
 				else if (operator === "or") queryObject.$or = newQueries;
+				else if (operator === "nor") queryObject.$nor = newQueries;
 			}
 
 			async.waterfall(

frontend/src/App.vue

@@ -1179,10 +1179,6 @@ img {
 			display: flex;
 			flex-direction: column;
 			padding: 5px;
-
-			.control {
-				margin-bottom: 0 !important;
-			}
 		}
 	}
 }

frontend/src/components/AdvancedTable.vue

@@ -23,10 +23,31 @@
 						</button>
 
 						<template #content>
+							<div class="control is-grouped input-with-button">
+								<p class="control select is-expanded">
+									<select v-model="addFilterValue">
+										<option
+											v-for="type in filters"
+											:key="type.name"
+											:value="type"
+										>
+											{{ type.displayName }}
+										</option>
+									</select>
+								</p>
+								<p class="control">
+									<button
+										class="button material-icons is-success"
+										@click="addFilterItem()"
+									>
+										control_point
+									</button>
+								</p>
+							</div>
 							<div
 								v-for="(filter, index) in editingFilters"
 								:key="`filter-${index}`"
-								class="advanced-filter"
+								class="control is-grouped is-expanded"
 							>
 								<div class="control select">
 									<select
@@ -81,33 +102,14 @@
 									</button>
 								</div>
 							</div>
-							<div class="control is-grouped input-with-button">
-								<p class="control is-expanded">
-									<select v-model="addFilterValue">
-										<option
-											v-for="type in filters"
-											:key="type.name"
-											:value="type"
-										>
-											{{ type.displayName }}
-										</option>
-									</select>
-								</p>
-								<p class="control">
-									<button
-										class="button is-info"
-										@click="addFilterItem()"
-									>
-										Add filter
-									</button>
-								</p>
-							</div>
-							<div v-if="editingFilters.length > 1">
-								<p>
-									Would you like to use AND or OR as the
-									operator?
-								</p>
-								<div class="control select">
+							<div
+								v-if="editingFilters.length > 1"
+								class="control is-expanded is-grouped"
+							>
+								<label class="control label"
+									>Filter operator</label
+								>
+								<div class="control select is-expanded">
 									<select v-model="filterOperator">
 										<option
 											v-for="operator in filterOperators"
@@ -585,6 +587,10 @@ export default {
 				{
 					name: "and",
 					displayName: "AND"
+				},
+				{
+					name: "nor",
+					displayName: "NOR"
 				}
 			],
 			resizing: {},
@@ -1120,30 +1126,44 @@ export default {
 	}
 }
 
-.advanced-filter {
-	margin-bottom: 5px;
-}
-.advanced-filter,
-.advanced-filter-bottom {
+.control.is-grouped {
 	display: flex;
 
 	& > .control {
+		&.label {
+			height: 36px;
+			background-color: var(--white);
+			border: 1px solid var(--light-grey-2);
+			color: var(--dark-grey-2);
+			appearance: none;
+			border-radius: 3px;
+			font-size: 14px;
+			line-height: 34px;
+			padding-left: 8px;
+			padding-right: 8px;
+		}
+		&.select.is-expanded > select {
+			width: 100%;
+		}
 		& > input,
 		& > select,
-		& > .button {
+		& > .button,
+		&.label {
 			border-radius: 0;
 		}
 		&:first-child {
 			& > input,
 			& > select,
-			& > .button {
+			& > .button,
+			&.label {
 				border-radius: 5px 0 0 5px;
 			}
 		}
 		&:last-child {
 			& > input,
 			& > select,
-			& > .button {
+			& > .button,
+			&.label {
 				border-radius: 0 5px 5px 0;
 			}
 		}
@@ -1153,12 +1173,16 @@ export default {
 	}
 }
 .advanced-filter-bottom {
-	margin-top: 5px;
+	display: flex;
 
 	.button {
 		font-size: 16px !important;
 		width: 100%;
 	}
+
+	.control {
+		margin: 0 !important;
+	}
 }
 
 .bulk-popup {