diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css index 42d3c862d74c5291c11f9ce08d05ce02cb968ef0..e201d4a2d7dee1365b8454fada049c7aef1b1ce3 100644 --- a/src/main/resources/static/css/dark/style.css +++ b/src/main/resources/static/css/dark/style.css @@ -607,6 +607,11 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) + margin-bottom: 20px; } +/* inputs with icon prefix */ +.input-field .prefix.active { + color: #2E79B9; +} + .invisible { opacity: 0; } diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css index d3291a9f132b17dcb34b192dc34ed86514c65e92..123f416901a90e41a43f1bf99bc280a4920350c8 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -522,6 +522,11 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa margin-bottom: 20px; } +/* inputs with icon prefix */ +.input-field .prefix.active { + color: #2E79B9; +} + .invisible { opacity: 0; } diff --git a/src/main/resources/static/js/templates.js b/src/main/resources/static/js/templates.js index 9c3b2f1fd91e6c1a399f09a413f21f97cfc70c8f..db21e2388d47f85f437adcb0cb180426d8fc7b23 100644 --- a/src/main/resources/static/js/templates.js +++ b/src/main/resources/static/js/templates.js @@ -33,6 +33,17 @@ $(document).ready(function() M.Collapsible.init(document.querySelector('.collapsible.expandable'), { accordion: false }); + + + let inputSearchTemplate = document.getElementById('searchTemplate'); + if(inputSearchTemplate !== undefined) + { + $(inputSearchTemplate).on('change keydown paste input', function() + { + let searchText = $(this).val(); + searchTemplates(searchText); + }); + } }); function createAndOpenModal(data) @@ -111,4 +122,48 @@ function createAdditionalHiddenInput(name, value) newInput.setAttribute('name', name); newInput.setAttribute('value', value); return newInput; +} + +function searchTemplates(searchText) +{ + searchText = searchText.trim(); + + let templateItems = document.querySelectorAll('.template-item'); + let collapsible = document.getElementById('templateCollapsible'); + + if(!searchText) + { + templateItems.forEach((item) => + { + collapsible.classList.remove('hidden'); + item.classList.remove('hidden'); + }); + return; + } + + let numberOfVisibleItems = 0; + for(let i = 0; i < templateItems.length; i++) + { + let item = templateItems[i]; + let templateName = item.querySelector('.template-header-name').innerText; + if(templateName.includes(searchText)) + { + item.classList.remove('hidden'); + numberOfVisibleItems++; + } + else + { + item.classList.add('hidden'); + } + } + + // hide whole collapsible to prevent shadows from remaining visible + if(numberOfVisibleItems === 0) + { + collapsible.classList.add('hidden'); + } + else + { + collapsible.classList.remove('hidden'); + } } \ No newline at end of file diff --git a/src/main/resources/templates/templates/selectTemplate.ftl b/src/main/resources/templates/templates/selectTemplate.ftl index d5dfc3b4d2c859d864abbb7b04039a3da26149dd..2d2ab5d6593e28fccdb3de1e50433d8d1ea3fa26 100644 --- a/src/main/resources/templates/templates/selectTemplate.ftl +++ b/src/main/resources/templates/templates/selectTemplate.ftl @@ -19,6 +19,13 @@ <div class="section center-align"> <div class="headline">${locale.getString("menu.templates")}</div> </div> + <div class="searchTemplateWrapper"> + <div class="input-field col s12 m12 l8 offset-l2"> + <i class="material-icons prefix">search</i> + <input id="searchTemplate" type="text"> + <label for="searchTemplate">${locale.getString("search")}</label> + </div> + </div> </div> <br> <div class="center-align"><a href="<@s.url '/templates'/>" class="waves-effect waves-light btn budgetmaster-blue"><i class="material-icons left">edit</i>${locale.getString("home.menu.templates.action.manage")}</a></div> diff --git a/src/main/resources/templates/templates/templateFunctions.ftl b/src/main/resources/templates/templates/templateFunctions.ftl index aafd6cb0bd511122237f0bce9332ea42c8fc7367..e2cf1267f56de0e8ebd2f229f7e071b9b43eee02 100644 --- a/src/main/resources/templates/templates/templateFunctions.ftl +++ b/src/main/resources/templates/templates/templateFunctions.ftl @@ -17,9 +17,9 @@ <div class="container"> <div class="row"> <div class="col s12"> - <ul class="collapsible expandable z-depth-2"> + <ul class="collapsible expandable z-depth-2" id="templateCollapsible"> <#list templates as template> - <li> + <li class="template-item"> <div class="collapsible-header bold"> <@templateHeader template/> <div class="collapsible-header-button">