public/src/components/GottesdienstCard.vue

@@ -12,6 +12,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
     toggleMark: [gid: number, mid: number]
+    editGottesdienst: [id: number]
 }>()
 
 const isAdmin = computed(() => props.currentUsername === "admin")
@@ -159,6 +160,9 @@ function getOwnMarkHint(): string {
                     <i v-if="getOwnMarkIcon()" class="icon">{{ getOwnMarkIcon() }}</i>
                 </button>
                 <span class="name">{{ gottesdienst.name !== "" ? gottesdienst.name : "Gottesdienst" }}</span>
+                <button v-if="isAdmin" class="edit-godi-btn" @click="emit('editGottesdienst', gottesdienst.id)" title="Gottesdienst bearbeiten">
+                    <i class="icon">edit</i>
+                </button>
             </div>
             <div class="info">
                 <span class="date">am {{ formatWeekday(gottesdienst.date) }} {{ formatDay(gottesdienst.date) }}</span>
@@ -225,6 +229,34 @@ function getOwnMarkHint(): string {
         .name {
             font-weight: 700;
             font-size: 18px;
+            flex: 1;
+        }
+
+        .edit-godi-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: 20px;
+                margin: 0;
+            }
+
+            &:hover {
+                background: #f0f0f0;
+                color: #555;
+            }
         }
     }
 
@@ -321,6 +353,7 @@ function getOwnMarkHint(): string {
         gap: 6px;
         width: 100%;
         padding: 6px 0;
+        margin: 0;
         border: none;
         background: transparent;
         font-size: 14px;

public/src/components/ListView.vue

@@ -15,6 +15,7 @@ defineProps<{
 const emit = defineEmits<{
     toggleMark: [gid: number, mid: number]
     addGottesdienst: []
+    editGottesdienst: [id: number]
     addMinistrant: []
     editMinistrant: [id: number]
     importZelebrationsplan: []
@@ -48,6 +49,7 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
                 :editable="editable"
                 :current-username="currentUsername"
                 @toggle-mark="(gid, mid) => emit('toggleMark', gid, mid)"
+                @edit-gottesdienst="(id) => emit('editGottesdienst', id)"
             />
             <button v-if="admin" class="add-godi" @click="emit('addGottesdienst')">
                 <i class="icon">add</i> Gottesdienst

public/src/views/PlanView.vue

@@ -324,17 +324,6 @@ async function importZelebrationsplan() {
             <GroupView :groups="plan.groups" :admin="editPlanAdmin"
                        @new="createNewPlan" @delete="deletePlan" @edit="editPlan" class="no-print"/>
 
-            <PlanActionBar
-                class="action-bar no-print"
-                :save="getDif().length > 0"
-                :plan="false"
-                :godi="true"
-                @save="saveChanges()"
-                @add-godi="createGottesdienst()"
-                @add-mini="createMinistrant()"
-                @import-zelebrationsplan="importZelebrationsplan()"
-                v-if="editPlanAdmin"
-            />
 
             <ListView
                 :gottesdienste="sortedGottesdienste"
@@ -347,6 +336,7 @@ async function importZelebrationsplan() {
                 @add-gottesdienst="createGottesdienst()"
                 @add-ministrant="createMinistrant()"
                 @edit-ministrant="(id) => createMinistrant(id)"
+                @edit-gottesdienst="(id) => createGottesdienst(id)"
                 @import-zelebrationsplan="importZelebrationsplan()"
                 class="plan list"
                 v-if="viewMode === 'list'">
@@ -354,6 +344,19 @@ async function importZelebrationsplan() {
             </ListView>
 
             <template v-if="viewMode === 'table'">
+
+                <PlanActionBar
+                    class="action-bar no-print"
+                    :save="getDif().length > 0"
+                    :plan="false"
+                    :godi="true"
+                    @save="saveChanges()"
+                    @add-godi="createGottesdienst()"
+                    @add-mini="createMinistrant()"
+                    @import-zelebrationsplan="importZelebrationsplan()"
+                    v-if="editPlanAdmin"
+                />
+                
                 <TablePlan
                     :gottesdienste="sortedGottesdienste"
                     :ministranten="plan.ministranten"