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, {