Added confirmation modal to feature #37, testcase removal feature.

journeymonitor · Feb 26, 2017 · 8a09307 · 8a09307
1 parent 68d238b
commit 8a09307
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 3 deletions.
diff --git a/php/src/AppBundle/Resources/views/testcases/_testcase-buttons.html.twig b/php/src/AppBundle/Resources/views/testcases/_testcase-buttons.html.twig
@@ -42,7 +42,15 @@
         data-placement="top"
         title="Not available in demo and guest view mode">Delete</a>
 {% else %}
-    <form class="testcase-button-form" method="post" action="{{ path('testcases.delete', {'testcaseId': testcase.id}) }}">
-        <button class="btn btn-danger btn-sm" type="submit">Delete</button>
+    <form
+        id="testcase-delete-form-{{ testcase.id }}"
+        class="testcase-button-form"
+        method="post"
+        action="{{ path('testcases.delete', {'testcaseId': testcase.id}) }}"
+    >
+        <button
+            data-testcase-id="{{ testcase.id }}"
+            class="delete-modal-trigger btn btn-danger btn-sm" type="submit"
+        >Delete</button>
     </form>
 {% endif %}
diff --git a/php/src/AppBundle/Resources/views/testcases/index.html.twig b/php/src/AppBundle/Resources/views/testcases/index.html.twig
@@ -284,7 +284,21 @@
                     'loadNewerDataFunction': loadNewerData,
                     'loadNewestDataFunction': loadNewestData
                 };
+            },
+
+            testcaseDeleteModalSetup: function () {
+              jQuery('.delete-modal-trigger').on('click', function(e) {
+                e.preventDefault();
+                var testcaseId = jQuery(this).data('testcase-id');
+                jQuery('#testcase-delete-modal').data('testcase-id', testcaseId).modal('show');
+              });
+
+              jQuery('#testcase-delete-modal-button-yes').click(function() {
+                var testcaseId = jQuery('#testcase-delete-modal').data('testcase-id');
+                jQuery('#testcase-delete-form-' + testcaseId).submit();
+              });
             }
+
         };
 
     </script>
@@ -330,7 +344,35 @@
         </div>
     </main>
 
+    <div id="testcase-delete-modal" class="modal fade">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <a href="#" data-dismiss="modal" aria-hidden="true" class="close">×</a>
+                    <h3>Confirm deletion</h3>
+                </div>
+                <div class="modal-body">
+                    <p>Are you sure you want to delete this testcase?</p>
+                </div>
+                <div class="modal-footer">
+                    <a href="#" id="testcase-delete-modal-button-yes" class="btn btn-danger btn-sm">Yes, delete.</a>
+                    <a href="#" data-dismiss="modal" aria-hidden="true" class="btn btn-default btn-sm">No, do not delete.</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
 {% endblock %}
 
-{% block javascripts_additional %}
+
+{% block javascripts_foot %}
+
+    <script>
+        jQuery('document').ready(function() {
+          journeymonitor.testcaseDeleteModalSetup();
+        });
+    </script>
+
+    {{ parent() }}
+
 {% endblock %}