92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import RetryAlert from '@/components/RetryAlert.vue'
|
|
import type { SaveFailure } from '@/composables/useEntryDraft'
|
|
import type { BuiltinField } from '@/lib/contentTypes'
|
|
import type { EntryIssues } from '@/lib/entryForm'
|
|
import { mediaChangedLine, schemaChangedLine, uniqueAlert } from '@/lib/entryMessages'
|
|
import { fieldTypeSpec } from '@/lib/fieldTypes'
|
|
|
|
const props = defineProps<{
|
|
failure: SaveFailure
|
|
schemaChanged: boolean
|
|
schemaField: string
|
|
issues: EntryIssues
|
|
fields: BuiltinField[]
|
|
typeName: string
|
|
}>()
|
|
|
|
defineEmits<{ retry: []; reload: [] }>()
|
|
|
|
const NAMED_CONTROLS = ['media', 'relation']
|
|
|
|
const uniqueField = computed(() =>
|
|
props.fields.find(
|
|
(field) =>
|
|
props.issues[field.key]?.rule === 'unique' && fieldTypeSpec(field.type).supportsUnique,
|
|
),
|
|
)
|
|
const changedLine = computed(() => {
|
|
const changed = props.fields.find((field) => field.key === props.schemaField)
|
|
return changed && NAMED_CONTROLS.includes(fieldTypeSpec(changed.type).editor.control)
|
|
? mediaChangedLine(changed.label)
|
|
: schemaChangedLine(props.schemaField)
|
|
})
|
|
const alertUi = {
|
|
root: 'items-start gap-2.5 px-3.5 py-3',
|
|
title: 'font-semibold',
|
|
description: 'mt-0.5 text-toned',
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<RetryAlert
|
|
v-if="failure === 'failed'"
|
|
:title="t('Couldn\'t save the entry')"
|
|
:description="
|
|
t(
|
|
'Something went wrong on our side. Your changes are still here. Try again in a moment.',
|
|
)
|
|
"
|
|
@retry="$emit('retry')"
|
|
/>
|
|
|
|
<UAlert
|
|
v-if="uniqueField"
|
|
role="alert"
|
|
color="error"
|
|
variant="soft"
|
|
icon="i-lucide-circle-x"
|
|
:title="t('Not saved')"
|
|
:description="uniqueAlert(uniqueField)"
|
|
:ui="alertUi"
|
|
/>
|
|
|
|
<UAlert
|
|
v-if="schemaChanged"
|
|
role="alert"
|
|
color="warning"
|
|
variant="soft"
|
|
orientation="vertical"
|
|
icon="i-lucide-triangle-alert"
|
|
:title="t('The fields of {0} changed', [typeName])"
|
|
:description="changedLine"
|
|
:ui="{ ...alertUi, actions: 'mt-1.5' }"
|
|
>
|
|
<template #actions>
|
|
<UButton
|
|
color="neutral"
|
|
variant="outline"
|
|
icon="i-lucide-rotate-cw"
|
|
class="h-11 gap-1.5 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 md:h-8"
|
|
:ui="{ leadingIcon: 'size-3.5' }"
|
|
@click="$emit('reload')"
|
|
>
|
|
{{ t('Reload form') }}
|
|
</UButton>
|
|
</template>
|
|
</UAlert>
|
|
</template>
|