Mercurial > gemma
diff 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 diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/importschedule/Importscheduledetail.vue Wed Dec 12 09:22:20 2018 +0100 @@ -0,0 +1,146 @@ +<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>