Merge branch 'EMC-330-large-facets-UI-improvement' into 'develop'

Add multi-select widget for facet search. EMC-330 Closes EMC-330 See merge request eip/catalogue!769
NERC-CEH · Nov 18, 2024 · b6d86e9 · b6d86e9
2 parents fef97e3 + 672f432
commit b6d86e9
Show file tree

Hide file tree

Showing 10 changed files with 193 additions and 98 deletions.
diff --git a/templates/html/search/_facets.ftlh b/templates/html/search/_facets.ftlh
@@ -5,32 +5,21 @@
   Where as the rest of the template matches up with
     /web/src/scripts/templates/facetsPanelTemplate.js
 -->
-<#macro facetResults results>
-  <ul>
-    <#list results as facet>
-      <#if facet.name?has_content && facet.name != 'Unknown' >
-        <li>
-          <a href="${facet.url}" title="${facet.name} (${facet.count})">${facet.name} <small class="facet-count">(${facet.count})</small></a>
-          <#if facet.active >
-            <a href="${facet.url}" title="${facet.name} (${facet.count})">
-              <span class="fa-solid fa-xmark"></span>
-            </a>
-          </#if>
-          <#if facet.subFacetResults?has_content>
-            <@facetResults facet.subFacetResults/>
-          </#if>
-        </li>
+<#macro facetResults facet>
+  <select style="display: none;" class="form-select search-facet" multiple="multiple" data-placeholder="search ${facet.displayName?lower_case}">
+    <#list facet.results as facetItem>
+      <#if facetItem.name?has_content && facetItem.name != 'Unknown' >
+        <option <#if facetItem.active> selected="selected"</#if> value="${facetItem.url}">${facetItem.name} (${facetItem.count})</option>
       </#if>
     </#list>
-  </ul>
+  </select>
 </#macro>
 
 <#list facets as facet>
   <#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 input-sm">
-      <@facetResults facet.results/>
+      <@facetResults facet/>
     </div>
   </#if>
 </#list>
diff --git a/web/less/editor.less b/web/less/editor.less
@@ -5,6 +5,8 @@
 @import (inline) "../node_modules/jquery-ui/dist/themes/base/jquery-ui.min.css";
 @import (inline) "../node_modules/leaflet.markercluster/dist/MarkerCluster.css";
 @import (inline) "../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css";
+@import (inline) "../node_modules/select2/dist/css/select2.min.css";
+@import (inline) "../node_modules/select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css";
 
 .edit-mode {
     a#atlwdg-trigger {
@@ -478,3 +480,38 @@ ul.ui-autocomplete {
         background: #999;
     }
 }
+
+.select2-container {
+    .select2--large {
+        font-size: 1.7rem !important;
+
+        .select2-selection__rendered {
+            li {
+                font-size: 1.7rem !important;
+            }
+
+            .select2-selection__choice {
+                flex-direction: row-reverse !important;
+
+               .select2-selection__choice__remove {
+                    margin-left: 8px;
+                    margin-top: 4px;
+               }
+            }
+        }
+
+        .select2-results__options {
+            max-height: 290px !important;
+
+            li {
+                font-size: 1.7rem !important;
+                padding-left: 24px !important;
+            }
+
+            .select2-results__option--selected {
+                color: darkgray !important;
+                background-color: inherit !important;
+            }
+        }
+    }
+}
diff --git a/web/less/search.less b/web/less/search.less
@@ -64,13 +64,6 @@ main {
             z-index: 999;
             padding: 1em;
         }
-
-        .form-control.search-facet {
-            display:none;
-            opacity: 85%;
-            position: sticky;
-            top: 0;
-        }
     }
 }
 
@@ -96,10 +89,6 @@ main {
 
             .facet {
 
-                &:not(:has(li)) {
-                    display: none;
-                }
-
                 .facet-header {
                     font-weight: 600;
                     font-size: 1.35em;

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -100,6 +100,8 @@
         "leaflet-draw": "^1.0.4",
         "leaflet.markercluster": "^1.5.3",
         "sweetalert2": "^11.7.27",
-        "underscore": "^1.13.6"
+        "underscore": "^1.13.6",
+        "select2": "4.1.0-rc.0",
+        "select2-bootstrap-5-theme": "~1.3.0"
     }
 }
diff --git a/web/src/index.js b/web/src/index.js
@@ -2,7 +2,6 @@
 /* eslint no-new: "off" */
 import './globals'
 import $ from 'jquery'
-import { createFacetSearch } from './search/src/SearchFacets.js'
 import Backbone from 'backbone'
 import 'bootstrap'
 import {
@@ -50,8 +49,6 @@ const $edit = $('.edit-control')
 const $serviceAgreement = $('.service-agreement')
 const $navbarToggle = $('.nav-toggle')
 
-initWithFetchingData()
-
 if ($catalogue.length) {
   initCatalogue()
 }
@@ -337,7 +334,8 @@ function initPermission () {
 
 function initSearch () {
   const app = new SearchApp()
-  new SearchAppView({ model: app })
+  const searchAppView = new SearchAppView({ model: app })
+  searchAppView.facetsPanelView.createFacetSearch(app)
   new SearchRouter({ model: app, location: window.location })
   new MessageView({ model: app })
 }
@@ -387,13 +385,3 @@ 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)
-  })
-}
diff --git a/web/src/search/src/SearchFacets.js b/web/src/search/src/SearchFacets.js
diff --git a/web/src/search/src/templates/facetResultsTemplate.js b/web/src/search/src/templates/facetResultsTemplate.js
@@ -8,23 +8,11 @@ import _ from 'underscore'
  * corresponding freemarker template /templates/search/_facets.tpl
  */
 export default _.template(`
-  <ul>
-      <% _.each(results, function(facet) { %>
-          <% if(facet.name != 'Unknown') { %>
-              <li>
-                  <a href="<%=facet.url%>" title="<%=facet.name%> <span>(<%=facet.count%>)</span>"><%=facet.name%> <small class="facet-count">(<%=facet.count%>)</small></a>
-
-                  <% if(facet.active) { %>
-                      <a href="<%=facet.url%>" title="<%=facet.name%> <span>(<%=facet.count%>)</span>">
-                      <span class="fa-solid fa-times"></span>
-                      </a>
-                  <% } %>
-
-                  <% if (facet.subFacetResults) { %>
-                      <%= template({results:facet.subFacetResults, template: template}) %>
-                  <% } %>
-              <% } %>
-              </li>
-      <% }); %>
-  </ul>
+    <select style="display: none;" class="form-select search-facet" multiple="multiple" data-placeholder="search <%=facet.displayName.toLowerCase() %>">
+        <% _.each(facet.results, function(facetItem) { %>
+            <% if(facetItem.name != 'Unknown') { %>
+                <option <% if(facetItem.active) { %> selected="selected" <% } %> value="<%=facetItem.url%>"><%=facetItem.name%> (<%=facetItem.count%>)</option>
+            <% } %>
+        <% }); %>
+    </select>
 `)
diff --git a/web/src/search/src/templates/facetsPanelTemplate.js b/web/src/search/src/templates/facetsPanelTemplate.js
@@ -8,10 +8,11 @@ import _ from 'underscore'
  */
 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 input-sm">
-    <%= template({"results": facet.results, "template": template}) %>
-  </div>
+  <% if(facet.results) { %>
+    <div class="facet">
+      <div class="facet-header"><%= facet.displayName %></div>
+      <%= template({"facet": facet, "template": template}) %>
+    </div>
+  <% } %>
 <% }); %>
 `)