From 754c9f2862c63bdfc03a432e498b1b68d4c0c856 Mon Sep 17 00:00:00 2001 From: Jonathan Druart Date: Fri, 17 Feb 2023 11:45:43 +0100 Subject: [PATCH] Bug 32991: Add a confirmation message MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Looks easier to have a separate variable for the confirmation box, and easier for styling as well. Signed-off-by: Matt Blenkinsop Signed-off-by: Jonathan Druart Signed-off-by: Pedro Amorim Signed-off-by: Agustín Moyano Signed-off-by: Tomas Cohen Arazi --- .../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 995b9e6591..6662075a0c 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 @@
- {{ $__("Accept") }} {{ $__("Close") }}
+
+
+ + {{ $__("Accept") }} + {{ $__("Close") }} +
+
@@ -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; +} 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 ededc37770..c8bf3bddc6 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 @@ -57,7 +57,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) @@ -68,7 +68,7 @@ export default { map_av_dt_filter, table_id, logged_in_user, - setWarning, + setConfirmation, setMessage, } }, @@ -125,22 +125,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 3a79186010..8938caf88d 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.20.1