#509 - prevent page reload on requesting a chart delete (+ no page reload on modal close)

src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java

@@ -170,8 +170,8 @@ public class ChartController extends BaseController
 		}
 
 		model.addAttribute("charts", chartService.getAllEntitiesAsc());
-		model.addAttribute("currentChart", chartService.getRepository().getOne(ID));
-		return "charts/manage";
+		model.addAttribute("chartToDelete", chartService.getRepository().getOne(ID));
+		return "charts/deleteChartModal";
 	}
 
 	@GetMapping(value = "/{ID}/delete")

src/main/resources/static/js/categories.js

 $(document).ready(function()
 {
-    $('#modalConfirmDelete').modal('open');
-
     if($('#category-name').length)
     {
         document.getElementById('category-name').focus();

src/main/resources/static/js/charts.js

@@ -13,11 +13,6 @@ $(document).ready(function()
         editor.save();
     }
 
-    if($("#modalConfirmDelete").length)
-    {
-        $('#modalConfirmDelete').modal('open');
-    }
-
     if($(".datepicker").length)
     {
         chartPickerStartDate = M.Datepicker.init(document.getElementById('chart-datepicker'), {
@@ -121,10 +116,18 @@ $(document).ready(function()
         document.getElementById('buttonShowChartSettings').classList.toggle('hidden', true);
     });
 
+    if($(".chart-preview-column").length)
+    {
         filterChartPreviews(selectChartID);
 
         let showEditSettingsButton = document.getElementsByName('NewChartSettings')[0].classList.contains('hidden');
         document.getElementById('buttonShowChartSettings').classList.toggle('hidden', !showEditSettingsButton);
+    }
+
+    $('.button-request-delete-chart').click(function()
+    {
+        fetchAndShowModalContent(this.dataset.url, '#deleteModalContainerOnDemand', '#modalConfirmDelete', function(){});
+    });
 });
 
 function createDatePickerEnd(minDate, selectedDate)

src/main/resources/templates/categories/deleteCategoryModal.ftl

@@ -17,7 +17,7 @@
     </div>
 
     <div class="modal-footer background-color">
-        <@header.buttonLink url='/categories' icon='clear' localizationKey='cancel' color='red' classes='modal-action modal-close text-white'/>
+        <@header.buttonLink url='' icon='clear' localizationKey='cancel' color='red' classes='modal-action modal-close text-white' noUrl=true/>
         <@header.buttonLink url='' icon='delete' localizationKey='delete' color='green' id='buttonDeleteCategory' classes='modal-action modal-close text-white' noUrl=true/>
     </div>
 </div>
\ No newline at end of file

src/main/resources/templates/charts/deleteChartModal.ftl

+<#global locale = static["de.thecodelabs.utils.util.Localization"]>
+<#import "/spring.ftl" as s>
+<#import "../helpers/header.ftl" as header>
+
+<@header.modalConfirmDelete title=locale.getString("info.title.chart.delete") confirmUrl='/charts' itemId=chartToDelete.getID() confirmButtonTextKey='info.title.chart.delete'>
+    <p>${locale.getString("info.text.chart.delete", chartToDelete.getName())}</p>
+</@header.modalConfirmDelete>
\ No newline at end of file

src/main/resources/templates/charts/manage.ftl

@@ -46,7 +46,7 @@
                                     <td>
                                         <@header.buttonFlat url='/charts/' + chart.ID?c + '/edit' icon='edit' localizationKey='' classes="no-padding text-default"/>
                                         <#if (chart.getType().name() == "CUSTOM")>
-                                            <@header.buttonFlat url='/charts/' + chart.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default"/>
+                                            <@header.buttonFlat url='/charts/' + chart.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default button-request-delete-chart" isDataUrl=true/>
                                         </#if>
                                     </td>
                                 </tr>
@@ -59,11 +59,7 @@
                 </@header.content>
             </div>
 
-            <#if currentChart??>
-                <@header.modalConfirmDelete title=locale.getString("info.title.chart.delete") confirmUrl='/charts' cancelUrlBase='/charts/manage' itemId=currentChart.getID() confirmButtonTextKey='info.title.chart.delete'>
-                    <p>${locale.getString("info.text.chart.delete", currentChart.getName())}</p>
-                </@header.modalConfirmDelete>
-            </#if>
+            <div id="deleteModalContainerOnDemand"></div>
         </main>
 
         <#import "../helpers/scripts.ftl" as scripts>

src/main/resources/templates/helpers/header.ftl

@@ -45,7 +45,7 @@
     </#if>
 </#macro>
 
-<#macro modalConfirmDelete title confirmUrl cancelUrlBase itemId confirmButtonTextKey id="modalConfirmDelete" classes="">
+<#macro modalConfirmDelete title confirmUrl itemId confirmButtonTextKey id="modalConfirmDelete" classes="">
     <div id="${id}" class="modal background-color ${classes}">
         <div class="modal-content">
             <h4>${title}</h4>
@@ -53,7 +53,7 @@
             <#nested>
         </div>
         <div class="modal-footer background-color">
-            <@buttonLink url=cancelUrlBase icon='clear' localizationKey='cancel' color='red' classes='modal-action modal-close text-white'/>
+            <@buttonLink url='' icon='clear' localizationKey='cancel' color='red' classes='modal-action modal-close text-white' noUrl=true/>
             <@buttonLink url=confirmUrl + '/' + itemId?c + '/delete' icon='delete' localizationKey=confirmButtonTextKey color='green' classes='modal-action modal-close text-white'/>
         </div>
     </div>