diff --git a/public/src/components/ListView.vue b/public/src/components/ListView.vue index cd8351e..53702bd 100644 --- a/public/src/components/ListView.vue +++ b/public/src/components/ListView.vue @@ -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")
{{ mini.firstname }} {{ mini.lastname }} @{{ mini.username }} +
Keine Ministranten
+ @@ -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 { diff --git a/public/src/views/PlanView.vue b/public/src/views/PlanView.vue index 5f29602..9ea55fa 100644 --- a/public/src/views/PlanView.vue +++ b/public/src/views/PlanView.vue @@ -345,6 +345,8 @@ async function importZelebrationsplan() { :admin="editPlanAdmin" @toggle-mark="toggleMark" @add-gottesdienst="createGottesdienst()" + @add-ministrant="createMinistrant()" + @edit-ministrant="(id) => createMinistrant(id)" class="plan list" v-if="viewMode === 'list'">