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>

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

@@ -43,12 +43,26 @@ async function invite() {
 <template>
   <h1 class="text-2xl">
     {{ data?.name || name }}
-    <VaButton
-      color="danger"
-      v-if="data?.isMember"
-      :to="$localePath(`/hunt/${sluggy(data)}/admin`)"
-      >Admin</VaButton
-    >
+    <VaButtonGroup v-if="data?.isMember">
+      <VaButton
+        color="danger"
+        icon="edit"
+        :to="$localePath(`/hunt/${sluggy(data)}/admin`)"
+        >Admin</VaButton
+      ><VaButton
+        color="danger"
+        icon="groups"
+        :to="$localePath(`/hunt/${sluggy(data)}/teams`)"
+        >Teams</VaButton
+      >
+      <VaButton
+        color="success"
+        icon="leaderboard"
+        :to="$localePath(`/hunt/${sluggy(data)}/showcase`)"
+        >Showcase</VaButton
+      >
+    </VaButtonGroup>
+
     <VaChip v-if="data?.totalScore" class="float-right" color="success"
       >Total points: {{ data!!.totalScore }}</VaChip
     >

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import Team from '~/components/admin/Team.vue';
+import { useTitleStore } from '~/stores/title';
+
+definePageMeta({
+  middleware: ['admin']
+});
+
+const app = useNuxtApp();
+const { loggedIn } = useUserSession();
+const localePath = useLocalePath();
+const { t } = useI18n();
+const router = useRouter();
+
+const { name, id } = app.$slugData.huntSlug!;
+const titleStore = useTitleStore();
+
+const { data, pending, refresh } = await useFetch(
+  `/api/admin/hunt/${id}/teams`
+);
+
+useHead({
+  title: t('layouts.title', {
+    title: data.value?.name || name
+  })
+});
+
+watch(loggedIn, (isLoggedIn) => {
+  if (!isLoggedIn) {
+    router.push(localePath('/login'));
+  }
+});
+
+titleStore.title = data.value?.name;
+
+type Data = NonNullable<(typeof data)['value']>;
+export type Team = Data['teams'][number];
+</script>
+
+<template>
+  <h1>teams</h1>
+  <VaButton color="success" icon="replay" @click="refresh">Refresh</VaButton>
+  <VaAccordion v-if="data" stateful>
+    <Team
+      v-for="team in data.teams"
+      :key="team.id"
+      :team="team"
+      :huntId="id"
+      @refresh="refresh"
+    />
+  </VaAccordion>
+</template>
+
+<style scoped></style>