Merge remaining frontend into dashboard

2024-10-04 21:37:17 +02:00
parent 9d7f12952d
commit 9f06b91399
528 changed files with 116 additions and 2658 deletions
--- a/dashboard/src/components/FileViewer.vue
+++ b/dashboard/src/components/FileViewer.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="viewer">
+    <TextViewer ref="textEditor"
+      v-show="active === 'textEditor'"
+      :save-handler="saveHandler"
+      @close="onClose"
+      :tr="$t"
+    />
+    <ImageViewer ref="imageViewer" v-show="active === 'imageViewer'" @close="onClose" :navigation-handler="imageViewerNavigationHandler"/>
+  </div>
+</template>
+
+<script>
+
+import { TextViewer, ImageViewer } from 'pankow-viewers';
+import { createDirectoryModel } from '../models/DirectoryModel.js';
+import { sanitize } from 'pankow/utils';
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+
+export default {
+  name: 'FileViewer',
+  components: {
+    ImageViewer,
+    TextViewer
+  },
+  data() {
+    return {
+      resourceId: '',
+      resourceType: '',
+      item: null,
+      active: ''
+    };
+  },
+  methods: {
+    onClose() {
+      location.replace('#/home' + location.hash.slice('#/viewer'.length, location.hash.lastIndexOf('/')+1));
+    },
+    imageViewerNavigationHandler() {
+      // nothing to do
+    },
+    async saveHandler(item, content) {
+      await this.directoryModel.save(this.filePath, content);
+    }
+  },
+  async mounted() {
+    this.resourceId = this.$route.params.resourceId;
+    this.resourceType = this.$route.params.type;
+
+    this.filePath = this.$route.params.filePath.join('/');
+    const fileName = this.$route.params.filePath[this.$route.params.filePath.length-1];
+    const parentDirectoryPath = sanitize(this.filePath.split('/').slice(0, -1).join('/'));
+
+    this.directoryModel = createDirectoryModel(API_ORIGIN, localStorage.token, (this.resourceType === 'volume' ? 'volumes/' : 'apps/') + this.resourceId);
+    const files = await this.directoryModel.listFiles(parentDirectoryPath);
+
+    this.item = files.find(i => i.fileName === fileName);
+
+    if (!this.item) {
+      console.log('File not found', this.filePath);
+      return;
+    }
+
+    if (this.$refs.imageViewer.canHandle(this.item)) {
+      // collect other files in directory for prev/next action
+      const otherSupportedEntries = files.filter((item) => this.$refs.imageViewer.canHandle(item)).map((item) => {
+        item.resourcePath = `/viewer/${this.resourceType}/${this.resourceId}${item.folderPath}/${item.fileName}`;
+        item.fullFileUrl = this.directoryModel.getFileUrl(`${item.folderPath}/${item.fileName}`);
+        return item;
+      });
+
+      this.$refs.imageViewer.open(this.item, otherSupportedEntries);
+      this.active = 'imageViewer';
+    } else if (this.$refs.textEditor.canHandle(this.item)) {
+      const content = await this.directoryModel.getFile(this.filePath);
+      this.$refs.textEditor.open(this.item, content);
+      this.active = 'textEditor';
+    } else {
+      console.warn(`no editor or viewer found for ${this.item.mimeType}`, this.item);
+      this.active = '';
+      window.location.replace(this.directoryModel.getFileUrl(this.filePath));
+    }
+  }
+};
+
+</script>
+
+<style scoped>
+
+.viewer{
+  flex-grow: 1;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+}
+
+.main-view-col {
+  overflow: auto;
+  flex-grow: 1;
+
+}
+
+</style>