Add upload queue UI with ExifTool metadata preview on pick.
Users can select images within configured limits, see per-row load status, and inspect raw ExifTool output before upload work continues.
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<section class="flex min-h-48 flex-col rounded-lg border border-border bg-card" aria-live="polite">
|
||||
<header class="border-b border-border px-4 py-3">
|
||||
<h2 class="text-sm font-medium text-card-foreground">Metadata</h2>
|
||||
<p v-if="fileName" class="mt-0.5 truncate text-xs text-muted-foreground">{{ fileName }}</p>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-1 flex-col p-4">
|
||||
<p v-if="!fileName" class="text-sm text-muted-foreground">Select an image to view its metadata.</p>
|
||||
|
||||
<p v-else-if="entry.status === 'error'" class="text-sm text-destructive">
|
||||
{{ entry.message }}
|
||||
</p>
|
||||
|
||||
<pre
|
||||
v-else-if="entry.status === 'ready'"
|
||||
class="max-h-96 flex-1 overflow-auto rounded-md bg-muted p-3 text-xs leading-relaxed whitespace-pre-wrap text-foreground"
|
||||
>{{ entry.output }}</pre
|
||||
>
|
||||
|
||||
<p v-else class="text-sm text-muted-foreground">{{ entry.message }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import type { MetadataPreviewEntry } from '@/types/metadata/MetadataPreview';
|
||||
|
||||
defineProps({
|
||||
fileName: {
|
||||
type: String as PropType<string | null>,
|
||||
required: true
|
||||
},
|
||||
entry: {
|
||||
type: Object as PropType<MetadataPreviewEntry>,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user