#338 - implemented search

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;
 }

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;
 }

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)
@@ -112,3 +123,47 @@ function createAdditionalHiddenInput(name, value)
     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

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>

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">