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: {

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

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>