# HG changeset patch # User Markus Kottlaender # Date 1554217687 -7200 # Node ID 2821113846a9e1c4bbaf9e792b1d53471182db2f # Parent ab0a829735f607b19803e67441d98cfd9fb5a05d client: import stretches: added spinner overlay when loading diff -r ab0a829735f6 -r 2821113846a9 client/src/components/ImportStretches.vue --- a/client/src/components/ImportStretches.vue Tue Apr 02 16:55:55 2019 +0200 +++ b/client/src/components/ImportStretches.vue Tue Apr 02 17:08:07 2019 +0200 @@ -5,263 +5,281 @@ :title="defineStretchesLabel" :closeCallback="$parent.close" /> -
- - - - -
-
-
-
-
- ID - - - - Please enter an id - - -
-
-
- - Countrycode - +
+ +
+ + + + +
+
+
+
+
+ ID - - Please enter a countrycode + + Please enter an id + + +
+
+
+ + Countrycode + + + + + Please enter a countrycode + + +
+
+
+
+
+
+ + Start rhm + +
+ + + + +
+ + + Please enter a start point
-
-
-
-
-
- Start rhm -
- - - +
+ End rhm +
+ + + + +
+ + + Please enter an end point +
- - - Please enter a start point - -
-
- End rhm -
+
+
+ + Tolerance for snapping of waterway axis [m] + + + + Please enter a tolerance value + + +
+
+
+
+ + Object name + + - - + + + Please enter an objectname +
- - - Please enter an end point +
+ + National Object name - + +
-
-
-
- - Tolerance for snapping of waterway axis [m] - - - - - Please enter a tolerance value +
+
+ + Date info - + + + + Please enter a date + + +
+
+ Source + + + + Please enter a source + + +
-
-
- - Object name - - - - - Please enter an objectname - - -
-
- - National Object name - - -
-
-
-
- Date info - - - - Please enter a date - - -
-
- Source - - - - Please enter a source - - -
+
+ +
-
- -
-
- -
@@ -316,7 +334,8 @@ nobjbnError: false, date_infoError: false, sourceError: false, - countryCodeError: false + countryCodeError: false, + loading: false }; }, computed: { @@ -597,13 +616,17 @@ }, mounted() { this.edit = false; - this.$store.dispatch("imports/loadStretches").catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); + this.loading = true; + this.$store + .dispatch("imports/loadStretches") + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }) + .finally(() => (this.loading = false)); this.loadStagingData().catch(error => { const { status, data } = error.response; displayError({