(change) reload data after submit and enhance scrolling behavior

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()"
         />
 
         <Table ref="dictionarytable" :data="visibleNouns" :columns="3" :marked="(el: Noun) => !el.approved" fixed>
@@ -137,7 +137,7 @@
             <Separator icon="plus" />
 
             <div class="px-3">
-                <NounSubmitForm ref="form" style="scroll-padding-top: 2rem;" />
+                <NounSubmitForm ref="form" @submit="reloadNouns()" />
             </div>
         </template>
     </Loading>
@@ -226,6 +226,10 @@ export default defineComponent({
             }
             await this.nounsAsyncData.execute();
         },
+        async reloadNouns(): Promise<void> {
+            await this.nounsAsyncData.execute();
+            this.form?.focus(false);
+        },
         edit(noun: Noun): void {
             this.form?.edit(noun);
         },

components/InclusiveDictionary.vue

@@ -12,7 +12,7 @@
             v-model:category="filter.category"
             :categories="config.inclusive.categories"
             submit-button
-            @submit-clicked="form?.$el.scrollIntoView({ block: 'center' })"
+            @submit-clicked="form?.focus()"
         />
 
         <Table ref="dictionarytable" :data="visibleEntries()" :columns="3" :marked="(el: InclusiveEntry) => !el.approved" fixed>
@@ -219,7 +219,7 @@
         <Separator icon="plus" />
 
         <div class="px-3">
-            <InclusiveSubmitForm ref="form" />
+            <InclusiveSubmitForm ref="form" @submit="reloadEntries()" />
         </div>
     </Loading>
 </template>
@@ -308,6 +308,10 @@ export default defineComponent({
             }
             await this.entriesAsyncData.execute();
         },
+        async reloadEntries(): Promise<void> {
+            await this.entriesAsyncData.execute();
+            this.form?.focus(false);
+        },
         edit(entry: InclusiveEntry) {
             this.form?.edit(entry);
         },

components/InclusiveSubmitForm.vue

@@ -1,11 +1,11 @@
 <template>
-    <section v-if="config.inclusive.enabled && $user()">
+    <section v-if="config.inclusive.enabled && $user()" ref="section" class="scroll-mt-7">
         <div v-if="afterSubmit" class="alert alert-success text-center">
             <p>
                 <T>nouns.submit.thanks</T>
             </p>
             <p>
-                <button class="btn btn-success" @click="afterSubmit = false">
+                <button class="btn btn-success" @click="focus()">
                     <Icon v="plus" />
                     <T>nouns.submit.another</T>
                 </button>
@@ -113,10 +113,13 @@ interface Data {
 }
 
 export default defineComponent({
+    emits: ['submit'],
     setup() {
+        const section = useTemplateRef<HTMLElement>('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.focus();
+        },
+        focus(editable = true): void {
+            if (editable) {
                 this.afterSubmit = false;
-            this.$el.scrollIntoView();
+            }
+            this.section?.scrollIntoView();
         },
     },
 });

components/NounSubmitForm.vue

@@ -1,11 +1,11 @@
 <template>
-    <section v-if="config.nouns.enabled && $user()">
+    <section v-if="config.nouns.enabled && $user()" ref="section" class="scroll-mt-7">
         <div v-if="afterSubmit" class="alert alert-success text-center">
             <p>
                 <T>nouns.submit.thanks</T>
             </p>
             <p>
-                <button class="btn btn-success" @click="afterSubmit = false">
+                <button class="btn btn-success" @click="focus()">
                     <Icon v="plus" />
                     <T>nouns.submit.another</T>
                 </button>
@@ -168,11 +168,14 @@ const emptyForm = (config: Config): MinimalNoun => {
 };
 
 export default defineComponent({
+    emits: ['submit'],
     setup() {
         const config = useConfig();
+        const section = useTemplateRef<HTMLElement>('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.focus();
+        },
+        focus(editable = true): void {
+            if (editable) {
                 this.afterSubmit = false;
-            this.$el.scrollIntoView();
+            }
+            this.section?.scrollIntoView();
         },
     },
 });

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()"
         />
 
         <Table ref="dictionarytable" :data="visibleEntries" :columns="1" fixed :marked="(el: TermsEntry) => !el.approved">
@@ -102,7 +102,7 @@
         <Separator icon="plus" />
 
         <div class="px-3">
-            <TermsSubmitForm ref="form" />
+            <TermsSubmitForm ref="form" @submit="reloadEntries()" />
         </div>
     </Loading>
 </template>
@@ -210,6 +210,10 @@ export default defineComponent({
             }
             await this.entriesAsyncData.execute();
         },
+        async reloadEntries(): Promise<void> {
+            await this.entriesAsyncData.execute();
+            this.form?.focus(false);
+        },
         edit(entry: TermsEntry): void {
             this.form?.edit(entry);
         },

components/TermsSubmitForm.vue

@@ -1,11 +1,11 @@
 <template>
-    <section v-if="config.terminology.enabled && $user()">
+    <section v-if="config.terminology.enabled && $user()" ref="section" class="scroll-mt-7">
         <div v-if="afterSubmit" class="alert alert-success text-center">
             <p>
                 <T>nouns.submit.thanks</T>
             </p>
             <p>
-                <button class="btn btn-success" @click="afterSubmit = false">
+                <button class="btn btn-success" @click="focus()">
                     <Icon v="plus" />
                     <T>nouns.submit.another</T>
                 </button>
@@ -122,13 +122,16 @@ interface Data {
 }
 
 export default defineComponent({
+    emits: ['submit'],
     async setup() {
         const dialogue = useDialogue();
+        const section = useTemplateRef<HTMLElement>('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.focus();
+        },
+        focus(editable = true): void {
+            if (editable) {
                 this.afterSubmit = false;
-            this.$el.scrollIntoView();
+            }
+            this.section?.scrollIntoView();
         },
     },
 });