Search payments by categories explicitely

It was already possible to search by categories in the full text input,
but it could have matched other fields as well.

Explicitely add a select to search by categories.

Also put the search form in a left aside. The mobile view is not done
for the moment.

1 files changed, 31 insertions, 3 deletions

diff --git a/assets/main.js b/assets/main.js
index aee4862..3dd4b6e 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -6,6 +6,10 @@ if (path == '/login') {
 
   trim_inputs_on_blur()
 
+} else if (path == '/') { // Payment table
+
+  allow_select_reset()
+
 } else if (path == '/payment') { // Payment creation
 
   trim_inputs_on_blur()
@@ -53,10 +57,34 @@ function trim_inputs_on_blur() {
   })
 }
 
+function allow_select_reset() {
+  document.querySelectorAll('select').forEach(select => {
+    const canBeReset = Array.from(select.options).find(option => option.disabled)
+    if (canBeReset) {
+      const button = document.createElement('input')
+      button.type = 'button'
+      button.value = 'Effacer'
+      button.className = 'g-Form__ResetSelect'
+      button.onclick = function() {
+        select.selectedIndex = 0
+      }
+      if (select.selectedIndex === 0) {
+        button.style = 'visibility: hidden'
+      }
+      select.onchange = function() {
+        button.style = 'visibility: visible'
+      }
+      select.parentNode.appendChild(button)
+    }
+  })
+}
+
 function control_remove_button() {
-  const removeInput = document.getElementById('remove-input')
+  const removeInput = document.getElementsByName('remove-input')[0]
   const removeButton = document.getElementById('remove-button')
 
+  console.log(removeInput, removeButton)
+
   if (removeInput && removeButton) {
       removeInput.addEventListener('input', () => {
           if (removeInput.value.trim() == removeInput.getAttribute('data-name')) {
@@ -69,8 +97,8 @@ function control_remove_button() {
 }
 
 function auto_fill_category() {
-  const name = document.getElementById('name')
-  const category = document.getElementById('category_id')
+  const name = document.getElementsByName('name')[0]
+  const category = document.getElementsByName('category_id')[0]
 
   function onNameChange() {
       const query = name.value.trim()