From 2bb25a824656610a39b8721095cc7fb3a1f39944 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 25 Jul 2021 16:39:35 +0200
Subject: [PATCH] #509 - prevent page reload on requesting a chart delete (+ no
page reload on modal close)
---
.../budgetmaster/charts/ChartController.java | 4 ++--
src/main/resources/static/js/categories.js | 2 --
src/main/resources/static/js/charts.js | 19 +++++++++++--------
.../categories/deleteCategoryModal.ftl | 2 +-
.../templates/charts/deleteChartModal.ftl | 7 +++++++
.../resources/templates/charts/manage.ftl | 8 ++------
.../resources/templates/helpers/header.ftl | 4 ++--
7 files changed, 25 insertions(+), 21 deletions(-)
create mode 100644 src/main/resources/templates/charts/deleteChartModal.ftl
diff --git a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
index 3ae6fc4a4..a0d26a869 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
+++ b/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")
diff --git a/src/main/resources/static/js/categories.js b/src/main/resources/static/js/categories.js
index 90822bdf9..b3479347e 100644
--- a/src/main/resources/static/js/categories.js
+++ b/src/main/resources/static/js/categories.js
@@ -1,7 +1,5 @@
$(document).ready(function()
{
- $('#modalConfirmDelete').modal('open');
-
if($('#category-name').length)
{
document.getElementById('category-name').focus();
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index 896d50c8a..9f6494963 100644
--- a/src/main/resources/static/js/charts.js
+++ b/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);
});
- filterChartPreviews(selectChartID);
+ if($(".chart-preview-column").length)
+ {
+ filterChartPreviews(selectChartID);
+
+ let showEditSettingsButton = document.getElementsByName('NewChartSettings')[0].classList.contains('hidden');
+ document.getElementById('buttonShowChartSettings').classList.toggle('hidden', !showEditSettingsButton);
+ }
- 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)
diff --git a/src/main/resources/templates/categories/deleteCategoryModal.ftl b/src/main/resources/templates/categories/deleteCategoryModal.ftl
index 15bc49cf3..705490ea2 100644
--- a/src/main/resources/templates/categories/deleteCategoryModal.ftl
+++ b/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
diff --git a/src/main/resources/templates/charts/deleteChartModal.ftl b/src/main/resources/templates/charts/deleteChartModal.ftl
new file mode 100644
index 000000000..c104d8790
--- /dev/null
+++ b/src/main/resources/templates/charts/deleteChartModal.ftl
@@ -0,0 +1,7 @@
+<#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
diff --git a/src/main/resources/templates/charts/manage.ftl b/src/main/resources/templates/charts/manage.ftl
index e032e8cf5..13ebd1386 100644
--- a/src/main/resources/templates/charts/manage.ftl
+++ b/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>
diff --git a/src/main/resources/templates/helpers/header.ftl b/src/main/resources/templates/helpers/header.ftl
index 485ab5ffb..927776432 100644
--- a/src/main/resources/templates/helpers/header.ftl
+++ b/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>
--
GitLab