feat(team): add team settings with edit, leave, and kick functionality
This commit is contained in:
@@ -0,0 +1,277 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user