public/src/components/GottesdienstCard.vue

@@ -19,15 +19,18 @@ const currentMini = computed(() => props.ministranten.find(m => m.username === p
 const showCheckbox = computed(() => !!currentMini.value && !isAdmin.value)
 const expanded = ref(false)
 
-const relevantMarks = computed(() =>
+const responseCount = computed(() =>
-    props.marks.filter(m => m.gid === props.gottesdienst.id && m.value !== 0)
+    props.marks.filter(m => m.gid === props.gottesdienst.id && m.value !== 0).length
 )
 
-const sortedMinistrants = computed(() => {
+const allMinistrants = computed(() => {
     const miniMap = new Map(props.ministranten.map(m => [m.id, m]))
-    return relevantMarks.value
+    const marksMap = new Map(props.marks.filter(m => m.gid === props.gottesdienst.id).map(m => [m.mid, m]))
-        .map(m => ({ministrant: miniMap.get(m.mid), mark: m}))
+    return props.ministranten
-        .filter((entry): entry is {ministrant: SimplifiedMinistrant; mark: Mark} => !!entry.ministrant)
+        .map(mini => ({
+            ministrant: mini,
+            mark: marksMap.get(mini.id) ?? {gid: props.gottesdienst.id, mid: mini.id, value: 0} as Mark
+        }))
 })
 
 function ministrantTotalMarks(miniId: number): number {
@@ -156,14 +159,14 @@ function getOwnMarkHint(): string {
             </div>
         </div>
 
-        <div class="card-body" v-if="sortedMinistrants.length > 0">
+        <div class="card-body" v-if="allMinistrants.length > 0">
             <button class="collapse-toggle" @click="expanded = !expanded">
                 <i class="icon">{{ expanded ? 'expand_less' : 'expand_more' }}</i>
-                {{ sortedMinistrants.length }} Rückmeldungen
+                {{ responseCount }} Rückmeldungen
             </button>
             <template v-if="expanded">
                 <div
-                    v-for="{ministrant, mark} in sortedMinistrants"
+                    v-for="{ministrant, mark} in allMinistrants"
                     :key="ministrant.id"
                     class="ministrant-row"
                     :class="getMarkClass(gottesdienst.id, ministrant.id)"
@@ -182,7 +185,7 @@ function getOwnMarkHint(): string {
             </template>
         </div>
         <div class="card-body empty" v-else>
-            <span class="no-marks">Keine Rückmeldungen</span>
+            <span class="no-marks">Keine Ministranten</span>
         </div>
     </div>
 </template>