extended editor

controllers/fileController.js

@@ -0,0 +1,144 @@
+const fs = require('fs');
+const path = require('path');
+const { File, Page } = require('../models');
+const { v4: uuidv4 } = require('uuid');
+
+const uploadDir = path.join(__dirname, '..', 'files', 'uploads');
+
+const uploadFile = (req, res, next) => {
+  if (!req.file) {
+    return res.status(400).send('No file uploaded.');
+  }
+  if (!fs.existsSync(uploadDir)) {
+    fs.mkdirSync(uploadDir, { recursive: true });
+  }
+  const file = req.file;
+  const hash = uuidv4();
+  const filePath = path.join(uploadDir, hash + path.extname(file.originalname));
+  try {
+    fs.writeFileSync(filePath, file.buffer);
+    req.fileData = {
+      hash: hash,
+      title: req.body.title || file.originalname,
+      originalName: file.originalname,
+      path: filePath
+    };
+    next();
+  } catch (error) {
+    return res.status(500).send('File upload failed.');
+  }
+};
+
+const saveFileDetails = async (req, res) => {
+  try {
+    const { hash, title, originalName, path } = req.fileData;
+    const newFile = await File.create({
+      hash,
+      title,
+      originalName,
+      path
+    });
+    res.status(201).json(newFile);
+  } catch (error) {
+    console.log(error);
+    res.status(500).json({ error: 'Failed to save file details.' });
+  }
+};
+
+const getFiles = async (req, res) => {
+  try {
+    const files = await File.findAll();
+    res.status(200).json(files);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch files.' });
+  }
+};
+
+const getFilesByPage = async (req, res) => {
+  try {
+    const { pageId } = req.params;
+    const page = await Page.findByPk(pageId, {
+      include: [File]
+    });
+    if (!page) {
+      return res.status(404).json({ error: 'Page not found.' });
+    }
+    res.status(200).json(page.Files);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch files for the page.' });
+  }
+};
+
+const getFileById = async (req, res) => {
+  try {
+    const { id } = req.params;
+    const file = await File.findByPk(id);
+    if (!file) {
+      return res.status(404).json({ error: 'File not found.' });
+    }
+    res.status(200).json(file);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch file.' });
+  }
+};
+
+const getFileByHash = async (req, res) => {
+  try {
+    const { hash } = req.params;
+    const file = await File.findOne({ where: { hash } });
+    if (!file) {
+      return res.status(404).json({ error: 'File not found.' });
+    }
+    res.status(200).json(file);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch file.' });
+  }
+};
+
+const downloadFile = async (req, res) => {
+  try {
+    const { hash } = req.params;
+    const file = await File.findOne({ where: { hash } });
+    if (!file) {
+      return res.status(404).json({ error: 'File not found.' });
+    }
+    const filePath = path.join(__dirname, '..', 'files', 'uploads', hash + path.extname(file.originalName));
+    res.download(filePath, file.originalName, (err) => {
+      if (err) {
+        res.status(500).send({
+          message: "Could not download the file. " + err,
+        });
+      }
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).json({ error: 'Failed to download file.' });
+  }
+};
+
+const updateFile = async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { title } = req.body;
+    const file = await File.findByPk(id);
+    if (!file) {
+      return res.status(404).json({ error: 'File not found.' });
+    }
+    file.title = title || file.title;
+    await file.save();
+    res.status(200).json(file);
+  } catch (error) {
+    res.status500.json({ error: 'Failed to update file.' });
+  }
+};
+
+module.exports = {
+  uploadFile,
+  saveFileDetails,
+  getFiles,
+  getFilesByPage,
+  getFileById,
+  getFileByHash,
+  downloadFile,
+  updateFile,
+};

migrations/20240621071724-create-files-table.js

@@ -0,0 +1,39 @@
+'use strict';
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.createTable('files', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      hash: {
+        type: Sequelize.STRING,
+        unique: true,
+        allowNull: false
+      },
+      title: {
+        type: Sequelize.STRING,
+        allowNull: false
+      },
+      originalName: {
+        type: Sequelize.STRING,
+        allowNull: false
+      },
+      createdAt: {
+        allowNull: false,
+        type: Sequelize.DATE
+      },
+      updatedAt: {
+        allowNull: false,
+        type: Sequelize.DATE
+      }
+    });
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.dropTable('files');
+  }
+};

migrations/20240621071827-create-page-files-table.js

@@ -0,0 +1,38 @@
+'use strict';
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.createTable('page_files', {
+      pageId: {
+        type: Sequelize.INTEGER,
+        references: {
+          model: 'pages',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'CASCADE'
+      },
+      fileId: {
+        type: Sequelize.INTEGER,
+        references: {
+          model: 'files',
+          key: 'id'
+        },
+        onUpdate: 'CASCADE',
+        onDelete: 'CASCADE'
+      },
+      createdAt: {
+        allowNull: false,
+        type: Sequelize.DATE
+      },
+      updatedAt: {
+        allowNull: false,
+        type: Sequelize.DATE
+      }
+    });
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.dropTable('page_files');
+  }
+};

migrations/20240621073053-alter-files-table.js

@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.addColumn('Files', 'originalName', {
+      type: Sequelize.STRING,
+      allowNull: false,
+      after: 'title' // optional: to place the column after 'title'
+    });
+  },
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.removeColumn('Files', 'originalName');
+  }
+};

models/File.js

@@ -0,0 +1,28 @@
+const { DataTypes } = require('sequelize');
+
+module.exports = (sequelize) => {
+  const File = sequelize.define('File', {
+    hash: {
+      type: DataTypes.STRING,
+      allowNull: false,
+      unique: true
+    },
+    title: {
+      type: DataTypes.STRING,
+      allowNull: false
+    },
+    originalName: {
+      type: DataTypes.STRING,
+      allowNull: false
+    }
+  }, {
+    tableName: 'files',
+    timestamps: true
+  });
+
+  File.associate = (models) => {
+    File.belongsToMany(models.Page, { through: 'PageFiles' });
+  };
+
+  return File;
+};

models/Page.js

@@ -21,5 +21,9 @@ module.exports = (sequelize) => {
     timestamps: true
   });
 
+  Page.associate = (models) => {
+    Page.belongsToMany(models.File, { through: 'page_files', foreignKey: 'pageId' });
+  };
+
   return Page;
 };

package-lock.json

@@ -34,6 +34,7 @@
         "date-fns": "^3.6.0",
         "dotenv": "^16.4.5",
         "express": "^4.19.2",
+        "file-saver": "^2.0.5",
         "jsonwebtoken": "^9.0.2",
         "moment": "^2.30.1",
         "multer": "^1.4.5-lts.1",
@@ -7379,6 +7380,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",

package.json

@@ -34,6 +34,7 @@
     "date-fns": "^3.6.0",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
+    "file-saver": "^2.0.5",
     "jsonwebtoken": "^9.0.2",
     "moment": "^2.30.1",
     "multer": "^1.4.5-lts.1",

routes/files.js

@@ -0,0 +1,17 @@
+const express = require('express');
+const router = express.Router();
+const multer = require('multer');
+const upload = multer({ storage: multer.memoryStorage() });
+
+const { uploadFile, saveFileDetails, getFiles, getFilesByPage, getFileById, getFileByHash, downloadFile, updateFile } = require('../controllers/fileController');
+const authMiddleware = require('../middleware/authMiddleware');
+
+router.post('/', authMiddleware, upload.single('file'), uploadFile, saveFileDetails);
+router.get('/', authMiddleware, getFiles);
+router.get('/page/:pageId', getFilesByPage);
+router.get('/:id', getFileById);
+router.get('/hash/:hash', getFileByHash);
+router.get('/download/:hash', downloadFile); 
+router.put('/:id', authMiddleware, updateFile);
+
+module.exports = router;

server.js

@@ -2,18 +2,19 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const cors = require('cors');
 const sequelize = require('./config/database');
-const authRoutes = require('./routes/auth');
+const authRouter = require('./routes/auth');
 const eventTypesRouter = require('./routes/eventtypes');
 const eventPlacesRouter = require('./routes/eventPlaces');
 const contactPersonsRouter = require('./routes/contactPerson');
 const positionsRouter = require('./routes/positions');
-const institutionRoutes = require('./routes/institutions');
+const institutionRouter = require('./routes/institutions');
 const eventRouter = require('./routes/event');
 const menuDataRouter = require('./routes/menuData');
 const worshipRouter = require('./routes/worships');
-const pageRoutes = require('./routes/pages');
-const userRoutes = require('./routes/users');
-const imageRoutes = require('./routes/image');
+const pageRouter = require('./routes/pages');
+const userRouter = require('./routes/users');
+const imageRouter = require('./routes/image');
+const filesRouter = require('./routes/files');
 
 const app = express();
 const PORT = 3000;
@@ -21,18 +22,19 @@ const PORT = 3000;
 app.use(cors());
 app.use(bodyParser.json());
 
-app.use('/api/auth', authRoutes);
+app.use('/api/auth', authRouter);
 app.use('/api/event-types', eventTypesRouter);
 app.use('/api/event-places', eventPlacesRouter);
 app.use('/api/contact-persons', contactPersonsRouter);
 app.use('/api/positions', positionsRouter);
-app.use('/api/institutions', institutionRoutes);
+app.use('/api/institutions', institutionRouter);
 app.use('/api/events', eventRouter);
 app.use('/api/menu-data', menuDataRouter);
 app.use('/api/worships', worshipRouter);
-app.use('/api/page-content', pageRoutes);
-app.use('/api/users', userRoutes);
-app.use('/api/image', imageRoutes);
+app.use('/api/page-content', pageRouter);
+app.use('/api/users', userRouter);
+app.use('/api/image', imageRouter);
+app.use('/api/files', filesRouter);
 sequelize.sync().then(() => {
   app.listen(PORT, () => {
     console.log(`Server läuft auf Port ${PORT}`);

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>
+  

src/components/ComponentsLink.vue

@@ -0,0 +1,43 @@
+<template>
+    <span @click="downloadFile">{{ title }}</span>
+  </template>
+  
+  <script>
+  export default {
+    name: 'DownloadLink',
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      hash: {
+        type: String,
+        required: true,
+      },
+      extension: {
+        type: String,
+        required: true,
+      },
+    },
+    methods: {
+      downloadFile() {
+        const filePath = `${__dirname}/files/uploads/${this.hash}${this.extension}`;
+        const link = document.createElement('a');
+        link.href = filePath;
+        link.download = this.title + this.extension;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  span {
+    cursor: pointer;
+    color: blue;
+    text-decoration: underline;
+  }
+  </style>
+  

src/components/DownloadLink.vue

@@ -0,0 +1,47 @@
+<template>
+    <span @click="downloadFile">{{ title }}</span>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+    name: 'DownloadLink',
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        hash: {
+            type: String,
+            required: true,
+        },
+        extension: {
+            type: String,
+            required: true,
+        },
+    },
+    methods: {
+        async downloadFile() {
+            const response = await axios.get(`/files/download/${this.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 = `${this.title}${this.extension}`;
+            link.click();
+            window.URL.revokeObjectURL(link.href);
+
+        },
+    },
+};
+</script>
+
+<style scoped>
+span {
+    cursor: pointer;
+    color: blue;
+    text-decoration: underline;
+}
+</style>

src/components/RenderContentComponent.vue

@@ -7,6 +7,7 @@ import { createApp, h, ref, watch } from 'vue';
 import WorshipRender from './WorshipRender.vue';
 import ImageRender from './ImageRender.vue';
 import EventRender from './EventRender.vue';
+import DownloadLink from './DownloadLink.vue';
 
 export default {
   name: 'RenderContentComponent',
@@ -21,8 +22,9 @@ export default {
 
     const renderContent = (content) => {
       let result = renderWorship(content);
-      result = renderImage(result); // Use result here
-      result = renderEvent(result); // Use result here
+      result = renderImage(result);
+      result = renderEvent(result);
+      result = renderDownload(result);
       return result;
     };
 
@@ -58,7 +60,6 @@ export default {
           if (placeholder) {
             const app = createApp({
               render() {
-                console.log(config);
                 return h(ImageRender, { id: config });
               },
             });
@@ -74,9 +75,7 @@ export default {
       const eventsPattern = /{{ events:(.*?) }}/g;
       let result = content;
       result = result.replace(eventsPattern, (match, config) => {
-        console.log(config);
         const props = parseConfig(config);
-        console.log(props);
         const placeholderId = `event-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
         setTimeout(() => {
           const placeholder = document.getElementById(placeholderId);
@@ -94,6 +93,27 @@ export default {
       return result;
     };
 
+    const renderDownload = (content) => {
+      const downloadPattern = /{{ download title="(.*?)" hash="(.*?)" extension="(.*?)" }}/g;
+      let result = content;
+      result = result.replace(downloadPattern, (match, title, hash, extension) => {
+        const placeholderId = `download-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
+        setTimeout(() => {
+          const placeholder = document.getElementById(placeholderId);
+          if (placeholder) {
+            const app = createApp({
+              render() {
+                return h(DownloadLink, { title, hash, extension });
+              },
+            });
+            app.mount(placeholder);
+          }
+        }, 0);
+        return `<div id="${placeholderId}"></div>`;
+      });
+      return result;
+    };
+
     const parseConfig = (configString) => {
       const config = {};
       const configArray = configString.split(',');

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>

src/icons.js

@@ -1,6 +1,6 @@
 // src/icons.js
 import { Bold, Italic, Underline, Strikethrough, List, NumberedListLeft, Table, Table2Columns, ArrowRight, ArrowDown, TableRows,
-    AlignTopBox, AlignLeftBox, StatsReport, OpenInWindow
+    AlignTopBox, AlignLeftBox, StatsReport, OpenInWindow, Download
  } from '@iconoir/vue';
 
 export {
@@ -19,4 +19,5 @@ export {
     AlignLeftBox as AlignLeftBoxIcon,
     StatsReport as StatsReportIcon,
     OpenInWindow as OpenInWindowIcon,
+    Download as DownloadIcon,
 };