minmal-file-cloud-email-pim-passmanager/frontend/src/views/PreviewView.vue

<template>
  <div class="preview-container">
    <div class="preview-toolbar">
      <div class="toolbar-left">
        <Button icon="pi pi-arrow-left" text @click="$router.back()" />
        <h3>{{ fileName }}</h3>
      </div>
      <div class="toolbar-right">
        <Button v-if="canEdit && !editing" icon="pi pi-pencil" label="Bearbeiten" size="small" outlined @click="startEdit" />
        <Button v-if="editing" icon="pi pi-save" label="Speichern" size="small" @click="saveEdit" :loading="saving" />
        <Button v-if="editing" label="Abbrechen" size="small" text @click="cancelEdit" />
        <Button icon="pi pi-download" label="Herunterladen" size="small" outlined @click="downloadFile" />
      </div>
    </div>

    <div v-if="loading" class="loading">
      <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
      <p>Vorschau wird geladen...</p>
    </div>

    <div v-else-if="error" class="error-state">
      <i class="pi pi-exclamation-triangle" style="font-size: 2rem; color: var(--p-orange-500)"></i>
      <p>{{ error }}</p>
    </div>

    <!-- PDF -->
    <div v-else-if="previewType === 'pdf'" class="preview-content">
      <iframe :src="previewUrl" class="pdf-frame"></iframe>
    </div>

    <!-- Image -->
    <div v-else-if="previewType === 'image'" class="preview-content image-preview">
      <img :src="previewUrl" :alt="fileName" />
    </div>

    <!-- HTML (DOCX) -->
    <div v-else-if="previewType === 'html'" class="preview-content">
      <div v-if="!editing" class="document-frame" v-html="htmlContent"></div>
      <div v-else class="editor-frame">
        <div ref="editorRef" contenteditable="true" class="document-editor" v-html="htmlContent"
             @input="editorDirty = true"></div>
      </div>
    </div>

    <!-- Spreadsheet (XLSX) -->
    <div v-else-if="previewType === 'spreadsheet'" class="preview-content">
      <div class="sheet-tabs" v-if="sheets.length > 1">
        <button v-for="(sheet, i) in sheets" :key="i"
                :class="{ active: activeSheet === i }" @click="activeSheet = i">
          {{ sheet.name }}
        </button>
      </div>
      <div class="spreadsheet-wrapper">
        <table class="spreadsheet" v-if="sheets[activeSheet]">
          <tr v-for="(row, ri) in sheets[activeSheet].rows" :key="ri">
            <td v-for="(cell, ci) in row" :key="ci"
                :contenteditable="editing"
                @input="onCellEdit(ri, ci, $event)">{{ cell }}</td>
          </tr>
        </table>
      </div>
    </div>

    <!-- Slides (PPTX) -->
    <div v-else-if="previewType === 'slides'" class="preview-content">
      <div class="slides-nav">
        <Button icon="pi pi-chevron-left" text :disabled="activeSlide <= 0" @click="activeSlide--" />
        <span>Folie {{ activeSlide + 1 }} / {{ slides.length }}</span>
        <Button icon="pi pi-chevron-right" text :disabled="activeSlide >= slides.length - 1" @click="activeSlide++" />
      </div>
      <div v-if="slides[activeSlide]" class="slide-frame" v-html="slides[activeSlide].html"></div>
    </div>

    <!-- Text -->
    <div v-else-if="previewType === 'text'" class="preview-content">
      <textarea v-if="editing" v-model="textContent" class="text-editor"></textarea>
      <pre v-else class="text-frame">{{ textContent }}</pre>
    </div>

    <!-- Unsupported -->
    <div v-else-if="previewType === 'unsupported'" class="error-state">
      <i class="pi pi-file" style="font-size: 2rem; color: var(--p-surface-400)"></i>
      <p>Vorschau fuer diesen Dateityp nicht verfuegbar</p>
      <Button label="Herunterladen" icon="pi pi-download" @click="downloadFile" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { useToast } from 'primevue/usetoast'
import apiClient from '../api/client'
import Button from 'primevue/button'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const toast = useToast()

const fileId = route.params.fileId
const fileName = ref('')
const previewType = ref('')
const previewUrl = ref('')
const htmlContent = ref('')
const textContent = ref('')
const sheets = ref([])
const activeSheet = ref(0)
const slides = ref([])
const activeSlide = ref(0)
const loading = ref(true)
const error = ref('')
const editing = ref(false)
const editorDirty = ref(false)
const saving = ref(false)
const editorRef = ref(null)
const canEdit = ref(false)

function getTokenUrl(path) {
  return `${path}${path.includes('?') ? '&' : '?'}token=${encodeURIComponent(auth.accessToken || '')}`
}

async function loadPreview() {
  loading.value = true
  try {
    const res = await apiClient.get(`/files/${fileId}/preview`)
    const data = res.data
    fileName.value = data.name || ''
    previewType.value = data.type

    if (data.type === 'pdf') {
      previewUrl.value = getTokenUrl(`/api/files/${fileId}/download`)
      canEdit.value = false
    } else if (data.type === 'image') {
      previewUrl.value = getTokenUrl(`/api/files/${fileId}/download`)
      canEdit.value = false
    } else if (data.type === 'html') {
      htmlContent.value = data.content
      canEdit.value = true
    } else if (data.type === 'spreadsheet') {
      sheets.value = data.sheets
      canEdit.value = true
    } else if (data.type === 'slides') {
      slides.value = data.slides
      canEdit.value = false
    } else if (data.type === 'text') {
      textContent.value = data.content
      canEdit.value = true
    } else {
      previewType.value = 'unsupported'
    }
  } catch (err) {
    error.value = err.response?.data?.error || 'Vorschau konnte nicht geladen werden'
  } finally {
    loading.value = false
  }
}

function downloadFile() {
  window.location.href = getTokenUrl(`/api/files/${fileId}/download`)
}

function startEdit() {
  editing.value = true
  editorDirty.value = false
}

function cancelEdit() {
  editing.value = false
  // Reload to discard changes
  loadPreview()
}

function onCellEdit(ri, ci, event) {
  sheets.value[activeSheet.value].rows[ri][ci] = event.target.textContent
  editorDirty.value = true
}

async function saveEdit() {
  saving.value = true
  try {
    let payload = {}

    if (previewType.value === 'html') {
      // Get HTML from contenteditable
      const content = editorRef.value ? editorRef.value.innerHTML : htmlContent.value
      payload = { type: 'html', content }
    } else if (previewType.value === 'spreadsheet') {
      payload = { type: 'spreadsheet', sheets: sheets.value }
    } else if (previewType.value === 'text') {
      payload = { type: 'text', content: textContent.value }
    }

    await apiClient.post(`/files/${fileId}/save`, payload)
    editing.value = false
    editorDirty.value = false
    toast.add({ severity: 'success', summary: 'Gespeichert', life: 3000 })
  } catch (err) {
    toast.add({ severity: 'error', summary: 'Speichern fehlgeschlagen', detail: err.response?.data?.error || String(err), life: 5000 })
  } finally {
    saving.value = false
  }
}

onMounted(loadPreview)
</script>

<style scoped>
.preview-container { display: flex; flex-direction: column; height: calc(100vh - 0px); }
.preview-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--p-surface-200);
  background: var(--p-surface-0); flex-shrink: 0;
}
.toolbar-left { display: flex; align-items: center; gap: 0.5rem; }
.toolbar-left h3 { margin: 0; font-size: 1rem; }
.toolbar-right { display: flex; gap: 0.5rem; }
.loading, .error-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; gap: 0.75rem; color: var(--p-text-muted-color);
}
.preview-content { flex: 1; overflow: auto; }
.pdf-frame { width: 100%; height: 100%; border: none; }
.image-preview { display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--p-surface-100); }
.image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.document-frame {
  max-width: 800px; margin: 0 auto; padding: 2rem; background: white;
  min-height: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.05);
  font-family: serif; font-size: 14px; line-height: 1.6;
}
.editor-frame { max-width: 800px; margin: 0 auto; background: white; min-height: 100%; }
.document-editor {
  padding: 2rem; min-height: 600px; outline: none;
  font-family: serif; font-size: 14px; line-height: 1.6;
  border: 2px solid var(--p-primary-color);
}
.sheet-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--p-surface-200); padding: 0 1rem; background: var(--p-surface-50); }
.sheet-tabs button {
  padding: 0.5rem 1rem; border: none; background: none; cursor: pointer;
  font-size: 0.85rem; border-bottom: 2px solid transparent;
}
.sheet-tabs button.active { border-bottom-color: var(--p-primary-color); color: var(--p-primary-color); font-weight: 600; }
.spreadsheet-wrapper { overflow: auto; padding: 0.5rem; }
.spreadsheet { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.spreadsheet td {
  border: 1px solid var(--p-surface-200); padding: 4px 8px;
  min-width: 80px; white-space: nowrap;
}
.spreadsheet tr:first-child td { font-weight: 600; background: var(--p-surface-100); }
.spreadsheet td[contenteditable="true"] { cursor: text; }
.spreadsheet td[contenteditable="true"]:focus { outline: 2px solid var(--p-primary-color); background: var(--p-primary-50); }
.slides-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.75rem; border-bottom: 1px solid var(--p-surface-200); }
.slide-frame {
  max-width: 900px; margin: 2rem auto; padding: 3rem; background: white;
  min-height: 500px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); border-radius: 4px;
  font-size: 16px;
}
.text-frame { padding: 1.5rem; margin: 0; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.text-editor {
  width: 100%; height: 100%; min-height: 500px; padding: 1.5rem;
  font-family: monospace; font-size: 0.9rem; border: none; outline: none; resize: none;
}
</style>