From e2143ee0eead6cf7e6fb09b8b06a2eea7d90d8fb Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Thu, 15 Aug 2024 15:54:56 +0200
Subject: [PATCH] Films: Add filter by media type

Copy over the functionality of filtering by media type from the regular
global search, into film_search.js

Also minor adjustments:
* Add `media_type` label to the details of each card. Ideally we could
  unify it with the way it is done inside the gallery. Like showing a
  Blender logo for blend files, timestamp for videos, etc. For now
  simply show the type in a label.
* Remove "Sort By:" label from the sortby element. It's clear from
  context. We could add a "sort" icon using CSS in the future.
* Make all inputs full size. "input-sm" looks weird and it's not needed.
* Move "cancel/clear" button after search. It's not the primary function
  so it shouldn't be right next to the text field.
---
 films/static/films/scripts/film_search.js     | 55 ++++++++++++++++++-
 films/templates/films/latest_assets.html      |  8 +--
 search/templates/search/components/input.html |  2 +-
 3 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/films/static/films/scripts/film_search.js b/films/static/films/scripts/film_search.js
index d2fbd9d4..799a5dc0 100644
--- a/films/static/films/scripts/film_search.js
+++ b/films/static/films/scripts/film_search.js
@@ -13,6 +13,7 @@ const search = instantsearch({
         return {
           query: indexUiState.query,
           sortBy: indexUiState && indexUiState.sortBy,
+          media_type: indexUiState.menu && indexUiState.menu.media_type,
         };
       },
       routeToState(routeState) {
@@ -20,6 +21,9 @@ const search = instantsearch({
           [indexName]: {
             query: routeState.query,
             sortBy: routeState.sortBy,
+            menu: {
+              media_type: routeState.media_type,
+            },
           },
         };
       },
@@ -126,7 +130,10 @@ const renderHits = (renderOptions, isFirstRender) => {
                 <div class="cards-item-extra">
                   <ul>
                     <li>
-                      <i class="i-clock x-sm"></i>&nbsp; ${timeDifference(epochToDate(item.timestamp))}
+                      ${item.media_type}
+                    </li>
+                    <li>
+                      <i class="i-clock x-sm"></i> ${timeDifference(epochToDate(item.timestamp))}
                     </li>
                     <li>
                       ${
@@ -179,6 +186,47 @@ const renderHits = (renderOptions, isFirstRender) => {
 
 const customHits = instantsearch.connectors.connectInfiniteHits(renderHits);
 
+// -------- FILTERS -------- //
+
+// 1. Create a render function
+const renderMenuSelect = (renderOptions, isFirstRender) => {
+  const { items, canRefine, refine, widgetParams } = renderOptions;
+
+  if (isFirstRender) {
+    const select = document.createElement('select');
+
+    select.setAttribute('class', 'form-control');
+    select.addEventListener('change', (event) => {
+      refine(event.target.value);
+    });
+
+    widgetParams.container.insertAdjacentElement('afterbegin', select);
+    // widgetParams.container.appendChild(select);
+  }
+
+  const select = widgetParams.container.querySelector('select');
+
+  select.disabled = !canRefine;
+
+  select.innerHTML = `
+    <option value="">${widgetParams.placeholder}</option>
+    ${items
+      .map(
+        (item) =>
+          `<option
+            value="${item.value}"
+            ${item.isRefined ? 'selected' : ''}
+          >
+            ${titleCase(item.label)}
+          </option>`
+      )
+      .join('')}
+  `;
+};
+
+// 2. Create the custom widget
+const customMenuSelect = instantsearch.connectors.connectMenu(renderMenuSelect);
+
 // -------- CONFIGURE -------- //
 
 const renderConfigure = (renderOptions, isFirstRender) => {};
@@ -202,6 +250,11 @@ search.addWidgets([
       { label: 'Date (old first)', value: 'studio_date_asc' },
     ],
   }),
+  customMenuSelect({
+    container: document.querySelector('#searchMedia'),
+    attribute: 'media_type',
+    placeholder: 'All Types',
+  }),
   customConfigure({
     container: document.querySelector('#hits'),
     searchParameters: {
diff --git a/films/templates/films/latest_assets.html b/films/templates/films/latest_assets.html
index 009145ed..58bd6a0e 100644
--- a/films/templates/films/latest_assets.html
+++ b/films/templates/films/latest_assets.html
@@ -15,13 +15,11 @@
 {% block toolbar %}
   <div class="row mb-3">
     <div class="col">
-      {% include "search/components/input.html" with sm=True %}
+      {% include "search/components/input.html" %}
     </div>
     <div class="col-auto mb-3 mb-md-0 d-md-flex d-none">
-      <div class="input-group input-group-sm" id="sorting">
-        <label class="input-group-text pe-0" for="searchLicence">Sort by:</label>
-        {% comment %} INPUT (Js) {% endcomment %}
-      </div>
+      <div class="input-group" id="searchMedia"></div>
+      <div class="input-group ms-3" id="sorting"></div>
     </div>
   </div>
 {% endblock toolbar %}
diff --git a/search/templates/search/components/input.html b/search/templates/search/components/input.html
index 6f4147d0..54944499 100644
--- a/search/templates/search/components/input.html
+++ b/search/templates/search/components/input.html
@@ -1,7 +1,7 @@
 <div class="input-group w-100 {% if sm %}input-group-sm{% endif %}" id="search-container">
   <input autocapitalize="none" autocomplete="off" autocorrect="off" id="searchInput" class="flex-grow-1 form-control me-3" placeholder="Search tags and kewords" spellcheck="false" type="text">
   <div class="btn-row input-group-addon">
-    <button class="btn" id="clearSearchBtn" title="Cancel"><i class="i-cancel"></i></button>
     <button class="btn btn-primary" id="searchBtn" type="submit"><i class="i-search"></i></button>
+    <button class="btn btn-link" id="clearSearchBtn" title="Cancel"><i class="i-cancel"></i></button>
   </div>
 </div>
-- 
2.30.2