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

@@ -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;