Mercurial > gemma
comparison client/src/components/importconfiguration/Import.vue @ 2972:6f351e00e579 unified_import
unified_imports: initial layout etd
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 08 Apr 2019 15:50:23 +0200 |
parents | 8b32574bed09 |
children | e161e1ffb6b5 |
comparison
equal
deleted
inserted
replaced
2971:7a51fdfead2d | 2972:6f351e00e579 |
---|---|
1 <template> | 1 <template> |
2 <h1>Hello</h1> | 2 <div> |
3 <UIBoxHeader icon="clock" :title="title" /> | |
4 <div v-if="mode === $options.MODES.LIST" class="mb-3"> | |
5 <UISpinnerOverlay v-if="loading" /> | |
6 <UITableHeader | |
7 :columns="[ | |
8 { id: 'id', title: `${idLabel}`, class: 'col-1' }, | |
9 { id: 'kind', title: `${typeLabel}`, class: 'col-2' }, | |
10 { id: 'user', title: `${authorLabel}`, class: 'col-2' }, | |
11 { id: 'config.cron', title: `${scheduleLabel}`, class: 'col-2' }, | |
12 { id: 'config.send-email', title: `${emailLabel}`, class: 'col-2' } | |
13 ]" | |
14 /> | |
15 <UITableBody | |
16 :data="filteredSchedules | sortTable(sortColumn, sortDirection)" | |
17 :isActive="item => currentSchedule && item.id === currentSchedule.id" | |
18 > | |
19 <template v-slot:row="{ item: schedule }"> | |
20 <div class="table-cell col-1">{{ schedule.id }}</div> | |
21 <div class="table-cell col-2"> | |
22 {{ schedule.kind.toUpperCase() }} | |
23 </div> | |
24 <div class="table-cell col-2">{{ schedule.user }}</div> | |
25 <div class="table-cell col-2">{{ schedule.config.cron }}</div> | |
26 <div class="table-cell col-2"> | |
27 <font-awesome-icon | |
28 v-if="schedule.config['send-email']" | |
29 class="fa-fw mr-2" | |
30 fixed-width | |
31 icon="check" | |
32 /> | |
33 </div> | |
34 <div class="table-cell col justify-content-end"> | |
35 <button | |
36 @click="triggerManualImport(schedule.id)" | |
37 class="btn btn-xs btn-dark mr-1" | |
38 :disabled="importScheduleDetailVisible" | |
39 > | |
40 <font-awesome-icon icon="play" fixed-width /> | |
41 </button> | |
42 <button | |
43 @click="editSchedule(schedule.id)" | |
44 class="btn btn-xs btn-dark mr-1" | |
45 :disabled="importScheduleDetailVisible" | |
46 > | |
47 <font-awesome-icon icon="pencil-alt" fixed-width /> | |
48 </button> | |
49 <button | |
50 @click="deleteSchedule(schedule)" | |
51 class="btn btn-xs btn-dark" | |
52 :disabled="importScheduleDetailVisible" | |
53 > | |
54 <font-awesome-icon icon="trash" fixed-width /> | |
55 </button> | |
56 </div> | |
57 </template> | |
58 </UITableBody> | |
59 </div> | |
60 <ImportDetails v-if="mode === $options.MODES.EDIT"></ImportDetails> | |
61 <div class="d-flex flex-row-reverse w-100 mb-3"> | |
62 <button | |
63 :key="1" | |
64 v-if="mode === $options.MODES.EDIT" | |
65 @click="mode = $options.MODES.LIST" | |
66 class="btn btn-warning mr-3" | |
67 > | |
68 Back | |
69 </button> | |
70 <button | |
71 :key="2" | |
72 v-if="mode === $options.MODES.EDIT" | |
73 type="submit" | |
74 class="shadow-sm btn btn-info submit-button mr-3" | |
75 > | |
76 <translate>Submit</translate> | |
77 </button> | |
78 <button | |
79 :key="3" | |
80 v-if="mode === $options.MODES.LIST" | |
81 @click="newConfiguration()" | |
82 class="btn btn-info mr-3" | |
83 > | |
84 <translate>New import</translate> | |
85 </button> | |
86 <button | |
87 v-if="mode === $options.MODES.EDIT && !isOnetime" | |
88 @click="triggerManualImport" | |
89 type="button" | |
90 class="shadow-sm btn btn-outline-info trigger mr-auto ml-3" | |
91 > | |
92 <font-awesome-icon class="fa-fw mr-2" fixed-width icon="play" /> | |
93 <translate>Trigger import</translate> | |
94 </button> | |
95 </div> | |
96 </div> | |
3 </template> | 97 </template> |
4 | 98 |
5 <style></style> | 99 <style></style> |
6 | 100 |
7 <script> | 101 <script> |
8 export default {}; | 102 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
103 * without warranty, see README.md and license for details. | |
104 * | |
105 * SPDX-License-Identifier: AGPL-3.0-or-later | |
106 * License-Filename: LICENSES/AGPL-3.0.txt | |
107 * | |
108 * Copyright (C) 2018 by via donau | |
109 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
110 * Software engineering by Intevation GmbH | |
111 * | |
112 * Author(s): | |
113 * Thomas Junk <thomas.junk@intevation.de> | |
114 * Markus Kottländer <markus.kottlaender@intevation.de> | |
115 */ | |
116 import { mapState } from "vuex"; | |
117 import { displayInfo, displayError } from "@/lib/errors"; | |
118 import { HTTP } from "@/lib/http"; | |
119 import { | |
120 IMPORTTYPES | |
121 // IMPORTTYPEKIND, | |
122 // initializeCurrentSchedule | |
123 } from "@/store/importschedule"; | |
124 | |
125 export default { | |
126 components: { | |
127 ImportDetails: () => import("./ImportDetails.vue") | |
128 }, | |
129 data() { | |
130 return { | |
131 loading: false, | |
132 sortColumn: "", | |
133 sortDirection: "", | |
134 mode: this.$options.MODES.LIST | |
135 }; | |
136 }, | |
137 methods: { | |
138 newConfiguration() { | |
139 this.mode = this.$options.MODES.EDIT; | |
140 }, | |
141 getSchedules() { | |
142 this.loading = true; | |
143 this.$store | |
144 .dispatch("importschedule/loadSchedules") | |
145 .catch(error => { | |
146 const { status, data } = error.response; | |
147 displayError({ | |
148 title: this.$gettext("Backend Error"), | |
149 message: `${status}: ${data.message || data}` | |
150 }); | |
151 }) | |
152 .finally(() => { | |
153 this.loading = false; | |
154 }); | |
155 }, | |
156 editSchedule(id) { | |
157 this.$store | |
158 .dispatch("importschedule/loadSchedule", id) | |
159 .then(() => { | |
160 this.$store.commit("importschedule/setImportScheduleDetailVisible"); | |
161 }) | |
162 .catch(error => { | |
163 const { status, data } = error.response; | |
164 displayError({ | |
165 title: this.$gettext("Backend Error"), | |
166 message: `${status}: ${data.message || data}` | |
167 }); | |
168 }); | |
169 }, | |
170 triggerManualImport(id) { | |
171 HTTP.get("/imports/config/" + id + "/run", { | |
172 headers: { "X-Gemma-Auth": localStorage.getItem("token") } | |
173 }) | |
174 .then(response => { | |
175 const { id } = response.data; | |
176 displayInfo({ | |
177 title: this.$gettext("Imports"), | |
178 message: this.$gettext("Manually triggered import: #") + id | |
179 }); | |
180 }) | |
181 .catch(error => { | |
182 const { status, data } = error.response; | |
183 displayError({ | |
184 title: this.$gettext("Backend Error"), | |
185 message: `${status}: ${data.message || data}` | |
186 }); | |
187 }); | |
188 } | |
189 }, | |
190 computed: { | |
191 ...mapState("application", ["searchQuery"]), | |
192 ...mapState("importschedule", [ | |
193 "schedules", | |
194 "currentSchedule", | |
195 "importScheduleDetailVisible" | |
196 ]), | |
197 isOnetime() { | |
198 for (let kind of [ | |
199 this.$options.IMPORTTYPES.SOUNDINGRESULTS, | |
200 this.$options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS, | |
201 this.$options.IMPORTTYPES.WATERWAYPROFILES | |
202 ]) { | |
203 if (kind === this.currentSchedule.importType) return true; | |
204 } | |
205 return false; | |
206 }, | |
207 title() { | |
208 return this.$gettext("Imports"); | |
209 }, | |
210 filteredSchedules() { | |
211 return this.schedules.filter(s => { | |
212 return (s.id + s.kind) | |
213 .toLowerCase() | |
214 .includes(this.searchQuery.toLowerCase()); | |
215 }); | |
216 }, | |
217 importScheduleLabel() { | |
218 return this.$gettext("Import Schedule"); | |
219 }, | |
220 idLabel() { | |
221 return this.$gettext("ID"); | |
222 }, | |
223 typeLabel() { | |
224 return this.$gettext("Type"); | |
225 }, | |
226 authorLabel() { | |
227 return this.$gettext("Author"); | |
228 }, | |
229 scheduleLabel() { | |
230 return this.$gettext("Schedule"); | |
231 }, | |
232 emailLabel() { | |
233 return this.$gettext("Email"); | |
234 } | |
235 }, | |
236 mounted() { | |
237 this.getSchedules(); | |
238 }, | |
239 MODES: { | |
240 LIST: "list", | |
241 EDIT: "edit" | |
242 }, | |
243 IMPORTTYPES: IMPORTTYPES | |
244 }; | |
9 </script> | 245 </script> |