Add team member and hunt member management for admins
This commit is contained in:
@@ -0,0 +1,210 @@
|
||||
<script setup lang="ts">
|
||||
import type { Team } from '~/pages/hunt/[huntSlug]/teams.vue';
|
||||
|
||||
const { confirm } = useModal();
|
||||
const { init } = useToast();
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps<{
|
||||
team: Team;
|
||||
huntId: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
refresh: [];
|
||||
}>();
|
||||
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/${props.huntId}/teamless?email=${safeSearch.value}`,
|
||||
{
|
||||
immediate: false,
|
||||
lazy: true,
|
||||
default: () => [] as User[]
|
||||
}
|
||||
);
|
||||
|
||||
async function kick(member: Team['members'][number]) {
|
||||
const ok = await confirm({
|
||||
title: 'Are you sure?',
|
||||
message: `Are you sure you want to kick ${member.member.name} (${member.member.email}) from this team?`,
|
||||
okText: 'Yes'
|
||||
});
|
||||
|
||||
if (!ok) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const { success } = await $fetch(`/api/admin/team/${props.team.id}/kick`, {
|
||||
method: 'POST',
|
||||
body: { userId: member.member.id }
|
||||
});
|
||||
init({
|
||||
message: success ? 'Successfully kicked user!' : 'Error while kicking',
|
||||
color: success ? 'success' : 'danger'
|
||||
});
|
||||
} catch (e) {
|
||||
init({
|
||||
title: 'Error while kicking',
|
||||
color: 'danger',
|
||||
message: e?.message || e?.statusMessage || t(parseError(e))
|
||||
});
|
||||
}
|
||||
|
||||
emit('refresh');
|
||||
// await refresh();
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function addUser() {
|
||||
if (!newUser.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const { success } = await $fetch(`/api/admin/team/${props.team.id}/add`, {
|
||||
method: 'POST',
|
||||
body: { userId: newUser.value.id }
|
||||
});
|
||||
init({
|
||||
message: success ? 'Successfully added 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))
|
||||
});
|
||||
}
|
||||
|
||||
emit('refresh');
|
||||
newUser.value = undefined;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function deleteTeam() {
|
||||
const ok = await confirm({
|
||||
title: 'Are you sure?',
|
||||
message:
|
||||
`Are you sure you want to delete this team?` +
|
||||
(props.team._count.answers > 0
|
||||
? ` This team has submitted answers!`
|
||||
: ''),
|
||||
okText: 'Yes'
|
||||
});
|
||||
|
||||
if (!ok) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const { success } = await $fetch(`/api/admin/team/${props.team.id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
init({
|
||||
message: success ? 'Successfully deleted team!' : 'Error while deleting',
|
||||
color: success ? 'success' : 'danger'
|
||||
});
|
||||
} catch (e) {
|
||||
init({
|
||||
title: 'Error while deleting',
|
||||
color: 'danger',
|
||||
message: e?.message || e?.statusMessage || t(parseError(e))
|
||||
});
|
||||
}
|
||||
|
||||
emit('refresh');
|
||||
loading.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VaCollapse
|
||||
:key="team.id"
|
||||
:header="`${team.name} — ${team.members.length} members`"
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<h2 class="text-xl">
|
||||
{{ team.name }}
|
||||
<VaButton
|
||||
color="danger"
|
||||
:disabled="loading"
|
||||
:loading="loading"
|
||||
@click="deleteTeam"
|
||||
>
|
||||
Delete team</VaButton
|
||||
>
|
||||
</h2>
|
||||
<p>
|
||||
Created at:
|
||||
{{
|
||||
$d(team.createdAt, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'medium'
|
||||
})
|
||||
}}
|
||||
by {{ team.owner.name }} ({{ team.owner.email }})
|
||||
</p>
|
||||
<p>{{ team._count.answers }} answers</p>
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-3 lg:grid-cols-5">
|
||||
<VaButton
|
||||
color="danger"
|
||||
v-for="member in team.members"
|
||||
:key="member.member.id"
|
||||
:disabled="loading"
|
||||
:loading="loading"
|
||||
@click="kick(member)"
|
||||
>Kick {{ member.member.name }} ({{ member.member.email }})</VaButton
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 md:flex-row">
|
||||
<VaSelect
|
||||
label="New 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="success"
|
||||
:disabled="!newUser || loading"
|
||||
:loading="loading"
|
||||
@click="addUser"
|
||||
>Add user</VaButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</VaCollapse>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
+1
-1
@@ -124,7 +124,7 @@
|
||||
"movePaginationRight": "move pagination right",
|
||||
"next": "Nächstes",
|
||||
"nextPeriod": "next period",
|
||||
"noOptions": "Items not found",
|
||||
"noOptions": "Keine Elemente gefunden",
|
||||
"noSelectedOption": "Option is not selected",
|
||||
"ok": "OK",
|
||||
"openColorPicker": "open color picker",
|
||||
|
||||
@@ -78,6 +78,21 @@ const slugs = computed(() => checkSlug(route.params));
|
||||
<VaSidebarItemTitle>Hunt Admin</VaSidebarItemTitle>
|
||||
</VaSidebarItemContent>
|
||||
</VaSidebarItem>
|
||||
<VaSidebarItem
|
||||
v-if="slugs?.huntSlug && user?.role === 'ADMIN'"
|
||||
text-color="danger"
|
||||
hover-color="danger"
|
||||
active-color="onDanger"
|
||||
:to="$localePath(`/hunt/${sluggy(slugs.huntSlug)}/teams`)"
|
||||
:active="
|
||||
$localePath(`/hunt/${sluggy(slugs.huntSlug)}/teams`) === route.path
|
||||
"
|
||||
>
|
||||
<VaSidebarItemContent>
|
||||
<VaIcon name="groups" />
|
||||
<VaSidebarItemTitle>Hunt Teams</VaSidebarItemTitle>
|
||||
</VaSidebarItemContent>
|
||||
</VaSidebarItem>
|
||||
<VaSidebarItem
|
||||
v-if="slugs?.huntSlug && slugs?.questSlug"
|
||||
:to="
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user