Mercurial > gemma
view client/src/components/importschedule/Importscheduledetail.vue @ 1558:0ded4c56978e
refac: component filestructure. remove admin/map hierarchy
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 12 Dec 2018 09:22:20 +0100 |
parents | client/src/components/admin/importschedule/Importscheduledetail.vue@31c6c7bd6190 |
children | faa045ebdf0c |
line wrap: on
line source
<template> <div class="importscheduledetails fadeIn animated" v-if="importScheduleDetailVisible" > <div class="card h-100 shadow-xs"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center" > <translate>New import</translate> <span @click="closeDetailview" class="closebutton"> <font-awesome-icon icon="times"></font-awesome-icon> </span> </h6> <div class="card-body"> <form @submit.prevent="save" class="ml-3"> <div class="d-flex flex-row w-100"> <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Imports</translate> </small> </div> <select v-model="import_" class="custom-select" id="import_"> <option v-for="option in this.$options.imports" :key="option">{{ option }}</option> </select> </div> </div> <div class="d-flex flex-row mt-3 w-100 justify-content-between"> <div class="flex-column w-100 mr-2"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Importtype</translate> </small> </div> <select v-model="import_" class="custom-select" id="importtype"> <option v-for="option in this.$options.importtype" :key="option" >{{ option }}</option > </select> </div> <div class="flex-column w-100 ml-2"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Schedule</translate> </small> </div> <select v-model="schedule" class="custom-select" id="period"> <option v-for="option in this.$options.periods" :key="option">{{ option }}</option> </select> </div> </div> <div class="flex-column mt-3 w-100 mr-2"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Email Notification</translate> </small> </div> <div class="flex-flex-row text-left"> <toggle-button v-model="eMailNotification" class="mt-2" :speed="100" :labels="{ checked: this.$options.on, unchecked: this.$options.off }" :width="50" :height="20" /> </div> </div> <div v-if="eMailNotification" class="flex-column w-100 mr-2"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Email</translate> </small> </div> <input class="form-control" type="text" /> </div> <button type="submit" class="shadow-sm btn btn-info submit-button"> <translate>Submit</translate> </button> </form> </div> </div> </div> </template> <script> import { mapState } from "vuex"; import { displayInfo } from "../../lib/errors.js"; export default { name: "importscheduledetail", data() { return { schedule: null, import_: null, eMailNotification: false }; }, computed: { ...mapState("imports", ["importScheduleDetailVisible"]) }, methods: { save() { displayInfo({ title: "Import", message: "under construction" }); }, closeDetailview() { this.$store.commit("imports/clearImportScheduleDetail"); this.$store.commit("imports/setImportScheduleDetailInvisible"); } }, imports: [], importtype: [], on: "on", off: "off", periods: { DAILY: "daily", MONTHLY: "monthly" } }; </script> <style lang="scss" scoped> .importscheduledetails { height: 420px; width: 45%; margin-top: $offset; margin-right: $offset; } .submit-button { position: absolute; right: $offset; bottom: $offset; } </style>