Bugzilla – Attachment 147082 Details for
Bug 32991
Improve our Dialog component and remove routes for deletion
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 32991: Improve our Dialog component
Bug-32991-Improve-our-Dialog-component.patch (text/plain), 10.62 KB, created by
Matt Blenkinsop
on 2023-02-21 17:35:22 UTC
(
hide
)
Description:
Bug 32991: Improve our Dialog component
Filename:
MIME Type:
Creator:
Matt Blenkinsop
Created:
2023-02-21 17:35:22 UTC
Size:
10.62 KB
patch
obsolete
>From a4f261306f1b984bbaa70ad03575afb69bb65cda 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 > >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> >--- > .../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 03c914bd866..c53f8be8007 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( >@@ -189,7 +189,7 @@ export default { > }) > ) > }) >- Promise.all(promises).then(() => (this.mainStore.is_loading = false)) >+ Promise.all(promises).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.37.1 (Apple Git-137.1)
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 32991
:
146828
|
146829
|
147051
|
147052
|
147053
|
147054
|
147082
|
147083
|
147281
|
147282
|
147291
|
147305
|
147350
|
147383
|
147384
|
147385
|
147387
|
147388
|
147389
|
147390
|
147391
|
147392
|
147393
|
147394
|
147429
|
147439
|
147445
|
147447
|
147448
|
147449
|
147450
|
147451
|
147452
|
147453
|
147454
|
147455
|
147456
|
147461
|
147483
|
147485
|
147486
|
147487
|
147542
|
147543
|
147544
|
147545
|
147546
|
147547
|
147548
|
147549
|
147550
|
147551
|
147552
|
147553
|
147554
|
147569
|
147573
|
147584
|
147588
|
147589
|
147590
|
147591
|
147592
|
147593
|
147594
|
147595
|
147596
|
147597
|
147598
|
147599
|
147600
|
147601
|
147602
|
147603
|
147604
|
147937
|
147938
|
147939
|
147940
|
147941
|
147942
|
147943
|
147944
|
147945
|
147946
|
147947
|
147948
|
147949
|
147950
|
147951