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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user