Mercurial > gemma

diff client/src/components/ImportStretches.vue @ 2384:c06b001dc26b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue	Mon Feb 25 08:47:59 2019 +0100
+++ b/client/src/components/ImportStretches.vue	Mon Feb 25 13:11:30 2019 +0100
@@ -11,8 +11,7 @@
             <th class="header"><translate>Name</translate></th>
             <th class="header"><translate>Datum</translate></th>
             <th class="header"><translate>Source organization</translate></th>
-            <th class="tools">&nbsp;</th>
-            <th class="tools">&nbsp;</th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
@@ -39,21 +38,19 @@
               {{ formatSurveyDate(stretch.properties["date_info"]) }}
             </td>
             <td>{{ stretch.properties["source_organization"] }}</td>
-            <td>
-              <font-awesome-icon
-                class="pointer"
+            <td class="text-right">
+              <button
+                class="btn btn-sm btn-dark mr-1"
                 @click="editStretch(index)"
-                icon="pencil-alt"
-                fixed-width
-              ></font-awesome-icon>
-            </td>
-            <td>
-              <font-awesome-icon
-                class="pointer"
-                @click="deleteStretch(index)"
-                icon="trash"
-                fixed-width
-              ></font-awesome-icon>
+              >
+                <font-awesome-icon icon="pencil-alt" fixed-width />
+              </button>
+              <button
+                class="btn btn-sm btn-dark"
+                @click="deleteStretch(stretch)"
+              >
+                <font-awesome-icon icon="trash" fixed-width />
+              </button>
             </td>
           </tr>
         </tbody>
@@ -352,10 +349,30 @@
       this.endrhm = this.sanitizeRHM(properties.upper);
       this.idEditable = false;
     },
-    deleteStretch(index) {
-      displayInfo({
-        title: this.$gettext("Not implemented"),
-        message: this.$gettext("Deleting " + this.stretches[index].id)
+    deleteStretch(stretch) {
+      this.$store.commit("application/popup", {
+        icon: "trash",
+        title: this.$gettext("Delete Stretch"),
+        content:
+          this.$gettext("Do you really want to delete this stretch:") +
+          `<br>
+        <b>${stretch.properties.name}, ${
+            stretch.properties.source_organization
+          } (${stretch.properties.countries})</b>`,
+        confirm: {
+          label: this.$gettext("Delete"),
+          icon: "trash",
+          callback: () => {
+            displayInfo({
+              title: this.$gettext("Not implemented"),
+              message: this.$gettext("Deleting " + stretch.id)
+            });
+          }
+        },
+        cancel: {
+          label: this.$gettext("Cancel"),
+          icon: "times"
+        }
       });
     },
     moveMapToStretch(index) {