public/src/components/ListView.vue

@@ -17,6 +17,7 @@ const emit = defineEmits<{
     addGottesdienst: []
     addMinistrant: []
     editMinistrant: [id: number]
+    importZelebrationsplan: []
 }>()
 
 const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
@@ -51,6 +52,9 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
             <button v-if="admin" class="add-godi" @click="emit('addGottesdienst')">
                 <i class="icon">add</i> Gottesdienst
             </button>
+            <button v-if="admin" class="import-btn" @click="emit('importZelebrationsplan')">
+                <i class="icon">upload</i> Zelebrationsplan importieren
+            </button>
         </template>
 
         <template v-else>
@@ -234,4 +238,30 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
         color: #333;
     }
 }
+
+.import-btn {
+    display: flex;
+    width: 100%;
+    margin: 16px 0;
+    padding: 12px;
+    font-size: 15px;
+    justify-content: center;
+    background: #f5f5f5;
+    border: 1px dashed #c4c4c4;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #555;
+    transition: 100ms;
+
+    i {
+        font-size: 22px;
+        margin-right: 6px;
+    }
+
+    &:hover {
+        background: #eaeaea;
+        border-color: #999;
+        color: #333;
+    }
+}
 </style>

public/src/views/PlanView.vue

@@ -347,6 +347,7 @@ async function importZelebrationsplan() {
                 @add-gottesdienst="createGottesdienst()"
                 @add-ministrant="createMinistrant()"
                 @edit-ministrant="(id) => createMinistrant(id)"
+                @import-zelebrationsplan="importZelebrationsplan()"
                 class="plan list"
                 v-if="viewMode === 'list'">