comparison client/src/components/importoverview/ImportOverviewAlt.vue @ 2626:50cc5bffd787

client: importoverview2: implemented Finish Review (confirm) dialog
author Markus Kottlaender <markus@intevation.de>
date Wed, 13 Mar 2019 16:26:14 +0100
parents eb1ec926ff97
children 0b14de0bb85f
comparison
equal deleted inserted replaced
2625:fd93babdf8e6 2626:50cc5bffd787
10 <div> 10 <div>
11 <button class="btn btn-sm btn-info mr-1" @click="loadLogs()"> 11 <button class="btn btn-sm btn-info mr-1" @click="loadLogs()">
12 <font-awesome-icon icon="spinner" spin v-if="loading" /> 12 <font-awesome-icon icon="spinner" spin v-if="loading" />
13 <font-awesome-icon icon="redo" v-else /> 13 <font-awesome-icon icon="redo" v-else />
14 </button> 14 </button>
15 <button class="btn btn-sm btn-info" :disabled="!reviewed.length"> 15 <button
16 class="btn btn-sm btn-info"
17 :disabled="!reviewed.length"
18 @click="save"
19 >
16 <translate>Commit</translate> {{ reviewed.length }} 20 <translate>Commit</translate> {{ reviewed.length }}
17 </button> 21 </button>
18 </div> 22 </div>
19 </div> 23 </div>
20 <LogEntry 24 <LogEntry
39 * 43 *
40 * Author(s): 44 * Author(s):
41 * Thomas Junk <thomas.junk@intevation.de> 45 * Thomas Junk <thomas.junk@intevation.de>
42 */ 46 */
43 47
44 import { displayError } from "@/lib/errors.js";
45 import { mapState } from "vuex"; 48 import { mapState } from "vuex";
49 import { displayError, displayInfo } from "@/lib/errors.js";
50 import { STATES } from "@/store/imports.js";
46 51
47 export default { 52 export default {
48 name: "importoverviewalt", 53 name: "importoverviewalt",
49 components: { 54 components: {
50 Filters: () => import("./Filters.vue"), 55 Filters: () => import("./Filters.vue"),
71 displayError({ 76 displayError({
72 title: this.$gettext("Backend Error"), 77 title: this.$gettext("Backend Error"),
73 message: `${status}: ${data.message || data}` 78 message: `${status}: ${data.message || data}`
74 }); 79 });
75 }); 80 });
81 },
82 save() {
83 if (!this.reviewed.length) return;
84
85 let popupContent = `<table class="table table-sm small mb-0 border-0" style="margin-top: -1px;">`;
86 this.reviewed.forEach(r => {
87 let imp = this.imports.find(i => i.id === r.id);
88 let approved = STATES.APPROVED === r.status;
89 popupContent += `<tr>
90 <td>${imp.id}</td>
91 <td>${imp.kind.toUpperCase()}</td>
92 <td>${this.$options.filters.dateTime(imp.enqueued)}</td>
93 <td class="text-${approved ? "success" : "danger"}">
94 ${this.$gettext(approved ? "approved" : "declined")}
95 </td>
96 </tr>`;
97 });
98 popupContent += "</table>";
99
100 this.$store.commit("application/popup", {
101 icon: "clipboard-check",
102 title: this.$gettext("Finish Review"),
103 padding: false,
104 big: true,
105 content: popupContent,
106 confirm: {
107 icon: "check",
108 callback: () => {
109 let data = this.reviewed.map(r => ({
110 id: r.id,
111 state: r.status
112 }));
113 this.$store
114 .dispatch("imports/confirmReview", data)
115 .then(response => {
116 this.loadLogs();
117 const messages = response.data
118 .map(x => {
119 if (x.message) return x.message;
120 if (x.error) return x.error;
121 })
122 .join("\n\n");
123 displayInfo({
124 title: "Staging Area",
125 message: messages,
126 options: {
127 timeout: 0,
128 buttons: [{ text: "Ok", action: null, bold: true }]
129 }
130 });
131 })
132 .catch(error => {
133 const { status, data } = error.response;
134 displayError({
135 title: "Backend Error",
136 message: `${status}: ${data.message || data}`
137 });
138 });
139 }
140 },
141 cancel: {
142 label: this.$gettext("Cancel"),
143 icon: "times"
144 }
145 });
76 } 146 }
77 }, 147 },
78 watch: { 148 watch: {
79 filters() { 149 filters() {
80 this.$store.dispatch("imports/getImports", this.filters); 150 this.$store.dispatch("imports/getImports", this.filters);