Mercurial > gemma

changeset 2908:2821113846a9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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({