From 20971eb0fa6d3d289fd87648b7a94b2c3b6e4466 Mon Sep 17 00:00:00 2001
From: Lin Yihai <linyihai@huawei.com>
Date: Tue, 31 Oct 2023 13:44:00 +0800
Subject: [PATCH] add sort by select-box for searching crate

---
 src/web/releases.rs                |  9 ++++++++-
 static/keyboard.js                 | 14 +++++++++++++-
 templates/header/topbar_begin.html |  1 +
 templates/header/topbar_end.html   | 13 +++++++++++++
 templates/style/_navbar.scss       |  6 +++---
 5 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/web/releases.rs b/src/web/releases.rs
index 093012aec..802a8b372 100644
--- a/src/web/releases.rs
+++ b/src/web/releases.rs
@@ -435,6 +435,7 @@ pub(super) struct Search {
     #[serde(rename = "releases")]
     pub(super) results: Vec<Release>,
     pub(super) search_query: Option<String>,
+    pub(super) search_sort_by: Option<String>,
     pub(super) previous_page_link: Option<String>,
     pub(super) next_page_link: Option<String>,
     /// This should always be `ReleaseType::Search`
@@ -451,6 +452,7 @@ impl Default for Search {
             search_query: None,
             previous_page_link: None,
             next_page_link: None,
+            search_sort_by: None,
             release_type: ReleaseType::Search,
             status: http::StatusCode::OK,
         }
@@ -528,7 +530,10 @@ pub(crate) async fn search_handler(
         .get("query")
         .map(|q| q.to_string())
         .unwrap_or_else(|| "".to_string());
-
+    let sort_by = params
+        .get("sort")
+        .map(|q| q.to_string())
+        .unwrap_or_else(|| "relevance".to_string());
     // check if I am feeling lucky button pressed and redirect user to crate page
     // if there is a match. Also check for paths to items within crates.
     if params.remove("i-am-feeling-lucky").is_some() || query.contains("::") {
@@ -599,6 +604,7 @@ pub(crate) async fn search_handler(
     } else if !query.is_empty() {
         let query_params: String = form_urlencoded::Serializer::new(String::new())
             .append_pair("q", &query)
+            .append_pair("sort", &sort_by)
             .append_pair("per_page", &RELEASES_IN_RELEASES.to_string())
             .finish();
 
@@ -619,6 +625,7 @@ pub(crate) async fn search_handler(
         title,
         results: search_result.results,
         search_query: Some(executed_query),
+        search_sort_by: Some(sort_by),
         next_page_link: search_result
             .next_page
             .map(|params| format!("/releases/search?paginate={}", b64.encode(params))),
diff --git a/static/keyboard.js b/static/keyboard.js
index 24151e7ec..e469d3272 100644
--- a/static/keyboard.js
+++ b/static/keyboard.js
@@ -1,4 +1,4 @@
-(function() {
+(function () {
     function focusSearchInput() {
         // On the index page, we have a "#search" input. If we are on this page, we want to go back
         // to this one and not the one in the header navbar.
@@ -110,6 +110,18 @@
         }
     }
 
+    function handleSortByChange() {
+        var inputSearch = document.getElementById("nav-search");
+        var searchForm = document.getElementById("nav-search-form");
+        if (inputSearch.value && searchForm) {
+            searchForm.submit()
+        }
+    }
+    var searchSortBySel = document.getElementById("nav-sort");
+    if (searchSortBySel) {
+        searchSortBySel.addEventListener("change", handleSortByChange)
+    }
+
     document.onkeypress = handleKey;
     document.onkeydown = handleKey;
 })();
diff --git a/templates/header/topbar_begin.html b/templates/header/topbar_begin.html
index c28e5ed4d..eeb00be7e 100644
--- a/templates/header/topbar_begin.html
+++ b/templates/header/topbar_begin.html
@@ -8,6 +8,7 @@
         <div class="pure-menu pure-menu-horizontal" role="navigation" aria-label="Main navigation">
             <form action="/releases/search"
                   method="GET"
+                  id = "nav-search-form"
                   class="landing-search-form-nav {%
                   if is_latest_version is defined and not is_latest_version %}not-latest{% endif
                   %} {% if metadata.yanked %}yanked{% endif %}">
diff --git a/templates/header/topbar_end.html b/templates/header/topbar_end.html
index 1e3f1cf2d..8eb17933b 100644
--- a/templates/header/topbar_end.html
+++ b/templates/header/topbar_end.html
@@ -67,6 +67,19 @@
                     <input id="nav-search" name="query" type="text" aria-label="Find crate by search query" tabindex="-1"
                         placeholder="Find crate" {%- if search_query %} value="{{ search_query }}" {%- endif %}>
                 </div>
+                {# The Search Sort by dropdown menu#}
+                <div id="search-select-nav"> 
+                    <label for="nav-sort">
+                        {{ "list" | fas }}
+                    </label>
+                    <select name="sort" id="nav-sort">
+                        <option value="relevance" {%- if search_sort_by and search_sort_by == "relevance" %} selected="selected" {%- endif %}>Relevance</option>
+                        <option value="downloads" {%- if search_sort_by and search_sort_by == "downloads" %} selected="selected" {%- endif %}>All-Time Downloads</option>
+                        <option value="recent-downloads" {%- if search_sort_by and search_sort_by == "recent-downloads" %} selected="selected" {%- endif %}>Recent Downloads</option>
+                        <option value="recent-updates" {%- if search_sort_by and search_sort_by == "recent-updates" %} selected="selected" {%- endif %}>Recent Updates</option>
+                        <option value="new" {%- if search_sort_by and search_sort_by == "new" %} selected="selected" {%- endif %}>Newly Added</option>
+                    </select>
+                </div>
             </form>
         </div>
     </div>
diff --git a/templates/style/_navbar.scss b/templates/style/_navbar.scss
index 549550d18..2c42af19f 100644
--- a/templates/style/_navbar.scss
+++ b/templates/style/_navbar.scss
@@ -99,7 +99,7 @@ div.nav-container {
         display: flex;
         flex-direction: row;
 
-        #search-input-nav {
+        #search-input-nav, #search-select-nav {
             max-width: 150px;
             display: none;
             border-left: 1px solid var(--color-border);
@@ -120,7 +120,7 @@ div.nav-container {
                 font-size: 12.8px;
             }
 
-            input {
+            input, select {
                 border: none;
                 margin: 0 1em 0 0;
                 font-size: 12.8px;
@@ -363,7 +363,7 @@ div.nav-container {
     }
 }
 
-#nav-search {
+#nav-search, #nav-sort {
     color: var(--color-navbar-standard);
 }