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<{ const emit = defineEmits<{
toggleMark: [gid: number, mid: number] toggleMark: [gid: number, mid: number]
addGottesdienst: [] addGottesdienst: []
addMinistrant: []
editMinistrant: [id: number]
}>() }>()
const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste") 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"> <div v-for="mini in ministranten" :key="mini.id" class="mini-row">
<span class="mini-name">{{ mini.firstname }} {{ mini.lastname }}</span> <span class="mini-name">{{ mini.firstname }} {{ mini.lastname }}</span>
<span class="mini-username">@{{ mini.username }}</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>
<div v-if="ministranten.length === 0" class="empty-state"> <div v-if="ministranten.length === 0" class="empty-state">
Keine Ministranten Keine Ministranten
</div> </div>
<button v-if="admin" class="add-mini" @click="emit('addMinistrant')">
<i class="icon">add</i> Ministrant
</button>
</div> </div>
</template> </template>
</div> </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 { .empty-state {
padding: 24px; padding: 24px;
text-align: center; text-align: center;
color: #999; color: #999;
font-size: 14px; 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 { .add-godi {
+2
View File
@@ -345,6 +345,8 @@ async function importZelebrationsplan() {
:admin="editPlanAdmin" :admin="editPlanAdmin"
@toggle-mark="toggleMark" @toggle-mark="toggleMark"
@add-gottesdienst="createGottesdienst()" @add-gottesdienst="createGottesdienst()"
@add-ministrant="createMinistrant()"
@edit-ministrant="(id) => createMinistrant(id)"
class="plan list" class="plan list"
v-if="viewMode === 'list'"> v-if="viewMode === 'list'">