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

<script setup lang="ts">
import superjson, { type SuperJSONResult } from 'superjson';
import { useTitleStore } from '~/stores/title';
import { fullDate } from '~~/server/utils/date';

definePageMeta({
  middleware: ['admin']
});

const app = useNuxtApp();
const { loggedIn } = useUserSession();
const localePath = useLocalePath();
const { t, d } = useI18n();
const router = useRouter();

const { confirm } = useModal();
const { init } = useToast();

const { name, id } = app.$slugData.huntSlug!;
const titleStore = useTitleStore();

const { data, pending, refresh, error } = await useFetch(
  `/api/admin/hunt/${id}`,
  {
    transform: (value) => {
      return superjson.deserialize(
        value as unknown as SuperJSONResult
      ) as unknown as typeof value;
    }
  }
);

const formData = useCloned(data, {
  clone: (source) => superjson.deserialize(superjson.serialize(source))
});

useHead({
  title: t('layouts.title', {
    title: data.value?.name || name
  })
});

watch(loggedIn, (isLoggedIn) => {
  if (!isLoggedIn) {
    router.push(localePath('/login'));
  }
});

titleStore.title = data.value?.name;

const loading = ref(false);

const search = ref('');
const safeSearch = ref('');
const newUser = ref<User>();
watchDebounced(
  search,
  (newSearch) => {
    if (newSearch) {
      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',
    body: formData.cloned.value
  });
  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>
  <h1>admin</h1>
  <VaForm v-if="formData.cloned.value && data" class="flex flex-col gap-4">
    <VaInput
      label="Name"
      v-model="formData.cloned.value.name"
      clearable
      :clear-value="data.name"
      clearable-icon="replay"
    />
    <VaTextarea
      label="Description"
      v-model="formData.cloned.value.description"
      clearable
      :clear-value="data.description"
      clearable-icon="replay"
    />
    <VaCheckbox label="Virtual" v-model="formData.cloned.value.virtual" />
    <VaCheckbox label="Allow Join" v-model="formData.cloned.value.allowJoin" />
    <VaCheckbox
      label="Reveal Quests"
      v-model="formData.cloned.value.revealQuests"
    />
    <VaCheckbox
      label="Reveal Answers"
      v-model="formData.cloned.value.revealAnswers"
    />
    <div class="flex flex-row gap-2">
      <VaCheckbox
        label="Start?"
        :model-value="!!formData.cloned.value.start"
        @update:model-value="
          (newVal) =>
            (formData.cloned.value!.start = newVal ? new Date() : null)
        "
      />
      <VaDateInput
        v-if="formData.cloned.value.start"
        label="Start"
        v-model="formData.cloned.value.start"
        manual-input
      />
      <VaTimeInput
        v-if="formData.cloned.value.start"
        label="Start"
        v-model="formData.cloned.value.start"
        view="seconds"
        manual-input
      />
    </div>
    <div class="flex flex-row gap-2">
      <VaCheckbox
        label="End?"
        :model-value="!!formData.cloned.value.end"
        @update:model-value="
          (newVal) => (formData.cloned.value!.end = newVal ? new Date() : null)
        "
      />
      <VaDateInput
        v-if="formData.cloned.value.end"
        label="End"
        v-model="formData.cloned.value.end"
        manual-input
      />
      <VaTimeInput
        v-if="formData.cloned.value.end"
        label="End"
        v-model="formData.cloned.value.end"
        view="seconds"
        manual-input
      />
    </div>
    <p>
      Last update:
      {{ d(data.updatedAt, fullDate) }}
    </p>
    <VaButtonGroup :loading="pending" :disabled="pending">
      <VaButton
        icon="replay"
        :disabled="!formData.isModified.value"
        @click.prevent="formData.sync()"
        >Reset all values</VaButton
      >
      <VaButton :disabled="formData.isModified.value" @click.prevent="refresh()"
        >Refresh</VaButton
      >
      <VaButton :disabled="!formData.isModified.value" @click.prevent="submit"
        >Save</VaButton
      >
    </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>