Mercurial > gemma
view client/src/components/importschedule/Importschedule.vue @ 1965:f845236e76bd
Translated using Weblate (Bulgarian)
Currently translated at 2.7% (6 of 221 strings)
Translation: Gemma/client
Translate-URL: https://hosted.weblate.org/projects/gemma/client/bg/
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 23 Jan 2019 09:38:17 +0000 |
parents | b43ee5f73c05 |
children | 431f97fd873b |
line wrap: on
line source
<template> <div class="d-flex flex-row"> <Spacer></Spacer> <div class="mt-3 w-100"> <div class="card flex-grow-1 schedulecard shadow-xs"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center" > <font-awesome-icon icon="clock" class="mr-2"></font-awesome-icon> <translate class="headline">Imports</translate> </h6> <div class="card-body schedulecardbody"> <div class="card-body schedulecardbody"> <div class="searchandfilter mb-3 w-50 d-flex flex-row"> <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> <table v-if="schedules.length" class="table"> <thead> <tr> <th><translate>Import</translate></th> <th><translate>Type</translate></th> <th><translate>Author</translate></th> <th><translate>Schedule</translate></th> <th><translate>Email</translate></th> <th> </th> <th> </th> <th> </th> </tr> </thead> <tbody> <tr v-for="schedule in schedules" :key="schedule.id"> <td>{{ schedule.id }}</td> <td>{{ schedule.kind.toUpperCase() }}</td> <td>{{ schedule.user }}</td> <td>{{ schedule.cron }}</td> <td> <font-awesome-icon v-if="schedule['send-email']" class="fa-fw mr-2" fixed-width icon="check" ></font-awesome-icon> </td> <td> <font-awesome-icon :style="activeStyle" @click="editSchedule(schedule.id)" icon="pencil-alt" fixed-width ></font-awesome-icon> </td> <td> <font-awesome-icon :style="activeStyle" @click="deleteSchedule(schedule.id)" icon="trash" fixed-width ></font-awesome-icon> </td> <td> <font-awesome-icon @click="triggerManualImport(schedule.id)" class="fa-fw mr-2" fixed-width icon="play" ></font-awesome-icon> </td> </tr> </tbody> </table> <div v-else class="mt-4 small text-center py-3"> <translate>No scheduled imports</translate> </div> <div class="text-right"> <button :disabled="importScheduleDetailVisible" @click="newImport" class="btn btn-info newbutton" > <translate>New Import</translate> </button> </div> </div> </div> </div> </div> <Importscheduledetail></Importscheduledetail> </div> </template> <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> */ import { mapState } from "vuex"; import { HTTP } from "@/lib/http"; import { displayInfo, displayError } from "@/lib/errors.js"; export default { name: "importschedule", components: { Importscheduledetail: () => import("./Importscheduledetail"), Spacer: () => import("@/components/Spacer") }, data() { return { searchQuery: "" }; }, mounted() { this.getSchedules(); }, methods: { editSchedule(id) { this.$store .dispatch("imports/loadSchedule", id) .then(() => { this.$store.commit("imports/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("imports/loadSchedules").catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); }, newImport() { this.$store.commit("imports/setImportScheduleDetailVisible"); }, deleteSchedule(index) { if (this.importScheduleDetailVisible) return; this.$store .dispatch("imports/deleteSchedule", index) .then(() => { this.getSchedules(); displayInfo({ title: this.$gettext("Imports"), message: this.$gettext("Deleted import: #") + index }); }) .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); } }, computed: { ...mapState("application", ["showSidebar"]), ...mapState("imports", ["schedules", "importScheduleDetailVisible"]), activeStyle() { const color = this.importScheduleDetailVisible ? "#aeaeae" : "#000000"; return { color: color }; }, spacerStyle() { return [ "spacer ml-3", { "spacer-expanded": this.showSidebar, "spacer-collapsed": !this.showSidebar } ]; } } }; </script> <style lang="scss" scoped> th { border-top: 0px; } .card-body { padding-bottom: $small-offset; } .schedulecard { margin-right: $offset; min-height: 20rem; } .schedulecard-body { width: 100%; margin-left: auto; margin-right: auto; } </style>