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