59 lines
1.9 KiB
Vue
59 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
|
import MediaThumb from '@/components/MediaThumb.vue'
|
|
import type { MediaItem } from '@/composables/useMedia'
|
|
import { mergeArticleCount } from '@/lib/mediaDuplicates'
|
|
import { pluralArticles } from '@/lib/mediaFormat'
|
|
|
|
const props = defineProps<{
|
|
keep: MediaItem
|
|
copies: MediaItem[]
|
|
action: () => Promise<void | boolean>
|
|
}>()
|
|
|
|
const emit = defineEmits<{ close: [confirmed: boolean] }>()
|
|
|
|
const otherCount = computed(() => props.copies.length - 1)
|
|
const others = computed(() =>
|
|
otherCount.value === 1 ? t('copy') : t('{0} copies', [otherCount.value]),
|
|
)
|
|
const articles = computed(() => mergeArticleCount(props.copies, props.keep.id))
|
|
const description = computed(() =>
|
|
t(
|
|
"Articles that use the other {0} will be switched to {1}, and the other {2} will be deleted. {3} will be updated. This can't be undone.",
|
|
[others.value, props.keep.filename, others.value, pluralArticles(articles.value)],
|
|
),
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<ConfirmDialog
|
|
:title="t('Merge into {0}?', [keep.filename])"
|
|
:description="description"
|
|
:confirm-label="
|
|
t('Merge {0}', [otherCount === 1 ? t('1 copy') : t('{0} copies', [otherCount])])
|
|
"
|
|
:cancel-label="t('Cancel')"
|
|
:pending-label="t('Merging…')"
|
|
tone="danger"
|
|
:action="action"
|
|
@close="emit('close', $event)"
|
|
>
|
|
<template #body>
|
|
<div class="flex items-center gap-3 border border-default px-3 py-2.5">
|
|
<MediaThumb :item="keep" size="sm" class="h-10.5 w-14 border border-default" />
|
|
<div class="flex min-w-0 flex-col">
|
|
<span class="truncate font-medium text-highlighted">{{ keep.filename }}</span>
|
|
<span class="text-xs/5 text-muted"
|
|
>{{ t('Kept · used in') }} {{ pluralArticles(keep.used_in) }}
|
|
{{ t('now') }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</ConfirmDialog>
|
|
</template>
|