From 8fd165a79b5f1d6cd4b6042e7b7bfc9f6e7c3f6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Tue, 21 May 2024 23:43:56 +0200
Subject: [PATCH] form changes

---
 .../pages/archivePage/archivePage.jsx         | 35 +++++++++++++------
 .../pages/archivePage/archivePage.less        |  2 +-
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/client/homebrew/pages/archivePage/archivePage.jsx b/client/homebrew/pages/archivePage/archivePage.jsx
index f271c2f95..4f6aab683 100644
--- a/client/homebrew/pages/archivePage/archivePage.jsx
+++ b/client/homebrew/pages/archivePage/archivePage.jsx
@@ -120,7 +120,7 @@ const ArchivePage = createClass({
         const title = document.getElementById('title').value || '';
         const v3 = document.getElementById('v3').checked;
         const legacy = document.getElementById('legacy').checked;
-        
+
         this.setState({
             totalBrews: null,
         });
@@ -164,6 +164,16 @@ const ArchivePage = createClass({
         );
     },
 
+    validateInput: function (e) {
+        const textInput = e.target
+        const submitButton = document.getElementById('searchButton');
+        if (textInput.value.length > 3) {
+            submitButton.disabled = false;
+        } else {
+            submitButton.disabled = true;
+        }
+    },
+
     renderForm: function () {
         return (
             <div className="brewLookup">
@@ -176,6 +186,9 @@ const ArchivePage = createClass({
                             type="text"
                             name="title"
                             defaultValue={this.state.title}
+                            onKeyUp={(e) => {
+                                this.validateInput(e);
+                            }}
                             onKeyDown={(e) => {
                                 if (e.key === 'Enter') {
                                     this.loadTotal();
@@ -191,15 +204,14 @@ const ArchivePage = createClass({
                     </small>
                     <label>
                         Results per page
-                        <input
-                            id="size"
-                            type="number"
-                            min="6"
-                            step="2"
-                            max="30"
-                            defaultValue={this.state.pageSize}
-                            name="pageSize"
-                        />
+                        <select name="pageSize" id="size">
+                            <option value="6">6</option>
+                            <option value="10" default>10</option>
+                            <option value="16">16</option>
+                            <option value="20">20</option>
+                            <option value="24">24</option>
+                            <option value="30">30</option>
+                        </select>
                     </label>
 
                     <label>
@@ -230,11 +242,12 @@ const ArchivePage = createClass({
             		*/}
 
                     <button
-                        className="search"
+                        id="searchButton"
                         onClick={() => {
                             this.loadTotal();
                             this.loadPage(1, true);
                         }}
+                        disabled
                     >
                         Search
                         <i
diff --git a/client/homebrew/pages/archivePage/archivePage.less b/client/homebrew/pages/archivePage/archivePage.less
index 31dba3cd6..90162a90e 100644
--- a/client/homebrew/pages/archivePage/archivePage.less
+++ b/client/homebrew/pages/archivePage/archivePage.less
@@ -83,7 +83,7 @@ body {
                     input {
                         margin: 0 10px;
                     }
-                    .search {
+                    .searchButton {
                         position:absolute;
                         right:10px;
                         bottom:20px;