feat(AdvancedTable): Filters indicator, styling improvements and query to filter renaming

frontend/src/components/AdvancedTable.vue

@@ -15,114 +15,102 @@
 						ref="search"
 						trigger="click"
 					>
-						<a class="button is-info" @click.prevent="true">
+						<button class="button is-info">
 							<i class="material-icons icon-with-button"
 								>filter_list</i
 							>
 							Filters
-						</a>
+						</button>
 
 						<template #content>
-							<div v-if="advancedQuery.length === 0">
-								<p>
-									There are no filters, would you like to add
-									one?
-								</p>
-							</div>
-							<div v-else>
-								<div
-									v-for="(query, index) in advancedQuery"
-									:key="`query-${index}`"
-									class="advanced-query"
-								>
-									<div class="control select">
-										<select
-											v-model="query.filter"
-											@change="changeQueryFilter(index)"
-										>
-											<option
-												v-for="filter in filters"
-												:key="filter.name"
-												:value="filter"
-											>
-												{{ filter.displayName }}
-											</option>
-										</select>
-									</div>
-									<div class="control select">
-										<select
-											v-model="query.filterType"
-											:disabled="!query.filterType"
+							<div
+								v-for="(filter, index) in editingFilters"
+								:key="`filter-${index}`"
+								class="advanced-filter"
+							>
+								<div class="control select">
+									<select
+										v-model="filter.filter"
+										@change="changeFilterType(index)"
+									>
+										<option
+											v-for="type in filters"
+											:key="type.name"
+											:value="type"
 										>
-											<option
-												v-for="filterType in filterTypes(
-													query.filter
-												)"
-												:key="filterType.name"
-												:value="filterType.name"
-												:selected="
-													query.filter
-														.defaultFilterType ===
-													filterType.name
-												"
-											>
-												{{ filterType.displayName }}
-											</option>
-										</select>
-									</div>
-									<p class="control is-expanded">
-										<input
-											v-model="query.data"
-											class="input"
-											type="text"
-											placeholder="Search value"
-											:disabled="!query.filterType"
-										/>
-									</p>
-									<div class="control">
-										<button
-											class="
-												button
-												material-icons
-												is-danger
+											{{ type.displayName }}
+										</option>
+									</select>
+								</div>
+								<div class="control select">
+									<select
+										v-model="filter.filterType"
+										:disabled="!filter.filterType"
+									>
+										<option
+											v-for="filterType in filterTypes(
+												filter.filter
+											)"
+											:key="filterType.name"
+											:value="filterType.name"
+											:selected="
+												filter.filter
+													.defaultFilterType ===
+												filterType.name
 											"
-											@click="removeQueryItem(index)"
 										>
-											remove_circle_outline
-										</button>
-									</div>
+											{{ filterType.displayName }}
+										</option>
+									</select>
+								</div>
+								<p class="control is-expanded">
+									<input
+										v-model="filter.data"
+										class="input"
+										type="text"
+										placeholder="Search value"
+										:disabled="!filter.filterType"
+									/>
+								</p>
+								<div class="control">
+									<button
+										class="button material-icons is-danger"
+										@click="removeFilterItem(index)"
+									>
+										remove_circle_outline
+									</button>
 								</div>
 							</div>
 							<div class="control is-grouped input-with-button">
 								<p class="control is-expanded">
 									<select v-model="addFilterValue">
 										<option
-											v-for="filter in filters"
-											:key="filter.name"
-											:value="filter"
+											v-for="type in filters"
+											:key="type.name"
+											:value="type"
 										>
-											{{ filter.displayName }}
+											{{ type.displayName }}
 										</option>
 									</select>
 								</p>
 								<p class="control">
 									<button
 										class="button is-info"
-										@click="addQueryItem()"
+										@click="addFilterItem()"
 									>
 										Add filter
 									</button>
 								</p>
 							</div>
-							<div v-if="advancedQuery.length > 1">
+							<div v-if="editingFilters.length > 1">
 								<p>
 									Would you like to use AND or OR as the
 									operator?
 								</p>
 								<div class="control select">
-									<select v-model="queryOperator">
+									<select v-model="filterOperator">
 										<option
-											v-for="operator in queryOperators"
+											v-for="operator in filterOperators"
 											:key="operator.name"
 											:value="operator.name"
 										>
@@ -132,8 +120,8 @@
 								</div>
 							</div>
 							<div
-								class="advanced-query-bottom"
-								v-if="advancedQuery.length > 0"
+								class="advanced-filter-bottom"
+								v-if="editingFilters.length > 0"
 							>
 								<div class="control is-expanded">
 									<button
@@ -152,8 +140,8 @@
 								</div>
 							</div>
 							<div
-								class="advanced-query-bottom"
-								v-else-if="advancedQuery.length === 0"
+								class="advanced-filter-bottom"
+								v-else-if="editingFilters.length === 0"
 							>
 								<div class="control is-expanded">
 									<button
@@ -167,15 +155,49 @@
 											"
 											>filter_list</i
 										>
-										Reset filters
+										Apply filters
 									</button>
 								</div>
 							</div>
 						</template>
 					</tippy>
-					<p v-tippy content="5 filters active">
-						5 <i class="material-icons">filter_list</i>
-					</p>
+					<tippy
+						v-if="appliedFilters.length > 0"
+						:touch="true"
+						:interactive="true"
+						theme="info"
+						ref="activeFilters"
+					>
+						<div class="filters-indicator">
+							{{ appliedFilters.length }}
+							<i class="material-icons" @click.prevent="true"
+								>filter_list</i
+							>
+						</div>
+
+						<template #content>
+							<p
+								v-for="(filter, index) in appliedFilters"
+								:key="`filter-${index}`"
+							>
+								{{ filter.filter.displayName }}
+								{{ filter.filterType }} {{ filter.data }}
+								{{
+									appliedFilters.length === index + 1
+										? ""
+										: filterOperator
+								}}
+							</p>
+						</template>
+					</tippy>
+					<i
+						v-else
+						class="filters-indicator material-icons"
+						content="No active filters"
+						v-tippy="{ theme: 'info' }"
+					>
+						filter_list_off
+					</i>
 				</div>
 				<div>
 					<tippy
@@ -551,11 +573,11 @@ export default {
 					fallbackTolerance: 50
 				};
 			},
-			advancedQuery: [],
+			editingFilters: [],
 			appliedFilters: [],
-			queryOperator: "or",
+			filterOperator: "or",
 			appliedFilterOperator: "or",
-			queryOperators: [
+			filterOperators: [
 				{
 					name: "or",
 					displayName: "OR"
@@ -773,15 +795,15 @@ export default {
 			// Set the clicked item to be highlighted
 			this.data[itemIndex].highlighted = true;
 		},
-		addQueryItem() {
-			this.advancedQuery.push({
+		addFilterItem() {
+			this.editingFilters.push({
 				data: "",
 				filter: this.addFilterValue,
 				filterType: this.addFilterValue.defaultFilterType
 			});
 		},
-		removeQueryItem(index) {
-			this.advancedQuery.splice(index, 1);
+		removeFilterItem(index) {
+			this.editingFilters.splice(index, 1);
 		},
 		columnResizingMouseDown(column, event) {
 			this.resizing.resizing = true;
@@ -836,9 +858,9 @@ export default {
 				filterType => this.allFilterTypes[filterType]
 			);
 		},
-		changeQueryFilter(index) {
-			this.advancedQuery[index].filterType =
-				this.advancedQuery[index].filter.defaultFilterType;
+		changeFilterType(index) {
+			this.editingFilters[index].filterType =
+				this.editingFilters[index].filter.defaultFilterType;
 		},
 		onDragBox(e) {
 			const e1 = e || window.event;
@@ -878,9 +900,9 @@ export default {
 		},
 		applyFilterAndGetData() {
 			this.appliedFilters = JSON.parse(
-				JSON.stringify(this.advancedQuery)
+				JSON.stringify(this.editingFilters)
 			);
-			this.appliedFilterOperator = this.queryOperator;
+			this.appliedFilterOperator = this.filterOperator;
 			this.getData();
 		}
 	}
@@ -1064,7 +1086,7 @@ export default {
 			margin: 5px;
 		}
 
-		> p {
+		.filters-indicator {
 			line-height: 46px;
 			display: flex;
 			align-items: center;
@@ -1098,11 +1120,11 @@ export default {
 	}
 }
 
-.advanced-query {
+.advanced-filter {
 	margin-bottom: 5px;
 }
-.advanced-query,
-.advanced-query-bottom {
+.advanced-filter,
+.advanced-filter-bottom {
 	display: flex;
 
 	& > .control {
@@ -1130,9 +1152,13 @@ export default {
 		}
 	}
 }
-.advanced-query-bottom .button {
-	font-size: 16px !important;
-	width: 100%;
+.advanced-filter-bottom {
+	margin-top: 5px;
+
+	.button {
+		font-size: 16px !important;
+		width: 100%;
+	}
 }
 
 .bulk-popup {