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

<script setup lang="ts">
import { parseError, sluggy } from '#imports';
import { createImageURL } from '#shared/utils/image';
import superjson, { type SuperJSONResult } from 'superjson';
import { useI18nKey } from '~/composables/useI18nKey';
import { useHuntStore } from '~/stores/hunt';
import { useTitleStore } from '~/stores/title';
import { fullDate } from '~~/server/utils/date';

definePageMeta({
  middleware: ['auth'],
  keepalive: false
});

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

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

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

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;
    }
  }
);

huntStore.setMembership(id, !error.value);

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

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

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

titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;

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',
      // @ts-expect-error weird error stuff
      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',
      // @ts-expect-error weird error stuff
      message: e?.message || e?.statusMessage || t(parseError(e))
    });
  }

  await refresh();
  newUser.value = undefined;
  loading.value = false;
}

const newImage = ref<File>();
const uploading = ref(false);
const imageError = ref('');

async function updateImage() {
  if (!newImage.value) {
    return;
  }
  uploading.value = true;
  imageError.value = '';

  const body = new FormData();
  body.set('image', newImage.value);

  try {
    await $fetch(`/api/admin/hunt/${id}/image`, {
      method: 'POST',
      body
    });

    await refresh();
    newImage.value = undefined;
  } catch (e) {
    imageError.value = parseError(e);
  }
  uploading.value = false;
}

async function deleteImage() {
  uploading.value = true;
  imageError.value = '';

  try {
    await $fetch(`/api/admin/hunt/${id}/image`, {
      method: 'DELETE'
    });

    await refresh();
    newImage.value = undefined;
  } catch (e) {
    imageError.value = parseError(e);
  }

  uploading.value = false;
}
</script>

<template>
  <div>
    <div v-if="error">
      <VaAlert color="danger" class="my-4">
        {{ t(parseError(error)) }}
      </VaAlert>
      <VaButton
        icon="arrow_back"
        :to="localePath(`/hunt/${sluggy(app.$slugData.huntSlug!)}`)"
        >{{ t('page.common.back_to_hunt') }}</VaButton
      >
    </div>
    <template v-else>
      <VaForm v-if="formData.cloned.value && data" class="flex flex-col gap-4">
        <VaInput
          v-model="formData.cloned.value.name_de"
          label="Name DE"
          clearable
          :clear-value="data.name_de"
          clearable-icon="replay"
        />
        <VaInput
          v-model="formData.cloned.value.name_en"
          label="Name EN"
          clearable
          :clear-value="data.name_en"
          clearable-icon="replay"
        />
        <VaTextarea
          v-model="formData.cloned.value.description_de"
          label="Description DE"
          clearable
          :clear-value="data.description_de"
          clearable-icon="replay"
        />
        <VaTextarea
          v-model="formData.cloned.value.description_en"
          label="Description EN"
          clearable
          :clear-value="data.description_en"
          clearable-icon="replay"
        />
        <VaCheckbox v-model="formData.cloned.value.virtual" label="Virtual" />
        <VaCheckbox v-model="formData.cloned.value.public" label="Public" />
        <VaCheckbox
          v-model="formData.cloned.value.allowJoin"
          label="Allow Join"
        />
        <VaCheckbox
          v-model="formData.cloned.value.revealQuests"
          label="Reveal Quests"
        />
        <VaCheckbox
          v-model="formData.cloned.value.revealAnswers"
          label="Reveal Answers"
        />
        <div class="flex flex-row gap-2">
          <VaCheckbox
            label="Start?"
            :model-value="!!formData.cloned.value.start"
            @update:model-value="
              (newVal: boolean) =>
                (formData.cloned.value!.start = newVal ? new Date() : null)
            "
          />
          <VaDateInput
            v-if="formData.cloned.value.start"
            v-model="formData.cloned.value.start"
            label="Start"
            manual-input
          />
          <VaTimeInput
            v-if="formData.cloned.value.start"
            v-model="formData.cloned.value.start"
            label="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: boolean) =>
                (formData.cloned.value!.end = newVal ? new Date() : null)
            "
          />
          <VaDateInput
            v-if="formData.cloned.value.end"
            v-model="formData.cloned.value.end"
            label="End"
            manual-input
          />
          <VaTimeInput
            v-if="formData.cloned.value.end"
            v-model="formData.cloned.value.end"
            label="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">Image</h2>
      <div>
        <VaImage
          v-if="newImage"
          :src="createImageURL(newImage)"
          class="max-h-60 w-full"
          fit="contain"
          lazy
        />
        <VaImage
          v-else-if="data?.picture"
          :src="data?.picture?.url"
          class="max-h-60 w-full"
          fit="contain"
          lazy
        >
          <template #loader> <VaProgressCircle indeterminate /> </template
        ></VaImage>
        <VaFileUpload
          v-model="newImage"
          :disabled="uploading || pending"
          type="single"
          file-types="jpg,png,jpeg"
        />
        <VaAlert
          v-if="imageError.length > 0"
          color="danger"
          class="w-full text-center"
          >{{ t(imageError) }}</VaAlert
        >
        <VaButtonGroup :disabled="uploading || pending">
          <VaButton color="success" :disabled="!newImage" @click="updateImage">
            Upload new image
          </VaButton>
          <VaButton
            color="danger"
            icon="delete"
            :disabled="!data?.picture"
            @click="deleteImage"
            >Delete image</VaButton
          >
        </VaButtonGroup>
      </div>

      <VaDivider />
      <h2 class="text-2xl">Hunt admin members:</h2>
      <div
        v-if="data"
        class="mt-8 grid grid-cols-1 gap-2 md:grid-cols-3 lg:grid-cols-5"
      >
        <VaButton
          v-for="member in data.members"
          :key="member.member.id"
          color="danger"
          :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 v-if="data" class="mt-8 flex flex-col gap-2 md:flex-row">
        <VaSelect
          v-model="newUser"
          v-model:search="search"
          label="New Admin Member"
          placeholder="Start typing their email..."
          autocomplete
          highlight-matched-text
          :options="users"
          :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>
  </div>
</template>

<style scoped></style>