Mercurial > gemma
diff 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 |
line wrap: on
line diff
--- a/client/src/components/importconfiguration/Import.vue Mon Apr 08 09:18:58 2019 +0200 +++ b/client/src/components/importconfiguration/Import.vue Mon Apr 08 15:50:23 2019 +0200 @@ -1,9 +1,245 @@ <template> - <h1>Hello</h1> + <div> + <UIBoxHeader icon="clock" :title="title" /> + <div v-if="mode === $options.MODES.LIST" class="mb-3"> + <UISpinnerOverlay v-if="loading" /> + <UITableHeader + :columns="[ + { id: 'id', title: `${idLabel}`, class: 'col-1' }, + { id: 'kind', title: `${typeLabel}`, class: 'col-2' }, + { id: 'user', title: `${authorLabel}`, class: 'col-2' }, + { id: 'config.cron', title: `${scheduleLabel}`, class: 'col-2' }, + { id: 'config.send-email', title: `${emailLabel}`, class: 'col-2' } + ]" + /> + <UITableBody + :data="filteredSchedules | sortTable(sortColumn, sortDirection)" + :isActive="item => currentSchedule && item.id === currentSchedule.id" + > + <template v-slot:row="{ item: schedule }"> + <div class="table-cell col-1">{{ schedule.id }}</div> + <div class="table-cell col-2"> + {{ schedule.kind.toUpperCase() }} + </div> + <div class="table-cell col-2">{{ schedule.user }}</div> + <div class="table-cell col-2">{{ schedule.config.cron }}</div> + <div class="table-cell col-2"> + <font-awesome-icon + v-if="schedule.config['send-email']" + class="fa-fw mr-2" + fixed-width + icon="check" + /> + </div> + <div class="table-cell col justify-content-end"> + <button + @click="triggerManualImport(schedule.id)" + class="btn btn-xs btn-dark mr-1" + :disabled="importScheduleDetailVisible" + > + <font-awesome-icon icon="play" fixed-width /> + </button> + <button + @click="editSchedule(schedule.id)" + class="btn btn-xs btn-dark mr-1" + :disabled="importScheduleDetailVisible" + > + <font-awesome-icon icon="pencil-alt" fixed-width /> + </button> + <button + @click="deleteSchedule(schedule)" + class="btn btn-xs btn-dark" + :disabled="importScheduleDetailVisible" + > + <font-awesome-icon icon="trash" fixed-width /> + </button> + </div> + </template> + </UITableBody> + </div> + <ImportDetails v-if="mode === $options.MODES.EDIT"></ImportDetails> + <div class="d-flex flex-row-reverse w-100 mb-3"> + <button + :key="1" + v-if="mode === $options.MODES.EDIT" + @click="mode = $options.MODES.LIST" + class="btn btn-warning mr-3" + > + Back + </button> + <button + :key="2" + v-if="mode === $options.MODES.EDIT" + type="submit" + class="shadow-sm btn btn-info submit-button mr-3" + > + <translate>Submit</translate> + </button> + <button + :key="3" + v-if="mode === $options.MODES.LIST" + @click="newConfiguration()" + class="btn btn-info mr-3" + > + <translate>New import</translate> + </button> + <button + v-if="mode === $options.MODES.EDIT && !isOnetime" + @click="triggerManualImport" + type="button" + class="shadow-sm btn btn-outline-info trigger mr-auto ml-3" + > + <font-awesome-icon class="fa-fw mr-2" fixed-width icon="play" /> + <translate>Trigger import</translate> + </button> + </div> + </div> </template> <style></style> <script> -export default {}; +/* This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Thomas Junk <thomas.junk@intevation.de> + * Markus Kottländer <markus.kottlaender@intevation.de> + */ +import { mapState } from "vuex"; +import { displayInfo, displayError } from "@/lib/errors"; +import { HTTP } from "@/lib/http"; +import { + IMPORTTYPES + // IMPORTTYPEKIND, + // initializeCurrentSchedule +} from "@/store/importschedule"; + +export default { + components: { + ImportDetails: () => import("./ImportDetails.vue") + }, + data() { + return { + loading: false, + sortColumn: "", + sortDirection: "", + mode: this.$options.MODES.LIST + }; + }, + methods: { + newConfiguration() { + this.mode = this.$options.MODES.EDIT; + }, + getSchedules() { + this.loading = true; + this.$store + .dispatch("importschedule/loadSchedules") + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }) + .finally(() => { + this.loading = false; + }); + }, + editSchedule(id) { + this.$store + .dispatch("importschedule/loadSchedule", id) + .then(() => { + this.$store.commit("importschedule/setImportScheduleDetailVisible"); + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + }, + triggerManualImport(id) { + HTTP.get("/imports/config/" + id + "/run", { + headers: { "X-Gemma-Auth": localStorage.getItem("token") } + }) + .then(response => { + const { id } = response.data; + displayInfo({ + title: this.$gettext("Imports"), + message: this.$gettext("Manually triggered import: #") + id + }); + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + } + }, + computed: { + ...mapState("application", ["searchQuery"]), + ...mapState("importschedule", [ + "schedules", + "currentSchedule", + "importScheduleDetailVisible" + ]), + isOnetime() { + for (let kind of [ + this.$options.IMPORTTYPES.SOUNDINGRESULTS, + this.$options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS, + this.$options.IMPORTTYPES.WATERWAYPROFILES + ]) { + if (kind === this.currentSchedule.importType) return true; + } + return false; + }, + title() { + return this.$gettext("Imports"); + }, + filteredSchedules() { + return this.schedules.filter(s => { + return (s.id + s.kind) + .toLowerCase() + .includes(this.searchQuery.toLowerCase()); + }); + }, + importScheduleLabel() { + return this.$gettext("Import Schedule"); + }, + idLabel() { + return this.$gettext("ID"); + }, + typeLabel() { + return this.$gettext("Type"); + }, + authorLabel() { + return this.$gettext("Author"); + }, + scheduleLabel() { + return this.$gettext("Schedule"); + }, + emailLabel() { + return this.$gettext("Email"); + } + }, + mounted() { + this.getSchedules(); + }, + MODES: { + LIST: "list", + EDIT: "edit" + }, + IMPORTTYPES: IMPORTTYPES +}; </script>