From b9a9b1255fd908ff18ee8acfc9395e3a9bf3f27a Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Wed, 3 Aug 2022 12:27:52 +0200
Subject: [PATCH] Bug 32030: Modal - Make warnings sticky at the top

Warning messages are displayed when a form is not submited because
something is wrong on the form.
We should notify the user on the visible screen, not at the top of the
form that could be hidden.

Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/js/vue/components/ERM/Dialog.vue     | 37 ++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Dialog.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Dialog.vue
index 4a7ba92a4a..58198f534c 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Dialog.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Dialog.vue
@@ -1,18 +1,45 @@
 <template>
     <div class="dialog message" v-if="message">{{ message }}</div>
     <div class="dialog alert" v-if="error">{{ error }}</div>
-    <div class="dialog alert" v-if="warning">{{ warning }}</div> <!-- Must be styled differently -->
+    <div class="dialog alert modal" v-if="warning">
+        {{ warning }}
+        <a
+            id="close_modal"
+            class="btn btn-default btn-xs"
+            role="button"
+            @click="removeMessages"
+            >{{ $t("Close") }}</a
+        >
+    </div>
+    <!-- Must be styled differently -->
 </template>
 
 <script>
 import { storeToRefs } from "pinia"
 import { useMainStore } from "../../stores/main"
-
 export default {
-    setup(){
+    setup() {
         const mainStore = useMainStore()
         const { message, error, warning } = storeToRefs(mainStore)
-        return { message, error, warning }
+        const { removeMessages } = mainStore
+        return { message, error, warning, removeMessages }
     },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.modal {
+    position: fixed;
+    z-index: 9998;
+    display: table;
+    transition: opacity 0.3s ease;
+    margin: auto;
+    padding: 20px 30px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+    transition: all 0.3s ease;
+}
+#close_modal {
+    float: right;
+    cursor: pointer;
+}
+</style>
\ No newline at end of file
-- 
2.39.2