inital commit

src/content/admin/AdminMenuManagement.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="admin-menu-management">
+      <h2>Menüverwaltung</h2>
+      <div>
+        <h3>Neuen Menüpunkt hinzufügen</h3>
+        <form @submit.prevent="addMenuItem">
+          <label for="name">Name:</label>
+          <input type="text" v-model="newItem.name" required />
+  
+          <label for="link">Link:</label>
+          <input type="text" v-model="newItem.link" required />
+  
+          <label for="component">Component:</label>
+          <input type="text" v-model="newItem.component" required />
+  
+          <label for="showInMenu">Im Menü anzeigen:</label>
+          <input type="checkbox" v-model="newItem.showInMenu" />
+  
+          <label for="requiresAuth">Authentifizierung erforderlich:</label>
+          <input type="checkbox" v-model="newItem.requiresAuth" />
+  
+          <label for="image">Bild:</label>
+          <input type="text" v-model="newItem.image" />
+  
+          <label for="parentId">Eltern-Menüpunkt:</label>
+          <select v-model="newItem.parentId">
+            <option :value="null">Kein Eltern-Menüpunkt</option>
+            <option v-for="item in menuItems" :key="item.id" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+  
+          <button type="submit">Hinzufügen</button>
+        </form>
+      </div>
+  
+      <div>
+        <h3>Menüpunkte bearbeiten</h3>
+        <ul>
+          <li v-for="item in menuItems" :key="item.id">
+            {{ item.name }}
+            <button @click="editMenuItem(item)">Bearbeiten</button>
+            <button @click="deleteMenuItem(item.id)">Löschen</button>
+          </li>
+        </ul>
+      </div>
+  
+      <div v-if="editingItem">
+        <h3>Menüpunkt bearbeiten</h3>
+        <form @submit.prevent="updateMenuItem">
+          <label for="editName">Name:</label>
+          <input type="text" v-model="editingItem.name" required />
+  
+          <label for="editLink">Link:</label>
+          <input type="text" v-model="editingItem.link" required />
+  
+          <label for="editComponent">Component:</label>
+          <input type="text" v-model="editingItem.component" required />
+  
+          <label for="editShowInMenu">Im Menü anzeigen:</label>
+          <input type="checkbox" v-model="editingItem.showInMenu" />
+  
+          <label for="editRequiresAuth">Authentifizierung erforderlich:</label>
+          <input type="checkbox" v-model="editingItem.requiresAuth" />
+  
+          <label for="editImage">Bild:</label>
+          <input type="text" v-model="editingItem.image" />
+  
+          <label for="editParentId">Eltern-Menüpunkt:</label>
+          <select v-model="editingItem.parentId">
+            <option :value="null">Kein Eltern-Menüpunkt</option>
+            <option v-for="item in menuItems" :key="item.id" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+  
+          <button type="submit">Aktualisieren</button>
+          <button @click="cancelEdit">Abbrechen</button>
+        </form>
+      </div>
+    </div>
+  </template>
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'AdminMenuManagement',
+  data() {
+    return {
+      newItem: {
+        name: '',
+        link: '',
+        component: '',
+        showInMenu: false,
+        requiresAuth: false,
+        image: '',
+        parentId: null
+      },
+      editingItem: null
+    };
+  },
+  computed: {
+    ...mapState(['menuData']),
+    menuItems() {
+      return this.menuData;
+    }
+  },
+  methods: {
+    ...mapActions(['loadMenuData']),
+    async addMenuItem() {
+      this.menuData.push(this.newItem);
+      await this.saveMenuData();
+      this.resetNewItem();
+    },
+    editMenuItem(item) {
+      this.editingItem = { ...item };
+    },
+    async updateMenuItem() {
+      const index = this.menuData.findIndex(item => item.id === this.editingItem.id);
+      if (index !== -1) {
+        this.menuData.splice(index, 1, this.editingItem);
+        await this.saveMenuData();
+        this.cancelEdit();
+      }
+    },
+    async deleteMenuItem(id) {
+      this.menuData = this.menuData.filter(item => item.id !== id);
+      await this.saveMenuData();
+    },
+    cancelEdit() {
+      this.editingItem = null;
+    },
+    resetNewItem() {
+      this.newItem = {
+        name: '',
+        link: '',
+        component: '',
+        showInMenu: false,
+        requiresAuth: false,
+        image: '',
+        parentId: null
+      };
+    },
+    async saveMenuData() {
+      try {
+        await fetch('http://localhost:3000/api/menu-data', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(this.menuData)
+        });
+        await this.loadMenuData();
+      } catch (error) {
+        console.error('Fehler beim Speichern der Menü-Daten:', error);
+      }
+    }
+  },
+  created() {
+    this.loadMenuData();
+  }
+};
+</script>
+<style scoped>
+.admin-menu-management {
+  padding: 20px;
+}
+
+form {
+  margin-bottom: 20px;
+}
+
+form label {
+  display: block;
+  margin-top: 10px;
+}
+
+form input,
+form select {
+  width: 100%;
+  padding: 5px;
+  margin-top: 5px;
+}
+
+button {
+  margin-top: 10px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  margin: 10px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+li button {
+  margin-left: 10px;
+}
+</style>
+