Mercurial > gemma
comparison 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 |
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> |