Files
RenewCMS/web/src/components/SchemaReviewDialog.vue
T

54 lines
1.5 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 { 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))
</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="$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="!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>