feat: add add/edit ministrant actions in ListView

- Each ministrant row shows an edit button for admin
- Bottom of ministrant list has an add button
- Events wired to PlanView's createMinistrant dialog
This commit is contained in:
2026-07-14 22:01:15 +02:00
parent 9e70dea85a
commit 39929361a0
2 changed files with 65 additions and 0 deletions
+63
View File
@@ -15,6 +15,8 @@ defineProps<{
const emit = defineEmits<{
toggleMark: [gid: number, mid: number]
addGottesdienst: []
addMinistrant: []
editMinistrant: [id: number]
}>()
const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
@@ -56,10 +58,16 @@ 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>
<button v-if="admin" class="edit-btn" @click="emit('editMinistrant', mini.id)">
<i class="icon">edit</i>
</button>
</div>
<div v-if="ministranten.length === 0" class="empty-state">
Keine Ministranten
</div>
<button v-if="admin" class="add-mini" @click="emit('addMinistrant')">
<i class="icon">add</i> Ministrant
</button>
</div>
</template>
</div>
@@ -138,12 +146,67 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
}
}
.mini-row {
.edit-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
margin: 0;
border: none;
border-radius: 4px;
background: transparent;
color: #aaa;
cursor: pointer;
transition: 100ms;
flex-shrink: 0;
i {
font-size: 18px;
margin: 0;
}
&:hover {
background: #f0f0f0;
color: #555;
}
}
}
.empty-state {
padding: 24px;
text-align: center;
color: #999;
font-size: 14px;
}
.add-mini {
display: flex;
width: 100%;
padding: 10px;
font-size: 14px;
justify-content: center;
background: #fafafa;
border: none;
border-top: 1px solid #f0f0f0;
border-radius: 0;
cursor: pointer;
color: #777;
transition: 100ms;
margin: 0;
i {
font-size: 20px;
margin-right: 6px;
}
&:hover {
background: #f0f0f0;
color: #444;
}
}
}
.add-godi {