From f3b830560f4e49a8ca42d52f903c89be33fb118b Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Fri, 17 Feb 2023 11:26:38 +0100
Subject: [PATCH] Bug 32991: Improve our Dialog component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is picking some improvements made by Agustin on bug 32607.
This patch is only a POC and we should apply this change to the
different delete route.

We will then remove the *FormConfirmDelete components, and the /delete routes

Initially I wanted to have the same behaviour as in other areas of Koha,
and have a separate view for the deletion step. But it's too much
overhead for not much gain.

Additionally we will have to remove messages.js, the aim of this file
was to import the methods to add messages very easily (only 1 import
line). Now we will need 2 lines (it was more when I added messages.js,
because I didn't inject the store). Not a big deal.

Finally, there is something weird in Main.vue we need to fix. The
console is showing a warning
"[Vue warn]: setup() return property "_is_loading" should not start with "$" or "_" which are reserved prefixes for Vue internals."

I had a hard time to display this "loading" modal when the app is
loading all the things it needs. Pinia/store is not available as we are
accessing the methods/actions too earlier. It will be good to fix that
before we decide to move forward with this approach.

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Signed-off-by: Agustín Moyano <agustinmoyano@theke.io>
---
 .../prog/js/vue/components/Dialog.vue         | 17 +++-
 .../js/vue/components/ERM/AgreementsList.vue  | 28 +++++--
 .../prog/js/vue/components/ERM/Main.vue       | 10 +--
 .../intranet-tmpl/prog/js/vue/stores/main.js  | 82 +++++++++++++------
 4 files changed, 94 insertions(+), 43 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 f0932611381..995b9e6591c 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
@@ -1,8 +1,16 @@
 <template>
-    <div class="dialog message" v-if="message">{{ message }}</div>
-    <div class="dialog alert" v-if="error">{{ error }}</div>
+    <div class="dialog message" v-if="message" v-html="message"></div>
+    <div class="dialog alert" v-if="error" v-html="error"></div>
     <div class="dialog alert modal" v-if="warning">
-        {{ 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"
@@ -27,13 +35,14 @@ import { storeToRefs } from "pinia"
 export default {
     setup() {
         const mainStore = inject("mainStore")
-        const { message, error, warning, is_submitting, is_loading } =
+        const { message, error, warning, accept, is_submitting, is_loading } =
             storeToRefs(mainStore)
         const { removeMessages } = mainStore
         return {
             message,
             error,
             warning,
+            accept,
             is_submitting,
             is_loading,
             removeMessages,
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 9394f1c08d3..0af82d2c93a 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,6 +49,8 @@ export default {
         const AVStore = inject("AVStore")
         const { get_lib_from_av, map_av_dt_filter } = AVStore
 
+        const { setWarning, setMessage } = inject("mainStore")
+
         const table_id = "agreement_list"
         useDataTable(table_id)
 
@@ -57,6 +59,8 @@ export default {
             get_lib_from_av,
             map_av_dt_filter,
             table_id,
+            setWarning,
+            setMessage,
         }
     },
     data: function () {
@@ -111,14 +115,27 @@ export default {
             )
         },
         delete_agreement: function (agreement_id) {
-            this.$router.push(
-                "/cgi-bin/koha/erm/agreements/delete/" + 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 => {}
+                )
+            })
         },
         select_agreement: function (agreement_id) {
             this.$emit("select-agreement", agreement_id)
             this.$emit("close")
         },
+        refresh_table: function(){
+            $("#" + this.table_id)
+                .DataTable()
+                .ajax.url(this.datatable_url)
+                .draw()
+        },
         filter_table: async function () {
             if (this.before_route_entered) {
                 let new_route = build_url(
@@ -133,10 +150,7 @@ export default {
                         .toISOString()
                         .substring(0, 10)
             }
-            $("#" + this.table_id)
-                .DataTable()
-                .ajax.url(this.datatable_url)
-                .draw()
+            this.refresh_table()
         },
         table_url: function () {},
         build_datatable: function () {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue
index 8aa66d19be4..1f2ce3ecaf1 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="is_loading">
+    <div v-if="_is_loading">
         <Dialog />
     </div>
     <div v-else-if="ERMModule">
@@ -139,7 +139,7 @@ export default {
 
         // Note that we cannot use loading and loaded from messages
         // Pinia is not initiated yet there
-        const { is_loading } = storeToRefs(mainStore)
+        const { _is_loading } = storeToRefs(mainStore)
 
         return {
             vendorStore,
@@ -147,7 +147,7 @@ export default {
             mainStore,
             erm_providers,
             ERMModule,
-            is_loading,
+            _is_loading,
         }
     },
     data() {
@@ -156,7 +156,7 @@ export default {
         }
     },
     beforeCreate() {
-        this.mainStore.is_loading = true
+        this.mainStore._is_loading = true
 
         const acq_client = APIClient.acquisition
         acq_client.vendors.getAll().then(
@@ -200,7 +200,7 @@ export default {
                     }
                 )
             })
-            .then(() => (this.mainStore.is_loading = false))
+            .then(() => (this.mainStore._is_loading = false))
     },
     components: {
         Breadcrumb,
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 b2b1b6ce308..3a791860101 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
@@ -2,51 +2,79 @@ import { defineStore } from "pinia";
 
 export const useMainStore = defineStore("main", {
     state: () => ({
-        message: null,
-        error: null,
-        warning: null,
+        _message: null,
+        _error: null,
+        _warning: null,
+        _accept: null,
         previousMessage: null,
         previousError: null,
         displayed_already: false,
-        is_submitting: false,
-        is_loading: false,
+        _is_submitting: false,
+        _is_loading: false,
     }),
     actions: {
-        setMessage(message) {
-            this.error = null;
-            this.warning = null;
-            this.message = message;
-            this.displayed_already = false; /* Will be displayed on the next view */
-        },
-        setError(error) {
-            this.error = error;
-            this.message = null;
-            this.displayed_already = true; /* Is displayed on the current view */
-        },
-        setWarning(warning) {
-            this.warning = warning;
-            this.message = null;
-            this.displayed_already = true; /* Is displayed on the current view */
+        setMessage(message, displayed = false) {
+            this._error = null;
+            this._warning = null;
+            this._message = message;
+            this.displayed_already = displayed; /* Will be displayed on the next view */
+        },
+        setError(error, displayed = true) {
+            this._error = error;
+            this._message = null;
+            this.displayed_already = displayed; /* Is displayed on the current view */
+        },
+        setWarning(warning, accept, displayed = true) {
+            if(accept) {
+                this._accept = async () => {
+                    await accept()
+                    this.removeMessages()
+                }
+            }
+            this._warning = warning;
+            this._message = null;
+            this.displayed_already = displayed; /* Is displayed on the current view */
         },
         removeMessages() {
             if (this.displayed_already) {
-                this.error = null;
-                this.warning = null;
-                this.message = null;
+                this._accept = null;
+                this._error = null;
+                this._warning = null;
+                this._message = null;
             }
             this.displayed_already = true;
         },
         submitting(){
-            this.is_submitting = true;
+            this._is_submitting = true;
         },
         submitted(){
-            this.is_submitting = false;
+            this._is_submitting = false;
         },
         loading(){
-            this.is_loading = true;
+            this._is_loading = true;
         },
         loaded(){
-            this.is_loading = false;
+            this._is_loading = false;
+        },
+    },
+    getters: {
+        error() {
+            return this._error
+        },
+        warning() {
+            return this._warning
+        },
+        message() {
+            return this._message
+        },
+        accept() {
+            return this._accept
+        },
+        is_submitting(){
+            return this._is_submitting
+        },
+        is_loading(){
+            return this._is_loading
         },
     },
 });
-- 
2.25.1