first
This commit is contained in:
Julian Freeman
141
src/views/History.vue
Normal file
141
src/views/History.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
// filepath: src/views/History.vue
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import { Trash2, FolderOpen } from 'lucide-vue-next'
|
||||
import { formatDistanceToNow } from 'date-fns'
|
||||
|
||||
interface HistoryItem {
|
||||
id: string
|
||||
title: string
|
||||
thumbnail: string
|
||||
url: string
|
||||
output_path: string
|
||||
timestamp: string
|
||||
status: string
|
||||
format: string
|
||||
}
|
||||
|
||||
const history = ref<HistoryItem[]>([])
|
||||
|
||||
async function loadHistory() {
|
||||
try {
|
||||
const res = await invoke<HistoryItem[]>('get_history')
|
||||
// Sort by timestamp desc
|
||||
history.value = res.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
async function clearHistory() {
|
||||
if(confirm('Clear all download history?')) {
|
||||
await invoke('clear_history')
|
||||
history.value = []
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteItem(id: string) {
|
||||
if(confirm('Delete this history record? (File will not be deleted)')) {
|
||||
try {
|
||||
await invoke('delete_history_item', { id })
|
||||
history.value = history.value.filter(h => h.id !== id)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function openFolder(path: string) {
|
||||
await invoke('open_in_explorer', { path })
|
||||
}
|
||||
|
||||
onMounted(loadHistory)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-5xl mx-auto p-8">
|
||||
<header class="mb-8 flex justify-between items-center">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-zinc-900 dark:text-white">Download History</h1>
|
||||
<p class="text-gray-500 dark:text-gray-400 mt-2">Manage your past downloads.</p>
|
||||
</div>
|
||||
<button
|
||||
@click="clearHistory"
|
||||
v-if="history.length > 0"
|
||||
class="text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
Clear All
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div v-if="history.length === 0" class="text-center py-20">
|
||||
<div class="bg-gray-100 dark:bg-zinc-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<FolderOpen class="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-zinc-900 dark:text-white">No downloads yet</h3>
|
||||
<p class="text-gray-500">Your download history will appear here.</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-gray-50 dark:bg-zinc-800/50 text-xs uppercase text-gray-500 font-medium">
|
||||
<tr>
|
||||
<th class="px-6 py-4">Media</th>
|
||||
<th class="px-6 py-4">Date</th>
|
||||
<th class="px-6 py-4">Format</th>
|
||||
<th class="px-6 py-4">Status</th>
|
||||
<th class="px-6 py-4 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100 dark:divide-zinc-800">
|
||||
<tr v-for="item in history" :key="item.id" class="hover:bg-gray-50 dark:hover:bg-zinc-800/50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<img :src="item.thumbnail || '/placeholder.png'" class="w-12 h-12 rounded-lg object-cover bg-gray-200" />
|
||||
<div class="max-w-xs">
|
||||
<div class="font-medium text-zinc-900 dark:text-white truncate" :title="item.title">{{ item.title }}</div>
|
||||
<div class="text-xs text-gray-500 truncate">{{ item.url }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
|
||||
{{ formatDistanceToNow(new Date(item.timestamp), { addSuffix: true }) }}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-500">
|
||||
<span class="bg-gray-100 dark:bg-zinc-800 px-2 py-1 rounded text-xs font-mono">{{ item.format }}</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium"
|
||||
:class="item.status === 'success' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'"
|
||||
>
|
||||
<span class="w-1.5 h-1.5 rounded-full" :class="item.status === 'success' ? 'bg-green-500' : 'bg-red-500'"></span>
|
||||
{{ item.status === 'success' ? 'Completed' : 'Failed' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right whitespace-nowrap">
|
||||
<button
|
||||
@click="openFolder(item.output_path)"
|
||||
class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
|
||||
title="Open Output Folder"
|
||||
>
|
||||
<FolderOpen class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
@click="deleteItem(item.id)"
|
||||
class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors ml-1"
|
||||
title="Delete Record"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user