Jonathan Druart
35dd04e9cb
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>
44 lines
No EOL
867 B
Vue
44 lines
No EOL
867 B
Vue
<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> |