Merge branch 'EMC-31-search-textbox-for-facet' into 'develop'

EMC-31 "Search textbox for facets"

Closes EMC-31

See merge request eip/catalogue!749

templates/html/search/_facets.ftlh

@@ -29,6 +29,7 @@
   <#if facet.results?size gt 0>
     <div class="facet">
       <div class="facet-header">${facet.displayName}</div>
+      <input placeholder="search ${facet.displayName?lower_case}" id="search-facet-${facet.displayName?replace(' ', '-')}" class="form-control search-facet">
       <@facetResults facet.results/>
     </div>
   </#if>

web/less/search.less

@@ -65,6 +65,25 @@ main {
             padding: 1em;
         }
 
+        .search-facet {
+            width: 90%;
+            border-radius: 10px;
+        }
+
+        .ui-autocomplete {
+            font-size: 18px !important;
+            border-radius: 4px;
+
+            .ui-menu-item {
+                .ui-menu-item-wrapper {
+                    padding: 3px 1em 3px 1em;
+                }
+                .ui-menu-item-wrapper.ui-state-active {
+                    background-color: var(--ukceh-colours-green);
+                    border-color: var(--ukceh-colours-green);
+                }
+            }
+        }
     }
 }
 

web/src/index.js

@@ -2,6 +2,7 @@
 /* eslint no-new: "off" */
 import './globals'
 import $ from 'jquery'
+import { createFacetSearch } from './search/src/SearchFacets.js'
 import Backbone from 'backbone'
 import 'bootstrap'
 import {
@@ -49,6 +50,8 @@ const $edit = $('.edit-control')
 const $serviceAgreement = $('.service-agreement')
 const $navbarToggle = $('.nav-toggle')
 
+initWithFetchingData()
+
 if ($catalogue.length) {
   initCatalogue()
 }
@@ -384,3 +387,13 @@ function initMetricsReport () {
   })
   new SearchRouter({ model: app, location: window.location })
 }
+
+/*
+  Page data is fetched on page load,
+  any js function for Freemarker template can be initialized here.
+*/
+function initWithFetchingData () {
+  $.getJSON(window.location.href, data => {
+    createFacetSearch(data.facets)
+  })
+}

web/src/search/src/SearchFacets.js

@@ -0,0 +1,25 @@
+import $ from 'jquery'
+
+export function createFacetSearch (facets) {
+  facets.forEach(facet => {
+    const id = '#search-facet-' + facet.displayName.replaceAll(' ', '-')
+    if (typeof facet.results !== 'undefined') {
+      const data = facet.results
+        .filter(item => !item.active)
+        .map(item => ({
+          label: item.name,
+          url: item.url
+        }))
+      $(id).autocomplete({
+        minLength: 1,
+        source: data,
+        appendTo: '#search',
+        select: (event, ui) => {
+          $(id).val(ui.item.label)
+          $('a[href="' + ui.item.url + '"]').first().trigger('click')
+          return false
+        }
+      })
+    }
+  })
+}

web/src/search/src/templates/facetsPanelTemplate.js

@@ -10,6 +10,7 @@ export default _.template(`
 <% _.each(facets, function(facet) { %>
   <div class="facet">
     <div class="facet-header"><%= facet.displayName %></div>
+    <input placeholder="search <%= facet.displayName.toLowerCase() %>" id="search-facet-<%= facet.displayName.replaceAll(' ', '-') %>" class="form-control search-facet">
     <%= template({"results": facet.results, "template": template}) %>
   </div>
 <% }); %>

web/src/search/src/views/FacetsPanelView.js

@@ -1,6 +1,7 @@
 import Backbone from 'backbone'
 import panelTpl from '../templates/facetsPanelTemplate'
 import resultsTpl from '../templates/facetResultsTemplate'
+import { createFacetSearch } from '../SearchFacets.js'
 
 export default Backbone.View.extend({
 
@@ -15,10 +16,14 @@ export default Backbone.View.extend({
      * results set.
      */
   render () {
+    const facets = this.model.getResults().attributes.facets
     this.$el.html(panelTpl({
-      facets: this.model.getResults().attributes.facets,
+      facets: facets,
       template: resultsTpl
     }))
+
+    createFacetSearch(facets)
+
     return this
   }
 })