feat(table): prompt before deleting rows

projectcaluma · Sep 4, 2019 · a9e7b0c · a9e7b0c
1 parent 2575d6d
commit a9e7b0c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 7 deletions.
diff --git a/addon/components/cf-field/input/table.js b/addon/components/cf-field/input/table.js
@@ -17,8 +17,10 @@ export default Component.extend({
   notification: service(),
   intl: service(),
 
-  showModal: false,
+  showAddModal: false,
+  showDeleteModal: false,
   documentToEdit: null,
+  documentToDelete: null,
 
   columnHeaders: computed(
     "field.question.{rowForm.questions.edges.@each,meta.columnsToDisplay.[]}",
@@ -49,7 +51,7 @@ export default Component.extend({
 
     this.setProperties({
       documentToEdit: newDocument,
-      showModal: true
+      showAddModal: true
     });
   }).drop(),
 
@@ -61,6 +63,8 @@ export default Component.extend({
     );
 
     yield this.onSave(remainingDocuments);
+
+    this.set("showDeleteModal", false);
   }),
 
   save: task(function*() {
@@ -86,7 +90,7 @@ export default Component.extend({
         yield this.onSave([...rows]);
       }
 
-      this.set("showModal", false);
+      this.set("showAddModal", false);
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error(e);
@@ -100,7 +104,13 @@ export default Component.extend({
     editRow(document) {
       this.setProperties({
         documentToEdit: document,
-        showModal: true
+        showAddModal: true
+      });
+    },
+    deleteRow(document) {
+      this.setProperties({
+        documentToDelete: document,
+        showDeleteModal: true
       });
     }
   }

diff --git a/addon/templates/components/cf-field/input/table.hbs b/addon/templates/components/cf-field/input/table.hbs
@@ -25,7 +25,7 @@
           <td class="uk-text-right">
             <button type="button" data-test-edit-row class="uk-icon-button" uk-icon="pencil" {{action "editRow" document}}></button>
             {{#unless disabled}}
-              <button type="button" data-test-delete-row class="uk-icon-button" uk-icon="trash" {{action (perform deleteRow) document}}></button>
+              <button type="button" data-test-delete-row class="uk-icon-button" uk-icon="trash" {{action "deleteRow" document}}></button>
             {{/unless}}
           </td>
         </tr>
@@ -41,9 +41,10 @@
       {{/unless}}
     </tfoot>
   </table>
+
   {{#uk-modal
-    visible=(and showModal documentToEdit)
-    on-hide=(action (mut showModal) false)
+    visible=(and showAddModal documentToEdit)
+    on-hide=(action (mut showAddModal) false)
     bgClose=false
   }}
     {{#if documentToEdit}}
@@ -58,4 +59,21 @@
       }}
     </p>
   {{/uk-modal}}
+
+  {{#uk-modal
+    visible=(and showDeleteModal documentToDelete)
+    on-hide=(action (mut showDeleteModal) false)
+    bgClose=false
+  }}
+    <p>{{t "caluma.form.deleteRow"}}</p>
+
+    <p class="uk-text-right">
+      {{uk-button
+        label=(t "caluma.form.delete")
+        disabled=deleteRow.isRunning
+        loading=deleteRow.isRunning
+        on-click=(perform deleteRow documentToDelete)
+      }}
+    </p>
+  {{/uk-modal}}
 {{/with}}
diff --git a/translations/de.yaml b/translations/de.yaml
@@ -8,8 +8,10 @@ caluma:
   form:
     optional: "Optional"
     save: "Speichern"
+    delete: "Löschen"
     selectFile: "Klicken um Datei hochzuladen"
     changeFile: "Klicken um andere Datei hochzuladen"
+    deleteRow: "Möchten Sie diese Zeile wirklich löschen?"
 
     navigation:
       next: "Weiter"

diff --git a/translations/en.yaml b/translations/en.yaml
@@ -8,8 +8,10 @@ caluma:
   form:
     optional: "Optional"
     save: "Save"
+    delete: "Delete"
     selectFile: "Click to upload a file"
     changeFile: "Click to upload a different file"
+    deleteRow: "Do you really want to delete this row?"
 
     navigation:
       next: "Next"

diff --git a/translations/fr.yaml b/translations/fr.yaml
@@ -8,8 +8,10 @@ caluma:
   form:
     optional: "optional"
     save: "sauvegarder"
+    delete: "supprimer"
     selectFile: "cliquez pour télécharger le ficher"
     changeFile: "cliquez pour télécharger un autre fichier"
+    deleteRow: "Voulez-vous supprimer cette ligne?"
 
     navigation:
       next: "suivante"