generated from VLADIMIR/template_frontend
106 lines
3.2 KiB
Vue
106 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { NButton, NFlex } from 'naive-ui'
|
|
|
|
import type { Application, Team } from '@/api/generated/crabs/evening_detective_server'
|
|
import UiBlock from '@/components/UiBlock.vue'
|
|
|
|
defineProps<{
|
|
teams: Team[]
|
|
canPrintReceipts: boolean
|
|
participationOptions: { label: string; value: string }[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
add: []
|
|
'open-qr': [team: Team]
|
|
print: [team: Team]
|
|
preview: [id: string, password: string]
|
|
delete: [team: Team]
|
|
'give-application': [team: Team, application: Application]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<UiBlock class="team-block-hover" @click="emit('add')">
|
|
<p class="place-image-plus">+</p>
|
|
</UiBlock>
|
|
<UiBlock v-for="team in teams" :key="team.ID">
|
|
<div class="team-content-block">
|
|
<n-flex justify="space-between">
|
|
<div class="title-block">
|
|
<span class="team-name-block">
|
|
{{ team.name }}
|
|
<small v-if="team.captainEmail"> — {{ team.captainEmail }}</small>
|
|
<small v-if="team.participantsCount"> · Участников: {{ team.participantsCount }}</small>
|
|
</span>
|
|
<div v-if="team.captainEmail || team.participationStatus !== 'pending'">
|
|
{{
|
|
participationOptions.find((option) => option.value === team.participationStatus)
|
|
?.label
|
|
}}<span v-if="team.participationSource === 'automatic'"> · автоматически</span>
|
|
</div>
|
|
<div v-if="!team.captainEmail">Почта капитана не указана</div>
|
|
<div v-else-if="team.participationEmailError">
|
|
Ошибка отправки: {{ team.participationEmailError }}
|
|
</div>
|
|
<div v-else-if="team.participationEmailSent">Письмо отправлено</div>
|
|
<div v-if="team.participationStatus !== 'cancelled'">
|
|
Поездки: {{ team.actionsCount }}
|
|
</div>
|
|
</div>
|
|
<n-flex justify="end">
|
|
<n-button
|
|
v-if="canPrintReceipts && team.participationStatus !== 'cancelled'"
|
|
@click="emit('print', team)"
|
|
>
|
|
Печать чека
|
|
</n-button>
|
|
<n-button v-if="team.participationStatus !== 'cancelled'" @click="emit('open-qr', team)"
|
|
>QR</n-button
|
|
>
|
|
<n-button
|
|
v-if="team.participationStatus !== 'cancelled'"
|
|
@click="emit('preview', team.ID!, team.password!)"
|
|
>Подсмотреть игру</n-button
|
|
>
|
|
<n-button type="error" ghost @click="emit('delete', team)">Удалить</n-button>
|
|
</n-flex>
|
|
</n-flex>
|
|
<n-button
|
|
v-for="application in team.applications"
|
|
:key="application.name"
|
|
class="link-button"
|
|
@click="emit('give-application', team, application)"
|
|
>
|
|
Выдать: {{ application.name }}
|
|
</n-button>
|
|
</div>
|
|
</UiBlock>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.team-block-hover:hover {
|
|
background-color: #333;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.team-content-block {
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.team-name-block {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.link-button {
|
|
margin: 8px 8px 0 0;
|
|
}
|
|
|
|
.place-image-plus {
|
|
font-size: 32px;
|
|
margin: 0;
|
|
padding: 16px;
|
|
text-align: center;
|
|
}
|
|
</style>
|