# HG changeset patch # User Markus Kottlaender # Date 1551096690 -3600 # Node ID c06b001dc26b18eb8c7278cd0caff0a0b9ef7e33 # Parent 8d025f85a3feb7e425f7d58d4e82c575e001ef50 client: improved popup implementation For deleting users and templates there was a more or less quick n' dirty implementation of a confirmation dialog/popup. Since we need this kind of dialog in several more places I generalized the implementation a bit and made it more robust. diff -r 8d025f85a3fe -r c06b001dc26b client/src/assets/application.scss --- a/client/src/assets/application.scss Mon Feb 25 08:47:59 2019 +0100 +++ b/client/src/assets/application.scss Mon Feb 25 13:11:30 2019 +0100 @@ -99,17 +99,6 @@ margin: 0 0.5rem 1rem 0.5rem; } -.popup { - width: 300px; - max-width: 300px; - @extend %fully-centered; -} - -.popup.show { - margin: 0.5rem 0 0 0; - max-height: 999px; -} - // needed to fix the whitespace problem of // https://github.com/Polyconseil/vue-gettext/issues/80; // use like @@ -131,10 +120,10 @@ font-weight: bold; } -.list-fade-enter-active, .list-fade-leave-active { +.fade-enter-active, .fade-leave-active { transition: opacity .3s; } -.list-fade-enter, .list-fade-leave-to { +.fade-enter, .fade-leave-to { opacity: 0; } diff -r 8d025f85a3fe -r c06b001dc26b client/src/components/App.vue --- a/client/src/components/App.vue Mon Feb 25 08:47:59 2019 +0100 +++ b/client/src/components/App.vue Mon Feb 25 13:11:30 2019 +0100 @@ -29,6 +29,7 @@
+ @@ -114,7 +115,8 @@ Sidebar: () => import("./Sidebar"), Search: () => import("./Search"), Contextbox: () => import("./Contextbox"), - Toolbar: () => import("./toolbar/Toolbar") + Toolbar: () => import("./toolbar/Toolbar"), + Popup: () => import("./Popup") } }; diff -r 8d025f85a3fe -r c06b001dc26b client/src/components/ImportStretches.vue --- a/client/src/components/ImportStretches.vue Mon Feb 25 08:47:59 2019 +0100 +++ b/client/src/components/ImportStretches.vue Mon Feb 25 13:11:30 2019 +0100 @@ -11,8 +11,7 @@ Name Datum Source organization -   -   + @@ -39,21 +38,19 @@ {{ formatSurveyDate(stretch.properties["date_info"]) }} {{ stretch.properties["source_organization"] }} - - + + @@ -352,10 +349,30 @@ this.endrhm = this.sanitizeRHM(properties.upper); this.idEditable = false; }, - deleteStretch(index) { - displayInfo({ - title: this.$gettext("Not implemented"), - message: this.$gettext("Deleting " + this.stretches[index].id) + deleteStretch(stretch) { + this.$store.commit("application/popup", { + icon: "trash", + title: this.$gettext("Delete Stretch"), + content: + this.$gettext("Do you really want to delete this stretch:") + + `
+ ${stretch.properties.name}, ${ + stretch.properties.source_organization + } (${stretch.properties.countries})`, + confirm: { + label: this.$gettext("Delete"), + icon: "trash", + callback: () => { + displayInfo({ + title: this.$gettext("Not implemented"), + message: this.$gettext("Deleting " + stretch.id) + }); + } + }, + cancel: { + label: this.$gettext("Cancel"), + icon: "times" + } }); }, moveMapToStretch(index) { diff -r 8d025f85a3fe -r c06b001dc26b client/src/components/Popup.vue --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/Popup.vue Mon Feb 25 13:11:30 2019 +0100 @@ -0,0 +1,137 @@ + + + + + diff -r 8d025f85a3fe -r c06b001dc26b client/src/components/importschedule/Importschedule.vue --- a/client/src/components/importschedule/Importschedule.vue Mon Feb 25 08:47:59 2019 +0100 +++ b/client/src/components/importschedule/Importschedule.vue Mon Feb 25 13:11:30 2019 +0100 @@ -28,69 +28,71 @@ /> - - - - - - - - - - - - - - - - - - - + + + +
IDTypeAuthorScheduleEmail
{{ schedule.id }}{{ schedule.kind.toUpperCase() }}{{ schedule.user }}{{ schedule.config.cron }} - - - + + + +
+
+ No scheduled imports +
+
- -
-
-
- - Delete PDF Template - -
-
- - Do you really want to delete the following template: - -
{{ templateToDelete.name }}
-
-
- - -
-
-
@@ -123,13 +84,11 @@ data() { return { templates: [], - uploading: false, - templateToDelete: "", - showDeleteTemplatePrompt: false + uploading: false }; }, methods: { - upload() { + uploadTemplate() { const reader = new FileReader(); reader.onload = event => { let template; @@ -201,19 +160,38 @@ }); }); }, - remove(template) { - this.showDeleteTemplatePrompt = false; - HTTP.delete("/templates/print/" + template.name, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" - } - }).then(() => { - let removeIndex = this.templates.findIndex( - t => t.name === template.name - ); - if (removeIndex !== -1) { - this.templates.splice(removeIndex, 1); + deleteTemplate(template) { + this.$store.commit("application/popup", { + icon: "trash", + title: this.$gettext("Delete Template"), + content: + this.$gettext( + "Do you really want to delete the following template:" + ) + + `
+ ${template.name}`, + confirm: { + label: this.$gettext("Delete"), + icon: "trash", + callback: () => { + HTTP.delete("/templates/print/" + template.name, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + }).then(() => { + let removeIndex = this.templates.findIndex( + t => t.name === template.name + ); + if (removeIndex !== -1) { + this.templates.splice(removeIndex, 1); + } + }); + } + }, + cancel: { + label: this.$gettext("Cancel"), + icon: "times" } }); } diff -r 8d025f85a3fe -r c06b001dc26b client/src/components/usermanagement/Usermanagement.vue --- a/client/src/components/usermanagement/Usermanagement.vue Mon Feb 25 08:47:59 2019 +0100 +++ b/client/src/components/usermanagement/Usermanagement.vue Mon Feb 25 13:11:30 2019 +0100 @@ -56,7 +56,7 @@ - + - +
@@ -324,7 +321,6 @@ }) .catch(error => { this.loginFailed = true; - this.submitted = false; const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), @@ -357,26 +353,46 @@ this.sortCriterion = criterion; }, deleteUser(name) { - this.$store - .dispatch("usermanagement/deleteUser", { name: name }) - .then(() => { - this.showDeleteUserPrompt = false; - this.submitted = false; - this.$store.dispatch("usermanagement/loadUsers").catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); - }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); + this.$store.commit("application/popup", { + icon: "trash", + title: this.$gettext("Delete User"), + content: + this.$gettext( + "Do you really want to delete the following user account:" + ) + + `
+ ${name}`, + confirm: { + label: this.$gettext("Delete"), + icon: "trash", + callback: () => { + this.$store + .dispatch("usermanagement/deleteUser", { name }) + .then(() => { + this.$store + .dispatch("usermanagement/loadUsers") + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + } + }, + cancel: { + label: this.$gettext("Cancel"), + icon: "times" + } + }); }, addUser() { this.$store.commit("usermanagement/clearCurrentUser"); diff -r 8d025f85a3fe -r c06b001dc26b client/src/store/application.js --- a/client/src/store/application.js Mon Feb 25 08:47:59 2019 +0100 +++ b/client/src/store/application.js Mon Feb 25 13:11:30 2019 +0100 @@ -22,6 +22,7 @@ appTitle: process.env.VUE_APP_TITLE, secondaryLogo: process.env.VUE_APP_SECONDARY_LOGO_URL, logoForPDF: process.env.VUE_APP_LOGO_FOR_PDF_URL, + popup: null, showSidebar: false, showUsermenu: false, showSplitscreen: false, @@ -65,6 +66,9 @@ } }, mutations: { + popup: (state, popup) => { + state.popup = popup; + }, showSidebar: (state, show) => { state.showSidebar = show; },