extended editor

src/components/AddDownloadDialog.vue

@@ -0,0 +1,98 @@
+<template>
+    <div v-if="showDialog" class="modal">
+      <div class="modal-content">
+        <span class="close" @click="closeDialog">&times;</span>
+        <h2>Datei zum Download hinzufügen</h2>
+        <table>
+          <tr>
+            <td>
+              <label for="file-select">Datei auswählen:</label>
+            </td>
+            <td>
+              <select id="file-select" v-model="selectedFile">
+                <option v-for="file in files" :key="file.id" :value="file">
+                  {{ file.title }} ({{ file.originalName }})
+                </option>
+              </select>
+            </td>
+          </tr>
+        </table>
+        <button @click="confirm">Hinzufügen</button>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import axios from '@/axios';
+  
+  export default {
+    name: 'AddDownloadDialog',
+    data() {
+      return {
+        showDialog: false,
+        selectedFile: null,
+        files: [],
+      };
+    },
+    methods: {
+      async openAddDownloadDialog() {
+        this.showDialog = true;
+        try {
+          const response = await axios.get('/files');
+          this.files = response.data;
+        } catch (error) {
+          console.error('Fehler beim Abrufen der Dateien:', error);
+        }
+      },
+      closeDialog() {
+        this.showDialog = false;
+        this.selectedFile = null;
+      },
+      confirm() {
+        if (this.selectedFile) {
+          this.$emit('confirm', this.selectedFile.hash);
+          this.closeDialog();
+        } else {
+          alert('Bitte wählen Sie eine Datei aus.');
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .modal {
+    display: flex;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+  
+  .modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+  }
+  
+  .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  </style>
+