66 lines
1.9 KiB
Vue
66 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
|
import MediaArticleStatusBadge from '@/components/MediaArticleStatusBadge.vue'
|
|
import VariantRemovalNote from '@/components/variants/VariantRemovalNote.vue'
|
|
import type { MediaItem, MediaUsageItem } from '@/composables/useMedia'
|
|
import { pluralArticles } from '@/lib/mediaFormat'
|
|
|
|
const props = defineProps<{
|
|
item: MediaItem
|
|
usage: MediaUsageItem[]
|
|
action: () => Promise<void>
|
|
}>()
|
|
|
|
const emit = defineEmits<{ close: [confirmed: boolean] }>()
|
|
|
|
const inUse = computed(() => props.item.used_in > 0)
|
|
const title = computed(() =>
|
|
inUse.value ? t("Delete an image that's in use?") : t('Delete this image?'),
|
|
)
|
|
const description = computed(() =>
|
|
inUse.value
|
|
? t(
|
|
"\u0022{0}\u0022 is used in {1}. If you delete it, they will show a broken image. This can't be undone.",
|
|
[props.item.filename, pluralArticles(props.item.used_in)],
|
|
)
|
|
: t(
|
|
"\u0022{0}\u0022 will be deleted from your library. No article uses it. This can't be undone.",
|
|
[props.item.filename],
|
|
),
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<ConfirmDialog
|
|
:title="title"
|
|
:description="description"
|
|
:confirm-label="t('Delete image')"
|
|
:cancel-label="t('Cancel')"
|
|
:pending-label="t('Deleting…')"
|
|
tone="danger"
|
|
:action="action"
|
|
@close="emit('close', $event)"
|
|
>
|
|
<template #body>
|
|
<ul v-if="inUse && usage.length > 0" class="border border-default">
|
|
<li
|
|
v-for="(article, index) in usage"
|
|
:key="article.id"
|
|
data-testid="affected-article"
|
|
class="flex min-h-9 items-center gap-2 px-3"
|
|
:class="{ 'border-t border-muted': index > 0 }"
|
|
>
|
|
<span class="min-w-0 flex-1 truncate text-highlighted">{{
|
|
article.title
|
|
}}</span>
|
|
<MediaArticleStatusBadge :published="article.published" />
|
|
</li>
|
|
</ul>
|
|
<VariantRemovalNote :count="item.variant_count" :bytes="item.variant_size" />
|
|
</template>
|
|
</ConfirmDialog>
|
|
</template>
|