Mercurial > gemma
view client/src/components/importschedule/Importschedule.vue @ 2800:db1052bc162a
Added GET /data/longterm-waterlevels/{gauge}
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Mon, 25 Mar 2019 17:31:56 +0100 |
parents | 615b0a9b8098 |
children | b9a6abef9f1c |
line wrap: on
line source
<template> <div class="d-flex flex-row"> <Spacer></Spacer> <div class="mt-2 w-100"> <div class="card flex-grow-1 schedulecard shadow-xs"> <UIBoxHeader icon="clock" :title="importScheduleLabel" /> <div class="searchandfilter p-3 w-50 mx-auto"> <div class="searchgroup input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="search"> <font-awesome-icon icon="search"></font-awesome-icon> </span> </div> <input v-model="searchQuery" type="text" class="form-control" placeholder aria-label="Search" aria-describedby="search" /> </div> </div> <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)" v-slot="{ item: schedule }" > <div class="py-1 col-1">{{ schedule.id }}</div> <div class="py-1 col-2">{{ schedule.kind.toUpperCase() }}</div> <div class="py-1 col-2">{{ schedule.user }}</div> <div class="py-1 col-2">{{ schedule.config.cron }}</div> <div class="py-1 col-2 text-center"> <font-awesome-icon v-if="schedule.config['send-email']" class="fa-fw mr-2" fixed-width icon="check" ></font-awesome-icon> </div> <div class="py-1 col text-right"> <button @click="editSchedule(schedule.id)" class="btn btn-xs btn-dark mr-1" :disabled="importScheduleDetailVisible" > <font-awesome-icon icon="pencil-alt" fixed-width ></font-awesome-icon> </button> <button @click="deleteSchedule(schedule)" class="btn btn-xs btn-dark mr-1" :disabled="importScheduleDetailVisible" > <font-awesome-icon icon="trash" fixed-width></font-awesome-icon> </button> <button @click="triggerManualImport(schedule.id)" class="btn btn-xs btn-dark" :disabled="importScheduleDetailVisible" > <font-awesome-icon icon="play" fixed-width></font-awesome-icon> </button> </div> </UITableBody> <div class="p-3 text-right"> <button :disabled="importScheduleDetailVisible" @click="newImport" class="btn btn-info newbutton" > <translate>New Import</translate> </button> </div> </div> </div> <Importscheduledetail></Importscheduledetail> </div> </template> <style lang="sass" scoped> th border-top: 0px .card-body padding-bottom: $small-offset .schedulecard margin-right: $small-offset min-height: 20rem .schedulecard-body width: 100% margin-left: auto margin-right: auto </style> <script> /* 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 { HTTP } from "@/lib/http"; import { displayInfo, displayError } from "@/lib/errors"; import { sortTable } from "@/lib/mixins"; export default { name: "importschedule", mixins: [sortTable], components: { Importscheduledetail: () => import("./Importscheduledetail"), Spacer: () => import("@/components/Spacer") }, data() { return { searchQuery: "" }; }, computed: { ...mapState("application", ["showSidebar"]), ...mapState("importschedule", ["schedules", "importScheduleDetailVisible"]), 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"); }, spacerStyle() { return [ "spacer ml-3", { "spacer-expanded": this.showSidebar, "spacer-collapsed": !this.showSidebar } ]; } }, methods: { filteredSchedules() { return this.schedules.filter(s => { return (s.id + s.kind) .toLowerCase() .includes(this.searchQuery.toLowerCase()); }); }, 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}` }); }); }, getSchedules() { this.$store.dispatch("importschedule/loadSchedules").catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); }, newImport() { this.$store.commit("importschedule/setImportScheduleDetailVisible"); }, deleteSchedule(schedule) { console.log(schedule); this.$store.commit("application/popup", { icon: "trash", title: this.$gettext("Delete Import"), content: this.$gettext("Do you really want to delete the import with ID") + `<b>${schedule.id}</b>` + this.$gettext("of type") + `<b>${schedule.kind.toUpperCase()}</b>?`, confirm: { label: this.$gettext("Delete"), icon: "trash", callback: () => { this.$store .dispatch("importschedule/deleteSchedule", schedule.id) .then(() => { this.getSchedules(); displayInfo({ title: this.$gettext("Imports"), message: this.$gettext("Deleted import: #") + schedule.id }); }) .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" } }); } }, mounted() { this.getSchedules(); } }; </script>