telfax/web-ui/src/components/ArchivePreview.vue

<template>
  <div class="archive-preview">
    <div class="archive-header">
      <div class="archive-info">
        <h3>📦 Archive: {{ archiveName }}</h3>
        <div class="archive-stats">
          <span class="stat">
            <span class="stat-label">Format:</span>
            <span class="stat-value">{{ archiveInfo?.format.toUpperCase() }}</span>
          </span>
          <span class="stat">
            <span class="stat-label">Files:</span>
            <span class="stat-value">{{ archiveInfo?.file_count }}</span>
          </span>
          <span class="stat">
            <span class="stat-label">Size:</span>
            <span class="stat-value">{{ formatSize(archiveInfo?.total_size || 0) }}</span>
          </span>
        </div>
      </div>
      
      <div class="archive-actions">
        <button @click="extractAll" class="btn-primary">
          Extract All
        </button>
        <button @click="refreshList" class="btn-secondary">
          Refresh
        </button>
      </div>
    </div>
    
    <div class="file-filter">
      <input
        v-model="searchQuery"
        type="text"
        placeholder="Search files..."
        class="search-input"
      />
      <div class="filter-options">
        <label>
          <input type="checkbox" v-model="showFiles" />
          Files
        </label>
        <label>
          <input type="checkbox" v-model="showDirs" />
          Directories
        </label>
      </div>
    </div>
    
    <div v-if="loading" class="loading">
      <div class="spinner"></div>
      <p>Loading archive contents...</p>
    </div>
    
    <div v-else-if="error" class="error">
      <p>{{ error }}</p>
      <button @click="loadArchive" class="btn-secondary">Retry</button>
    </div>
    
    <div v-else class="file-list">
      <div class="file-list-header">
        <div class="col-name">Name</div>
        <div class="col-size">Size</div>
        <div class="col-compressed">Compressed</div>
        <div class="col-modified">Modified</div>
        <div class="col-actions">Actions</div>
      </div>
      
      <div
        v-for="file in filteredFiles"
        :key="file.path"
        class="file-entry"
        :class="{ 'is-directory': file.is_dir }"
      >
        <div class="col-name">
          <span class="file-icon">{{ file.is_dir ? '📁' : getFileIcon(file.path) }}</span>
          <span class="file-path">{{ file.path }}</span>
        </div>
        
        <div class="col-size">
          {{ file.is_dir ? '-' : formatSize(file.size) }}
        </div>
        
        <div class="col-compressed">
          {{ file.is_dir ? '-' : formatSize(file.compressed_size) }}
        </div>
        
        <div class="col-modified">
          {{ file.modified ? formatDate(file.modified) : '-' }}
        </div>
        
        <div class="col-actions">
          <button
            v-if="!file.is_dir"
            @click="previewFile(file)"
            class="action-btn"
            title="Preview"
          >
            👁️
          </button>
          <button
            v-if="!file.is_dir && isFaxFile(file.path)"
            @click="sendFax(file)"
            class="action-btn"
            title="Send as Fax"
          >
            📠
          </button>
          <button
            v-if="!file.is_dir"
            @click="extractFile(file)"
            class="action-btn"
            title="Extract"
          >
            💾
          </button>
        </div>
      </div>
      
      <div v-if="filteredFiles.length === 0" class="no-files">
        <p>No files found</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import type { ArchiveInfo, ArchiveEntry } from '../types/archive'

const props = defineProps<{
  archivePath: string
}>()

const emit = defineEmits<{
  preview: [file: ArchiveEntry]
  sendFax: [file: ArchiveEntry]
}>()

const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000'
const API_TOKEN = import.meta.env.VITE_API_TOKEN || ''

const api = axios.create({
  baseURL: `${API_BASE_URL}/api/v1`,
  headers: API_TOKEN ? { Authorization: `Bearer ${API_TOKEN}` } : {}
})

const archiveInfo = ref<ArchiveInfo | null>(null)
const loading = ref(false)
const error = ref<string | null>(null)
const searchQuery = ref('')
const showFiles = ref(true)
const showDirs = ref(true)

const archiveName = computed(() => {
  return props.archivePath.split('/').pop() || 'Archive'
})

const filteredFiles = computed(() => {
  if (!archiveInfo.value) return []
  
  return archiveInfo.value.files.filter(file => {
    // Filter by type
    if (!showFiles.value && !file.is_dir) return false
    if (!showDirs.value && file.is_dir) return false
    
    // Filter by search query
    if (searchQuery.value) {
      return file.path.toLowerCase().includes(searchQuery.value.toLowerCase())
    }
    
    return true
  })
})

async function loadArchive() {
  loading.value = true
  error.value = null
  
  try {
    const response = await api.get('/archive/list', {
      params: { path: props.archivePath }
    })
    archiveInfo.value = response.data
  } catch (e: any) {
    error.value = e.response?.data?.error || 'Failed to load archive'
    console.error('Failed to load archive:', e)
  } finally {
    loading.value = false
  }
}

async function extractFile(file: ArchiveEntry) {
  try {
    const outputDir = `/tmp/telfax_extract_${Date.now()}`
    
    await api.post('/archive/extract', {
      archive_path: props.archivePath,
      file_path: file.path,
      output_dir: outputDir
    })
    
    alert(`Extracted to: ${outputDir}/${file.path}`)
  } catch (e: any) {
    alert(`Failed to extract: ${e.response?.data?.error || e.message}`)
  }
}

async function extractAll() {
  if (!confirm(`Extract all ${archiveInfo.value?.file_count} files?`)) return
  
  try {
    const outputDir = `/tmp/telfax_extract_${Date.now()}`
    
    await api.post('/archive/extract-all', {
      archive_path: props.archivePath,
      output_dir: outputDir
    })
    
    alert(`Extracted all files to: ${outputDir}`)
  } catch (e: any) {
    alert(`Failed to extract: ${e.response?.data?.error || e.message}`)
  }
}

function previewFile(file: ArchiveEntry) {
  emit('preview', file)
}

function sendFax(file: ArchiveEntry) {
  emit('sendFax', file)
}

function refreshList() {
  loadArchive()
}

function formatSize(bytes: number): string {
  if (bytes === 0) return '0 B'
  
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  
  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
}

function formatDate(dateStr: string): string {
  const date = new Date(dateStr)
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
}

function getFileIcon(path: string): string {
  const ext = path.split('.').pop()?.toLowerCase()
  
  const icons: Record<string, string> = {
    'pdf': '📄',
    'doc': '📝',
    'docx': '📝',
    'xls': '📊',
    'xlsx': '📊',
    'ppt': '📽️',
    'pptx': '📽️',
    'txt': '📃',
    'jpg': '🖼️',
    'jpeg': '🖼️',
    'png': '🖼️',
    'gif': '🖼️',
    'tif': '📠',
    'tiff': '📠',
    'zip': '📦',
    'rar': '📦',
    '7z': '📦',
  }
  
  return icons[ext || ''] || '📄'
}

function isFaxFile(path: string): boolean {
  const ext = path.toLowerCase()
  return ext.endsWith('.pdf') || 
         ext.endsWith('.tif') || 
         ext.endsWith('.tiff') ||
         ext.endsWith('.jpg') ||
         ext.endsWith('.jpeg') ||
         ext.endsWith('.png')
}

onMounted(() => {
  loadArchive()
})
</script>

<style scoped>
.archive-preview {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.archive-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e7eb;
}

.archive-info h3 {
  margin: 0 0 10px 0;
  color: #111827;
}

.archive-stats {
  display: flex;
  gap: 20px;
}

.stat {
  display: flex;
  gap: 5px;
}

.stat-label {
  color: #6b7280;
  font-size: 14px;
}

.stat-value {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
}

.archive-actions {
  display: flex;
  gap: 10px;
}

.btn-primary,
.btn-secondary {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.btn-secondary:hover {
  background: #e5e7eb;
}

.file-filter {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 15px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
}

.filter-options {
  display: flex;
  gap: 15px;
}

.filter-options label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #374151;
}

.loading,
.error,
.no-files {
  text-align: center;
  padding: 40px;
  color: #6b7280;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error {
  color: #ef4444;
}

.file-list {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.file-list-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 15px;
  background: #f9fafb;
  font-weight: 600;
  font-size: 13px;
  color: #374151;
}

.file-entry {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 15px;
  border-top: 1px solid #e5e7eb;
  font-size: 13px;
  align-items: center;
}

.file-entry:hover {
  background: #f9fafb;
}

.file-entry.is-directory {
  background: #fefefe;
}

.col-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon {
  font-size: 18px;
}

.file-path {
  color: #111827;
}

.col-size,
.col-compressed,
.col-modified {
  color: #6b7280;
}

.col-actions {
  display: flex;
  gap: 5px;
}

.action-btn {
  padding: 4px 8px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.action-btn:hover {
  background: #e5e7eb;
}
</style>