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>

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>

koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue

@@ -166,7 +166,7 @@
                 />
                 <Documents :documents="agreement.documents" />
                 <fieldset class="action">
-                    <input type="submit" value="Submit" />
+                    <ButtonSubmit />
                     <router-link
                         to="/cgi-bin/koha/erm/agreements"
                         role="button"
@@ -186,6 +186,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"
@@ -402,6 +403,7 @@ export default {
         AgreementLicenses,
         AgreementRelationships,
         Documents,
+        ButtonSubmit,
     },
     name: "AgreementsFormAdd",
 }

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 { 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>