Mercurial > gemma
comparison client/src/components/ImportStretches.vue @ 2384:c06b001dc26b
client: improved popup implementation
For deleting users and templates there was a more or less quick n' dirty implementation of
a confirmation dialog/popup. Since we need this kind of dialog in several more places I
generalized the implementation a bit and made it more robust.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 25 Feb 2019 13:11:30 +0100 |
parents | 341010faf34c |
children | f185503ef35a |
comparison
equal
deleted
inserted
replaced
2383:8d025f85a3fe | 2384:c06b001dc26b |
---|---|
9 <thead> | 9 <thead> |
10 <tr> | 10 <tr> |
11 <th class="header"><translate>Name</translate></th> | 11 <th class="header"><translate>Name</translate></th> |
12 <th class="header"><translate>Datum</translate></th> | 12 <th class="header"><translate>Datum</translate></th> |
13 <th class="header"><translate>Source organization</translate></th> | 13 <th class="header"><translate>Source organization</translate></th> |
14 <th class="tools"> </th> | 14 <th></th> |
15 <th class="tools"> </th> | |
16 </tr> | 15 </tr> |
17 </thead> | 16 </thead> |
18 <tbody> | 17 <tbody> |
19 <tr class="small" v-for="(stretch, index) in stretches" :key="index"> | 18 <tr class="small" v-for="(stretch, index) in stretches" :key="index"> |
20 <td class=""> | 19 <td class=""> |
37 </td> | 36 </td> |
38 <td class=""> | 37 <td class=""> |
39 {{ formatSurveyDate(stretch.properties["date_info"]) }} | 38 {{ formatSurveyDate(stretch.properties["date_info"]) }} |
40 </td> | 39 </td> |
41 <td>{{ stretch.properties["source_organization"] }}</td> | 40 <td>{{ stretch.properties["source_organization"] }}</td> |
42 <td> | 41 <td class="text-right"> |
43 <font-awesome-icon | 42 <button |
44 class="pointer" | 43 class="btn btn-sm btn-dark mr-1" |
45 @click="editStretch(index)" | 44 @click="editStretch(index)" |
46 icon="pencil-alt" | 45 > |
47 fixed-width | 46 <font-awesome-icon icon="pencil-alt" fixed-width /> |
48 ></font-awesome-icon> | 47 </button> |
49 </td> | 48 <button |
50 <td> | 49 class="btn btn-sm btn-dark" |
51 <font-awesome-icon | 50 @click="deleteStretch(stretch)" |
52 class="pointer" | 51 > |
53 @click="deleteStretch(index)" | 52 <font-awesome-icon icon="trash" fixed-width /> |
54 icon="trash" | 53 </button> |
55 fixed-width | |
56 ></font-awesome-icon> | |
57 </td> | 54 </td> |
58 </tr> | 55 </tr> |
59 </tbody> | 56 </tbody> |
60 </table> | 57 </table> |
61 <div class="mt-3" v-if="stretches.length == 0"> | 58 <div class="mt-3" v-if="stretches.length == 0"> |
350 this.edit = true; | 347 this.edit = true; |
351 this.startrhm = this.sanitizeRHM(properties.lower); | 348 this.startrhm = this.sanitizeRHM(properties.lower); |
352 this.endrhm = this.sanitizeRHM(properties.upper); | 349 this.endrhm = this.sanitizeRHM(properties.upper); |
353 this.idEditable = false; | 350 this.idEditable = false; |
354 }, | 351 }, |
355 deleteStretch(index) { | 352 deleteStretch(stretch) { |
356 displayInfo({ | 353 this.$store.commit("application/popup", { |
357 title: this.$gettext("Not implemented"), | 354 icon: "trash", |
358 message: this.$gettext("Deleting " + this.stretches[index].id) | 355 title: this.$gettext("Delete Stretch"), |
356 content: | |
357 this.$gettext("Do you really want to delete this stretch:") + | |
358 `<br> | |
359 <b>${stretch.properties.name}, ${ | |
360 stretch.properties.source_organization | |
361 } (${stretch.properties.countries})</b>`, | |
362 confirm: { | |
363 label: this.$gettext("Delete"), | |
364 icon: "trash", | |
365 callback: () => { | |
366 displayInfo({ | |
367 title: this.$gettext("Not implemented"), | |
368 message: this.$gettext("Deleting " + stretch.id) | |
369 }); | |
370 } | |
371 }, | |
372 cancel: { | |
373 label: this.$gettext("Cancel"), | |
374 icon: "times" | |
375 } | |
359 }); | 376 }); |
360 }, | 377 }, |
361 moveMapToStretch(index) { | 378 moveMapToStretch(index) { |
362 this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES); | 379 this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES); |
363 this.$store.commit("map/moveToExtent", { | 380 this.$store.commit("map/moveToExtent", { |