Mercurial > gemma
comparison client/src/components/ImportSoundingresults.vue @ 2349:2e57fd9b4f3a
client: imports: removed upload button from soundingresults import and trigger upload automatically
Before, you needed to click Upload after selecting a file. This extra click is not necessary any more,
reducing confusion and making the UI more intuitive. Maybe this can be done in other places too.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 20 Feb 2019 10:58:00 +0100 |
parents | b2de7a77b570 |
children | f185503ef35a |
comparison
equal
deleted
inserted
replaced
2348:7cdc211b90cd | 2349:2e57fd9b4f3a |
---|---|
107 <label class="pointer custom-file-label" for="uploadFile"> | 107 <label class="pointer custom-file-label" for="uploadFile"> |
108 {{ uploadLabel }} | 108 {{ uploadLabel }} |
109 </label> | 109 </label> |
110 </div> | 110 </div> |
111 </div> | 111 </div> |
112 <div class="buttons text-right"> | 112 <div class="buttons text-right" v-if="editState"> |
113 <a | 113 <a |
114 v-if="editState" | |
115 download="meta.json" | 114 download="meta.json" |
116 :href="dataLink" | 115 :href="dataLink" |
117 class="btn btn-outline-info pull-left mt-4" | 116 class="btn btn-outline-info pull-left mt-4" |
118 > | 117 > |
119 <translate>Download Meta.json</translate> | 118 <translate>Download Meta.json</translate> |
120 </a> | 119 </a> |
121 <button | 120 <button |
122 v-if="editState" | |
123 @click="deleteTempData" | 121 @click="deleteTempData" |
124 class="btn btn-danger mt-4" | 122 class="btn btn-danger mt-4" |
125 type="button" | 123 type="button" |
126 > | 124 > |
127 <translate>Cancel Upload</translate> | 125 <translate>Cancel Upload</translate> |
128 </button> | 126 </button> |
129 <button | 127 <button |
130 :disabled="disableUploadButton" | 128 :disabled="disableUploadButton" |
131 @click="submit" | 129 @click="confirm" |
132 class="btn btn-info mt-4" | 130 class="btn btn-info mt-4" |
133 type="button" | 131 type="button" |
134 > | 132 > |
135 {{ uploadState ? Upload : Confirm }} | 133 <translate>Confirm</translate> |
136 </button> | 134 </button> |
137 </div> | 135 </div> |
138 </div> | 136 </div> |
139 </div> | 137 </div> |
140 </div> | 138 </div> |
198 fileSelected(e) { | 196 fileSelected(e) { |
199 const files = e.target.files || e.dataTransfer.files; | 197 const files = e.target.files || e.dataTransfer.files; |
200 if (!files) return; | 198 if (!files) return; |
201 this.uploadLabel = files[0].name; | 199 this.uploadLabel = files[0].name; |
202 this.uploadFile = files[0]; | 200 this.uploadFile = files[0]; |
201 this.upload(); | |
203 }, | 202 }, |
204 deleteTempData() { | 203 deleteTempData() { |
205 HTTP.delete("/imports/sr-upload/" + this.token, { | 204 HTTP.delete("/imports/sr-upload/" + this.token, { |
206 headers: { | 205 headers: { |
207 "X-Gemma-Auth": localStorage.getItem("token") | 206 "X-Gemma-Auth": localStorage.getItem("token") |
215 displayError({ | 214 displayError({ |
216 title: this.$gettext("Backend Error"), | 215 title: this.$gettext("Backend Error"), |
217 message: `${status}: ${data.message || data}` | 216 message: `${status}: ${data.message || data}` |
218 }); | 217 }); |
219 }); | 218 }); |
220 }, | |
221 submit() { | |
222 if (!this.uploadFile || this.disableUpload) return; | |
223 if (this.importState === IMPORTSTATE.UPLOAD) { | |
224 this.upload(); | |
225 } else { | |
226 this.confirm(); | |
227 } | |
228 }, | 219 }, |
229 upload() { | 220 upload() { |
230 let formData = new FormData(); | 221 let formData = new FormData(); |
231 formData.append("soundingresult", this.uploadFile); | 222 formData.append("soundingresult", this.uploadFile); |
232 HTTP.post("/imports/sr-upload", formData, { | 223 HTTP.post("/imports/sr-upload", formData, { |