public/src/components/ListView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import {ref} from "vue"
 import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
 import GottesdienstCard from "@/components/GottesdienstCard.vue"
 
@@ -15,10 +16,26 @@ const emit = defineEmits<{
     toggleMark: [gid: number, mid: number]
     addGottesdienst: []
 }>()
+
+const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
 </script>
 
 <template>
     <div class="list-view">
+        <div class="tab-bar">
+            <button
+                class="tab"
+                :class="{ active: activeTab === 'gottesdienste' }"
+                @click="activeTab = 'gottesdienste'"
+            ><i class="icon">list</i> Gottesdienste</button>
+            <button
+                class="tab"
+                :class="{ active: activeTab === 'ministranten' }"
+                @click="activeTab = 'ministranten'"
+            ><i class="icon">groups</i> Ministranten</button>
+        </div>
+
+        <template v-if="activeTab === 'gottesdienste'">
             <GottesdienstCard
                 v-for="godi in gottesdienste"
                 :key="godi.id"
@@ -32,6 +49,19 @@ const emit = defineEmits<{
             <button v-if="admin" class="add-godi" @click="emit('addGottesdienst')">
                 <i class="icon">add</i> Gottesdienst
             </button>
+        </template>
+
+        <template v-else>
+            <div class="mini-list">
+                <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>
+                </div>
+                <div v-if="ministranten.length === 0" class="empty-state">
+                    Keine Ministranten
+                </div>
+            </div>
+        </template>
     </div>
 </template>
 
@@ -40,6 +70,82 @@ const emit = defineEmits<{
     padding: 12px;
 }
 
+.tab-bar {
+    display: flex;
+    gap: 4px;
+    margin-bottom: 12px;
+    background: #f0f0f0;
+    border-radius: 8px;
+    padding: 3px;
+
+    .tab {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        padding: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        border: none;
+        border-radius: 6px;
+        background: transparent;
+        color: #777;
+        cursor: pointer;
+        transition: 100ms;
+
+        i {
+            font-size: 20px;
+        }
+
+        &.active {
+            background: #ffffff;
+            color: #222;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+
+        &:not(.active):hover {
+            color: #555;
+        }
+    }
+}
+
+.mini-list {
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .mini-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 14px;
+        border-bottom: 1px solid #f0f0f0;
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        .mini-name {
+            font-size: 15px;
+            font-weight: 500;
+        }
+
+        .mini-username {
+            font-size: 13px;
+            color: #999;
+        }
+    }
+
+    .empty-state {
+        padding: 24px;
+        text-align: center;
+        color: #999;
+        font-size: 14px;
+    }
+}
+
 .add-godi {
     display: flex;
     width: 100%;