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.

2 files changed, 70 insertions, 56 deletions

diff --git a/assets/main.css b/assets/main.css
index 4c286da..6a0be98 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -7,6 +7,7 @@
   --color-green: #9FD2A5;
   --color-blue: #6CA2A4;
   --color-gray: #EEEEEE;
+  --color-gray-light: #F8F8F8;
   --color-yellow: #FFF09E;
 
   /* Sizes */
@@ -25,9 +26,9 @@
 
 /* Reset */
 
-html { box-sizing: border-box; }
+html { box-sizing: border-box; height: 100%; }
 *, *:before, *:after { box-sizing: inherit; }
-body { margin: 0; }
+body { margin: 0; height: 100%; }
 p { margin: 0; }
 a { color: inherit; text-decoration: none; }
 h1 { font-size: inherit; font-weight: normal; margin: 0; }
@@ -62,9 +63,6 @@ body {
 
 .g-Header {
     width: 100%;
-}
-
-.g-Header__Primary {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -92,37 +90,52 @@ body {
     text-decoration: underline;
 }
 
-.g-Header__Secondary {
+.g-Nav {
+    width: 100%;
     display: flex;
     background-color: var(--color-red);
     color: white;
     overflow-y: auto;
 }
 
-.g-Header__Link {
+.g-Nav__Link {
     padding: var(--size-mouse) var(--size-dog);
 }
 
-.g-Header__Link:hover {
+.g-Nav__Link:hover {
     background-color: var(--color-brown);
 }
 
-.g-Header__Link:focus {
+.g-Nav__Link:focus {
     background-color: var(--color-brown);
 }
 
-.g-Header__Link--Current {
+.g-Nav__Link--Current {
     background-color: var(--color-brown);
 }
 
 .g-Main {
     display: flex;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+}
+
+.g-Aside {
+    height: 100%;
+    display: flex;
     flex-direction: column;
-    align-items: center;
+    background-color: var(--color-gray-light);
+    border-right: 2px solid #DDDDDD;
+    padding: var(--size-horse) var(--size-bear);
+}
+
+.g-Section {
+    display: flex;
     width: 100%;
-    padding: 0 var(--size-bear);
+    flex-direction: column;
+    align-items: center;
     margin: var(--size-horse) 0;
-    overflow-x: hidden;
 }
 
 .g-Title {
@@ -229,10 +242,11 @@ body {
 
 .g-Form__Label {
     margin-bottom: var(--size-mouse);
+    position: relative;
 }
 
 .g-Form__Input {
-    margin-bottom: var(--size-lion);
+    margin: var(--size-mouse) 0 var(--size-lion);
     background-color: white;
     border: 1px solid black;
     height: var(--size-camel);
@@ -245,7 +259,7 @@ body {
 }
 
 .g-Form__Select {
-    margin-bottom: var(--size-lion);
+    margin: var(--size-mouse) 0 var(--size-lion);
     background-color: white;
     border: 1px solid black;
     height: var(--size-camel);
@@ -253,6 +267,13 @@ body {
     width: 100%;
 }
 
+.g-Form__ResetSelect {
+    cursor: pointer;
+    position: absolute;
+    top: -3px;
+    right: 0;
+}
+
 .g-Form__Error {
     color: var(--color-red);
     text-align: center;
@@ -261,18 +282,6 @@ body {
 
 /* Buttons */
 
-.g-Button__Search {
-    cursor: pointer;
-    background-color: var(--color-gray);
-    color: white;
-    border: none;
-    height: var(--size-camel);
-    padding: 0 var(--size-dog);
-    border-top: 1px solid black;
-    border-right: 1px solid black;
-    border-bottom: 1px solid black;
-}
-
 .g-Button__Validate {
     display: flex;
     align-items: center;
@@ -338,33 +347,9 @@ body {
     }
 }
 
-.g-Payments__FrequenciesAndSearch {
-    display: flex;
-    align-items: center;
-}
-
-.g-Payments__Search {
-    display: flex;
-    margin: 0 var(--size-bear) 0 0;
-}
-
-.g-Payments__SearchInput {
-    margin-bottom: 0;
-    width: 150px;
-}
-
-.g-Payments__Frequencies {
+.g-Payments__Filters {
     display: flex;
-    margin: 0 var(--size-dog);
-}
-
-.g-Payments__Frequency {
-    margin: 0 var(--size-mouse);
-}
-
-.g-Payments__Frequency--Selected {
-    color: var(--color-red);
-    font-weight: bold;
+    flex-direction: column;
 }
 
 @media screen and (max-width: 500px) {
@@ -383,6 +368,7 @@ body {
     background-color: var(--color-green);
     border-radius: var(--size-bee);
     color: white;
+    padding: var(--size-bee);
     margin-bottom: var(--size-bear);
     text-align: center;
 }
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()