feat: add list view with GottesdienstCard components
- New GottesdienstCard component shows each service with its info - Shows the currently logged-in user's mark as a toggle checkbox - Lists ministrants who have responded with their mark status - Admin view hides the checkbox, shows responses only - New ListView wrapper renders all cards - PlanView gets a Tabelle/Liste toggle between table and card views
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
|
||||
import GottesdienstCard from "@/components/GottesdienstCard.vue"
|
||||
|
||||
defineProps<{
|
||||
gottesdienste: Gottesdienst[]
|
||||
ministranten: SimplifiedMinistrant[]
|
||||
marks: Mark[]
|
||||
editable: string[]
|
||||
currentUsername: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
toggleMark: [gid: number, mid: number]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="list-view">
|
||||
<GottesdienstCard
|
||||
v-for="godi in gottesdienste"
|
||||
:key="godi.id"
|
||||
:gottesdienst="godi"
|
||||
:ministranten="ministranten"
|
||||
:marks="marks"
|
||||
:editable="editable"
|
||||
:current-username="currentUsername"
|
||||
@toggle-mark="(gid, mid) => emit('toggleMark', gid, mid)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.list-view {
|
||||
padding: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user