feat: entry editor at /content/:key/new and /content/:key/:id

web/src/components/EntryNotices.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import RetryAlert from '@/components/RetryAlert.vue'
+import type { EntryEditorPage } from '@/composables/useEntryEditorPage'
+import { schemaChangedLine, uniqueAlert } from '@/lib/entryMessages'
+
+const props = defineProps<{ page: EntryEditorPage }>()
+
+const { failure, schemaChanged, schemaField, form, fields, typeName } = props.page
+
+const uniqueField = computed(() =>
+	fields.value.find((field) => form.issues.value[field.key]?.rule === 'unique'),
+)
+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="page.submit"
+	/>
+
+	<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="schemaChangedLine(schemaField)"
+		: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="page.reload"
+			>
+				{{ t('Reload form') }}
+			</UButton>
+		</template>
+	</UAlert>
+</template>