pichunt/app/components/TeamSettingsModal.vue

<script setup lang="ts">
import { parseError } from '#shared/utils/error';

const props = defineProps<{
  huntId: number;
}>();

const emit = defineEmits<{
  update: [];
}>();

const { t } = useI18n();
const { init } = useToast();
const { confirm } = useModal();
const validation = useValidation();
const { user } = useUserSession();

const isOpen = defineModel<boolean>('modelValue', { default: false });

type TeamMember = {
  member: {
    id: number;
    name: string;
  };
};

type TeamDetails = {
  id: number;
  name: string;
  description: string;
  password: string;
  ownerId: number;
  owner: { id: number; name: string };
  members: TeamMember[];
};

const team = ref<TeamDetails | null>(null);
const loading = ref(false);
const pending = ref(false);
const error = ref('');

const form = reactive({
  name: '',
  description: '',
  password: ''
});

const isOwner = computed(
  () => !!team.value && !!user.value && team.value.ownerId === user.value.id
);

watch(isOpen, async (visible) => {
  if (visible) {
    await loadTeam();
  }
});

async function loadTeam() {
  loading.value = true;
  error.value = '';
  try {
    team.value = await $fetch<TeamDetails>(`/api/hunt/${props.huntId}/team`);
    form.name = team.value!.name;
    form.description = team.value!.description;
    form.password = team.value!.password;
  } catch (e) {
    error.value = parseError(e);
  }
  loading.value = false;
}

async function save() {
  if (!team.value || pending.value) {
    return;
  }
  pending.value = true;
  error.value = '';
  try {
    await $fetch(`/api/hunt/${props.huntId}/team/${team.value.id}`, {
      method: 'PUT',
      body: {
        name: form.name,
        description: form.description,
        password: form.password
      }
    });
    init({ message: t('comp.team_settings.saved'), color: 'success' });
    await loadTeam();
    emit('update');
  } catch (e) {
    error.value = parseError(e);
  }
  pending.value = false;
}

async function leaveTeam() {
  const ok = await confirm({
    title: t('comp.team_settings.leave_title'),
    message: t('comp.team_settings.leave_confirm'),
    okText: t('auth.accept')
  });
  if (!ok) {
    return;
  }
  pending.value = true;
  error.value = '';
  try {
    await $fetch(`/api/hunt/${props.huntId}/team/leave`, {
      method: 'DELETE'
    });
    init({ message: t('comp.team_settings.left'), color: 'success' });
    isOpen.value = false;
    emit('update');
  } catch (e) {
    error.value = parseError(e);
  }
  pending.value = false;
}

async function kickMember(member: TeamMember) {
  const ok = await confirm({
    title: t('comp.team_settings.kick_title'),
    message: t('comp.team_settings.kick_confirm', {
      name: member.member.name
    }),
    okText: t('auth.accept')
  });
  if (!ok) {
    return;
  }
  pending.value = true;
  error.value = '';
  try {
    await $fetch(`/api/hunt/${props.huntId}/team/${team.value!.id}/kick`, {
      method: 'POST',
      body: { userId: member.member.id }
    });
    init({ message: t('comp.team_settings.kicked'), color: 'success' });
    await loadTeam();
    emit('update');
  } catch (e) {
    error.value = parseError(e);
  }
  pending.value = false;
}
</script>

<template>
  <VaModal
    v-model="isOpen"
    :title="t('comp.team_settings.title')"
    size="large"
    hide-default-actions
    close-button
  >
    <template #footer>
      <VaButton preset="secondary" color="secondary" @click="isOpen = false">{{
        t('page.common.cancel')
      }}</VaButton>
    </template>

    <div v-if="!team" class="flex justify-center py-8">
      <VaProgressCircle indeterminate />
    </div>

    <div v-else class="flex flex-col gap-4">
      <!-- Owner: edit form -->
      <template v-if="isOwner">
        <VaInput
          v-model="form.name"
          :label="t('comp.team_settings.team_name')"
          :rules="[
            validation.required(t('comp.team_settings.team_name')),
            validation.min(t('comp.team_settings.team_name'), 3),
            validation.max(t('comp.team_settings.team_name'), 256)
          ]"
        />
        <VaTextarea
          v-model="form.description"
          :label="t('comp.team_settings.description')"
          max-rows="4"
          min-rows="2"
          max-length="256"
          counter
          :rules="[
            validation.maxOptional(t('comp.team_settings.description'), 256)
          ]"
        />
        <VaInput
          v-model="form.password"
          :label="t('comp.team_settings.invite_code')"
          :rules="[validation.required(t('comp.team_settings.invite_code'))]"
        />
        <VaButton
          color="primary"
          :loading="pending"
          :disabled="form.name.length < 3 || form.password.length < 1"
          @click="save"
          >{{ t('page.common.update_btn') }}</VaButton
        >
      </template>

      <!-- Non-owner: read-only info -->
      <template v-else>
        <p>
          <span class="font-bold"
            >{{ t('comp.team_settings.team_name') }}:</span
          >
          {{ team.name }}
        </p>
        <p v-if="team.description">
          <span class="font-bold"
            >{{ t('comp.team_settings.description') }}:</span
          >
          {{ team.description }}
        </p>
        <p>
          <span class="font-bold">{{ t('comp.team_settings.owner') }}:</span>
          {{ team.owner.name }}
        </p>
      </template>

      <VaDivider />

      <!-- Members list -->
      <div>
        <h3 class="mb-2 text-lg font-bold">
          {{ t('comp.team_settings.members') }}
        </h3>
        <div class="flex flex-col gap-2">
          <div
            v-for="member in team.members"
            :key="member.member.id"
            class="flex items-center justify-between gap-2"
          >
            <span>
              {{ member.member.name }}
              <VaChip
                v-if="member.member.id === team.ownerId"
                size="small"
                color="primary"
                >{{ t('comp.team_settings.owner') }}</VaChip
              >
            </span>
            <VaButton
              v-if="isOwner && member.member.id !== team.ownerId"
              icon="person_remove"
              size="small"
              color="danger"
              preset="secondary"
              :loading="pending"
              @click="kickMember(member)"
              >{{ t('comp.team_settings.kick') }}</VaButton
            >
          </div>
        </div>
      </div>

      <VaAlert v-if="error" color="danger" class="w-full text-center">{{
        t(error)
      }}</VaAlert>

      <!-- Non-owner: leave team -->
      <VaDivider v-if="!isOwner" />
      <VaButton
        v-if="!isOwner"
        color="danger"
        icon="logout"
        :loading="pending"
        @click="leaveTeam"
        >{{ t('comp.team_settings.leave') }}</VaButton
      >
    </div>
  </VaModal>
</template>

<style scoped></style>