Mercurial > gemma

comparison client/src/components/importconfiguration/Import.vue @ 2972:6f351e00e579 unified_import

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>