From 461adcdd69c7838a06234d602cc49a3ea452cbde Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Fri, 17 Feb 2023 11:45:43 +0100
Subject: [PATCH] Bug 32991: Add a confirmation message

Looks easier to have a separate variable for the confirmation box, and
easier for styling as well.
---
 .../prog/js/vue/components/Dialog.vue         | 53 +++++++++++++++----
 .../js/vue/components/ERM/AgreementsList.vue  | 29 +++++-----
 .../intranet-tmpl/prog/js/vue/stores/main.js  | 21 +++++++-
 3 files changed, 78 insertions(+), 25 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
index 995b9e6591c..6662075a0ca 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
@@ -3,14 +3,6 @@
     <div class="dialog alert" v-if="error" v-html="error"></div>
     <div class="dialog alert modal" v-if="warning">
         <span v-html="warning"></span>
-        <a
-            v-if="accept"
-            id="close_modal"
-            class="btn btn-primary btn-xs"
-            role="button"
-            @click="accept"
-            >{{ $__("Accept") }}</a
-        >
         <a
             id="close_modal"
             class="btn btn-default btn-xs"
@@ -19,6 +11,26 @@
             >{{ $__("Close") }}</a
         >
     </div>
+    <div class="modal_centered" v-if="confirmation">
+        <div class="dialog alert confirmation">
+            <span v-html="confirmation"></span>
+            <a
+                v-if="accept"
+                id="close_modal"
+                class="btn btn-primary btn-xs"
+                role="button"
+                @click="accept"
+                >{{ $__("Accept") }}</a
+            >
+            <a
+                id="close_modal"
+                class="btn btn-default btn-xs"
+                role="button"
+                @click="removeMessages"
+                >{{ $__("Close") }}</a
+            >
+        </div>
+    </div>
     <!-- Must be styled differently -->
 
     <div class="modal_centered" v-if="is_submitting">
@@ -35,13 +47,21 @@ import { storeToRefs } from "pinia"
 export default {
     setup() {
         const mainStore = inject("mainStore")
-        const { message, error, warning, accept, is_submitting, is_loading } =
-            storeToRefs(mainStore)
+        const {
+            message,
+            error,
+            warning,
+            confirmation,
+            accept,
+            is_submitting,
+            is_loading,
+        } = storeToRefs(mainStore)
         const { removeMessages } = mainStore
         return {
             message,
             error,
             warning,
+            confirmation,
             accept,
             is_submitting,
             is_loading,
@@ -84,4 +104,17 @@ export default {
     left: 40%;
     width: 10%;
 }
+
+.confirmation {
+    position: absolute;
+    top: 25%;
+    left: 40%;
+
+    display: flex;
+    width: 50%;
+    min-height: 10%;
+    margin: auto;
+    align-items: center;
+    justify-content: center;
+}
 </style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
index 0af82d2c93a..251c4c892a4 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
@@ -49,7 +49,7 @@ export default {
         const AVStore = inject("AVStore")
         const { get_lib_from_av, map_av_dt_filter } = AVStore
 
-        const { setWarning, setMessage } = inject("mainStore")
+        const { setConfirmation, setMessage } = inject("mainStore")
 
         const table_id = "agreement_list"
         useDataTable(table_id)
@@ -59,7 +59,7 @@ export default {
             get_lib_from_av,
             map_av_dt_filter,
             table_id,
-            setWarning,
+            setConfirmation,
             setMessage,
         }
     },
@@ -115,22 +115,25 @@ export default {
             )
         },
         delete_agreement: function (agreement_id) {
-            this.setWarning(this.$__("Are you sure you want to remove this agreement?"), () => {
-                const client = APIClient.erm
-                client.agreements.delete(agreement_id).then(
-                    success => {
-                        this.setMessage(this.$__("Agreement deleted"))
-                        this.refresh_table()
-                    },
-                    error => {}
-                )
-            })
+            this.setConfirmation(
+                this.$__("Are you sure you want to remove this agreement?"),
+                () => {
+                    const client = APIClient.erm
+                    client.agreements.delete(agreement_id).then(
+                        success => {
+                            this.setMessage(this.$__("Agreement deleted"))
+                            this.refresh_table()
+                        },
+                        error => {}
+                    )
+                }
+            )
         },
         select_agreement: function (agreement_id) {
             this.$emit("select-agreement", agreement_id)
             this.$emit("close")
         },
-        refresh_table: function(){
+        refresh_table: function () {
             $("#" + this.table_id)
                 .DataTable()
                 .ajax.url(this.datatable_url)
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
index 3a791860101..8938caf88d3 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
@@ -5,6 +5,7 @@ export const useMainStore = defineStore("main", {
         _message: null,
         _error: null,
         _warning: null,
+        _confirmation: null,
         _accept: null,
         previousMessage: null,
         previousError: null,
@@ -17,30 +18,43 @@ export const useMainStore = defineStore("main", {
             this._error = null;
             this._warning = null;
             this._message = message;
+            this._confirmation = null;
             this.displayed_already = displayed; /* Will be displayed on the next view */
         },
         setError(error, displayed = true) {
             this._error = error;
+            this._warning = null;
             this._message = null;
+            this._confirmation = null;
             this.displayed_already = displayed; /* Is displayed on the current view */
         },
         setWarning(warning, accept, displayed = true) {
+            this._error = null;
+            this._warning = warning;
+            this._message = null;
+            this._confirmation = null;
+            this.displayed_already = displayed; /* Is displayed on the current view */
+        },
+        setConfirmation(confirmation, accept, displayed = true){
             if(accept) {
                 this._accept = async () => {
                     await accept()
                     this.removeMessages()
                 }
             }
-            this._warning = warning;
+            this._error = null;
+            this._warning = null;
             this._message = null;
+            this._confirmation = confirmation;
             this.displayed_already = displayed; /* Is displayed on the current view */
         },
         removeMessages() {
             if (this.displayed_already) {
-                this._accept = null;
                 this._error = null;
                 this._warning = null;
                 this._message = null;
+                this._confirmation = null;
+                this._accept = null;
             }
             this.displayed_already = true;
         },
@@ -67,6 +81,9 @@ export const useMainStore = defineStore("main", {
         message() {
             return this._message
         },
+        confirmation() {
+            return this._confirmation
+        },
         accept() {
             return this._accept
         },
-- 
2.25.1