68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<script setup>
|
|
import {computed, inject} from "vue";
|
|
import ParticipantsList from "./ParticipantsList.vue";
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => ({participants: {}, event: {}, listType: ''}),
|
|
},
|
|
});
|
|
|
|
// Von TabbedPage bereitgestellt: erlaubt den Sprung zum Übersicht-Tab (Index 0), wo die
|
|
// Teilnahmeoptionen konfiguriert werden.
|
|
const selectTab = inject('selectTab', null);
|
|
|
|
const hasOptions = computed(() => (props.data?.event?.participationOptions?.length ?? 0) > 0);
|
|
|
|
function goToOverview() {
|
|
if (selectTab) {
|
|
selectTab(0);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ParticipantsList v-if="hasOptions" :data="data" :show-group-mail="false"/>
|
|
|
|
<div v-else class="no-options">
|
|
<h3>Keine Teilnahmeoptionen angelegt</h3>
|
|
<p>
|
|
Für diese Veranstaltung sind noch keine Teilnahmeoptionen angelegt. Sobald du unter
|
|
<strong>Übersicht → Teilnahmeoptionen</strong> Fragen definierst, werden die Teilnehmenden hier nach
|
|
ihrer Auswahl gruppiert.
|
|
</p>
|
|
<button v-if="selectTab" type="button" class="button" @click="goToOverview">
|
|
Zu den Teilnahmeoptionen
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.no-options {
|
|
max-width: 640px;
|
|
margin: 20px auto;
|
|
padding: 24px;
|
|
background: #f8fafc;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.no-options p {
|
|
color: #4b5563;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.button {
|
|
margin-top: 12px;
|
|
padding: 8px 18px;
|
|
background: #2563eb;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|