public/src/components/ListView.vue

@@ -3,7 +3,7 @@ import {ref} from "vue"
 import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
 import GottesdienstCard from "@/components/GottesdienstCard.vue"
 
-defineProps<{
+const props = defineProps<{
     gottesdienste: Gottesdienst[]
     ministranten: SimplifiedMinistrant[]
     marks: Mark[]
@@ -22,6 +22,10 @@ const emit = defineEmits<{
 }>()
 
 const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
+
+function countXMarks(miniId: number): number {
+    return props.marks.filter(m => m.mid === miniId && m.value === 1).length
+}
 </script>
 
 <template>
@@ -64,6 +68,7 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
                 <div v-for="mini in ministranten" :key="mini.id" class="mini-row">
                     <span class="mini-name">{{ mini.firstname }} {{ mini.lastname }}</span>
                     <span class="mini-username">@{{ mini.username }}</span>
+                    <span class="x-count">{{ countXMarks(mini.id) }}</span>
                     <button v-if="admin" class="edit-btn" @click="emit('editMinistrant', mini.id)">
                         <i class="icon">edit</i>
                     </button>
@@ -82,6 +87,12 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
 <style scoped lang="less">
 .list-view {
     padding: 12px;
+    max-width: 800px;
+    margin: 0 auto;
+
+
+    @media(min-width: 800px) {
+    }
 }
 
 .tab-bar {
@@ -149,6 +160,17 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
         .mini-username {
             font-size: 13px;
             color: #999;
+            flex: 1;
+        }
+
+        .x-count {
+            font-size: 13px;
+            font-weight: 700;
+            color: #045b04;
+            background: #d1fcd1;
+            padding: 1px 8px;
+            border-radius: 10px;
+            margin: 0 8px;
         }
     }