DIV-681: Delete confirmation dialog for removing children

edivorce/apps/core/static/css/main.scss

@@ -1740,6 +1740,7 @@ textarea {
 	border-bottom-right-radius: 10px;
 }
 
+#delete_child_modal,
 #info_modal,
 #questions_modal,
 #terms_modal {
@@ -1761,12 +1762,35 @@ textarea {
 		}
 	}
 
+	.modal-body {
+		padding: 36px 64px;
+
+		p {
+			font-size: 18px;
+			margin-top: 12px;
+		}
+	}
+
 	.modal-footer {
 		text-align: center;
 		border: none;
 		padding-bottom: 18px;
 	}
 }
+
+#delete_child_modal {
+	text-align: center;
+	vertical-align: middle;
+	margin-top: 112px;
+	font-size: 18px;
+
+	.modal-footer {
+		text-align: center;
+		border: none;
+		padding-bottom: 18px;
+	}
+}
+
 /* Spinner */
 div#progress-overlay {
 	position: fixed;

edivorce/apps/core/static/js/main.js

@@ -245,6 +245,16 @@ $(function () {
     // show warning message if other name field is already at its maximum number when the page rendered
     showWarningOtherName();
 
+    var deleteChildData = function(settings, element) {
+        $('[type=radio]').prop('checked', false);
+        $('.children-input-block').each(function() {
+            resetChildrenInputBlock($(this), 'null');
+        });
+        $('.children-questions').hide();
+        deleteAddedTableRow(element);
+        $('#btn_save_child').trigger('click');
+    };
+
     var listControlGroups = [
         {
             table_selector: "#claimant_debts",
@@ -301,9 +311,9 @@ $(function () {
             input_field_selector: ".child-field",
             clone_group_class: "child-disabled-group",
             reveal_class: "child-item-row",
-            customAction: function(settings, newElement) {
+            customAction: function (settings, newElement) {
                 $('.children-questions').show();
-                enableChildrenFooterNav({page:'edit'});
+                enableChildrenFooterNav({page: 'edit'});
 
                 // Want the second list row because that is before the newElement
                 // was appended.
@@ -312,7 +322,7 @@ $(function () {
                 // Update the child id suffix so that now which row in table to update with these values.
                 var updatedChildCounter = parseInt(childCounter, 10) + 1;
                 newElement.closest('tr').attr('data-counter', updatedChildCounter);
-                newElement.find(settings.input_field_selector).each(function() {
+                newElement.find(settings.input_field_selector).each(function () {
                     var fieldId = replaceSuffix($(this).attr('id'), updatedChildCounter);
                     $(this).attr('id', fieldId);
                 });
@@ -320,16 +330,16 @@ $(function () {
                 // Ensure that any previously select fields are cleared before we populate the input field
                 // with the row selected in the table.
                 $('[type=radio]').prop('checked', false);
-                $('.children-input-block').each(function() {
+                $('.children-input-block').each(function () {
                     resetChildrenInputBlock($(this), updatedChildCounter);
                 });
 
                 // When click the delete button for a row, make sure any handlers attached to the inputs
                 // have been cleared.
-                newElement.find(settings.delete_button_selector).on('click', function(e) {
+                newElement.find(settings.delete_button_selector).on('click', function (e) {
                     e.preventDefault();
                     $('[type=radio]').prop('checked', false);
-                    $('.children-input-block').each(function() {
+                    $('.children-input-block').each(function () {
                         resetChildrenInputBlock($(this), 'null');
                     });
                 });
@@ -340,15 +350,7 @@ $(function () {
                 $('.children-list').hide();
                 $('.fact-sheets').hide();
             },
-            customDeleteAction: function(settings, element) {
-                $('[type=radio]').prop('checked', false);
-                $('.children-input-block').each(function() {
-                    resetChildrenInputBlock($(this), 'null');
-                });
-                $('.children-questions').hide();
-                deleteAddedTableRow(element);
-                $('#btn_save_child').trigger('click');
-            }
+            customDeleteAction: function(){}
         }
     ];
     listControlGroups.forEach(registerTableRowAddRemoveHandlers);
@@ -450,6 +452,62 @@ $(function () {
         evaluateFactSheetShowCriteria(childrenData);
     };
 
+        // Options to enable/disable edit and delete controls from
+    // each child now.  Also, options to show appropriate tooltips
+    // for each control.
+    var initializeRowControls = function() {
+        $('.btn-edit-child').on('click', function() {
+            // Mimic what would happen if the parent row would be clicked.
+            // this should initiate a transition to another screen where the
+            // child details will be shown.
+            $(this).parent('tr').click();
+        }).hover(function() {
+            $(this).tooltip({
+                placement:'auto right',
+                title: 'Edit details'
+            });
+            $(this).tooltip('show');
+        }, function() {
+            $(this).tooltip('hide');
+        });
+        $('.btn-delete-child').hover(function() {
+            $(this).tooltip({
+                placement:'auto right',
+                title: 'Delete Child'
+            });
+            $(this).tooltip('show');
+        }, function() {
+            $(this).tooltip('hide');
+        });
+        $('.child-item-cell')
+            .on('click', function() {
+                if ($(this).hasClass('fact-sheet-button'))
+                    return;
+                populateChildInputFields($(this));
+            })
+            .hover(function() {
+                $(this).parent('tr').find('.fact-sheet-button').show();
+            }, function() {
+                $(this).parent('tr').find('.fact-sheet-button').hide();
+            });
+
+        $('#delete_child_modal').on('show.bs.modal', function(event) {
+            $('#delete_child_id').text(event.relatedTarget.id);
+        });
+        $('#confirm_delete_child').on('click', function(event) {
+            var deleteButtonId = $('#delete_child_id').text();
+            deleteChildData(undefined, $('#' + deleteButtonId));
+            $('#delete_child_modal').modal('hide');
+        });
+
+        $('#cancel_delete_child').on('click', function() {
+            $('#delete_child_modal').modal('hide');
+        });
+
+    };
+
+    initializeRowControls();
+
     var returnToParent = function(options) {
         $('.children-questions').hide();
         $('.children-list').show();
@@ -469,41 +527,9 @@ $(function () {
             ajaxCall('claimant_children', jsonChildrenData);
         }
         populateChildrenFactSheets();
-    };
 
-    // Options to enable/disable edit and delete controls from
-    // each child now.  Also, options to show appropriate tooltips
-    // for each control.
-    $('.btn-edit-child').on('click', function() {
-        // Mimic what would happen if the parent row would be clicked.
-        // this should initiate a transition to another screen where the
-        // child details will be shown.
-        $(this).parent('tr').click();
-    }).hover(function() {
-        $(this).tooltip({
-            placement:'auto right',
-            title: 'Edit details'
-        });
-        $(this).tooltip('show');
-    }, function() {
-        $(this).tooltip('hide');
-    });
-    $('.btn-delete-child').hover(function() {
-        $(this).tooltip({
-            placement:'auto right',
-            title: 'Delete Child'
-        });
-        $(this).tooltip('show');
-    }, function() {
-        $(this).tooltip('hide');
-    });
-    $('.child-item-row')
-        .on('click', populateChildInputFields)
-        .hover(function() {
-            $(this).find('.fact-sheet-button').show();
-        }, function() {
-            $(this).find('.fact-sheet-button').hide();
-        });
+        initializeRowControls();
+    };
 
     $('#btn_save_child').on('click', function(e) {
         e.preventDefault();

edivorce/apps/core/templates/partials/your_children_child.html

@@ -1,37 +1,37 @@
 {% load input_field %}
-<td class="table-bordered">
+<td class="table-bordered child-item-cell">
     <div id="child_name_{{ div_id }}"
          class="child-field"
          data-save_select=".child-field"
          data-target-form-field="child_name">{{ name }}</div>
 </td>
-<td class="table-bordered">
+<td class="table-bordered child-item-cell">
     <div id="child_birth_date_{{ div_id }}"
          class="child-field"
          data-save_select=".child-field"
          data-target-form-field="child_birth_date">{{ birth_date }}</div>
 </td>
-<td class="table-bordered">
+<td class="table-bordered child-item-cell">
     <div id="child_live_with_{{ div_id }}"
          class="child-field"
          data-save_select=".child-field"
          data-target-form-field="child_live_with">{{ live_with }}</div>
 </td>
-<td class="table-bordered">
+<td class="table-bordered child-item-cell">
     <div id="child_relationship_you_{{ div_id }}"
          class="child-field"
          data-save_select=".child-field"
          data-target-form-field="child_relationship_to_you">{{ relationship_to_you }}</div>
 </td>
-<td class="table-bordered">
+<td class="table-bordered child-item-cell">
     <div id="child_relationship_spouse_{{ div_id }}"
          class="child-field"
          data-save_select=".child-field"
          data-target-form-field="child_relationship_to_spouse">{{ relationship_to_spouse }}</div>
 </td>
-<td class="fact-sheet-button" hidden>
+<td class="fact-sheet-button child-item-cell" hidden>
     <a href="#" class="btn-edit-child"><i class="fa fa-pencil"></i></a>
-    <a href="#" class="btn-delete-child" data-toggle="modal" data-target="#deleteConfirmModal"><i class="fa fa-times"></i></a>
+    <a href="#" class="btn-delete-child" id="delete_child_{{ div_id }}" data-toggle="modal" data-target="#delete_child_modal"><i class="fa fa-times"></i></a>
 </td>
 <td class="list-builder-hide-column">
     <div id="child_live_with_other_details_{{ div_id }}"

edivorce/apps/core/templates/question/06_children_your_children.html

@@ -236,6 +236,22 @@
         </div>
     </div>
 </div>
+
+<div id="delete_child_modal" class="modal" tabindex="-1" role="dialog" data-backdrop="static">
+    <div class="modal-dialog modal-sm" role="document">
+        <div class="modal-content">
+            <div class="modal-body">
+                <p>Please confirm that you want to delete this child?</p>
+            </div>
+            <div class="modal-footer">
+                <a type="button" id="confirm_delete_child" class="btn btn-danger btn-lg">Delete Child</a>
+                <a type="button" id="cancel_delete_child" class="btn btn-primary btn-lg">Cancel</a>
+                <span id="delete_child_id" hidden></span>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="modal-backgrop in"></div>
 {% endblock %}