84 lines
2.6 KiB
Svelte
84 lines
2.6 KiB
Svelte
<!-- [DEF:BackupList:Component] -->
|
|
<!--
|
|
@SEMANTICS: backup, list, table
|
|
@PURPOSE: Displays a list of existing backups.
|
|
@LAYER: Component
|
|
@RELATION: USED_BY -> frontend/src/components/backups/BackupManager.svelte
|
|
-->
|
|
|
|
<script lang="ts">
|
|
// [SECTION: IMPORTS]
|
|
import { t } from '../../lib/i18n';
|
|
import { Button } from '../../lib/ui';
|
|
import type { Backup } from '../../types/backup';
|
|
import { goto } from '$app/navigation';
|
|
// [/SECTION]
|
|
|
|
// [SECTION: PROPS]
|
|
/**
|
|
* @type {Backup[]}
|
|
* @description Array of backup objects to display.
|
|
*/
|
|
export let backups: Backup[] = [];
|
|
// [/SECTION]
|
|
|
|
</script>
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
<div class="overflow-x-auto rounded-lg border border-gray-200">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{$t.storage.table.name}
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{$t.tasks.target_env}
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{$t.storage.table.created_at}
|
|
</th>
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{$t.storage.table.actions}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{#each backups as backup}
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
{backup.name}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{backup.environment}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{new Date(backup.created_at).toLocaleString()}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
class="text-blue-600 hover:text-blue-900"
|
|
on:click={() => goto(`/tools/storage?path=backups/${backup.name}`)}
|
|
>
|
|
{$t.storage.table.go_to_storage}
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
{:else}
|
|
<tr>
|
|
<td colspan="4" class="px-6 py-10 text-center text-gray-500">
|
|
{$t.storage.no_files}
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- [/SECTION] -->
|
|
|
|
<style>
|
|
</style>
|
|
|
|
<!-- [/DEF:BackupList:Component] --> |