65 lines
1.8 KiB
Vue
65 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import DirectoryDialog from '@/components/DirectoryDialog.vue'
|
|
import SchemaChangeList from '@/components/SchemaChangeList.vue'
|
|
import { entriesLine } from '@/lib/schemaEntries'
|
|
import {
|
|
hasRefusedChange,
|
|
isMediaOnlyClean,
|
|
summaryLine,
|
|
type FieldChange,
|
|
} from '@/lib/schemaBuilderDiff'
|
|
|
|
const props = defineProps<{
|
|
name: string
|
|
total: number
|
|
changes: FieldChange[]
|
|
applying: boolean
|
|
offline: boolean
|
|
}>()
|
|
|
|
defineEmits<{ apply: []; close: [] }>()
|
|
|
|
const summary = computed(() => summaryLine(props.changes))
|
|
const entries = computed(() => entriesLine(props.name, props.total))
|
|
const refused = computed(() => hasRefusedChange(props.changes))
|
|
const mediaOnlyClean = computed(() => isMediaOnlyClean(props.changes))
|
|
</script>
|
|
|
|
<template>
|
|
<DirectoryDialog
|
|
:title="t('Review changes to {0}', [name])"
|
|
:description="t('Apply them to save the content type.')"
|
|
:confirm-label="t('Apply changes')"
|
|
:pending-label="t('Applying…')"
|
|
:cancel-label="t('Back to editing')"
|
|
tone="neutral"
|
|
wide
|
|
:pending="applying"
|
|
:confirm-disabled="offline"
|
|
:confirm-blocked="refused"
|
|
@confirm="$emit('apply')"
|
|
@close="$emit('close')"
|
|
>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-md/4.5 font-semibold text-highlighted" data-testid="review-summary">{{
|
|
summary
|
|
}}</span>
|
|
<span class="text-muted">{{ entries }}</span>
|
|
</div>
|
|
<SchemaChangeList :changes="changes" test-id="review-changes" />
|
|
<p v-if="refused" class="text-xs/4.5 text-muted">
|
|
{{ t('Back to editing keeps your other changes.') }}
|
|
</p>
|
|
<p v-else-if="!mediaOnlyClean && !applying" class="text-xs/4.5 text-muted">
|
|
{{
|
|
t(
|
|
"Flagged changes can be refused if existing entries don't fit. If that happens, nothing is changed.",
|
|
)
|
|
}}
|
|
</p>
|
|
</DirectoryDialog>
|
|
</template>
|