From 0654e968b7df48bbebd33a21012faf7535b9a33f Mon Sep 17 00:00:00 2001 From: Rex Lai Date: Fri, 25 Oct 2024 16:54:13 +0100 Subject: [PATCH 1/3] add search box for facet. EMC-31 --- templates/html/search/_facets.ftlh | 1 + .../src/templates/facetsPanelTemplate.js | 1 + web/src/search/src/views/FacetsPanelView.js | 30 ++++++++++++++++++- 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/templates/html/search/_facets.ftlh b/templates/html/search/_facets.ftlh index 70c5d254a..9b59a01f2 100644 --- a/templates/html/search/_facets.ftlh +++ b/templates/html/search/_facets.ftlh @@ -29,6 +29,7 @@ <#if facet.results?size gt 0>
${facet.displayName}
+ <@facetResults facet.results/>
diff --git a/web/src/search/src/templates/facetsPanelTemplate.js b/web/src/search/src/templates/facetsPanelTemplate.js index bf8b96b65..642e1830a 100644 --- a/web/src/search/src/templates/facetsPanelTemplate.js +++ b/web/src/search/src/templates/facetsPanelTemplate.js @@ -10,6 +10,7 @@ export default _.template(` <% _.each(facets, function(facet) { %>
<%= facet.displayName %>
+ <%= template({"results": facet.results, "template": template}) %>
<% }); %> diff --git a/web/src/search/src/views/FacetsPanelView.js b/web/src/search/src/views/FacetsPanelView.js index 2d9473b04..614ba9638 100644 --- a/web/src/search/src/views/FacetsPanelView.js +++ b/web/src/search/src/views/FacetsPanelView.js @@ -5,9 +5,33 @@ import resultsTpl from '../templates/facetResultsTemplate' export default Backbone.View.extend({ initialize () { + $.getJSON(window.location.href, data => { + this.createFacetSearch(data.facets) + }) + this.listenTo(this.model, 'results-sync', this.render) }, + createFacetSearch(facets) { + facets.forEach(facet => { + const id = "#search-facet-" + facet.displayName.replaceAll(' ', '-') + if (typeof facet.results !== "undefined") { + this.$(id).autocomplete({ + minLength: 1, + source: facet.results.map(item => ({ + label: item.name, + url: item.url + })), + select: (event, ui) => { + this.$(id).val(ui.item.label) + this.$("a[href='" + ui.item.url +"']").first().trigger("click") + return false; + } + }) + } + }) + }, + /* * Render the facet results panel as long as we have some results currently set. * @@ -15,10 +39,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 })) + + this.createFacetSearch(facets) + return this } }) From 6a1744221c94820f1d77b63d4cd8957515254811 Mon Sep 17 00:00:00 2001 From: Rex Lai Date: Mon, 28 Oct 2024 13:55:35 +0000 Subject: [PATCH 2/3] add facet search box style. EMC-31 --- templates/html/search/_facets.ftlh | 2 +- web/less/search.less | 19 +++++++++++++ web/src/index.js | 10 +++++++ web/src/search/src/SearchFacets.js | 25 +++++++++++++++++ .../src/templates/facetsPanelTemplate.js | 2 +- web/src/search/src/views/FacetsPanelView.js | 28 ++----------------- 6 files changed, 58 insertions(+), 28 deletions(-) create mode 100644 web/src/search/src/SearchFacets.js diff --git a/templates/html/search/_facets.ftlh b/templates/html/search/_facets.ftlh index 9b59a01f2..e77fe2351 100644 --- a/templates/html/search/_facets.ftlh +++ b/templates/html/search/_facets.ftlh @@ -29,7 +29,7 @@ <#if facet.results?size gt 0>
${facet.displayName}
- + <@facetResults facet.results/>
diff --git a/web/less/search.less b/web/less/search.less index 077a844a8..155cf093d 100644 --- a/web/less/search.less +++ b/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); + } + } + } } } diff --git a/web/src/index.js b/web/src/index.js index 360326d81..915a734bf 100644 --- a/web/src/index.js +++ b/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,10 @@ 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 new file mode 100644 index 000000000..f686b6798 --- /dev/null +++ b/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; + } + }) + } + }) +} diff --git a/web/src/search/src/templates/facetsPanelTemplate.js b/web/src/search/src/templates/facetsPanelTemplate.js index 642e1830a..62abb76b1 100644 --- a/web/src/search/src/templates/facetsPanelTemplate.js +++ b/web/src/search/src/templates/facetsPanelTemplate.js @@ -10,7 +10,7 @@ export default _.template(` <% _.each(facets, function(facet) { %>
<%= facet.displayName %>
- + <%= template({"results": facet.results, "template": template}) %>
<% }); %> diff --git a/web/src/search/src/views/FacetsPanelView.js b/web/src/search/src/views/FacetsPanelView.js index 614ba9638..34f514898 100644 --- a/web/src/search/src/views/FacetsPanelView.js +++ b/web/src/search/src/views/FacetsPanelView.js @@ -1,37 +1,13 @@ import Backbone from 'backbone' import panelTpl from '../templates/facetsPanelTemplate' import resultsTpl from '../templates/facetResultsTemplate' +import { createFacetSearch } from '../SearchFacets.js' export default Backbone.View.extend({ initialize () { - $.getJSON(window.location.href, data => { - this.createFacetSearch(data.facets) - }) - this.listenTo(this.model, 'results-sync', this.render) }, - - createFacetSearch(facets) { - facets.forEach(facet => { - const id = "#search-facet-" + facet.displayName.replaceAll(' ', '-') - if (typeof facet.results !== "undefined") { - this.$(id).autocomplete({ - minLength: 1, - source: facet.results.map(item => ({ - label: item.name, - url: item.url - })), - select: (event, ui) => { - this.$(id).val(ui.item.label) - this.$("a[href='" + ui.item.url +"']").first().trigger("click") - return false; - } - }) - } - }) - }, - /* * Render the facet results panel as long as we have some results currently set. * @@ -45,7 +21,7 @@ export default Backbone.View.extend({ template: resultsTpl })) - this.createFacetSearch(facets) + createFacetSearch(facets) return this } From 10adcea4d0ac63933970b36e8da35360b1501ed8 Mon Sep 17 00:00:00 2001 From: Rex Lai Date: Mon, 28 Oct 2024 14:14:36 +0000 Subject: [PATCH 3/3] fix javascript lint error. EMC-31 --- web/src/index.js | 5 ++++- web/src/search/src/SearchFacets.js | 12 ++++++------ web/src/search/src/views/FacetsPanelView.js | 1 + 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/web/src/index.js b/web/src/index.js index 915a734bf..6a9983695 100644 --- a/web/src/index.js +++ b/web/src/index.js @@ -388,7 +388,10 @@ 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. +/* + 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 index f686b6798..6834875ed 100644 --- a/web/src/search/src/SearchFacets.js +++ b/web/src/search/src/SearchFacets.js @@ -1,9 +1,9 @@ import $ from 'jquery' -export function createFacetSearch(facets) { +export function createFacetSearch (facets) { facets.forEach(facet => { - const id = "#search-facet-" + facet.displayName.replaceAll(' ', '-') - if (typeof facet.results !== "undefined") { + const id = '#search-facet-' + facet.displayName.replaceAll(' ', '-') + if (typeof facet.results !== 'undefined') { const data = facet.results .filter(item => !item.active) .map(item => ({ @@ -13,11 +13,11 @@ export function createFacetSearch(facets) { $(id).autocomplete({ minLength: 1, source: data, - appendTo: "#search", + appendTo: '#search', select: (event, ui) => { $(id).val(ui.item.label) - $("a[href='" + ui.item.url +"']").first().trigger("click") - return false; + $('a[href="' + ui.item.url + '"]').first().trigger('click') + return false } }) } diff --git a/web/src/search/src/views/FacetsPanelView.js b/web/src/search/src/views/FacetsPanelView.js index 34f514898..d6032db23 100644 --- a/web/src/search/src/views/FacetsPanelView.js +++ b/web/src/search/src/views/FacetsPanelView.js @@ -8,6 +8,7 @@ export default Backbone.View.extend({ initialize () { this.listenTo(this.model, 'results-sync', this.render) }, + /* * Render the facet results panel as long as we have some results currently set. *