public/src/components/GottesdienstCard.vue

@@ -23,6 +23,14 @@ const responseCount = computed(() =>
     props.marks.filter(m => m.gid === props.gottesdienst.id && m.value !== 0).length
 )
 
+const comingMinistrants = computed(() => {
+    const miniMap = new Map(props.ministranten.map(m => [m.id, m]))
+    return props.marks
+        .filter(m => m.gid === props.gottesdienst.id && m.value === 1)
+        .map(m => miniMap.get(m.mid))
+        .filter((m): m is SimplifiedMinistrant => !!m)
+})
+
 const allMinistrants = computed(() => {
     const miniMap = new Map(props.ministranten.map(m => [m.id, m]))
     const marksMap = new Map(props.marks.filter(m => m.gid === props.gottesdienst.id).map(m => [m.mid, m]))
@@ -160,6 +168,11 @@ function getOwnMarkHint(): string {
         </div>
 
         <div class="card-body" v-if="allMinistrants.length > 0">
+            <div class="coming-summary" v-if="comingMinistrants.length > 0">
+                <span v-for="m in comingMinistrants" :key="m.id" class="coming-chip">
+                    {{ m.firstname }}
+                </span>
+            </div>
             <button class="collapse-toggle" @click="expanded = !expanded">
                 <i class="icon">{{ expanded ? 'expand_less' : 'expand_more' }}</i>
                 {{ responseCount }} Rückmeldungen
@@ -285,6 +298,23 @@ function getOwnMarkHint(): string {
         font-size: 14px;
     }
 
+    .coming-summary {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        margin-bottom: 8px;
+
+        .coming-chip {
+            display: inline-block;
+            padding: 2px 8px;
+            font-size: 13px;
+            font-weight: 600;
+            background: #d1fcd1;
+            color: #045b04;
+            border-radius: 4px;
+        }
+    }
+
     .collapse-toggle {
         display: flex;
         align-items: center;