refac: duplicates, crap, dry etc. on last features commits

web/src/components/EntryForm.vue

@@ -3,21 +3,35 @@ import { t } from '@/i18n'
 
 import { computed, nextTick, watch } from 'vue'
 import EntryField from '@/components/EntryField.vue'
-import type { EntryEditorPage } from '@/composables/useEntryEditorPage'
+import type { BuiltinField } from '@/lib/contentTypes'
+import type { EntryIssues, EntryValues } from '@/lib/entryForm'
 import { groupFields } from '@/lib/entryLayout'
 
 const FOCUSABLE =
 	'input:not([type="hidden"]), textarea, [role="spinbutton"], [role="switch"], [role="combobox"]'
 
-const props = defineProps<{ page: EntryEditorPage }>()
+const props = defineProps<{
+	fields: BuiltinField[]
+	values: EntryValues
+	issues: EntryIssues
+	firstIssue: string | null
+	focusToken: number
+	locked: boolean
+	saving: boolean
+	creating: boolean
+	isDefault: (field: BuiltinField) => boolean
+	entryLine: string
+	createdLine: string
+	updatedLine: string
+}>()
 
-const { form, fields, locked, focusToken } = props.page
-const rows = computed(() => groupFields(fields.value))
-const dimmed = computed(() => locked.value)
+const emit = defineEmits<{ update: [key: string, value: unknown]; submit: [] }>()
+
+const rows = computed(() => groupFields(props.fields))
 
 async function focusFirstIssue() {
 	await nextTick()
-	const key = form.firstIssue.value
+	const key = props.firstIssue
 	if (!key) {
 		return
 	}
@@ -29,7 +43,7 @@ async function focusFirstIssue() {
 	;(wrapper ?? control)?.scrollIntoView?.({ block: 'center' })
 }
 
-watch(focusToken, focusFirstIssue)
+watch(() => props.focusToken, focusFirstIssue)
 </script>
 
 <template>
@@ -38,9 +52,9 @@ watch(focusToken, focusFirstIssue)
 		novalidate
 		data-testid="entry-form"
 		class="flex max-w-190 flex-col gap-5 border border-default bg-default p-4 transition-opacity md:p-6"
-		:class="dimmed ? 'opacity-70' : ''"
-		:aria-busy="page.saving.value ? 'true' : undefined"
-		@submit.prevent="page.submit"
+		:class="locked ? 'opacity-70' : ''"
+		:aria-busy="saving ? 'true' : undefined"
+		@submit.prevent="emit('submit')"
 	>
 		<div
 			v-for="row in rows"
@@ -52,11 +66,11 @@ watch(focusToken, focusFirstIssue)
 				v-for="field in row"
 				:key="field.key"
 				:field="field"
-				:value="form.values.value[field.key]"
-				:issue="form.issues.value[field.key]"
-				:is-default="form.isDefault(field)"
+				:value="values[field.key]"
+				:issue="issues[field.key]"
+				:is-default="isDefault(field)"
 				:disabled="locked"
-				@update="page.change"
+				@update="(key, value) => emit('update', key, value)"
 			/>
 		</div>
 
@@ -65,11 +79,11 @@ watch(focusToken, focusFirstIssue)
 			class="grid grid-cols-1 gap-x-4 gap-y-1.5 border-t border-default pt-4 text-xs/4.5 md:grid-cols-[auto_1fr]"
 		>
 			<dt class="text-muted">{{ t('Entry') }}</dt>
-			<dd :class="page.creating.value ? '' : 'font-mono'">{{ page.entryLine.value }}</dd>
+			<dd :class="creating ? '' : 'font-mono'">{{ entryLine }}</dd>
 			<dt class="text-muted">{{ t('Created by') }}</dt>
-			<dd>{{ page.createdLine.value }}</dd>
+			<dd>{{ createdLine }}</dd>
 			<dt class="text-muted">{{ t('Updated by') }}</dt>
-			<dd>{{ page.updatedLine.value }}</dd>
+			<dd>{{ updatedLine }}</dd>
 		</dl>
 	</form>
 </template>