feat: Added/changed admin test tab columns

frontend/src/pages/Admin/tabs/Test.vue

@@ -11,17 +11,39 @@
 					/>
 				</template>
 				<template #column-thumbnailUrl="slotProps">
-					{{ slotProps.item.thumbnail }}
+					<a :href="slotProps.item.thumbnail" target="_blank">
+						{{ slotProps.item.thumbnail }}
+					</a>
 				</template>
 				<template #column-_id="slotProps">
 					{{ slotProps.item._id }}
 				</template>
+				<template #column-youtubeId="slotProps">
+					<a
+						:href="
+							'https://www.youtube.com/watch?v=' +
+							`${slotProps.item.youtubeId}`
+						"
+						target="_blank"
+					>
+						{{ slotProps.item.youtubeId }}
+					</a>
+				</template>
 				<template #column-title="slotProps">
 					{{ slotProps.item.title }}
 				</template>
 				<template #column-artists="slotProps">
 					{{ slotProps.item.artists.join(", ") }}
 				</template>
+				<template #column-genres="slotProps">
+					{{ slotProps.item.genres.join(", ") }}
+				</template>
+				<template #column-requestedBy="slotProps">
+					<user-id-to-username
+						:user-id="slotProps.item.requestedBy"
+						:link="true"
+					/>
+				</template>
 			</advanced-table>
 		</div>
 	</div>
@@ -29,17 +51,19 @@
 
 <script>
 import AdvancedTable from "@/components/AdvancedTable.vue";
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
 export default {
 	components: {
-		AdvancedTable
+		AdvancedTable,
+		UserIdToUsername
 	},
 	data() {
 		return {
 			columns: [
 				{
 					name: "thumbnailImage",
-					displayName: "Thumbnail (Image)",
+					displayName: "Thumb",
 					properties: ["thumbnail"],
 					sortable: false,
 					filterable: false,
@@ -49,7 +73,7 @@ export default {
 				},
 				{
 					name: "_id",
-					displayName: "Musare Id",
+					displayName: "Musare ID",
 					properties: ["_id"],
 					sortable: true,
 					sortProperty: "_id",
@@ -59,6 +83,18 @@ export default {
 					defaultVisibility: "shown",
 					draggable: true
 				},
+				{
+					name: "youtubeId",
+					displayName: "YouTube ID",
+					properties: ["youtubeId"],
+					sortable: true,
+					sortProperty: "youtubeId",
+					filterable: true,
+					filterProperty: "youtubeId",
+					hidable: true,
+					defaultVisibility: "shown",
+					draggable: true
+				},
 				{
 					name: "title",
 					displayName: "Title",
@@ -75,7 +111,7 @@ export default {
 					name: "artists",
 					displayName: "Artists",
 					properties: ["artists"],
-					sortable: true,
+					sortable: false,
 					sortProperty: "artists",
 					filterable: true,
 					filterProperty: "artists",
@@ -83,6 +119,18 @@ export default {
 					defaultVisibility: "shown",
 					draggable: true
 				},
+				{
+					name: "genres",
+					displayName: "Genres",
+					properties: ["genres"],
+					sortable: false,
+					sortProperty: "genres",
+					filterable: true,
+					filterProperty: "genres",
+					hidable: true,
+					defaultVisibility: "shown",
+					draggable: true
+				},
 				{
 					name: "thumbnailUrl",
 					displayName: "Thumbnail (URL)",
@@ -94,6 +142,18 @@ export default {
 					hidable: true,
 					defaultVisibility: "hidden",
 					draggable: true
+				},
+				{
+					name: "requestedBy",
+					displayName: "Requested By",
+					properties: ["requestedBy"],
+					sortable: true,
+					sortProperty: "requestedBy",
+					filterable: true,
+					filterProperty: "requestedBy",
+					hidable: true,
+					defaultVisibility: "shown",
+					draggable: true
 				}
 			]
 		};