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
Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
(cherry picked from commit 35dd04e9cb
)
Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
This commit is contained in:
parent
456e39f4a1
commit
1467747cd2
3 changed files with 52 additions and 6 deletions
|
@ -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>
|
|
@ -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 { APIClient } from "../../fetch/api-client.js"
|
||||
import { storeToRefs } from "pinia"
|
||||
|
@ -405,6 +406,7 @@ export default {
|
|||
AgreementLicenses,
|
||||
AgreementRelationships,
|
||||
Documents,
|
||||
ButtonSubmit,
|
||||
},
|
||||
name: "AgreementsFormAdd",
|
||||
}
|
||||
|
|
|
@ -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 { APIClient } from "../../fetch/api-client.js"
|
||||
import { setMessage } from "../../messages"
|
||||
import ButtonSubmit from "../ButtonSubmit.vue"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
@ -72,6 +69,9 @@ export default {
|
|||
)
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ButtonSubmit,
|
||||
},
|
||||
name: "AgreementsFormConfirmDelete",
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue