LWS-143: Related hits search (#1059)

Adds a search input in the toolbar section for the related search result

* Added component SearchRelated that searches in the context of the current _o and _p.
* Zero results for the related search is no longer hidden, as it can now happen as a result of an active search.
* Some modifications to 'main search' to stay independent of related search.

TODO
* Searching completely clears any existing filters, due to frontends inability to modify _q param in a safe way. If we need to keep the filters, maybe template links (such as in year range) could be a solution.


---------

Co-authored-by: Johan Bisse Mattsson <bisse.mattsson@kb.se>

lxl-web/src/lib/components/Search.svelte

@@ -9,9 +9,11 @@
 	export let autofocus: boolean = false;
 
 	$: showAdvanced = $page.url.searchParams.get('_x') === 'advanced';
-	let q = showAdvanced
-		? $page.url.searchParams.get('_q')?.trim()
-		: $page.url.searchParams.get('_i')?.trim();
+	let q = $page.params.fnurgel
+		? '' //don't reflect related search on resource pages
+		: showAdvanced
+			? $page.url.searchParams.get('_q')?.trim()
+			: $page.url.searchParams.get('_i')?.trim();
 
 	let params = getSortedSearchParams(addDefaultSearchParams($page.url.searchParams));
 	// Always reset these params on new search
@@ -22,10 +24,10 @@
 	const searchParams = Array.from(params);
 
 	afterNavigate(({ to }) => {
-		/** Update input value after navigation */
+		/** Update input value after navigation on /find route */
 		if (to?.url) {
 			let param = showAdvanced ? '_q' : '_i';
-			q = new URL(to.url).searchParams.get(param)?.trim();
+			q = $page.params.fnurgel ? '' : new URL(to.url).searchParams.get(param)?.trim();
 		}
 	});
 
@@ -48,7 +50,7 @@
 		type="search"
 		name="_q"
 		{placeholder}
-		aria-label="Sök"
+		aria-label={$page.data.t('search.search')}
 		spellcheck="false"
 		bind:value={q}
 		{autofocus}

lxl-web/src/lib/components/find/FacetRange.svelte

@@ -53,7 +53,6 @@
 			bind:value={rangeTo}
 		/>
 	</div>
-	<!-- todo: reusable button classes -->
 	<button disabled={!rangeFrom && !rangeTo} class="button-primary" type="submit"
 		>{$page.data.t('general.apply')}</button
 	>

lxl-web/src/lib/components/find/SearchRelated.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import BiSearch from '~icons/bi/search';
+	import { page } from '$app/stores';
+	import type { Link } from '$lib/utils/xl';
+
+	export let view: Link;
+
+	let _i = $page.url.searchParams.get('_i')?.trim() || '';
+
+	let url = new URL($page.url.origin + view['@id']);
+	let searchParams = new URLSearchParams(url.search);
+	searchParams.set('_sort', $page.url.searchParams.get('_sort')?.trim() || '');
+
+	function handleSubmit() {
+		if (!_i) {
+			_i = '*';
+		}
+	}
+</script>
+
+<form action="" on:submit={handleSubmit} class="flex w-full gap-2 lg:max-w-xl">
+	<label for="search-related" class="sr-only">{$page.data.t('search.relatedSearchLabel')}</label>
+	<input
+		class="flex-1"
+		id="search-related"
+		type="search"
+		placeholder={$page.data.t('search.relatedSearchLabel')}
+		bind:value={_i}
+	/>
+	<button class="button-primary" type="submit">
+		<BiSearch fill="currentColor" aria-hidden="true" />
+		<span class="sr-only sm:not-sr-only">{$page.data.t('search.search')}</span>
+	</button>
+
+	{#each searchParams as [name, value]}
+		{#if name !== '_i' && name !== '_q'}
+			<input type="hidden" {name} {value} />
+		{/if}
+	{/each}
+	<input type="hidden" name="_i" value={_i} />
+	<input type="hidden" name="_q" value={_i} />
+</form>

lxl-web/src/lib/components/find/SearchResult.svelte

@@ -10,6 +10,7 @@
 	import BiChevronDown from '~icons/bi/chevron-down';
 	import type { SearchResult, DisplayMapping } from '$lib/types/search';
 	import { shouldShowMapping } from '$lib/utils/search';
+	import SearchRelated from './SearchRelated.svelte';
 
 	let showFiltersModal = false;
 	export let searchResult: SearchResult;
@@ -108,6 +109,7 @@
 				<div class="results max-w-content">
 					<div
 						class="toolbar flex min-h-14 items-center justify-between page-padding md:min-h-fit md:p-0 md:pb-4"
+						class:has-search={$page.params.fnurgel}
 					>
 						<a
 							href={`${$page.url.pathname}?${$page.url.searchParams.toString()}#filters`}
@@ -151,6 +153,12 @@
 								{$page.data.t('search.noResults')}
 							{/if}
 						</span>
+						<div class="search-related flex justify-start">
+							{#if $page.params.fnurgel}
+								{@const activePredicate = searchResult.predicates.filter((p) => p.selected)}
+								<SearchRelated view={activePredicate[0].view} />
+							{/if}
+						</div>
 						{#if numHits > 0}
 							<div
 								class="sort-select flex flex-col items-end justify-self-end"
@@ -190,10 +198,15 @@
 
 <style lang="postcss">
 	.toolbar {
-		display: grid;
+		@apply grid;
 		grid-template-areas:
-			'filter-modal-toggle sort-select'
-			'hits hits';
+			'filter-modal-toggle .'
+			'search-related search-related'
+			'hits sort-select';
+	}
+
+	.toolbar.has-search {
+		@apply gap-4;
 	}
 
 	.find-layout {
@@ -227,6 +240,19 @@
 		grid-area: hits;
 	}
 
+	.search-related {
+		grid-area: search-related;
+	}
+
+	@media screen and (min-width: theme('screens.sm')) {
+		.toolbar {
+			grid-template-areas:
+				'filter-modal-toggle search-related'
+				'hits sort-select';
+			grid-template-columns: auto 1fr;
+		}
+	}
+
 	@media screen and (min-width: theme('screens.md')) {
 		.filters {
 			display: block;
@@ -237,7 +263,9 @@
 		}
 
 		.toolbar {
-			grid-template-areas: 'hits sort-select';
+			grid-template-areas:
+				'search-related search-related'
+				'hits sort-select';
 		}
 	}
 	.tab-header {
@@ -253,4 +281,11 @@
 		@apply border-primary pb-3.5;
 		border-bottom-width: 0.125rem;
 	}
+
+	@media screen and (min-width: theme('screens.lg')) {
+		.toolbar {
+			grid-template-areas: 'hits search-related sort-select';
+			grid-template-columns: auto minmax(auto, theme('screens.sm')) auto;
+		}
+	}
 </style>

lxl-web/src/lib/i18n/locales/en.js

@@ -91,7 +91,8 @@ export default {
 		showFewer: 'Show fewer',
 		showDetails: 'Show more',
 		hideDetails: 'Show less',
-		occursAs: 'as'
+		occursAs: 'as',
+		relatedSearchLabel: 'Search the results'
 	},
 	sort: {
 		sort: 'Sort',

lxl-web/src/lib/i18n/locales/sv.js

@@ -90,7 +90,8 @@ export default {
 		showFewer: 'Visa färre',
 		showDetails: 'Visa mer',
 		hideDetails: 'Visa mindre',
-		occursAs: 'förekommer som'
+		occursAs: 'förekommer som',
+		relatedSearchLabel: 'Sök i resultaten'
 	},
 	sort: {
 		sort: 'Sortera',

lxl-web/src/routes/(app)/[[lang=lang]]/[fnurgel=fnurgel]/+page.server.ts

@@ -90,7 +90,10 @@ export const load = async ({ params, url, locals, fetch, isDataRequest }) => {
 
 		if (resourceId) {
 			searchParams.set('_o', resourceId);
-			searchParams.set('_i', '*');
+
+			if (!searchParams.has('_i')) {
+				searchParams.set('_i', '*');
+			}
 			searchParams = getSortedSearchParams(addDefaultSearchParams(searchParams));
 		}
 
@@ -108,8 +111,7 @@ export const load = async ({ params, url, locals, fetch, isDataRequest }) => {
 			}
 		}
 
-		// Hide zero results from resource page
-		if (result.totalItems > 0) {
+		if (result) {
 			return (await asResult(
 				result,
 				displayUtil,