From 2b4b1acd9b74989686c976ac8807fe20530fb680 Mon Sep 17 00:00:00 2001
From: Yader Velasquez <yader@netlandish.com>
Date: Mon, 12 Feb 2024 16:45:38 -0600
Subject: [PATCH] Improvement for exclude/include form and advanced search
 section

References: https://todo.code.netlandish.com/~netlandish/links/47
---
 static/js/advancedsearch.js | 33 +++++++++++++++++++++++++++++++++
 templates/link_list.html    | 32 +++++++++++++++++---------------
 2 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/static/js/advancedsearch.js b/static/js/advancedsearch.js
index b036c10..32a444b 100644
--- a/static/js/advancedsearch.js
+++ b/static/js/advancedsearch.js
@@ -1,5 +1,6 @@
 var url = document.querySelector('body').getAttribute('data-autocomplete');
 var tagSelectors = document.querySelectorAll(".tag-selector");
+var form = document.getElementById("advanced-search");
 
 function autocomplete() {
     tags = this.value.split(",")
@@ -55,3 +56,35 @@ tagSelectors.forEach(function(tagSelector) {
     tagSelector.addEventListener('keyup', autocomplete);
 });
 
+form.addEventListener("submit", function(e) {
+    e.preventDefault();
+    var qValue = form.elements.q.value;
+    var tagValue = form.elements.tag.value;
+    var excludeValue = form.elements.exclude.value;
+
+    // Desactivar los elementos con valores vacíos
+    if (qValue === "") {
+        form.elements.q.disabled = true;
+    }
+    if (tagValue === "") {
+        form.elements.tag.disabled = true;
+    } else {
+        tagValue = tagValue.split(", ").join(",");
+        if (tagValue.endsWith(",")) {
+            tagValue = tagValue.slice(0, -1);
+        }
+        form.elements.tag.value = tagValue;
+    }
+    if (excludeValue === "") {
+        form.elements.exclude.disabled = true;
+    } else {
+        excludeValue = excludeValue.split(", ").join(",");
+        if (excludeValue.endsWith(",")) {
+            excludeValue = excludeValue.slice(0, -1);
+        }
+        form.elements.exclude.value = excludeValue;
+    }
+    this.submit();
+})
+
+
diff --git a/templates/link_list.html b/templates/link_list.html
index 611b71e..6c54b6e 100644
--- a/templates/link_list.html
+++ b/templates/link_list.html
@@ -13,23 +13,25 @@
               </button>
           </div>
           {{if .advancedSearch}}
-              <div>
-                  <p><a href="#">{{.pd.Data.advanced_search}}</a></p>
+              <details>
+                  <summary>{{.pd.Data.advanced_search}}</summary>
                   <div>
-                      <label>{{.pd.Data.include_tags}}</label>
-                      <input type="text" name="tag" value="{{.tagFilter}}" class="tag-selector" autocomplete="off"/>
-                      <div class="d-none autocomplete-tags">Include</div>
+                      <div>
+                          <label>{{.pd.Data.include_tags}}</label>
+                          <input type="text" name="tag" value="{{.tagFilter}}" class="tag-selector" autocomplete="off"/>
+                          <div class="d-none autocomplete-tags"></div>
+                      </div>
+                      <div>
+                          <label>{{.pd.Data.exclude_tags}}</label>
+                          <input type="text" name="exclude" value="{{.excludeTagFilter}}" class="tag-selector" autocomplete="off"/>
+                          <div class="d-none autocomplete-tags"></div>
+                      </div>
+                      <p class="mt-1 pull-right">
+                      <a href="#" class="button primary is-small">{{.pd.Data.clear}}</a>
+                      <button type="submit" class="button primary is-small">{{.pd.Data.apply}}</button>
+                      </p>
                   </div>
-                  <div>
-                      <label>{{.pd.Data.exclude_tags}}</label>
-                      <input type="text" name="exclude" value="{{.excludeTagFilter}}" class="tag-selector" autocomplete="off"/>
-                      <div class="d-none autocomplete-tags">Exclude</div>
-                  </div>
-                  <p class="mt-1 pull-right">
-                    <a href="#" class="button primary is-small">{{.pd.Data.clear}}</a>
-                    <button type="submit" class="button primary is-small">{{.pd.Data.apply}}</button>
-                  </p>
-              </div>
+              </details>
           {{end}}
       </form>
   </div>
-- 
2.45.2