fix(ui): render absolute timestamps in the viewer's local timezone
Download event times showed raw UTC wall-clock (iso.slice). Added formatDateTime()/formatLocalDate() (local tz, robust to naive vs tz-aware ISO) and applied them to the download row + detail modal datetimes and the credential/artist date displays. formatPostDate stays UTC (date-only, locale-stable, unit-tested). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -35,6 +35,7 @@
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { formatLocalDate } from '../../utils/date.js'
|
||||
|
||||
const props = defineProps({
|
||||
name: { type: String, required: true },
|
||||
@@ -52,7 +53,7 @@ const stats = computed(() => {
|
||||
parts.push(`${props.imageCount} image${props.imageCount === 1 ? '' : 's'}`)
|
||||
}
|
||||
if (props.lastAdded) {
|
||||
parts.push(`last added ${props.lastAdded.slice(0, 10)}`)
|
||||
parts.push(`last added ${formatLocalDate(props.lastAdded)}`)
|
||||
}
|
||||
return parts.join(' · ')
|
||||
})
|
||||
|
||||
@@ -32,6 +32,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { formatLocalDate } from '../../utils/date.js'
|
||||
|
||||
defineProps({
|
||||
platform: { type: Object, required: true },
|
||||
credential: { type: Object, default: null },
|
||||
@@ -39,8 +41,7 @@ defineProps({
|
||||
defineEmits(['replace', 'remove'])
|
||||
|
||||
function fmtDate(iso) {
|
||||
if (!iso) return '—'
|
||||
return iso.slice(0, 10)
|
||||
return iso ? formatLocalDate(iso) : '—'
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<p class="text-caption" style="opacity: 0.75">
|
||||
{{ event.started_at }} → {{ event.finished_at || '(running)' }}
|
||||
{{ formatDateTime(event.started_at) }} → {{ event.finished_at ? formatDateTime(event.finished_at) : '(running)' }}
|
||||
({{ fmtDuration(event.summary?.duration_seconds) }})
|
||||
</p>
|
||||
|
||||
@@ -105,6 +105,7 @@ import { toast } from '../../utils/toast.js'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { copyText } from '../../utils/clipboard.js'
|
||||
import { formatDateTime } from '../../utils/date.js'
|
||||
|
||||
const props = defineProps({ event: { type: Object, default: null } })
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
@@ -93,6 +93,7 @@ import { RouterLink } from 'vue-router'
|
||||
import PlatformChip from '../subscriptions/PlatformChip.vue'
|
||||
import { useSourcesStore } from '../../stores/sources.js'
|
||||
import { downloadStatusColor, downloadStatusIcon, downloadStatusLabel } from '../../utils/downloadStatus.js'
|
||||
import { formatDateTime } from '../../utils/date.js'
|
||||
|
||||
const props = defineProps({ event: { type: Object, required: true } })
|
||||
defineEmits(['open'])
|
||||
@@ -105,9 +106,7 @@ const statusIcon = computed(() => downloadStatusIcon(props.event.status))
|
||||
const statusLabel = computed(() => downloadStatusLabel(props.event.status))
|
||||
|
||||
function fmtTime(iso) {
|
||||
if (!iso) return '—'
|
||||
// 2026-05-27 23:36 — second granularity is in the row's title attr
|
||||
return iso.slice(0, 16).replace('T', ' ')
|
||||
return iso ? formatDateTime(iso) : '—'
|
||||
}
|
||||
function fmtDuration(sec) {
|
||||
if (sec == null) return '—'
|
||||
|
||||
@@ -102,6 +102,7 @@ import { toast } from '../../utils/toast.js'
|
||||
import { computed, ref } from 'vue'
|
||||
import PlatformChip from './PlatformChip.vue'
|
||||
import { useCredentialsStore } from '../../stores/credentials.js'
|
||||
import { formatLocalDate } from '../../utils/date.js'
|
||||
|
||||
const props = defineProps({
|
||||
platform: { type: Object, required: true },
|
||||
@@ -195,8 +196,7 @@ const howToFallback = computed(() => {
|
||||
})
|
||||
|
||||
function fmtDate(iso) {
|
||||
if (!iso) return '—'
|
||||
return iso.slice(0, 10)
|
||||
return iso ? formatLocalDate(iso) : '—'
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -32,3 +32,32 @@ export function formatRelative(iso, opts = {}) {
|
||||
if (future) return diff <= 0 ? 'imminent' : `in ${body}`
|
||||
return `${body} ago`
|
||||
}
|
||||
|
||||
// Parse a backend timestamp as a UTC instant. Backend serializes tz-aware
|
||||
// UTC (…+00:00); if a value ever arrives without a tz designator we treat
|
||||
// it as UTC so it still converts to the viewer's zone correctly.
|
||||
function _parseUtc (iso) {
|
||||
if (typeof iso !== 'string' || !iso) return null
|
||||
const hasTz = /([zZ])$|([+-]\d{2}:?\d{2})$/.test(iso)
|
||||
const d = new Date(hasTz ? iso : `${iso}Z`)
|
||||
return isNaN(d.getTime()) ? null : d
|
||||
}
|
||||
|
||||
// Local-timezone date + time, e.g. "May 28, 7:30 PM". Use for absolute
|
||||
// timestamps that were previously shown as raw UTC ISO.
|
||||
export function formatDateTime (iso) {
|
||||
const d = _parseUtc(iso)
|
||||
if (!d) return ''
|
||||
return d.toLocaleString(undefined, {
|
||||
month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
// Local-timezone date only, e.g. "May 28, 2026".
|
||||
export function formatLocalDate (iso) {
|
||||
const d = _parseUtc(iso)
|
||||
if (!d) return ''
|
||||
return d.toLocaleDateString(undefined, {
|
||||
year: 'numeric', month: 'short', day: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user