From 094e873ec01830acea8b43a2167bb4c1f8866e52 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 25 Jul 2021 16:15:31 +0200
Subject: [PATCH] #509 - prevent page reload on requesting a category delete
---
.../categories/CategoryController.java | 4 ++--
src/main/resources/static/js/categories.js | 11 +++++++--
src/main/resources/static/js/customSelect.js | 7 +++++-
.../resources/static/js/fetchModalContent.js | 21 ++++++++++++++++
.../templates/categories/categories.ftl | 24 ++-----------------
.../categories/deleteCategoryModal.ftl | 23 ++++++++++++++++++
.../resources/templates/helpers/scripts.ftl | 2 ++
7 files changed, 65 insertions(+), 27 deletions(-)
create mode 100644 src/main/resources/static/js/fetchModalContent.js
create mode 100644 src/main/resources/templates/categories/deleteCategoryModal.ftl
diff --git a/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java b/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java
index 7c80ba35f..d775978b9 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java
@@ -60,8 +60,8 @@ public class CategoryController extends BaseController
model.addAttribute("availableCategories", availableCategories);
model.addAttribute("preselectedCategory", categoryService.findByType(CategoryType.NONE));
- model.addAttribute("currentCategory", categoryService.findById(ID).orElseThrow());
- return "categories/categories";
+ model.addAttribute("categoryToDelete", categoryService.findById(ID).orElseThrow());
+ return "categories/deleteCategoryModal";
}
@PostMapping(value = "/{ID}/delete")
diff --git a/src/main/resources/static/js/categories.js b/src/main/resources/static/js/categories.js
index 6ccd3e757..90822bdf9 100644
--- a/src/main/resources/static/js/categories.js
+++ b/src/main/resources/static/js/categories.js
@@ -35,9 +35,16 @@ $(document).ready(function()
});
}
- $('#buttonDeleteCategory').click(function()
+ $('.button-request-delete-category').click(function()
{
- document.getElementById("formDestinationCategory").submit();
+ fetchAndShowModalContent(this.dataset.url, '#deleteModalContainerOnDemand', '#modalConfirmDelete', function(){
+ initCustomSelects();
+
+ $('#buttonDeleteCategory').click(function()
+ {
+ document.getElementById("formDestinationCategory").submit();
+ });
+ });
});
});
diff --git a/src/main/resources/static/js/customSelect.js b/src/main/resources/static/js/customSelect.js
index e192cca63..dfdc4ab6e 100644
--- a/src/main/resources/static/js/customSelect.js
+++ b/src/main/resources/static/js/customSelect.js
@@ -1,4 +1,9 @@
$(document).ready(function()
+{
+ initCustomSelects();
+});
+
+function initCustomSelects()
{
let allCustomSelects = [];
@@ -75,7 +80,7 @@ $(document).ready(function()
}
}
});
-});
+}
class CustomSelect
{
diff --git a/src/main/resources/static/js/fetchModalContent.js b/src/main/resources/static/js/fetchModalContent.js
new file mode 100644
index 000000000..936610af4
--- /dev/null
+++ b/src/main/resources/static/js/fetchModalContent.js
@@ -0,0 +1,21 @@
+function fetchAndShowModalContent(url, containerID, modalID, callback)
+{
+ let modal = $(modalID).modal();
+ if(modal.isOpen)
+ {
+ return;
+ }
+
+ $.ajax({
+ type: 'GET',
+ url: url,
+ data: {},
+ success: function(data)
+ {
+ $(containerID).html(data);
+ $(modalID).modal();
+ $(modalID).modal('open');
+ callback();
+ }
+ });
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/categories/categories.ftl b/src/main/resources/templates/categories/categories.ftl
index 47d749d93..3101d388a 100644
--- a/src/main/resources/templates/categories/categories.ftl
+++ b/src/main/resources/templates/categories/categories.ftl
@@ -49,7 +49,7 @@
<@header.buttonFlat url='/categories/' + category.ID?c + '/edit' icon='edit' localizationKey='' classes="no-padding text-default"/>
<@header.buttonFlat url='/search?searchCategory=true&searchText=' + categoryName icon='search' localizationKey='' classes="no-padding text-default"/>
<#if (category.getType().name() == "CUSTOM")>
- <@header.buttonFlat url='/categories/' + category.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default"/>
+ <@header.buttonFlat url='/categories/' + category.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default button-request-delete-category" isDataUrl=true/>
</#if>
</td>
</tr>
@@ -62,27 +62,7 @@
</@header.content>
</div>
- <#if currentCategory??>
- <!-- confirm delete modal -->
- <div id="modalConfirmDelete" class="modal categoryDeleteModal background-color">
- <div class="modal-content">
- <h4>${locale.getString("info.title.category.delete")}</h4>
- <p>${locale.getString("info.text.category.delete", currentCategory.name)}</p>
- <p>${locale.getString("info.text.category.delete.move")}</p>
-
- <form name="DestinationCategory" id="formDestinationCategory" action="<@s.url '/categories/${currentCategory.ID?c}/delete'/>" method="post">
- <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
- <#import "../helpers/validation.ftl" as validation>
- <@customSelectMacros.customCategorySelect availableCategories preselectedCategory "col s12 m12 l8 offset-l2" locale.getString("info.title.category.delete.move")/>
- </form>
- </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='delete' localizationKey='delete' color='green' id='buttonDeleteCategory' classes='modal-action modal-close text-white' noUrl=true/>
- </div>
- </div>
- </#if>
+ <div id="deleteModalContainerOnDemand"></div>
</main>
<!-- Scripts-->
diff --git a/src/main/resources/templates/categories/deleteCategoryModal.ftl b/src/main/resources/templates/categories/deleteCategoryModal.ftl
new file mode 100644
index 000000000..15bc49cf3
--- /dev/null
+++ b/src/main/resources/templates/categories/deleteCategoryModal.ftl
@@ -0,0 +1,23 @@
+<#global locale = static["de.thecodelabs.utils.util.Localization"]>
+<#import "/spring.ftl" as s>
+<#import "../helpers/header.ftl" as header>
+<#import "../helpers/customSelectMacros.ftl" as customSelectMacros>
+
+<div id="modalConfirmDelete" class="modal categoryDeleteModal background-color">
+ <div class="modal-content">
+ <h4>${locale.getString("info.title.category.delete")}</h4>
+ <p>${locale.getString("info.text.category.delete", categoryToDelete.name)}</p>
+ <p>${locale.getString("info.text.category.delete.move")}</p>
+
+ <form name="DestinationCategory" id="formDestinationCategory" action="<@s.url '/categories/${categoryToDelete.ID?c}/delete'/>" method="post">
+ <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+ <#import "../helpers/validation.ftl" as validation>
+ <@customSelectMacros.customCategorySelect availableCategories preselectedCategory "col s12 m12 l8 offset-l2" locale.getString("info.title.category.delete.move")/>
+ </form>
+ </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='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/helpers/scripts.ftl b/src/main/resources/templates/helpers/scripts.ftl
index 0bd7d3eb6..cf6778142 100644
--- a/src/main/resources/templates/helpers/scripts.ftl
+++ b/src/main/resources/templates/helpers/scripts.ftl
@@ -9,6 +9,8 @@
<script src="<@s.url '/js/hotkeys.js'/>"></script>
<script src="<@s.url '/js/main.js'/>"></script>
<script src="<@s.url '/js/customSelect.js'/>"></script>
+ <script src="<@s.url '/js/fetchModalContent.js'/>"></script>
+
<script>
accountPlaceholderName = "${locale.getString("account.all")}";
</script>
--
GitLab