Browse Source

refactor(AdvancedTable): improved filter dropdown

Kristian Vos 3 years ago
parent
commit
86c8403460

+ 8 - 6
frontend/src/components/AdvancedTable.vue

@@ -115,7 +115,7 @@
 									v-if="
 										filter.filterType.name &&
 										filter.filterType.name === 'exact' &&
-										filter.filter.filterValues
+										filter.filter.dropdown
 									"
 									class="control is-expanded select"
 								>
@@ -124,12 +124,14 @@
 										:disabled="!filter.filterType"
 									>
 										<option
-											v-for="filterValue in filter.filter
-												.filterValues"
-											:key="filterValue"
-											:value="filterValue"
+											v-for="[
+												dropdownValue,
+												dropdownDisplay
+											] in filter.filter.dropdown"
+											:key="dropdownValue"
+											:value="dropdownValue"
 										>
-											{{ filterValue }}
+											{{ dropdownDisplay }}
 										</option>
 									</select>
 								</div>

+ 10 - 7
frontend/src/pages/Admin/tabs/Playlists.vue

@@ -224,12 +224,12 @@ export default {
 					property: "type",
 					filterTypes: ["exact", "regex"],
 					defaultFilterType: "exact",
-					filterValues: [
-						"genre",
-						"station",
-						"user",
-						"user-disliked",
-						"user-liked"
+					dropdown: [
+						["genre", "Genre"],
+						["station", "Station"],
+						["user", "User"],
+						["user-disliked", "User Disliked"],
+						["user-liked", "User Liked"]
 					]
 				},
 				{
@@ -238,7 +238,10 @@ export default {
 					property: "privacy",
 					filterTypes: ["exact", "regex"],
 					defaultFilterType: "exact",
-					filterValues: ["public", "private"]
+					dropdown: [
+						["public", "Public"],
+						["private", "Private"]
+					]
 				},
 				{
 					name: "songsCount",

+ 4 - 1
frontend/src/pages/Admin/tabs/Punishments.vue

@@ -226,7 +226,10 @@ export default {
 					property: "status",
 					filterTypes: ["exact", "regex"],
 					defaultFilterType: "exact",
-					filterValues: ["Active", "Inactive"]
+					dropdown: [
+						["Active", "Active"],
+						["Inactive", "Inactive"]
+					]
 				},
 				{
 					name: "type",

+ 4 - 1
frontend/src/pages/Admin/tabs/Songs.vue

@@ -531,7 +531,10 @@ export default {
 					property: "status",
 					filterTypes: ["exact", "regex"],
 					defaultFilterType: "exact",
-					filterValues: ["verified", "unverified"]
+					dropdown: [
+						["verified", "Verified"],
+						["unverified", "Unverified"]
+					]
 				},
 				{
 					name: "likes",

+ 16 - 4
frontend/src/pages/Admin/tabs/Stations.vue

@@ -104,7 +104,9 @@
 				</template>
 				<template #column-playMode="slotProps">
 					<span :title="slotProps.item.playMode">{{
-						slotProps.item.playMode
+						slotProps.item.playMode === "random"
+							? "Random"
+							: "Sequential"
 					}}</span>
 				</template>
 				<template #column-theme="slotProps">
@@ -294,7 +296,10 @@ export default {
 					property: "type",
 					filterTypes: ["exact", "regex"],
 					defaultFilterType: "exact",
-					filterValues: ["official", "community"]
+					dropdown: [
+						["official", "Official"],
+						["community", "Community"]
+					]
 				},
 				{
 					name: "privacy",
@@ -302,7 +307,11 @@ export default {
 					property: "privacy",
 					filterTypes: ["exact", "regex"],
 					defaultFilterType: "exact",
-					filterValues: ["public", "unlisted", "private"]
+					dropdown: [
+						["public", "Public"],
+						["unlisted", "Unlisted"],
+						["private", "Private"]
+					]
 				},
 				{
 					name: "owner",
@@ -317,7 +326,10 @@ export default {
 					property: "playMode",
 					filterTypes: ["exact", "regex"],
 					defaultFilterType: "exact",
-					filterValues: ["random", "sequential"]
+					dropdown: [
+						["random", "Random"],
+						["sequential", "Sequential"]
+					]
 				},
 				{
 					name: "theme",

+ 4 - 1
frontend/src/pages/Admin/tabs/Users.vue

@@ -389,7 +389,10 @@ export default {
 						property: "role",
 						filterTypes: ["exact", "regex"],
 						defaultFilterType: "exact",
-						filterValues: ["admin", "default"]
+						dropdown: [
+							["admin", "Admin"],
+							["default", "Default"]
+						]
 					},
 					{
 						name: "emailAddress",