Bugzilla – Attachment 146428 Details for
Bug 32925
Display loading info when a form is submitted
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 32925: Display loading info when a form is submitted
Bug-32925-Display-loading-info-when-a-form-is-subm.patch (text/plain), 4.81 KB, created by
Jonathan Druart
on 2023-02-09 14:00:08 UTC
(
hide
)
Description:
Bug 32925: Display loading info when a form is submitted
Filename:
MIME Type:
Creator:
Jonathan Druart
Created:
2023-02-09 14:00:08 UTC
Size:
4.81 KB
patch
obsolete
>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
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 32925
:
146428
|
146436
|
146469
|
146683
|
146684
|
146685
|
146686
|
146689
|
147045
|
147046
|
147047
|
147048
|
147049
|
147076
|
147077
|
147078
|
147079
|
147080
|
147324
|
147325
|
147326
|
147327
|
147328