From 62f71b12c895dc0658615d2093490a3ad48390fd 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: Wed, 11 Oct 2023 15:32:18 -0400
Subject: [PATCH] feat(components): create a component to find and select users
 by username that aren't banned

for co-author and (eventually) blocking
---
 components/findUser.vue | 51 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 components/findUser.vue

diff --git a/components/findUser.vue b/components/findUser.vue
new file mode 100644
index 0000000..0842c10
--- /dev/null
+++ b/components/findUser.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+	import { debounce } from "lodash-es";
+	import { useField } from "vee-validate";
+	const props = defineProps<{ fieldName: string; multi: boolean }>();
+	const state = reactive<{
+		data: { value: number; label: string }[];
+		fetching: boolean;
+	}>({
+		data: [],
+		fetching: false,
+	});
+	let fieldo = useField<number | number[]>(props.fieldName, undefined, {
+		// @ts-ignore
+		initialValue: null,
+	});
+
+	const { value, errorMessage, name, setValue } = fieldo;
+
+	const fetchUsers = debounce((value) => {
+		state.fetching = true;
+		useApiFetch<{ _id: number; username: string }[]>(`/all-users`, {
+			query: {
+				name: value,
+			},
+		}).then(({ data }) => {
+			const blip = data.value?.map((a) => ({
+				label: a.username,
+				value: a._id,
+			}));
+			state.data = blip!;
+			state.fetching = false;
+		});
+	}, 750);
+</script>
+<template>
+	<a-select
+		option-filter-prop="label"
+		:show-search="true"
+		@search="fetchUsers"
+		:filter-option="true"
+		style="width: 100%"
+		placeholder="Find a user..."
+		:mode="multi ? 'multiple' : undefined"
+		:options="state.data"
+		v-model:value="value"
+	>
+		<template v-if="state.fetching" #notFoundContent>
+			<a-spin size="small" />
+		</template>
+	</a-select>
+</template>