TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-17 03:25:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

(change) reload data after submit and enhance scrolling behavior

Browse Source
This commit is contained in:
Valentyne Stigloher 2024-09-18 10:20:04 +02:00
parent cf045e163c
commit 07c6abc098
6 changed files with 60 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/Dictionary.vue
View File

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

8
components/InclusiveDictionary.vue
View File

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

18
components/InclusiveSubmitForm.vue
View File

@ -1,11 +1,11 @@
<template> <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"> <div v-if="afterSubmit" class="alert alert-success text-center">
<p> <p>
<T>nouns.submit.thanks</T> <T>nouns.submit.thanks</T>
</p> </p>
<p> <p>
<button class="btn btn-success" @click="afterSubmit = false"> <button class="btn btn-success" @click="focus()">
<Icon v="plus" /> <Icon v="plus" />
<T>nouns.submit.another</T> <T>nouns.submit.another</T>
</button> </button>
@ -113,10 +113,13 @@ interface Data {
} }
export default defineComponent({ export default defineComponent({
emits: ['submit'],
setup() { setup() {
const section = useTemplateRef<HTMLElement>('section');
return { return {
config: useConfig(), config: useConfig(),
dialogue: useDialogue(), dialogue: useDialogue(),
section,
}; };
}, },
data(): Data { data(): Data {
@ -162,6 +165,8 @@ export default defineComponent({
base: null, base: null,
}; };
this.clarification = false; this.clarification = false;
this.focus(false);
this.$emit('submit');
} finally { } finally {
this.submitting = false; this.submitting = false;
} }
@ -177,8 +182,13 @@ export default defineComponent({
base: word.id, base: word.id,
}; };
this.clarification = !!word.clarification; this.clarification = !!word.clarification;
this.afterSubmit = false; this.focus();
this.$el.scrollIntoView(); },
focus(editable = true): void {
if (editable) {
this.afterSubmit = false;
}
this.section?.scrollIntoView();
}, },
}, },
}); });

18
components/NounSubmitForm.vue
View File

@ -1,11 +1,11 @@
<template> <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"> <div v-if="afterSubmit" class="alert alert-success text-center">
<p> <p>
<T>nouns.submit.thanks</T> <T>nouns.submit.thanks</T>
</p> </p>
<p> <p>
<button class="btn btn-success" @click="afterSubmit = false"> <button class="btn btn-success" @click="focus()">
<Icon v="plus" /> <Icon v="plus" />
<T>nouns.submit.another</T> <T>nouns.submit.another</T>
</button> </button>
@ -168,11 +168,14 @@ const emptyForm = (config: Config): MinimalNoun => {
}; };
export default defineComponent({ export default defineComponent({
emits: ['submit'],
setup() { setup() {
const config = useConfig(); const config = useConfig();
const section = useTemplateRef<HTMLElement>('section');
return { return {
config, config,
dialogue: useDialogue(), dialogue: useDialogue(),
section,
form: ref(emptyForm(config)), form: ref(emptyForm(config)),
}; };
}, },
@ -212,6 +215,8 @@ export default defineComponent({
this.form = emptyForm(this.config); this.form = emptyForm(this.config);
this.templateVisible = false; this.templateVisible = false;
this.templateBase = ''; this.templateBase = '';
this.focus(false);
this.$emit('submit');
} finally { } finally {
this.submitting = false; this.submitting = false;
} }
@ -228,8 +233,13 @@ export default defineComponent({
sources: word.sources, sources: word.sources,
base: word.id, base: word.id,
}; };
this.afterSubmit = false; this.focus();
this.$el.scrollIntoView(); },
focus(editable = true): void {
if (editable) {
this.afterSubmit = false;
}
this.section?.scrollIntoView();
}, },
}, },
}); });

8
components/TermsDictionary.vue
View File

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

18
components/TermsSubmitForm.vue
View File

@ -1,11 +1,11 @@
<template> <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"> <div v-if="afterSubmit" class="alert alert-success text-center">
<p> <p>
<T>nouns.submit.thanks</T> <T>nouns.submit.thanks</T>
</p> </p>
<p> <p>
<button class="btn btn-success" @click="afterSubmit = false"> <button class="btn btn-success" @click="focus()">
<Icon v="plus" /> <Icon v="plus" />
<T>nouns.submit.another</T> <T>nouns.submit.another</T>
</button> </button>
@ -122,13 +122,16 @@ interface Data {
} }
export default defineComponent({ export default defineComponent({
emits: ['submit'],
async setup() { async setup() {
const dialogue = useDialogue(); const dialogue = useDialogue();
const section = useTemplateRef<HTMLElement>('section');
const { data: keys } = await useFetch('/api/terms/keys', { lazy: true, default: () => [] }); const { data: keys } = await useFetch('/api/terms/keys', { lazy: true, default: () => [] });
return { return {
config: useConfig(), config: useConfig(),
dialogue, dialogue,
section,
keys, keys,
}; };
}, },
@ -165,6 +168,8 @@ export default defineComponent({
images: [], images: [],
base: null, base: null,
}; };
this.focus(false);
this.$emit('submit');
} finally { } finally {
this.submitting = false; this.submitting = false;
} }
@ -180,8 +185,13 @@ export default defineComponent({
images: word.images, images: word.images,
base: word.id, base: word.id,
}; };
this.afterSubmit = false; this.focus();
this.$el.scrollIntoView(); },
focus(editable = true): void {
if (editable) {
this.afterSubmit = false;
}
this.section?.scrollIntoView();
}, },
}, },
}); });