Tweaker tilpasset søk

Author: anders-nom

common/contentSearch.ts

@@ -26,4 +26,5 @@ export type ContentSearchParams = {
     type?: ContentSearchType;
     withChildCategories?: boolean;
     categoryKeys?: string[];
+    isCustom?: boolean;
 };

src/components/left-section/search/search-input/SearchInput.tsx

@@ -4,7 +4,7 @@ import { ContentSearchParams, ContentSearchResult } from '../../../../../common/
 import { useApiFetch } from '../../../../fetch/useApiFetch';
 import { classNames } from '../../../../utils/classNames';
 import { SearchSettings } from './search-settings/SearchSettings';
-import { getInitialSearchParams, persistSearchParams } from './params-initial-state';
+import { getInitialSearchParams, initialSearchParams } from './params-initial-state';
 import { useAppState } from '../../../../state/useAppState';
 
 import style from './SearchInput.module.css';
@@ -23,17 +23,15 @@ export const SearchInput = ({ setSearchResult, className }: Props) => {
         getInitialSearchParams(basePath)
     );
 
-    const setSearchParamsPartial = (params: Partial<ContentSearchParams>) => {
-        const newParams = { ...searchParams, ...params };
-        persistSearchParams(newParams, basePath);
-        setSearchParams(newParams);
-    };
-
     const { fetchSearch } = useApiFetch();
 
     return (
         <div className={classNames(style.search, className)}>
-            <SearchSettings searchParams={searchParams} setSearchParams={setSearchParamsPartial} />
+            <SearchSettings
+                searchParams={searchParams}
+                setSearchParams={setSearchParams}
+                reset={() => setSearchParams({ ...initialSearchParams, query: searchParams.query })}
+            />
             <form
                 role={'search'}
                 onSubmit={(e) => {
@@ -60,7 +58,7 @@ export const SearchInput = ({ setSearchResult, className }: Props) => {
                     hideLabel={true}
                     size={'small'}
                     ref={inputRef}
-                    onChange={(value) => setSearchParamsPartial({ query: value })}
+                    onChange={(value) => setSearchParams({ ...searchParams, query: value })}
                 />
             </form>
         </div>

src/components/left-section/search/search-input/params-initial-state.ts

@@ -3,7 +3,7 @@ import Cookies from 'js-cookie';
 
 const getCookieKey = (basePath: string) => `cms-archive-search-settings${basePath}`;
 
-const initialParamsRequired: ContentSearchParams = {
+export const initialSearchParams: ContentSearchParams = {
     from: 0,
     size: 50,
     withChildCategories: true,
@@ -18,14 +18,14 @@ export const getInitialSearchParams = (basePath: string): ContentSearchParams =>
 
             return {
                 ...parsed,
-                ...initialParamsRequired,
+                ...initialSearchParams,
             };
         } catch (e) {
             console.error(`Failed to parse search params from cookie - ${e}`);
         }
     }
 
-    return initialParamsRequired;
+    return initialSearchParams;
 };
 
 export const persistSearchParams = (params: ContentSearchParams, basePath: string) => {

src/components/left-section/search/search-input/search-settings/SearchSettings.module.css

@@ -2,7 +2,7 @@
     width: 100%;
 }
 
-.labels {
+.topRow {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -49,6 +49,11 @@
     }
 }
 
+.radioGroups {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
 .searchFields {
     display: flex;
     align-items: center;
@@ -67,6 +72,6 @@
 .categoriesSelector {
     ul {
         gap: 0.25rem;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
     }
 }

src/components/left-section/search/search-input/search-settings/SearchSettings.tsx

@@ -1,73 +1,97 @@
 import React, { useState } from 'react';
 import { Button, HelpText, Label, Radio, RadioGroup, UNSAFE_Combobox } from '@navikt/ds-react';
-import { ChevronDownIcon } from '@navikt/aksel-icons';
+import { ChevronDownIcon, XMarkIcon } from '@navikt/aksel-icons';
 import { ContentSearchParams } from '../../../../../../common/contentSearch';
 import { classNames } from '../../../../../utils/classNames';
 import { useAppState } from '../../../../../state/useAppState';
 import { CmsCategoryListItem } from '../../../../../../common/cms-documents/category';
+import { persistSearchParams } from '../params-initial-state';
 
 import style from './SearchSettings.module.css';
 
 type Props = {
     searchParams: ContentSearchParams;
-    setSearchParams: (params: Partial<ContentSearchParams>) => void;
+    setSearchParams: (params: ContentSearchParams) => void;
+    reset: () => void;
 };
 
-export const SearchSettings = ({ searchParams, setSearchParams }: Props) => {
+export const SearchSettings = ({ searchParams, setSearchParams, reset }: Props) => {
     const [isOpen, setIsOpen] = useState(false);
 
     const { appContext } = useAppState();
+    const { rootCategories, basePath } = appContext;
 
-    const { sort, categoryKeys, type } = searchParams;
+    const { sort, categoryKeys, type, isCustom } = searchParams;
 
-    const { titlesToKeys, keysToTitles } = createKeysTitlesMaps(appContext.rootCategories);
+    const { titlesToKeys, keysToTitles } = createKeysTitlesMaps(rootCategories);
     const categoryKeysSelected = new Set<string>(categoryKeys);
     const categoryTitlesSelected = [...categoryKeysSelected].map((key) => keysToTitles[key]);
     const categoryTitlesAll = Object.keys(titlesToKeys);
 
+    const updateSearchParams = (params: Partial<ContentSearchParams>) => {
+        const newParams: ContentSearchParams = { ...searchParams, ...params, isCustom: true };
+        persistSearchParams(newParams, basePath);
+        setSearchParams(newParams);
+    };
+
     return (
         <div className={style.container}>
-            <div className={style.labels}>
+            <div className={style.topRow}>
                 <Label size={'small'}>{'Søk'}</Label>
-                <Button
-                    size={'xsmall'}
-                    variant={'tertiary'}
-                    className={style.toggle}
-                    onClick={() => setIsOpen(!isOpen)}
-                >
-                    {'Tilpass søket'}
-                    <ChevronDownIcon className={classNames(style.icon, isOpen && style.open)} />
-                </Button>
+                <div>
+                    {isCustom && (
+                        <Button
+                            size={'xsmall'}
+                            variant={'tertiary'}
+                            className={style.toggle}
+                            onClick={reset}
+                        >
+                            {'Nullstill'}
+                            <XMarkIcon />
+                        </Button>
+                    )}
+                    <Button
+                        size={'xsmall'}
+                        variant={'tertiary'}
+                        className={style.toggle}
+                        onClick={() => setIsOpen(!isOpen)}
+                    >
+                        {'Tilpass søket'}
+                        <ChevronDownIcon className={classNames(style.icon, isOpen && style.open)} />
+                    </Button>
+                </div>
             </div>
             <div className={classNames(style.settings, isOpen && style.open)}>
-                <RadioGroup
-                    size={'small'}
-                    legend={'Søk etter...'}
-                    value={type || 'titles'}
-                    onChange={(value) => setSearchParams({ type: value })}
-                >
-                    <Radio value={'titles'}>{'Tittel'}</Radio>
-                    <span className={style.withHelp}>
-                        <Radio value={'locations'}>{'URL'}</Radio>
-                        <HelpText wrapperClassName={style.help}>
-                            {'Prefix-søk på pathname. F.eks. vil '}
-                            <code>{'https://www.nav.no/no/person/arbeid'}</code>
-                            {' gi treff på alle sider med en path som starter med '}
-                            <code>{'/no/person/arbeid'}</code>
-                        </HelpText>
-                    </span>
-                    <Radio value={'all'}>{'Alt innhold'}</Radio>
-                </RadioGroup>
-                <RadioGroup
-                    size={'small'}
-                    legend={'Sortering'}
-                    value={sort || 'score'}
-                    onChange={(value) => setSearchParams({ sort: value })}
-                >
-                    <Radio value={'score'}>{'Beste treff'}</Radio>
-                    <Radio value={'name'}>{'Tittel'}</Radio>
-                    <Radio value={'datetime'}>{'Sist endret'}</Radio>
-                </RadioGroup>
+                <div className={style.radioGroups}>
+                    <RadioGroup
+                        size={'small'}
+                        legend={'Søk etter...'}
+                        value={type || 'titles'}
+                        onChange={(value) => updateSearchParams({ type: value })}
+                    >
+                        <Radio value={'titles'}>{'Tittel'}</Radio>
+                        <span className={style.withHelp}>
+                            <Radio value={'locations'}>{'URL'}</Radio>
+                            <HelpText wrapperClassName={style.help}>
+                                {'Prefix-søk på pathname. F.eks. vil '}
+                                <code>{'https://www.nav.no/no/person/arbeid'}</code>
+                                {' gi treff på alle sider med en path som starter med '}
+                                <code>{'/no/person/arbeid'}</code>
+                            </HelpText>
+                        </span>
+                        <Radio value={'all'}>{'Alt innhold'}</Radio>
+                    </RadioGroup>
+                    <RadioGroup
+                        size={'small'}
+                        legend={'Sortering'}
+                        value={sort || 'score'}
+                        onChange={(value) => updateSearchParams({ sort: value })}
+                    >
+                        <Radio value={'score'}>{'Beste treff'}</Radio>
+                        <Radio value={'name'}>{'Tittel'}</Radio>
+                        <Radio value={'datetime'}>{'Sist endret'}</Radio>
+                    </RadioGroup>
+                </div>
                 <UNSAFE_Combobox
                     label={'Avgrens til valgte kategorier'}
                     size={'small'}
@@ -85,7 +109,7 @@ export const SearchSettings = ({ searchParams, setSearchParams }: Props) => {
                             categoryKeysSelected.delete(key);
                         }
 
-                        setSearchParams({ categoryKeys: [...categoryKeysSelected] });
+                        updateSearchParams({ categoryKeys: [...categoryKeysSelected] });
                     }}
                 />
             </div>