Merge pull request #69 from navikt/search-options

Search options

Author: bdahle

xp-archive/client/contentTree/NavigationBar.module.css

@@ -7,4 +7,16 @@
 
 .search {
     margin-bottom: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.radio {
+    :global(.navds-body-short) {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        align-items: center;
+    }
 }

xp-archive/client/contentTree/NavigationBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Tabs, Search } from '@navikt/ds-react';
+import { Tabs, Search, RadioGroup, Radio, HelpText } from '@navikt/ds-react';
 import { LayerPanel } from './layerPanel/LayerPanel';
 import { useAppState } from 'client/context/appState/useAppState';
 import { fetchJson } from '@common/shared/fetchUtils';
@@ -26,6 +26,7 @@ export const NavigationBar = () => {
     const [searchResultIsOpen, setSearchResultIsOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const [isLoading, setIsLoading] = useState(false);
+    const [searchType, setSearchType] = useState<'curated' | 'other'>('curated');
     const [searchResult, setSearchResult] = useState<SearchResponse>({
         hits: [],
         total: 0,
@@ -38,7 +39,10 @@ export const NavigationBar = () => {
     const searchData = async () => {
         setIsLoading(true);
         const result = await fetchJson<SearchResponse>(SEARCH_API, {
-            params: { query: searchQuery },
+            params: {
+                query: searchQuery,
+                searchType,
+            },
         });
         if (result) {
             setSearchResult(result);
@@ -67,10 +71,34 @@ export const NavigationBar = () => {
                     searchData();
                 }}
             >
+                <RadioGroup
+                    legend="Søk i..."
+                    size="small"
+                    onChange={setSearchType}
+                    value={searchType}
+                >
+                    <Radio className={style.radio} value="curated">
+                        Utvalgte innholdstyper
+                        <HelpText>
+                            <ul>
+                                <li>Produktside</li>
+                                <li>Situasjonsside</li>
+                                <li>Temaartikkel</li>
+                                <li>Slik gjør du det</li>
+                                <li>Aktuelt</li>
+                                <li>Artikkel</li>
+                                <li>Intern lenke</li>
+                                <li>Ekstern lenke</li>
+                            </ul>
+                        </HelpText>
+                    </Radio>
+                    <Radio value="other">Andre innholdstyper</Radio>
+                </RadioGroup>
                 <Search
                     label={'Søk'}
                     value={searchQuery}
                     onChange={(value) => setSearchQuery(value)}
+                    size="small"
                 />
             </form>
             {searchResultIsOpen ? (

xp-archive/client/contentTree/search/SearchResult.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Heading, HelpText, Loader } from '@navikt/ds-react';
+import { Button, Detail, Heading, Loader } from '@navikt/ds-react';
 import { SearchResponse } from 'shared/types';
 import { SearchResultItem } from './SearchResultItem/SearchResultItem';
 
@@ -12,7 +12,25 @@ type SearchResultProps = {
 };
 
 export const SearchResult = ({ isLoading, searchResult, closeSearchResult }: SearchResultProps) => {
-    const { hits, query } = searchResult;
+    const { hits, query, total, hasMore } = searchResult;
+
+    const orderedHits = [...hits].sort((a, b) => {
+        const orderedTypes = [
+            'no.nav.navno:content-page-with-sidemenus',
+            'no.nav.navno:situation-page',
+            'no.nav.navno:themed-article-page',
+            'no.nav.navno:guide-page',
+            'no.nav.navno:current-topic-page',
+            'no.nav.navno:main-article',
+            'no.nav.navno:internal-link',
+            'no.nav.navno:external-link',
+        ];
+
+        const indexA = orderedTypes.indexOf(a.type);
+        const indexB = orderedTypes.indexOf(b.type);
+
+        return indexA - indexB;
+    });
 
     return (
         <div>
@@ -24,21 +42,23 @@ export const SearchResult = ({ isLoading, searchResult, closeSearchResult }: Sea
                         <div>
                             <div className={style.filteredHitsHeadingText}>
                                 <Heading size="small" level="2">
-                                    {`Treff for "${query}" i sidetyper: (${hits.length})`}
+                                    {`Treff for "${query}": (${total})`}
                                 </Heading>
-                                <HelpText>
-                                    Treff i sidetypene Produktside, Situasjonsside, Temaartikkel og
-                                    Slik gjør du det.
-                                </HelpText>
                             </div>
                         </div>
                         <Button variant="tertiary" size="small" onClick={closeSearchResult}>
                             Lukk
                         </Button>
                     </div>
-                    {hits.map((hit) => (
+                    {orderedHits.map((hit) => (
                         <SearchResultItem hit={hit} key={hit._id + hit.layerLocale} />
                     ))}
+                    {hasMore && (
+                        <Detail>
+                            Viser kun de første 1000 treffene. Prøv å avgrens søket om du ikke fant
+                            det du lette etter.
+                        </Detail>
+                    )}
                 </div>
             )}
         </div>

xp-archive/server/src/services/SearchService.ts

@@ -8,20 +8,20 @@ export class SearchService {
     private readonly SEARCH_API = xpServiceUrl('externalArchive/search');
 
     public getSearchHandler: RequestHandler = async (req, res) => {
-        if (!validateQuery(req.query, ['query'], [])) {
+        if (!validateQuery(req.query, ['query'], ['searchType'])) {
             return res.status(400).send('Missing or invalid parameters');
         }
 
-        const { query } = req.query;
-        const searchResponse = await this.search(query);
+        const { query, searchType } = req.query;
+        const searchResponse = await this.search(query, searchType);
 
         return res.status(200).json(searchResponse);
     };
 
-    private async search(query: string): Promise<SearchResponse | null> {
+    private async search(query: string, searchType?: string): Promise<SearchResponse | null> {
         const searchResponse = await fetchJson<SearchResponse>(this.SEARCH_API, {
             headers: { secret: process.env.SERVICE_SECRET },
-            params: { query },
+            params: { query, searchType },
         });
 
         return searchResponse;