public/src/components/GottesdienstCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
-import {computed} from "vue"
+import {computed, ref} from "vue"
 
 const props = defineProps<{
     gottesdienst: Gottesdienst
@@ -17,6 +17,7 @@ const emit = defineEmits<{
 const isAdmin = computed(() => props.currentUsername === "admin")
 const currentMini = computed(() => props.ministranten.find(m => m.username === props.currentUsername))
 const showCheckbox = computed(() => !!currentMini.value && !isAdmin.value)
+const expanded = ref(false)
 
 const relevantMarks = computed(() =>
     props.marks.filter(m => m.gid === props.gottesdienst.id && m.value !== 0)
@@ -29,6 +30,10 @@ const sortedMinistrants = computed(() => {
         .filter((entry): entry is {ministrant: SimplifiedMinistrant; mark: Mark} => !!entry.ministrant)
 })
 
+function ministrantTotalMarks(miniId: number): number {
+    return props.marks.filter(m => m.mid === miniId && m.value !== 0).length
+}
+
 function getMark(gid: number, mid: number): Mark {
     const mark = props.marks.find(m => m.mid === mid && m.gid === gid)
     return mark ?? {gid, mid, value: 0}
@@ -152,6 +157,11 @@ function getOwnMarkHint(): string {
         </div>
 
         <div class="card-body" v-if="sortedMinistrants.length > 0">
+            <button class="collapse-toggle" @click="expanded = !expanded">
+                <i class="icon">{{ expanded ? 'expand_less' : 'expand_more' }}</i>
+                {{ sortedMinistrants.length }} Rückmeldungen
+            </button>
+            <template v-if="expanded">
                 <div
                     v-for="{ministrant, mark} in sortedMinistrants"
                     :key="ministrant.id"
@@ -159,11 +169,17 @@ function getOwnMarkHint(): string {
                     :class="getMarkClass(gottesdienst.id, ministrant.id)"
                 >
                     <span class="mini-name">{{ ministrant.firstname }} {{ ministrant.lastname }}</span>
-                <span class="mark-badge">
+                    <span class="mark-count">{{ ministrantTotalMarks(ministrant.id) }}</span>
+                    <span
+                        class="mark-badge"
+                        :class="{ clickable: isAdmin }"
+                        @click="isAdmin && emit('toggleMark', gottesdienst.id, ministrant.id)"
+                    >
                         <i class="icon">{{ getIconForMark(gottesdienst.id, ministrant.id) }}</i>
                         <span class="hint">{{ getHintForMark(gottesdienst.id, ministrant.id) }}</span>
                     </span>
                 </div>
+            </template>
         </div>
         <div class="card-body empty" v-else>
             <span class="no-marks">Keine Rückmeldungen</span>
@@ -266,11 +282,33 @@ function getOwnMarkHint(): string {
         font-size: 14px;
     }
 
+    .collapse-toggle {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        width: 100%;
+        padding: 6px 0;
+        border: none;
+        background: transparent;
+        font-size: 14px;
+        font-weight: 600;
+        color: #777;
+        cursor: pointer;
+
+        i {
+            font-size: 20px;
+        }
+
+        &:hover {
+            color: #444;
+        }
+    }
+
     .ministrant-row {
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        gap: 8px;
-        padding: 8px 0;
+        padding: 8px 0 8px 26px;
         border-bottom: 1px solid #f0f0f0;
 
         &:last-child {
@@ -280,6 +318,15 @@ function getOwnMarkHint(): string {
         .mini-name {
             font-size: 15px;
             font-weight: 500;
+            flex: 1;
+        }
+
+        .mark-count {
+            font-size: 12px;
+            color: #aaa;
+            font-weight: 600;
+            min-width: 20px;
+            text-align: center;
         }
 
         .mark-badge {
@@ -297,6 +344,17 @@ function getOwnMarkHint(): string {
                 font-size: 13px;
                 white-space: nowrap;
             }
+
+            &.clickable {
+                cursor: pointer;
+                padding: 2px 4px;
+                border-radius: 4px;
+                transition: 100ms;
+
+                &:hover {
+                    background: rgba(0,0,0,0.04);
+                }
+            }
         }
 
         &.minus {