diff --git a/components/Dictionary.vue b/components/Dictionary.vue index 198fc98d2..b6f16d658 100644 --- a/components/Dictionary.vue +++ b/components/Dictionary.vue @@ -12,7 +12,7 @@ v-model:category="filter.category" :categories="config.nouns.categories" submit-button - @submit-clicked="form?.$el.scrollIntoView({ block: 'center' })" + @submit-clicked="form?.focus()" />
nouns.submit.thanks
- + nouns.submit.another @@ -113,10 +113,13 @@ interface Data { } export default defineComponent({ + emits: ['submit'], setup() { + const section = useTemplateRef('section'); return { config: useConfig(), dialogue: useDialogue(), + section, }; }, data(): Data { @@ -162,6 +165,8 @@ export default defineComponent({ base: null, }; this.clarification = false; + this.focus(false); + this.$emit('submit'); } finally { this.submitting = false; } @@ -177,8 +182,13 @@ export default defineComponent({ base: word.id, }; this.clarification = !!word.clarification; - this.afterSubmit = false; - this.$el.scrollIntoView(); + this.focus(); + }, + focus(editable = true): void { + if (editable) { + this.afterSubmit = false; + } + this.section?.scrollIntoView(); }, }, }); diff --git a/components/NounSubmitForm.vue b/components/NounSubmitForm.vue index 6b5cd81b0..fc414dfc3 100644 --- a/components/NounSubmitForm.vue +++ b/components/NounSubmitForm.vue @@ -1,11 +1,11 @@ - + nouns.submit.thanks - + nouns.submit.another @@ -168,11 +168,14 @@ const emptyForm = (config: Config): MinimalNoun => { }; export default defineComponent({ + emits: ['submit'], setup() { const config = useConfig(); + const section = useTemplateRef('section'); return { config, dialogue: useDialogue(), + section, form: ref(emptyForm(config)), }; }, @@ -212,6 +215,8 @@ export default defineComponent({ this.form = emptyForm(this.config); this.templateVisible = false; this.templateBase = ''; + this.focus(false); + this.$emit('submit'); } finally { this.submitting = false; } @@ -228,8 +233,13 @@ export default defineComponent({ sources: word.sources, base: word.id, }; - this.afterSubmit = false; - this.$el.scrollIntoView(); + this.focus(); + }, + focus(editable = true): void { + if (editable) { + this.afterSubmit = false; + } + this.section?.scrollIntoView(); }, }, }); diff --git a/components/TermsDictionary.vue b/components/TermsDictionary.vue index 8148f2b04..3da9c5cd3 100644 --- a/components/TermsDictionary.vue +++ b/components/TermsDictionary.vue @@ -12,7 +12,7 @@ v-model:category="filter.category" :categories="config.terminology.categories" submit-button - @submit-clicked="form?.$el.scrollIntoView({ block: 'center' })" + @submit-clicked="form?.focus()" /> @@ -102,7 +102,7 @@ - + @@ -210,6 +210,10 @@ export default defineComponent({ } await this.entriesAsyncData.execute(); }, + async reloadEntries(): Promise { + await this.entriesAsyncData.execute(); + this.form?.focus(false); + }, edit(entry: TermsEntry): void { this.form?.edit(entry); }, diff --git a/components/TermsSubmitForm.vue b/components/TermsSubmitForm.vue index 7cd803565..45266faa8 100644 --- a/components/TermsSubmitForm.vue +++ b/components/TermsSubmitForm.vue @@ -1,11 +1,11 @@ - + nouns.submit.thanks - + nouns.submit.another @@ -122,13 +122,16 @@ interface Data { } export default defineComponent({ + emits: ['submit'], async setup() { const dialogue = useDialogue(); + const section = useTemplateRef('section'); const { data: keys } = await useFetch('/api/terms/keys', { lazy: true, default: () => [] }); return { config: useConfig(), dialogue, + section, keys, }; }, @@ -165,6 +168,8 @@ export default defineComponent({ images: [], base: null, }; + this.focus(false); + this.$emit('submit'); } finally { this.submitting = false; } @@ -180,8 +185,13 @@ export default defineComponent({ images: word.images, base: word.id, }; - this.afterSubmit = false; - this.$el.scrollIntoView(); + this.focus(); + }, + focus(editable = true): void { + if (editable) { + this.afterSubmit = false; + } + this.section?.scrollIntoView(); }, }, });
- + nouns.submit.another @@ -168,11 +168,14 @@ const emptyForm = (config: Config): MinimalNoun => { }; export default defineComponent({ + emits: ['submit'], setup() { const config = useConfig(); + const section = useTemplateRef('section'); return { config, dialogue: useDialogue(), + section, form: ref(emptyForm(config)), }; }, @@ -212,6 +215,8 @@ export default defineComponent({ this.form = emptyForm(this.config); this.templateVisible = false; this.templateBase = ''; + this.focus(false); + this.$emit('submit'); } finally { this.submitting = false; } @@ -228,8 +233,13 @@ export default defineComponent({ sources: word.sources, base: word.id, }; - this.afterSubmit = false; - this.$el.scrollIntoView(); + this.focus(); + }, + focus(editable = true): void { + if (editable) { + this.afterSubmit = false; + } + this.section?.scrollIntoView(); }, }, }); diff --git a/components/TermsDictionary.vue b/components/TermsDictionary.vue index 8148f2b04..3da9c5cd3 100644 --- a/components/TermsDictionary.vue +++ b/components/TermsDictionary.vue @@ -12,7 +12,7 @@ v-model:category="filter.category" :categories="config.terminology.categories" submit-button - @submit-clicked="form?.$el.scrollIntoView({ block: 'center' })" + @submit-clicked="form?.focus()" /> @@ -102,7 +102,7 @@ - + @@ -210,6 +210,10 @@ export default defineComponent({ } await this.entriesAsyncData.execute(); }, + async reloadEntries(): Promise { + await this.entriesAsyncData.execute(); + this.form?.focus(false); + }, edit(entry: TermsEntry): void { this.form?.edit(entry); }, diff --git a/components/TermsSubmitForm.vue b/components/TermsSubmitForm.vue index 7cd803565..45266faa8 100644 --- a/components/TermsSubmitForm.vue +++ b/components/TermsSubmitForm.vue @@ -1,11 +1,11 @@ - + nouns.submit.thanks - + nouns.submit.another @@ -122,13 +122,16 @@ interface Data { } export default defineComponent({ + emits: ['submit'], async setup() { const dialogue = useDialogue(); + const section = useTemplateRef('section'); const { data: keys } = await useFetch('/api/terms/keys', { lazy: true, default: () => [] }); return { config: useConfig(), dialogue, + section, keys, }; }, @@ -165,6 +168,8 @@ export default defineComponent({ images: [], base: null, }; + this.focus(false); + this.$emit('submit'); } finally { this.submitting = false; } @@ -180,8 +185,13 @@ export default defineComponent({ images: word.images, base: word.id, }; - this.afterSubmit = false; - this.$el.scrollIntoView(); + this.focus(); + }, + focus(editable = true): void { + if (editable) { + this.afterSubmit = false; + } + this.section?.scrollIntoView(); }, }, });
- + nouns.submit.another @@ -122,13 +122,16 @@ interface Data { } export default defineComponent({ + emits: ['submit'], async setup() { const dialogue = useDialogue(); + const section = useTemplateRef('section'); const { data: keys } = await useFetch('/api/terms/keys', { lazy: true, default: () => [] }); return { config: useConfig(), dialogue, + section, keys, }; }, @@ -165,6 +168,8 @@ export default defineComponent({ images: [], base: null, }; + this.focus(false); + this.$emit('submit'); } finally { this.submitting = false; } @@ -180,8 +185,13 @@ export default defineComponent({ images: word.images, base: word.id, }; - this.afterSubmit = false; - this.$el.scrollIntoView(); + this.focus(); + }, + focus(editable = true): void { + if (editable) { + this.afterSubmit = false; + } + this.section?.scrollIntoView(); }, }, });