added submit guard to LOA form
This commit is contained in:
@@ -72,8 +72,12 @@ const { handleSubmit, values, resetForm } = useForm({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const formSubmitted = ref(false);
|
const formSubmitted = ref(false);
|
||||||
|
const submitting = ref(false);
|
||||||
|
|
||||||
const onSubmit = handleSubmit(async (values) => {
|
const onSubmit = handleSubmit(async (values) => {
|
||||||
|
//catch double submit
|
||||||
|
if (submitting.value) return;
|
||||||
|
submitting.value = true;
|
||||||
const out: LOARequest = {
|
const out: LOARequest = {
|
||||||
member_id: values.member_id,
|
member_id: values.member_id,
|
||||||
start_date: values.start_date,
|
start_date: values.start_date,
|
||||||
@@ -88,6 +92,7 @@ const onSubmit = handleSubmit(async (values) => {
|
|||||||
userStore.loadUser();
|
userStore.loadUser();
|
||||||
}
|
}
|
||||||
formSubmitted.value = true;
|
formSubmitted.value = true;
|
||||||
|
submitting.value = false;
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
@@ -325,7 +330,12 @@ const filteredMembers = computed(() => {
|
|||||||
</VeeField>
|
</VeeField>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-end">
|
<div class="flex justify-end">
|
||||||
<Button type="submit">Submit</Button>
|
<Button type="submit" :disabled="submitting" class="w-35">
|
||||||
|
<span class="flex items-center gap-2" v-if="submitting">
|
||||||
|
<Spinner></Spinner> Submitting…
|
||||||
|
</span>
|
||||||
|
<span v-else>Submit</span>
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div v-else class="flex flex-col gap-4 py-8 text-left">
|
<div v-else class="flex flex-col gap-4 py-8 text-left">
|
||||||
|
|||||||
Reference in New Issue
Block a user