Add team member and hunt member management for admins

app/pages/hunt/[huntSlug]/admin.vue

@@ -12,6 +12,9 @@ const localePath = useLocalePath();
 const { t } = useI18n();
 const router = useRouter();
 
+const { confirm } = useModal();
+const { init } = useToast();
+
 const { name, id } = app.$slugData.huntSlug!;
 const titleStore = useTitleStore();
 
@@ -44,6 +47,35 @@ watch(loggedIn, (isLoggedIn) => {
 
 titleStore.title = data.value?.name;
 
+const loading = ref(false);
+
+const search = ref('');
+const safeSearch = ref('');
+const newUser = ref<User>();
+watchDebounced(
+  search,
+  (newSearch) => {
+    if (newSearch && newSearch.length >= 3) {
+      safeSearch.value = newSearch;
+    }
+  },
+  { debounce: 500, maxWait: 1000 }
+);
+
+type User = {
+  id: number;
+  name: string;
+  email: string;
+};
+const { data: users, pending: searchPending } = await useFetch(
+  () => `/api/admin/hunt/${id}/teamless?email=${safeSearch.value}`,
+  {
+    immediate: false,
+    lazy: true,
+    default: () => [] as User[]
+  }
+);
+
 async function submit() {
   await $fetch(`/api/admin/hunt/${data.value?.id || id}`, {
     method: 'POST',
@@ -52,6 +84,72 @@ async function submit() {
   await refresh();
   formData.sync();
 }
+
+async function kick(member: {
+  member: { id: number; name: string; email: string };
+}) {
+  const ok = await confirm({
+    title: 'Are you sure?',
+    message: `Are you sure you want to kick ${member.member.name} (${member.member.email}) from this hunt?`,
+    okText: 'Yes'
+  });
+
+  if (!ok) {
+    return;
+  }
+
+  loading.value = true;
+
+  try {
+    const { success } = await $fetch(`/api/admin/hunt/${id}/member`, {
+      method: 'DELETE',
+      body: { userId: member.member.id }
+    });
+    init({
+      message: success ? 'Successfully kicked member!' : 'Error while kicking',
+      color: success ? 'success' : 'danger'
+    });
+  } catch (e) {
+    init({
+      title: 'Error while kicking',
+      color: 'danger',
+      message: e?.message || e?.statusMessage || t(parseError(e))
+    });
+  }
+
+  await refresh();
+  loading.value = false;
+}
+
+async function addUser() {
+  if (!newUser.value) {
+    return;
+  }
+  loading.value = true;
+
+  try {
+    const { success } = await $fetch(`/api/admin/hunt/${id}/member`, {
+      method: 'POST',
+      body: { userId: newUser.value.id }
+    });
+    init({
+      message: success
+        ? 'Successfully added admin user!'
+        : 'Error while adding',
+      color: success ? 'success' : 'danger'
+    });
+  } catch (e) {
+    init({
+      title: 'Error while adding',
+      color: 'danger',
+      message: e?.message || e?.statusMessage || t(parseError(e))
+    });
+  }
+
+  await refresh();
+  newUser.value = undefined;
+  loading.value = false;
+}
 </script>
 
 <template>
@@ -150,6 +248,45 @@ async function submit() {
       >
     </VaButtonGroup>
   </VaForm>
+
+  <VaDivider />
+  <h2 class="text-2xl">Hunt admin members:</h2>
+  <div
+    class="mt-8 grid grid-cols-1 gap-2 md:grid-cols-3 lg:grid-cols-5"
+    v-if="data"
+  >
+    <VaButton
+      color="danger"
+      v-for="member in data.members"
+      :key="member.member.id"
+      :disabled="loading"
+      :loading="loading"
+      @click="kick(member)"
+      >Kick {{ member.member.name }} ({{ member.member.email }})</VaButton
+    >
+    <VaChip v-if="data.members.length <= 0">No members yet</VaChip>
+  </div>
+  <div class="mt-8 flex flex-col gap-2 md:flex-row" v-if="data">
+    <VaSelect
+      label="New Admin Member"
+      placeholder="Start typing their email..."
+      autocomplete
+      highlight-matched-text
+      :options="users"
+      v-model="newUser"
+      v-model:search="search"
+      :loading="searchPending"
+      track-by="id"
+      text-by="email"
+    /><VaButton
+      icon="add"
+      color="danger"
+      :disabled="!newUser || loading"
+      :loading="loading"
+      @click="addUser"
+      >Add admin</VaButton
+    >
+  </div>
 </template>
 
 <style scoped></style>