add sort by select-box for searching crate

Author: linyihai

src/web/releases.rs

@@ -418,6 +418,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`
@@ -434,6 +435,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,
         }
@@ -507,7 +509,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("::") {
@@ -578,6 +583,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();
 
@@ -598,6 +604,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))),

static/keyboard.js

@@ -110,6 +110,18 @@
         }
     }
 
+    function handleSortByChange() {
+        const inputSearch = document.getElementById("nav-search");
+        const searchForm = document.getElementById("nav-search-form");
+        if (inputSearch.value && searchForm) {
+            searchForm.submit()
+        }
+    }
+    const searchSortBySel = document.getElementById("nav-sort");
+    if (searchSortBySel) {
+        searchSortBySel.addEventListener("change", handleSortByChange)
+    }
+
     document.onkeypress = handleKey;
     document.onkeydown = handleKey;
 })();

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 %}">

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 sort by select-box #}
+                <div id="search-select-nav"> 
+                    <label for="nav-sort">
+                        {{ "list" | fas }}
+                    </label>
+                    <select name="sort" id="nav-sort" aria-label="Find crate by the sort by select-box"  tabindex="-1">
+                        <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>

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;
@@ -130,7 +130,7 @@ div.nav-container {
             }
         }
 
-        input.search-input-nav:focus {
+        input.search-input-nav:focus,  select.search-select-nav:focus {
             outline: unset;
         }
 
@@ -363,7 +363,7 @@ div.nav-container {
     }
 }
 
-#nav-search {
+#nav-search, #nav-sort {
     color: var(--color-navbar-standard);
 }