Mercurial > gemma
changeset 2908:2821113846a9
client: import stretches: added spinner overlay when loading
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 02 Apr 2019 17:08:07 +0200 |
parents | ab0a829735f6 |
children | 5105f6ad0176 |
files | client/src/components/ImportStretches.vue |
diffstat | 1 files changed, 260 insertions(+), 237 deletions(-) [+] |
line wrap: on
line diff
--- 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" /> - <div v-if="!edit" class="mb-3"> - <UITableHeader - :columns="[ - { id: 'properties.name', title: `${nameLabel}`, class: 'col-4' }, - { id: 'properties.date_info', title: `${dateLabel}`, class: 'col-2' }, - { - id: 'properties.source_organization', - title: `${sourceorganizationLabel}`, - class: 'col-3' - } - ]" - /> - <UITableBody - :data="filteredStretches() | sortTable(sortColumn, sortDirection)" - > - <template v-slot:row="{ item: stretch }"> - <div class="py-1 col-4 "> - <a - class="linkto text-info" - v-if="isInStaging(stretch.properties.name)" - @click="gotoStaging(getStagingLink(stretch.properties.name))" - > - {{ stretch.properties.name - }}<font-awesome-icon - class="ml-1 text-danger" - icon="exclamation-triangle" - fixed-width - ></font-awesome-icon - ><small class="ml-1">review</small> - </a> - <a v-else @click="moveMapToStretch(stretch)" href="#">{{ - stretch.properties.name - }}</a> - </div> - <div class="py-1 col-2"> - {{ stretch.properties.date_info | surveyDate }} - </div> - <div class="py-1 col-3"> - {{ stretch.properties.source_organization }} - </div> - <div class="py-1 col text-right"> - <button - class="btn btn-xs btn-dark mr-1" - @click="editStretch(stretch)" - > - <font-awesome-icon icon="pencil-alt" fixed-width /> - </button> - <button class="btn btn-xs btn-dark" @click="deleteStretch(stretch)"> - <font-awesome-icon icon="trash" fixed-width /> - </button> - </div> - </template> - </UITableBody> - </div> - <div v-if="edit"> - <div class="ml-3 mr-3"> - <div class="d-flex flex-row justify-content-between"> - <div class="mt-2 w-50 mr-2 text-left"> - <small class="text-muted"> <translate>ID</translate> </small> - <input - id="id" - type="text" - class="form-control" - placeholder="AT_Section_12" - aria-label="id" - v-model="id" - :disabled="editExistingStretch" - /> - <span class="text-left text-danger"> - <small v-if="idError && !id"> - <translate>Please enter an id</translate> - </small> - </span> - </div> - <div class="mt-2 w-50 ml-2 text-left"> - <div> - <small class="text-muted"> - <translate>Countrycode</translate> - </small> + <div class="position-relative"> + <UISpinnerOverlay v-if="loading" /> + <div v-if="!edit" class="mb-3"> + <UITableHeader + :columns="[ + { id: 'properties.name', title: `${nameLabel}`, class: 'col-4' }, + { + id: 'properties.date_info', + title: `${dateLabel}`, + class: 'col-2' + }, + { + id: 'properties.source_organization', + title: `${sourceorganizationLabel}`, + class: 'col-3' + } + ]" + /> + <UITableBody + :data="filteredStretches() | sortTable(sortColumn, sortDirection)" + > + <template v-slot:row="{ item: stretch }"> + <div class="py-1 col-4 "> + <a + class="linkto text-info" + v-if="isInStaging(stretch.properties.name)" + @click="gotoStaging(getStagingLink(stretch.properties.name))" + > + {{ stretch.properties.name + }}<font-awesome-icon + class="ml-1 text-danger" + icon="exclamation-triangle" + fixed-width + ></font-awesome-icon + ><small class="ml-1">review</small> + </a> + <a v-else @click="moveMapToStretch(stretch)" href="#">{{ + stretch.properties.name + }}</a> + </div> + <div class="py-1 col-2"> + {{ stretch.properties.date_info | surveyDate }} + </div> + <div class="py-1 col-3"> + {{ stretch.properties.source_organization }} + </div> + <div class="py-1 col text-right"> + <button + class="btn btn-xs btn-dark mr-1" + @click="editStretch(stretch)" + > + <font-awesome-icon icon="pencil-alt" fixed-width /> + </button> + <button + class="btn btn-xs btn-dark" + @click="deleteStretch(stretch)" + > + <font-awesome-icon icon="trash" fixed-width /> + </button> + </div> + </template> + </UITableBody> + </div> + <div v-if="edit"> + <div class="ml-3 mr-3"> + <div class="d-flex flex-row justify-content-between"> + <div class="mt-2 w-50 mr-2 text-left"> + <small class="text-muted"> <translate>ID</translate> </small> <input - id="countryCode" + id="id" type="text" class="form-control" - placeholder="AT" + placeholder="AT_Section_12" aria-label="id" - v-model="countryCode" + v-model="id" + :disabled="editExistingStretch" /> <span class="text-left text-danger"> - <small v-if="countryCodeError && !countryCode"> - <translate>Please enter a countrycode </translate> + <small v-if="idError && !id"> + <translate>Please enter an id</translate> + </small> + </span> + </div> + <div class="mt-2 w-50 ml-2 text-left"> + <div> + <small class="text-muted"> + <translate>Countrycode</translate> + </small> + <input + id="countryCode" + type="text" + class="form-control" + placeholder="AT" + aria-label="id" + v-model="countryCode" + /> + <span class="text-left text-danger"> + <small v-if="countryCodeError && !countryCode"> + <translate>Please enter a countrycode </translate> + </small> + </span> + </div> + <div class="w-50 ml-2"></div> + </div> + </div> + <div class="d-flex flex-column justify-content-between"> + <div class="mt-2 text-left"> + <small class="text-muted"> + <translate>Start rhm</translate> + </small> + <div class="d-flex flex-row"> + <input + id="startrhm" + type="text" + class="form-control" + placeholder="e.g. ATXXX000010000019900" + aria-label="startrhm" + v-model="startrhm" + /> + <span class="input-group-text"> + <font-awesome-icon + @click="togglePipette('start')" + :class="{ 'text-info': pipetteStart }" + icon="bullseye" + ></font-awesome-icon> + </span> + </div> + <span class="text-left text-danger"> + <small v-if="startrhmError && !startrhm"> + <translate>Please enter a start point</translate> </small> </span> </div> - <div class="w-50 ml-2"></div> - </div> - </div> - <div class="d-flex flex-column justify-content-between"> - <div class="mt-2 text-left"> - <small class="text-muted"> <translate>Start rhm</translate> </small> - <div class="d-flex flex-row"> - <input - id="startrhm" - type="text" - class="form-control" - placeholder="e.g. ATXXX000010000019900" - aria-label="startrhm" - v-model="startrhm" - /> - <span class="input-group-text"> - <font-awesome-icon - @click="togglePipette('start')" - :class="{ 'text-info': pipetteStart }" - icon="bullseye" - ></font-awesome-icon> + <div class="mt-2 text-left"> + <small class="text-muted"> <translate>End rhm</translate> </small> + <div class="d-flex flex-row"> + <input + id="endrhm" + type="text" + class="form-control" + placeholder="e.g. ATXXX000010000019900" + aria-label="endrhm" + v-model="endrhm" + /> + <span class="input-group-text"> + <font-awesome-icon + @click="togglePipette('end')" + :class="{ 'text-info': pipetteEnd }" + icon="bullseye" + ></font-awesome-icon> + </span> + </div> + <span class="text-left text-danger"> + <small v-if="endrhmError && !endrhm"> + <translate>Please enter an end point</translate> + </small> </span> </div> - <span class="text-left text-danger"> - <small v-if="startrhmError && !startrhm"> - <translate>Please enter a start point</translate> - </small> - </span> </div> - <div class="mt-2 text-left"> - <small class="text-muted"> <translate>End rhm</translate> </small> - <div class="d-flex flex-row"> + <div + v-if="!editExistingStretch" + class="d-flex flex-row justify-content-between" + > + <div class="mt-2 mr-2 w-50 text-left"> + <small class="text-muted"> + <translate + >Tolerance for snapping of waterway axis [m]</translate + > + </small> <input - id="endrhm" + class="form-control" + v-model.number="tolerance" + placeholder="" + type="number" + min="0" + step="any" + aria-label="tolerance" + id="tolerance" + /> + <span class="text-left text-danger"> + <small v-if="toleranceError && !tolerance"> + <translate>Please enter a tolerance value</translate> + </small> + </span> + </div> + </div> + <div class="d-flex flex-row justify-content-between"> + <div class="mt-2 mr-2 w-50 text-left"> + <small class="text-muted"> + <translate>Object name</translate> + </small> + <input + id="objbn" type="text" class="form-control" - placeholder="e.g. ATXXX000010000019900" - aria-label="endrhm" - v-model="endrhm" + placeholder="" + aria-label="objbn" + v-model="objbn" /> - <span class="input-group-text"> - <font-awesome-icon - @click="togglePipette('end')" - :class="{ 'text-info': pipetteEnd }" - icon="bullseye" - ></font-awesome-icon> + <span class="text-left text-danger"> + <small v-if="objbnError && !objbn"> + <translate>Please enter an objectname</translate> + </small> </span> </div> - <span class="text-left text-danger"> - <small v-if="endrhmError && !endrhm"> - <translate>Please enter an end point</translate> + <div class="mt-2 ml-2 w-50 text-left"> + <small class="text-muted"> + <translate>National Object name</translate> </small> - </span> + <input + id="nobjbn" + type="text" + class="form-control" + placeholder="" + aria-label="nobjbn" + v-model="nobjbn" + /> + </div> </div> - </div> - <div - v-if="!editExistingStretch" - class="d-flex flex-row justify-content-between" - > - <div class="mt-2 mr-2 w-50 text-left"> - <small class="text-muted"> - <translate>Tolerance for snapping of waterway axis [m]</translate> - </small> - <input - class="form-control" - v-model.number="tolerance" - placeholder="" - type="number" - min="0" - step="any" - aria-label="tolerance" - id="tolerance" - /> - <span class="text-left text-danger"> - <small v-if="toleranceError && !tolerance"> - <translate>Please enter a tolerance value</translate> + <div class="d-flex flex-row justify-content-between"> + <div class="mt-2 mr-2 w-50 text-left"> + <small class="text-muted"> + <translate>Date info</translate> </small> - </span> + <input + id="date_info" + type="date" + class="form-control" + placeholder="date_info" + aria-label="date_info" + v-model="date_info" + /> + <span class="text-left text-danger"> + <small v-if="date_infoError && !date_info"> + <translate>Please enter a date</translate> + </small> + </span> + </div> + <div class="mt-2 ml-2 w-50 text-left"> + <small class="text-muted"> <translate>Source</translate> </small> + <input + id="source" + type="text" + class="form-control" + placeholder="source" + aria-label="source" + v-model="source" + /> + <span class="text-left text-danger"> + <small v-if="sourceError && !source"> + <translate>Please enter a source</translate> + </small> + </span> + </div> </div> </div> - <div class="d-flex flex-row justify-content-between"> - <div class="mt-2 mr-2 w-50 text-left"> - <small class="text-muted"> - <translate>Object name</translate> - </small> - <input - id="objbn" - type="text" - class="form-control" - placeholder="" - aria-label="objbn" - v-model="objbn" - /> - <span class="text-left text-danger"> - <small v-if="objbnError && !objbn"> - <translate>Please enter an objectname</translate> - </small> - </span> - </div> - <div class="mt-2 ml-2 w-50 text-left"> - <small class="text-muted"> - <translate>National Object name</translate> - </small> - <input - id="nobjbn" - type="text" - class="form-control" - placeholder="" - aria-label="nobjbn" - v-model="nobjbn" - /> - </div> - </div> - <div class="d-flex flex-row justify-content-between"> - <div class="mt-2 mr-2 w-50 text-left"> - <small class="text-muted"> <translate>Date info</translate> </small> - <input - id="date_info" - type="date" - class="form-control" - placeholder="date_info" - aria-label="date_info" - v-model="date_info" - /> - <span class="text-left text-danger"> - <small v-if="date_infoError && !date_info"> - <translate>Please enter a date</translate> - </small> - </span> - </div> - <div class="mt-2 ml-2 w-50 text-left"> - <small class="text-muted"> <translate>Source</translate> </small> - <input - id="source" - type="text" - class="form-control" - placeholder="source" - aria-label="source" - v-model="source" - /> - <span class="text-left text-danger"> - <small v-if="sourceError && !source"> - <translate>Please enter a source</translate> - </small> - </span> - </div> + <div class="text-right mt-2 mr-3 mb-3"> + <button @click="edit = false" class="btn btn-warning mr-2"> + Back + </button> + <button + @click="save" + type="submit" + class="shadow-sm btn btn-info submit-button" + > + <translate>Submit</translate> + </button> </div> </div> - <div class="text-right mt-2 mr-3 mb-3"> - <button @click="edit = false" class="btn btn-warning mr-2">Back</button> - <button - @click="save" - type="submit" - class="shadow-sm btn btn-info submit-button" - > - <translate>Submit</translate> + <div class="text-right mr-3"> + <button v-if="!edit" @click="startEdit()" class="btn btn-info"> + <translate>New stretch</translate> </button> </div> </div> - <div class="text-right mr-3"> - <button v-if="!edit" @click="startEdit()" class="btn btn-info"> - <translate>New stretch</translate> - </button> - </div> </div> </template> @@ -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({