Fixed pic upload page relation

src/content/admin/ImageUpload.vue

@@ -1,134 +1,145 @@
 <template>
-    <div>
-      <h1>Bild hochladen</h1>
-      <form @submit.prevent="uploadImage">
-        <div>
-          <label for="title">Titel</label>
-          <input type="text" id="title" v-model="title" />
-        </div>
-        <div>
-          <label for="description">Beschreibung</label>
-          <textarea id="description" v-model="description"></textarea>
-        </div>
-        <div>
-          <label for="image">Bild</label>
-          <input type="file" id="image" @change="onFileChange" />
-        </div>
-        <div>
-          <label for="page">Seite</label>
-          <select id="page" v-model="selectedPage">
-            <option value="">Keine Seite</option>
-            <option v-for="page in pages" :key="page.id" :value="page.id">{{ page.title }}</option>
-          </select>
-        </div>
-        <button type="submit">Hochladen</button>
-      </form>
-  
-      <div v-if="images.length">
-        <h2>Hochgeladene Bilder</h2>
-        <div v-for="image in images" :key="image.id" class="uploaded-image">
-          <img :src="`/images/uploads/${image.filename}`" :alt="image.title" width="100" />
-          <input type="text" v-model="image.title" @change="updateImage(image)" />
-          <textarea v-model="image.description" @change="updateImage(image)"></textarea>
-          <p>{{ formatDate(image.uploadDate) }} {{ formatTimeFromDate(image.uploadDate) }}</p>
-        </div>
+  <div>
+    <h1>Bild hochladen</h1>
+    <form @submit.prevent="uploadImage">
+      <div>
+        <label for="title">Titel</label>
+        <input type="text" id="title" v-model="title" />
+      </div>
+      <div>
+        <label for="description">Beschreibung</label>
+        <textarea id="description" v-model="description"></textarea>
+      </div>
+      <div>
+        <label for="image">Bild</label>
+        <input type="file" id="image" @change="onFileChange" />
+      </div>
+      <div>
+        <label for="page">Seite</label>
+        <select id="page" v-model="selectedPage">
+          <option value="">Keine Seite</option>
+          <option v-for="page in pages" :key="page.value" :value="page.value">{{ page.caption }}</option>
+        </select>
+      </div>
+      <button type="submit">Hochladen</button>
+    </form>
+
+    <div v-if="images.length">
+      <h2>Hochgeladene Bilder</h2>
+      <div v-for="image in images" :key="image.id" class="uploaded-image">
+        <img :src="`/images/uploads/${image.filename}`" :alt="image.title" width="100" />
+        <input type="text" v-model="image.title" @change="updateImage(image)" />
+        <textarea v-model="image.description" @change="updateImage(image)"></textarea>
+        <p>{{ formatDate(image.uploadDate) }} {{ formatTimeFromDate(image.uploadDate) }}</p>
       </div>
     </div>
-  </template>
-  
-  <script>
-  import axios from '../../axios';
-  import { formatDate, formatTimeFromDate } from '@/utils/strings'
-  
-  export default {
-    name: 'ImageUpload',
-    data() {
-      return {
-        title: '',
-        description: '',
-        image: null,
-        selectedPage: '',
-        pages: [],
-        images: []
-      };
+  </div>
+</template>
+
+<script>
+import axios from '../../axios';
+import { formatDate, formatTimeFromDate } from '@/utils/strings'
+
+export default {
+  name: 'ImageUpload',
+  data() {
+    return {
+      title: '',
+      description: '',
+      image: null,
+      selectedPage: '',
+      pages: [],
+      images: []
+    };
+  },
+  methods: {
+    formatDate,
+    formatTimeFromDate,
+    onFileChange(e) {
+      this.image = e.target.files[0];
     },
-    methods: {
-      formatDate,
-      formatTimeFromDate,
-      onFileChange(e) {
-        this.image = e.target.files[0];
-      },
-      async uploadImage() {
-        const formData = new FormData();
-        formData.append('title', this.title);
-        formData.append('description', this.description);
-        formData.append('image', this.image);
-        formData.append('pageId', this.selectedPage);
-  
-        try {
-          await axios.post('/image/', formData);
-          this.fetchImages();
-          this.resetForm();
-        } catch (error) {
-          console.error('Fehler beim Hochladen des Bildes:', error);
-        }
-      },
-      async fetchImages() {
-        try {
-          const response = await axios.get('/image');
-          this.images = response.data;
-        } catch (error) {
-          console.error('Fehler beim Abrufen der Bilder:', error);
-        }
-      },
-      async fetchPages() {
-        try {
-          const response = await axios.get('/image/pages');
-          this.pages = response.data;
-        } catch (error) {
-          console.error('Fehler beim Abrufen der Seiten:', error);
-        }
-      },
-      async updateImage(image) {
-        try {
-          await axios.put(`/image/${image.id}`, {
-            title: image.title,
-            description: image.description
-          });
-          this.fetchImages();
-        } catch (error) {
-          console.error('Fehler beim Aktualisieren des Bildes:', error);
-        }
-      },
-      resetForm() {
-        this.title = '';
-        this.description = '';
-        this.image = null;
-        this.selectedPage = '';
-        document.getElementById('image').value = null;
+    async uploadImage() {
+      const formData = new FormData();
+      formData.append('title', this.title);
+      formData.append('description', this.description);
+      formData.append('image', this.image);
+      formData.append('page', this.selectedPage);
+
+      try {
+        await axios.post('/image/', formData);
+        this.fetchImages();
+        this.resetForm();
+      } catch (error) {
+        console.error('Fehler beim Hochladen des Bildes:', error);
       }
     },
-    mounted() {
-      this.fetchImages();
-      this.fetchPages();
+    async fetchImages() {
+      try {
+        const response = await axios.get('/image');
+        this.images = response.data;
+      } catch (error) {
+        console.error('Fehler beim Abrufen der Bilder:', error);
+      }
+    },
+    async fetchPages() {
+      try {
+        const response = await axios.get('/menu-data');
+        const buildRecursive = function (data, prefix = '') {
+          return data.flatMap(item => {
+            let children = [];
+            if (item.submenu && item.submenu.length) {
+              children = buildRecursive(item.submenu, prefix + item.name + " -> ");
+            }
+            return [{ value: item.link, caption: prefix + item.name }, ...children];
+          });
+        };
+
+        this.pages = buildRecursive(response.data);
+      } catch (error) {
+        console.error('Fehler beim Abrufen der Seiten:', error);
+      }
+    },
+    async updateImage(image) {
+      try {
+        await axios.put(`/image/${image.id}`, {
+          title: image.title,
+          description: image.description
+        });
+        this.fetchImages();
+      } catch (error) {
+        console.error('Fehler beim Aktualisieren des Bildes:', error);
+      }
+    },
+    resetForm() {
+      this.title = '';
+      this.description = '';
+      this.image = null;
+      this.selectedPage = '';
+      document.getElementById('image').value = null;
     }
-  };
-  </script>
-  
-  <style scoped>
-  form div {
-    margin-bottom: 10px;
+  },
+  mounted() {
+    this.fetchImages();
+    this.fetchPages();
   }
-  .uploaded-image {
-    display: inline-block;
-    margin: 0 0 0.5em 0.5em;
-    border: 1px solid #e0e0e0;
-    padding: 10px;
-  }
-  .uploaded-image input,
-  .uploaded-image textarea {
-    width: 100%;
-    margin: 5px 0;
-  }
-  </style>
-  
+};
+</script>
+
+<style scoped>
+form div {
+  margin-bottom: 10px;
+}
+
+.uploaded-image {
+  display: inline-block;
+  margin: 0 0 0.5em 0.5em;
+  border: 1px solid #e0e0e0;
+  padding: 10px;
+}
+
+.uploaded-image input,
+.uploaded-image textarea {
+  width: 100%;
+  margin: 5px 0;
+}
+</style>