Mercurial > gemma

comparison client/src/components/importschedule/Importscheduledetail.vue @ 1558:0ded4c56978e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
1557:62171cd9a42b 1558:0ded4c56978e
1 <template>
2 <div
3 class="importscheduledetails fadeIn animated"
4 v-if="importScheduleDetailVisible"
5 >
6 <div class="card h-100 shadow-xs">
7 <h6
8 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
9 >
10 <translate>New import</translate>
11 <span @click="closeDetailview" class="closebutton">
12 <font-awesome-icon icon="times"></font-awesome-icon>
13 </span>
14 </h6>
15 <div class="card-body">
16 <form @submit.prevent="save" class="ml-3">
17 <div class="d-flex flex-row w-100">
18 <div class="flex-column w-100">
19 <div class="flex-row text-left">
20 <small class="text-muted">
21 <translate>Imports</translate>
22 </small>
23 </div>
24 <select v-model="import_" class="custom-select" id="import_">
25 <option v-for="option in this.$options.imports" :key="option">{{
26 option
27 }}</option>
28 </select>
29 </div>
30 </div>
31 <div class="d-flex flex-row mt-3 w-100 justify-content-between">
32 <div class="flex-column w-100 mr-2">
33 <div class="flex-row text-left">
34 <small class="text-muted">
35 <translate>Importtype</translate>
36 </small>
37 </div>
38 <select v-model="import_" class="custom-select" id="importtype">
39 <option
40 v-for="option in this.$options.importtype"
41 :key="option"
42 >{{ option }}</option
43 >
44 </select>
45 </div>
46 <div class="flex-column w-100 ml-2">
47 <div class="flex-row text-left">
48 <small class="text-muted">
49 <translate>Schedule</translate>
50 </small>
51 </div>
52 <select v-model="schedule" class="custom-select" id="period">
53 <option v-for="option in this.$options.periods" :key="option">{{
54 option
55 }}</option>
56 </select>
57 </div>
58 </div>
59 <div class="flex-column mt-3 w-100 mr-2">
60 <div class="flex-row text-left">
61 <small class="text-muted">
62 <translate>Email Notification</translate>
63 </small>
64 </div>
65 <div class="flex-flex-row text-left">
66 <toggle-button
67 v-model="eMailNotification"
68 class="mt-2"
69 :speed="100"
70 :labels="{
71 checked: this.$options.on,
72 unchecked: this.$options.off
73 }"
74 :width="50"
75 :height="20"
76 />
77 </div>
78 </div>
79 <div v-if="eMailNotification" class="flex-column w-100 mr-2">
80 <div class="flex-row text-left">
81 <small class="text-muted"> <translate>Email</translate> </small>
82 </div>
83 <input class="form-control" type="text" />
84 </div>
85 <button type="submit" class="shadow-sm btn btn-info submit-button">
86 <translate>Submit</translate>
87 </button>
88 </form>
89 </div>
90 </div>
91 </div>
92 </template>
93
94 <script>
95 import { mapState } from "vuex";
96 import { displayInfo } from "../../lib/errors.js";
97
98 export default {
99 name: "importscheduledetail",
100 data() {
101 return {
102 schedule: null,
103 import_: null,
104 eMailNotification: false
105 };
106 },
107 computed: {
108 ...mapState("imports", ["importScheduleDetailVisible"])
109 },
110 methods: {
111 save() {
112 displayInfo({
113 title: "Import",
114 message: "under construction"
115 });
116 },
117 closeDetailview() {
118 this.$store.commit("imports/clearImportScheduleDetail");
119 this.$store.commit("imports/setImportScheduleDetailInvisible");
120 }
121 },
122 imports: [],
123 importtype: [],
124 on: "on",
125 off: "off",
126 periods: {
127 DAILY: "daily",
128 MONTHLY: "monthly"
129 }
130 };
131 </script>
132
133 <style lang="scss" scoped>
134 .importscheduledetails {
135 height: 420px;
136 width: 45%;
137 margin-top: $offset;
138 margin-right: $offset;
139 }
140
141 .submit-button {
142 position: absolute;
143 right: $offset;
144 bottom: $offset;
145 }
146 </style>