miriamgemeinde/src/content/admin/AdminMenuManagement.vue

<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('/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>