feat: AdvancedTable filter by input dropdown

frontend/src/App.vue

@@ -806,6 +806,7 @@ img {
 
 		&[data-theme~="songActions"],
 		&[data-theme~="addToPlaylist"],
+		&[data-theme~="search"],
 		&[data-theme~="stationSettings"] {
 			background-color: var(--dark-grey-2);
 			border: 0 !important;
@@ -843,11 +844,17 @@ img {
 				}
 			}
 		}
+
+		&[data-theme~="search"] {
+			background-color: var(--dark-grey-2);
+			border: 0 !important;
+		}
 	}
 
 	.tippy-box[data-placement^="top"] {
 		&[data-theme~="songActions"],
-		&[data-theme~="addToPlaylist"] {
+		&[data-theme~="addToPlaylist"],
+		&[data-theme~="search"] {
 			> .tippy-arrow::before {
 				border-top-color: var(--dark-grey-2);
 			}
@@ -857,6 +864,7 @@ img {
 	.tippy-box[data-placement^="bottom"] {
 		&[data-theme~="songActions"],
 		&[data-theme~="addToPlaylist"],
+		&[data-theme~="search"],
 		&[data-theme~="stationSettings"] {
 			> .tippy-arrow::before {
 				border-bottom-color: var(--dark-grey-2);
@@ -866,7 +874,8 @@ img {
 
 	.tippy-box[data-placement^="left"] {
 		&[data-theme~="songActions"],
-		&[data-theme~="addToPlaylist"] {
+		&[data-theme~="addToPlaylist"],
+		&[data-theme~="search"] {
 			> .tippy-arrow::before {
 				border-left-color: var(--dark-grey-2);
 			}
@@ -875,7 +884,8 @@ img {
 
 	.tippy-box[data-placement^="right"] {
 		&[data-theme~="songActions"],
-		&[data-theme~="addToPlaylist"] {
+		&[data-theme~="addToPlaylist"],
+		&[data-theme~="search"] {
 			> .tippy-arrow::before {
 				border-right-color: var(--dark-grey-2);
 			}
@@ -967,7 +977,8 @@ img {
 
 .tippy-box[data-placement^="top"] {
 	&[data-theme~="songActions"],
-	&[data-theme~="addToPlaylist"] {
+	&[data-theme~="addToPlaylist"],
+	&[data-theme~="search"] {
 		> .tippy-arrow::before {
 			border-top-color: var(--white);
 		}
@@ -980,7 +991,8 @@ img {
 .tippy-box[data-placement^="bottom"] {
 	&[data-theme~="songActions"],
 	&[data-theme~="addToPlaylist"],
-	&[data-theme~="stationSettings"] {
+	&[data-theme~="stationSettings"],
+	&[data-theme~="search"] {
 		> .tippy-arrow::before {
 			border-bottom-color: var(--white);
 		}
@@ -992,7 +1004,8 @@ img {
 
 .tippy-box[data-placement^="left"] {
 	&[data-theme~="songActions"],
-	&[data-theme~="addToPlaylist"] {
+	&[data-theme~="addToPlaylist"],
+	&[data-theme~="search"] {
 		> .tippy-arrow::before {
 			border-left-color: var(--white);
 		}
@@ -1004,7 +1017,8 @@ img {
 
 .tippy-box[data-placement^="right"] {
 	&[data-theme~="songActions"],
-	&[data-theme~="addToPlaylist"] {
+	&[data-theme~="addToPlaylist"],
+	&[data-theme~="search"] {
 		> .tippy-arrow::before {
 			border-right-color: var(--white);
 		}
@@ -1142,6 +1156,30 @@ img {
 	}
 }
 
+.tippy-box[data-theme~="search"] {
+	font-size: 15px;
+	padding: 0;
+	border: 1px solid var(--light-grey-3);
+	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	background-color: var(--white);
+	color: var(--dark-grey);
+	width: 300px;
+
+	.tippy-content {
+		padding: 0;
+
+		& > span {
+			display: flex;
+			flex-direction: column;
+			padding: 5px;
+
+			.control {
+				margin-bottom: 0 !important;
+			}
+		}
+	}
+}
+
 .has-text-centered {
 	text-align: center;
 }

frontend/src/components/AdvancedTable.vue

@@ -37,22 +37,81 @@
 								v-if="
 									enabledColumns.indexOf(column.name) !== -1
 								"
-								@click="changeSort(column)"
 							>
-								{{ column.displayName }}
-								<span
-									v-if="
-										column.sortable &&
-										sort[column.sortProperty]
-									"
-									>({{ sort[column.sortProperty] }})</span
-								>
-								<input
+								<span @click="changeSort(column)">
+									{{ column.displayName }}
+									<span
+										v-if="
+											column.sortable &&
+											sort[column.sortProperty]
+										"
+										>({{ sort[column.sortProperty] }})</span
+									>
+								</span>
+								<tippy
 									v-if="column.sortable"
-									placeholder="Filter"
-									@click.stop
-									@keyup.enter="changeFilter(column, $event)"
-								/>
+									:touch="true"
+									:interactive="true"
+									placement="bottom"
+									theme="search"
+									ref="search"
+									trigger="click"
+								>
+									<i
+										class="
+											material-icons
+											action-dropdown-icon
+										"
+										:content="`Filter by ${column.displayName}`"
+										v-tippy
+										@click.prevent="true"
+										>search</i
+									>
+
+									<template #content>
+										<div
+											class="
+												control
+												is-grouped
+												input-with-button
+											"
+										>
+											<p class="control is-expanded">
+												<input
+													class="input"
+													type="text"
+													:placeholder="`Filter by ${column.displayName}`"
+													:value="
+														column.filterProperty !==
+														null
+															? filter[
+																	column
+																		.filterProperty
+															  ]
+															: ''
+													"
+													@keyup.enter="
+														changeFilter(
+															column,
+															$event
+														)
+													"
+												/>
+											</p>
+											<p class="control">
+												<a class="button is-info">
+													<i
+														class="
+															material-icons
+															icon-with-button
+														"
+														>search</i
+													>
+												</a>
+											</p>
+										</div>
+									</template>
+								</tippy>
 							</th>
 						</template>
 					</draggable>
@@ -336,8 +395,11 @@ export default {
 <style lang="scss" scoped>
 .night-mode {
 	.table {
-		background-color: var(--dark-grey-3);
-		color: var(--light-grey-2);
+		&,
+		thead th {
+			background-color: var(--dark-grey-3);
+			color: var(--light-grey-2);
+		}
 
 		tr {
 			&:nth-child(even) {
@@ -368,6 +430,16 @@ export default {
 					&.sortable {
 						cursor: pointer;
 					}
+
+					span > .material-icons {
+						font-size: 22px;
+						position: relative;
+						top: 6px;
+
+						&:first-child {
+							margin-left: auto;
+						}
+					}
 				}
 			}
 		}