diff --git a/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java b/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java
index 7c80ba35ff3b6b3328b75bb493aa85d35fecbdc9..d775978b90b0a0839894958fc44fe9b538aecc62 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 6ccd3e7571482dc622a6ddbeb2103f13fd6e95c8..90822bdf935190cc0aa7122d3425d0cea7bea4e9 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 e192cca63b52fb4c9a5df2b9297d1f195846f350..dfdc4ab6e518fbf3bf3a9c6429af945494a7aa55 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 0000000000000000000000000000000000000000..936610af475437a9a5434975e3c32b1b4fc925e5
--- /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 47d749d934ab7edb468b059fbad24112f1b84cfe..3101d388afb302f826d2b37ea2bcd5485ca797d4 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 0000000000000000000000000000000000000000..15bc49cf3769e68ac48aa44d5ce9fd92ded24304
--- /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 0bd7d3eb61b91e57f18c5a346dc9e4969830a68e..cf6778142b510b7f9257ff6dee62459bfc443f8a 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>