From 72fa767db03619d9861d70f704eba192c3e88493 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Thu, 4 Jan 2024 17:00:21 -0500
Subject: [PATCH] fix(components): edit findUser.vue

allow `initialOption` prop to be a number
if it is, fetch username via api to provide as the select element's label
---
 components/findUser.vue | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/components/findUser.vue b/components/findUser.vue
index cf7a167..f5c081f 100644
--- a/components/findUser.vue
+++ b/components/findUser.vue
@@ -1,24 +1,40 @@
 <script lang="ts" setup>
 	import { debounce } from "lodash-es";
 	import { useField } from "vee-validate";
+	import { IUser } from "@models/user";
 	const props = defineProps<{
 		fieldName: string;
 		multi: boolean;
-		initialOption: {
-			label: string;
-			value: number;
-		} | null;
+		initialOption:
+			| number
+			| {
+					label: string;
+					value: number;
+			  }
+			| null;
 	}>();
+
+	let initO;
+	if (typeof props.initialOption == "number") {
+		const { data } = await useApiFetch<IUser>(`/user/${props.initialOption}`);
+		initO = {
+			label: data.value.username,
+			value: data.value._id,
+		};
+	} else if (typeof props.initialOption == "object") {
+		initO = props.initialOption;
+	}
+
 	const state = reactive<{
 		data: { value: number; label: string }[];
 		fetching: boolean;
 	}>({
-		data: props.initialOption ? [props.initialOption] : [],
+		data: props.initialOption ? [initO] : [],
 		fetching: false,
 	});
 	let fieldo = useField<number | number[]>(props.fieldName, undefined, {
 		// @ts-ignore
-		initialValue: props.initialOption?.value || null,
+		initialValue: initO.value || null,
 	});
 
 	const { value, errorMessage, name, setValue } = fieldo;