From 316855836c5516c7a15d47823dc7074a49f05735 Mon Sep 17 00:00:00 2001
From: Yader Velasquez <yader@netlandish.com>
Date: Mon, 12 Feb 2024 15:28:42 -0600
Subject: [PATCH] Basic UI for advanced search

References: https://todo.code.netlandish.com/~netlandish/links/47
---
 core/routes.go           | 23 ++++++++++++++-------
 helpers.go               |  2 +-
 static/css/style.css     |  9 +++++++++
 templates/link_list.html | 43 +++++++++++++++++++++++++++++-----------
 4 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/core/routes.go b/core/routes.go
index 559bd71..97dcfd4 100644
--- a/core/routes.go
+++ b/core/routes.go
@@ -1276,9 +1276,9 @@ func (s *Service) OrgLinksList(c echo.Context) error {
 	}
 
 	var (
-		hasUnreadFilter  bool
-		hasStarredFilter bool
-		hasAllFilter     bool
+		hasUnreadFilter,
+		hasStarredFilter,
+		hasAllFilter bool
 	)
 	if c.QueryParam("filter") != "" {
 		op.Var("filter", c.QueryParam("filter"))
@@ -1295,19 +1295,21 @@ func (s *Service) OrgLinksList(c echo.Context) error {
 		hasAllFilter = true
 	}
 
-	var tag string
+	var (
+		tag,
+		excludeTag,
+		search string
+	)
+
 	if c.QueryParam("tag") != "" {
 		tag = c.QueryParam("tag")
 		op.Var("tag", tag)
 	}
-
-	var excludeTag string
 	if c.QueryParam("exclude") != "" {
 		excludeTag = c.QueryParam("exclude")
 		op.Var("excludeTag", excludeTag)
 
 	}
-	var search string
 	if c.QueryParam("q") != "" {
 		search = c.QueryParam("q")
 		op.Var("search", search)
@@ -1351,6 +1353,10 @@ func (s *Service) OrgLinksList(c echo.Context) error {
 	pd.Data["mark_as_non_starred"] = lt.Translate("Unstar")
 	pd.Data["no_links"] = lt.Translate("No Links")
 	pd.Data["archive"] = lt.Translate("Archive")
+	pd.Data["advanced_search"] = lt.Translate("Advanced Search")
+	pd.Data["include_tags"] = lt.Translate("Include Tags")
+	pd.Data["exclude_tags"] = lt.Translate("Exclude Tags")
+	pd.Data["apply"] = lt.Translate("Apply")
 	orgLinks := result.OrgLinks.Result
 	gmap := gobwebs.Map{
 		"pd":               pd,
@@ -1358,7 +1364,10 @@ func (s *Service) OrgLinksList(c echo.Context) error {
 		"org":              org,
 		"isOrgLink":        isOrgLink,
 		"canRead":          canRead,
+		"tagFilter":        strings.Replace(tag, ",", ", ", -1),
+		"excludeTagFilter": strings.Replace(excludeTag, ",", ", ", -1),
 		"navFlag":          navFlag,
+		"advancedSearch":   true,
 		"hasUnreadFilter":  hasUnreadFilter,
 		"hasStarredFilter": hasStarredFilter,
 		"hasAllFilter":     hasAllFilter,
diff --git a/helpers.go b/helpers.go
index 1b78917..5979903 100644
--- a/helpers.go
+++ b/helpers.go
@@ -429,7 +429,7 @@ func ParsePendingBaseURLs(ctx context.Context, userAgent string) error {
 	return nil
 }
 
-// GetPaginationParams returns the params needed for cursos pagination
+// GetPaginationParams returns the params needed for cursor pagination
 func GetPaginationParams(pagination, tag, search, cursor string) template.URL {
 	queryParams := make(url.Values)
 	queryParams.Set(pagination, cursor)
diff --git a/static/css/style.css b/static/css/style.css
index a6bf6f2..134703b 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -71,6 +71,11 @@ body {
   align-items: center;
   margin-bottom: 1rem;
 }
+
+.app-header-advanced-search {
+  align-items: flex-start !important;
+}
+
 .app-header--centered {
   justify-content: center;
 }
@@ -98,6 +103,10 @@ body {
   border-bottom-left-radius: 0px;
   border: 0px;
 }
+.app-header__search--stack {
+  flex-direction: column;
+}
+
 .card > header {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
diff --git a/templates/link_list.html b/templates/link_list.html
index cefa46e..22bf1cf 100644
--- a/templates/link_list.html
+++ b/templates/link_list.html
@@ -1,16 +1,35 @@
 {{template "base" .}}
-<section class="app-header">
+<section class="app-header app-header-advanced-search">
   <h1 class="app-header__title">{{ if .isOrgLink }}{{ .org.Name }} {{.pd.Title}}{{else if not .isPopular}}{{.pd.Data.recent}}{{else}}{{.pd.Data.popular}}{{end}}</h1>
-  <form class="app-header__search app-header__search--inline"
-      method="GET"
-      action="{{if .isPopular}}{{reverse "core:popular_link_list"}}{{else if .isOrgLink}}{{reverse "core:home_link_list"}}{{else}}{{reverse "core:recent_link_list"}}{{end}}">
-    <input type="search" name="q" value="{{.search}}"/>
-    <button type="submit" class="button dark icon-only">
-      <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
-      </svg>
-    </button>
-  </form>
+  <div>
+      <form class="app-header__search app-header__search--stack" method="GET"
+        action="{{if .isPopular}}{{reverse "core:popular_link_list"}}{{else if .isOrgLink}}{{reverse "core:home_link_list"}}{{else}}{{reverse "core:recent_link_list"}}{{end}}">
+          <div class="app-header__search app-header__search--inline">
+              <input type="search" name="q" value="{{.search}}"/>
+              <button type="submit" class="button dark icon-only">
+                  <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+                  </svg>
+              </button>
+          </div>
+          {{if .advancedSearch}}
+              <div>
+                  <p><a href="#">{{.pd.Data.advanced_search}}</a></p>
+                  <div>
+                      <label>{{.pd.Data.include_tags}}</label>
+                      <input type="text" name="tag" value="{{.tagFilter}}"/>
+                  </div>
+                  <div>
+                      <label>{{.pd.Data.exclude_tags}}</label>
+                      <input type="text" name="exclude" value="{{.excludeTagFilter}}"/>
+                  </div>
+                  <p class="mt-1 pull-right">
+                    <button type="submit" class="button primary small is-small">{{.pd.Data.apply}}</button>
+                  </p>
+              </div>
+          {{end}}
+      </form>
+  </div>
 </section>
 
 <section class="card shadow-card">
@@ -121,7 +140,7 @@
         {{if .Tags}}
         <div class="link-tag mt-1">
           {{range .Tags}}
-          <a class="link-tag__item link-tag__item--simple" href="?tag={{.Slug}}">#{{.Name}}</a>
+          <a class="link-tag__item link-tag__item--simple" href="{{if $.tagFilter}}?tag={{$.tagFilter}},{{.Slug}}{{else}}?tag={{.Slug}}{{end}}">#{{.Name}}</a>
           {{end}}
         </div>
         {{end}}
-- 
2.45.2