From 510df4729c471c65457a99fe96645c0232b4b23a Mon Sep 17 00:00:00 2001
From: Kerollmops <clement@meilisearch.com>
Date: Tue, 29 Dec 2020 00:44:42 +0100
Subject: [PATCH] Append the facet value to the facet query on click

---
 http-ui/public/script.js | 19 +++++++++++++++++--
 http-ui/public/style.css |  5 +++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/http-ui/public/script.js b/http-ui/public/script.js
index b73bd0cd5..58fc74eab 100644
--- a/http-ui/public/script.js
+++ b/http-ui/public/script.js
@@ -34,6 +34,8 @@ $('#query, #facet').on('input', function () {
           for (value of data.facets[facet_name]) {
               const elem = document.createElement('span');
               elem.classList.add("tag");
+              elem.setAttribute('data-name', facet_name);
+              elem.setAttribute('data-value', value);
               elem.innerHTML = `${facet_name}:${value}`;
               facets.appendChild(elem);
           }
@@ -67,6 +69,19 @@ $('#query, #facet').on('input', function () {
           results.appendChild(elem);
         }
 
+        // When we click on a tag we append the facet value
+        // at the end of the facet query.
+        $('#facets .tag').on('click', function () {
+          let name = $(this).attr("data-name");
+          let value = $(this).attr("data-value");
+
+          let facet_query = $('#facet').val().trim();
+          if (facet_query === "") {
+            $('#facet').val(`${name} = "${value}"`).trigger('input');
+          } else {
+            $('#facet').val(`${facet_query} AND ${name} = "${value}"`).trigger('input');
+          }
+        });
       },
       beforeSend: function () {
         if (request !== null) {
@@ -88,8 +103,8 @@ $('#db-size').text(function(index, text) {
   return filesize(parseInt(text))
 });
 
-// We trigger the input when we load the script, this way
-// we execute a placeholder search when the input is empty.
+// We trigger the input when we load the script.
 $(window).on('load', function () {
+  // We execute a placeholder search when the input is empty.
   $('#query').trigger('input');
 });
diff --git a/http-ui/public/style.css b/http-ui/public/style.css
index 2e58c24ff..1de348082 100644
--- a/http-ui/public/style.css
+++ b/http-ui/public/style.css
@@ -8,6 +8,7 @@
     margin-right: 1em;
     margin-bottom: 1em;
 }
+
 #facets {
     max-width: 900px;
     margin: 20px auto 0 auto;
@@ -16,6 +17,10 @@
   overflow: scroll;
 }
 
+#facets .tag:hover {
+  cursor: pointer;
+}
+
 #logo-white {
   display: none;
 }