extended editor

src/content/admin/EditPagesComponent.vue

@@ -8,28 +8,28 @@
       </select>
     </div>
     <div class="toolbar">
-      <button @click="editor.value.chain().focus().toggleHeading({ level: 1 }).run()">H1</button>
-      <button @click="editor.value.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
-      <button @click="editor.value.chain().focus().toggleHeading({ level: 3 }).run()">H3</button>
-      <button @click="editor.value.chain().focus().toggleBold().run()" width="24" height="24">
+      <button @click="toggleHeading(1)">H1</button>
+      <button @click="toggleHeading(2)">H2</button>
+      <button @click="toggleHeading(3)">H3</button>
+      <button @click="toggleBold()" width="24" height="24">
         <BoldIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleItalic().run()">
+      <button @click="toggleItalic()">
         <ItalicIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleUnderline().run()">
+      <button @click="toggleUnderline()">
         <UnderlineIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleStrike().run()">
+      <button @click="toggleStrike()">
         <StrikethroughIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
+      <button @click="insertTable()">
         <TableIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleBulletList().run()">
+      <button @click="toggleBulletList()">
         <ListIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleOrderedList().run()">
+      <button @click="toggleOrderedList()">
         <NumberedListLeftIcon width="24" height="24" />
       </button>
       <button @click="openAddImageDialog">
@@ -38,36 +38,39 @@
       <button @click="openAddLinkDialog">
         <OpenInWindowIcon width="24" height="24" />
       </button>
+      <button @click="openAddDownloadDialog">
+        <DownloadIcon width="24" height="24" />
+      </button>
       <button @click="openColorPicker">Schriftfarbe</button>
       <input type="color" ref="colorPicker" @input="setColor" style="display: none;" />
     </div>
     <div class="table-toolbar">
-      <button @click="editor.value.chain().focus().addColumnBefore().run()">
+      <button @click="addColumnBefore()">
         <ArrowDownIcon width="10" height="10" class="align-top" />
         <Table2ColumnsIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().addColumnAfter().run()">
+      <button @click="addColumnAfter()">
         <Table2ColumnsIcon width="24" height="24" />
         <ArrowDownIcon width="10" height="10" class="align-top" />
       </button>
-      <button @click="editor.value.chain().focus().addRowBefore().run()">
+      <button @click="addRowBefore()">
         <ArrowRightIcon width="10" height="10" class="align-top" />
         <TableRowsIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().addRowAfter().run()">
+      <button @click="addRowAfter()">
         <ArrowRightIcon width="10" height="10" />
         <TableRowsIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().deleteColumn().run()">
+      <button @click="deleteColumn()">
         <Table2ColumnsIcon width="24" height="24" class="delete-icon" />
       </button>
-      <button @click="editor.value.chain().focus().deleteRow().run()">
+      <button @click="deleteRow()">
         <TableRowsIcon width="24" height="24" class="delete-icon" />
       </button>
-      <button @click="editor.value.chain().focus().toggleHeaderColumn().run()">
+      <button @click="toggleHeaderColumn()">
         <AlignTopBoxIcon width="24" height="24" />
       </button>
-      <button @click="editor.value.chain().focus().toggleHeaderRow().run()">
+      <button @click="toggleHeaderRow()">
         <AlignLeftBoxIcon width="24" height="24" />
       </button>
     </div>
@@ -86,6 +89,7 @@
     <AddImageDialog ref="addImageDialog" @confirm="insertImage" />
     <AddEventDialog ref="addEventDialog" @confirm="insertEvent" />
     <AddLinkDialog ref="addLinkDialog" @confirm="insertLink" />
+    <AddDownloadDialog ref="addDownloadDialog" @confirm="insertDownload" />
     <input type="color" ref="colorPicker" @input="setColor" style="display: none;" />
   </div>
 </template>
@@ -113,9 +117,11 @@ import WorshipDialog from '@/components/WorshipDialog.vue';
 import AddImageDialog from '@/components/AddImageDialog.vue';
 import AddEventDialog from '@/components/AddEventDialog.vue';
 import AddLinkDialog from '@/components/AddLinkDialog.vue';
+import AddDownloadDialog from '@/components/AddDownloadDialog.vue';
 
 import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListIcon, NumberedListLeftIcon, TableIcon,
-  Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon
+  Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon,
+  OpenInWindowIcon, DownloadIcon
  } from '@/icons';
 
 export default {
@@ -140,6 +146,9 @@ export default {
     StatsReportIcon,
     AddEventDialog,
     AddLinkDialog,
+    AddDownloadDialog,
+    OpenInWindowIcon,
+    DownloadIcon,
   },
   setup() {
     const store = useStore();
@@ -150,6 +159,7 @@ export default {
     const addImageDialog = ref(null);
     const addEventDialog = ref(null);
     const addLinkDialog = ref(null);
+    const addDownloadDialog = ref(null);
     const colorPicker = ref(null);
 
     const editor = useEditor({
@@ -297,6 +307,17 @@ export default {
       }
     };
 
+    const openAddDownloadDialog = () => {
+      addDownloadDialog.value.openAddDownloadDialog();
+    };
+
+    const insertDownload = ({ title, hash, extension }) => {
+      if (title && hash && extension && editor.value) {
+        const url = `/files/download/${hash}`;
+        editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).insertContent(title).run();
+      }
+    };
+
     const openColorPicker = () => {
       colorPicker.value.click();
     };
@@ -308,6 +329,38 @@ export default {
       }
     };
 
+    const toggleHeading = (level) => {
+      editor.value.chain().focus().toggleHeading({level: level}).run();
+    };
+
+    const toggleItalic = () => {
+      editor.value.chain().focus().toggleItalic().run();
+    };
+
+    const toggleBold = () => {
+      editor.value.chain().focus().toggleBold().run();
+    };
+
+    const toggleUnderline = () => {
+      editor.value.chain().focus().toggleUnderline().run();
+    };
+
+    const toggleStrike = () => {
+      editor.value.chain().focus().toggleStrike().run();
+    };
+
+    const insertTable = () => {
+      editor.value.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+    };
+
+    const toggleBulletList = () => {
+      editor.value.chain().focus().toggleBulletList().run();
+    };
+
+    const toggleOrderedList = () => {
+      editor.value.chain().focus().toggleOrderedList().run();
+    };
+
     return {
       pages,
       sortedPages,
@@ -328,9 +381,20 @@ export default {
       addLinkDialog,
       openAddLinkDialog,
       insertLink,
+      addDownloadDialog,
+      openAddDownloadDialog,
+      insertDownload,
       colorPicker,
       openColorPicker,
       setColor,
+      toggleHeading,
+      toggleBold,
+      toggleItalic,
+      toggleUnderline,
+      toggleStrike,
+      insertTable,
+      toggleBulletList,
+      toggleOrderedList,
     };
   },
 };

src/content/admin/UploadFileManagement.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="upload-files">
+        <h2>Dateien hochladen</h2>
+        <div>
+            <label for="file-upload">Datei auswählen:</label>
+            <input id="file-upload" type="file" @change="handleFileUpload" />
+        </div>
+        <div>
+            <label for="file-title">Titel eingeben:</label>
+            <input id="file-title" type="text" v-model="fileTitle" />
+        </div>
+        <button @click="uploadFiles">Hochladen</button>
+        <ul class="file-list">
+            <li v-for="file in uploadedFiles" :key="file.id">
+                <div class="file-info">
+                    <span class="file-title" @click="downloadFile(file)">{{ file.title }}</span>
+                    <span class="file-name" @click="downloadFile(file)">{{ file.originalName }}</span>
+                    <span class="file-date">{{ formatDate(file.createdAt) }}</span>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import axios from '../../axios';
+
+export default {
+    name: 'UploadFilesComponent',
+    setup() {
+        const fileToUpload = ref(null);
+        const fileTitle = ref('');
+        const uploadedFiles = ref([]);
+
+        const handleFileUpload = (event) => {
+            fileToUpload.value = event.target.files[0];
+        };
+
+        const uploadFiles = async () => {
+            if (!fileToUpload.value || !fileTitle.value) {
+                alert('Bitte wählen Sie eine Datei aus und geben Sie einen Titel ein.');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('file', fileToUpload.value);
+            formData.append('title', fileTitle.value);
+
+            try {
+                const response = await axios.post('/files', formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                });
+
+                const uploadedData = response.data;
+                uploadedFiles.value.push({
+                    id: uploadedData.id,
+                    title: uploadedData.title,
+                    originalName: uploadedData.originalName,
+                    createdAt: uploadedData.createdAt,
+                    hash: uploadedData.hash,
+                });
+
+                fileToUpload.value = null;
+                fileTitle.value = '';
+            } catch (error) {
+                console.error('Fehler beim Hochladen der Datei:', error);
+            }
+        };
+
+        const downloadFile = async (file) => {
+            const fileExtension = file.originalName.substring(file.originalName.lastIndexOf('.'));
+            const response = await axios.get(`/files/download/${file.hash}`, {
+                responseType: 'blob'
+            });
+            const blob = new Blob([response.data], { type: response.data.type });
+            const link = document.createElement('a');
+            link.href = window.URL.createObjectURL(blob);
+            link.download = `${file.title}${fileExtension}`;
+            link.click();
+            window.URL.revokeObjectURL(link.href);
+        };
+
+        const formatDate = (dateString) => {
+            const options = { year: 'numeric', month: 'long', day: 'numeric' };
+            return new Date(dateString).toLocaleDateString(undefined, options);
+        };
+
+        const fetchUploadedFiles = async () => {
+            try {
+                const response = await axios.get('/files');
+                uploadedFiles.value = response.data;
+            } catch (error) {
+                console.error('Fehler beim Abrufen der Dateien:', error);
+            }
+        };
+
+        onMounted(fetchUploadedFiles);
+
+        return {
+            fileToUpload,
+            fileTitle,
+            uploadedFiles,
+            handleFileUpload,
+            uploadFiles,
+            downloadFile,
+            formatDate,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.upload-files {
+    width: 100%;
+    margin: auto;
+}
+
+.upload-files div {
+    margin-bottom: 10px;
+}
+
+.file-list {
+    list-style-type: none;
+    padding: 0;
+    margin-top: 20px;
+}
+
+.file-list li {
+    border-bottom: 1px solid #ddd;
+    padding: 10px 0;
+}
+
+.file-info {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+}
+
+.file-title {
+    font-weight: bold;
+}
+
+.file-name {
+    color: #555;
+}
+
+.file-date {
+    color: #888;
+}
+</style>