comparison client/src/components/stretches/Stretches.vue @ 3276:75db3199f76e

client: define stretches: fixed review button for stretches with pending import
author Markus Kottlaender <markus@intevation.de>
date Wed, 15 May 2019 17:55:38 +0200
parents 98b5119cf4c1
children 439e1865a2d2
comparison
equal deleted inserted replaced
3275:98b5119cf4c1 3276:75db3199f76e
25 /> 25 />
26 <UITableBody 26 <UITableBody
27 :data="filteredStretches() | sortTable(sortColumn, sortDirection)" 27 :data="filteredStretches() | sortTable(sortColumn, sortDirection)"
28 > 28 >
29 <template v-slot:row="{ item: stretch }"> 29 <template v-slot:row="{ item: stretch }">
30 <div class="py-1 col-4 "> 30 <div class="py-1 col-4">
31 <a 31 <a @click="moveMapToStretch(stretch)" href="#">
32 class="text-info" 32 {{ stretch.properties.name }}
33 </a>
34 </div>
35 <div class="py-1 col-2">
36 {{ stretch.properties.date_info | surveyDate }}
37 </div>
38 <div class="py-1 col-3">
39 {{ stretch.properties.source_organization }}
40 </div>
41 <div class="py-1 col text-right">
42 <button
33 v-if="isInStaging(stretch.properties.name)" 43 v-if="isInStaging(stretch.properties.name)"
34 @click="gotoStaging(stretch.properties.name)" 44 @click="gotoStaging(stretch.properties.name)"
45 class="btn btn-xs btn-danger mr-1"
35 > 46 >
36 {{ stretch.properties.name }}
37 <font-awesome-icon 47 <font-awesome-icon
38 class="ml-1 text-danger"
39 icon="exclamation-triangle" 48 icon="exclamation-triangle"
40 fixed-width 49 fixed-width
50 v-tooltip="reviewTooltip"
41 /> 51 />
42 <small class="ml-1">review</small> 52 </button>
43 </a>
44 <a v-else @click="moveMapToStretch(stretch)" href="#">
45 {{ stretch.properties.name }}
46 </a>
47 </div>
48 <div class="py-1 col-2">
49 {{ stretch.properties.date_info | surveyDate }}
50 </div>
51 <div class="py-1 col-3">
52 {{ stretch.properties.source_organization }}
53 </div>
54 <div class="py-1 col text-right">
55 <button 53 <button
56 class="btn btn-xs btn-dark mr-1" 54 class="btn btn-xs btn-dark mr-1"
57 @click="editStretch(stretch)" 55 @click="editStretch(stretch)"
58 > 56 >
59 <font-awesome-icon icon="pencil-alt" fixed-width /> 57 <font-awesome-icon icon="pencil-alt" fixed-width />
350 return this.$gettext("Date"); 348 return this.$gettext("Date");
351 }, 349 },
352 sourceorganizationLabel() { 350 sourceorganizationLabel() {
353 return this.$gettext("Source organization"); 351 return this.$gettext("Source organization");
354 }, 352 },
355 stretchesInStaging() { 353 reviewTooltip() {
356 const result = []; 354 return this.$gettext("Review pending import");
357 for (let stretch of this.stretches) {
358 for (let s of this.staging) {
359 if (s.kind == "st" && s.summary.stretch == stretch.properties.name) {
360 result.push({ name: s.summary.stretch, id: s.id });
361 }
362 }
363 }
364 return result;
365 } 355 }
366 }, 356 },
367 watch: { 357 watch: {
368 identifiedFeatures() { 358 identifiedFeatures() {
369 const distanceMark = this.identifiedFeatures.find(x => 359 const distanceMark = this.identifiedFeatures.find(x =>
386 .toLowerCase() 376 .toLowerCase()
387 .includes(this.searchQuery.toLowerCase()); 377 .includes(this.searchQuery.toLowerCase());
388 }); 378 });
389 }, 379 },
390 gotoStaging(stretchName) { 380 gotoStaging(stretchName) {
391 let stretch = this.stretchesInStaging.find(s => s.name === stretchName); 381 let pendingImport = this.staging.find(s => s.name === stretchName);
392 if (stretch) this.$router.push("/review/" + stretch.id); 382 if (pendingImport)
393 }, 383 this.$router.push("/imports/overview/" + pendingImport.id);
394 isInStaging(stretchname) { 384 },
395 for (let s of this.stretchesInStaging) { 385 isInStaging(stretchName) {
396 if (s.name == stretchname) return true; 386 return !!this.staging.find(s => s.name === stretchName);
397 }
398 return false;
399 }, 387 },
400 loadStagingData() { 388 loadStagingData() {
401 return new Promise((resolve, reject) => { 389 HTTP.get("/imports?states=pending&kinds=st", {
402 HTTP.get("/imports?states=pending&kinds=st", { 390 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
403 headers: { "X-Gemma-Auth": localStorage.getItem("token") } 391 })
392 .then(response => {
393 response.data.imports.forEach(i => {
394 HTTP.get("/imports/" + i.id, {
395 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
396 })
397 .then(response => {
398 this.staging.push({
399 id: i.id,
400 name: response.data.summary.stretch
401 });
402 })
403 .catch(error => {
404 const { status, data } = error.response;
405 displayError({
406 title: this.$gettext("Backend Error"),
407 message: `${status}: ${data.message || data}`
408 });
409 })
410 .finally(() => (this.loading = false));
411 });
404 }) 412 })
405 .then(response => { 413 .catch(error => {
406 const { imports } = response.data; 414 const { status, data } = error.response;
407 this.staging = imports; 415 displayError({
408 resolve(response); 416 title: this.$gettext("Backend Error"),
409 }) 417 message: `${status}: ${data.message || data}`
410 .catch(error => {
411 reject(error);
412 }); 418 });
413 }); 419 });
414 }, 420 },
415 editStretch(stretch) { 421 editStretch(stretch) {
416 const properties = stretch.properties; 422 const properties = stretch.properties;
417 this.date_info = properties.date_info.split("T")[0]; 423 this.date_info = properties.date_info.split("T")[0];
418 this.id = properties.name; 424 this.id = properties.name;
589 title: this.$gettext("Backend Error"), 595 title: this.$gettext("Backend Error"),
590 message: `${status}: ${data.message || data}` 596 message: `${status}: ${data.message || data}`
591 }); 597 });
592 }) 598 })
593 .finally(() => (this.loading = false)); 599 .finally(() => (this.loading = false));
594 this.loadStagingData().catch(error => { 600 this.loadStagingData();
595 const { status, data } = error.response;
596 displayError({
597 title: this.$gettext("Backend Error"),
598 message: `${status}: ${data.message || data}`
599 });
600 });
601 } 601 }
602 }; 602 };
603 </script> 603 </script>