From a7c31a7708b10ce06a62eabae14dc84682f62630 Mon Sep 17 00:00:00 2001 From: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Date: Thu, 9 Feb 2023 14:56:43 +0100 Subject: [PATCH] Bug 32925: Display loading info when a form is submitted With this new ButtonSubmit component all our submit buttons will look and behave identically. Here we need a "submitting" information to be displayed, and the form to be "deactivated". This patch is a POC and use the new component on the add agreement and delete agreement forms Test plan: It's easier to test if you add a sleep in the relevant place (Koha/REST/V1/ERM/Agreements.pm for list and add/update) Confirm that you see a "Submitting..." in the middle of the screen --- .../prog/js/vue/components/ButtonSubmit.vue | 44 +++++++++++++++++++ .../vue/components/ERM/AgreementsFormAdd.vue | 4 +- .../ERM/AgreementsFormConfirmDelete.vue | 10 ++--- 3 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonSubmit.vue diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonSubmit.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonSubmit.vue new file mode 100644 index 00000000000..87e055e47a8 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonSubmit.vue @@ -0,0 +1,44 @@ +<template> + <input type="submit" variant="primary" :value="text" @click="submitting = true" /> + <div v-if="submitting" class="modal"> + <div class="spinner dialog alert">Submitting...</div> + </div> +</template> + +<script> +export default { + name: "ButtonSubmit", + props: { + text: { + type: String, + default: __("Submit"), + required: false, + }, + submitting: { + type: Boolean, + default: false, + required: false, + }, + }, +}; +</script> + +<style scoped> +.modal { + position: fixed; + z-index: 9998; + display: table; + transition: opacity 0.3s ease; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); +} +.spinner { + position: absolute; + top: 50%; + left: 40%; + width: 10% +} +</style> \ No newline at end of file diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue index b21340f562a..3b138b3d8bc 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue @@ -169,7 +169,7 @@ /> <Documents :documents="agreement.documents" /> <fieldset class="action"> - <input type="submit" value="Submit" /> + <ButtonSubmit /> <router-link to="/cgi-bin/koha/erm/agreements" role="button" @@ -189,6 +189,7 @@ import UserRoles from "./UserRoles.vue" import AgreementLicenses from "./AgreementLicenses.vue" import AgreementRelationships from "./AgreementRelationships.vue" import Documents from "./Documents.vue" +import ButtonSubmit from "../ButtonSubmit.vue" import { setMessage, setError, setWarning } from "../../messages" import { fetchAgreement } from "../../fetch" import { storeToRefs } from "pinia" @@ -411,6 +412,7 @@ export default { AgreementLicenses, AgreementRelationships, Documents, + ButtonSubmit, }, name: "AgreementsFormAdd", } diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue index 5a98d042046..6e741dccea9 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue @@ -18,11 +18,7 @@ </ol> </fieldset> <fieldset class="action"> - <input - type="submit" - variant="primary" - :value="$__('Yes, delete')" - /> + <ButtonSubmit :text="$__('Yes, delete')"/> <router-link to="/cgi-bin/koha/erm/agreements" role="button" @@ -38,6 +34,7 @@ <script> import { fetchAgreement } from "../../fetch" import { setMessage, setError } from "../../messages" +import ButtonSubmit from "../ButtonSubmit.vue" export default { data() { @@ -83,6 +80,9 @@ export default { }) }, }, + components: { + ButtonSubmit, + }, name: "AgreementsFormConfirmDelete", } </script> -- 2.25.1