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">&nbsp;</th> 14 <th></th>
15 <th class="tools">&nbsp;</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", {