Merge pull request #3917 from navikt/feature/lagre-siste-soek

Feature/lagre siste soek

Author: betsytraran

apps/dolly-frontend/src/main/js/__tests__/KodeverkSelect.test.tsx

@@ -13,7 +13,7 @@ dollyTest(
 
 		expect(screen.getByText('Tester kodeverk')).toBeInTheDocument()
 
-		expect(screen.getByText('Henter verdier ...')).toBeInTheDocument()
+		expect(screen.getByText('Laster ...')).toBeInTheDocument()
 
 		worker.use(
 			// override the initial kodeverk request handler to return non-empty list

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/datepicker/DateInput.tsx

@@ -70,6 +70,8 @@ export const DateInput = ({
 	useEffect(() => {
 		if (!fieldValue) {
 			setFormattedValue('')
+		} else {
+			setFormattedValue(formatDate(fieldValue))
 		}
 	}, [fieldValue])
 

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/monthpicker/Monthpicker.tsx

@@ -1,7 +1,7 @@
 import { Label } from '@/components/ui/form/inputs/label/Label'
 import { InputWrapper } from '@/components/ui/form/inputWrapper/InputWrapper'
 import { MonthPicker, useMonthpicker } from '@navikt/ds-react'
-import { addYears, isDate, subYears } from 'date-fns'
+import { addYears, isDate, isSameDay, subYears } from 'date-fns'
 import { useFormContext } from 'react-hook-form'
 import * as _ from 'lodash-es'
 import { useEffect } from 'react'
@@ -35,7 +35,7 @@ export const Monthpicker = ({
 				? date
 				: new Date(date)
 
-	const { monthpickerProps, inputProps, reset } = useMonthpicker({
+	const { monthpickerProps, inputProps, reset, setSelected } = useMonthpicker({
 		fromDate: minDate || subYears(new Date(), 125),
 		toDate: maxDate || addYears(new Date(), 5),
 		onMonthChange: (selectedDate) => {
@@ -52,6 +52,11 @@ export const Monthpicker = ({
 	useEffect(() => {
 		if (!eksisterendeVerdi && inputProps.value) {
 			reset()
+		} else if (
+			eksisterendeVerdi &&
+			!isSameDay(new Date(formattedDate), new Date(monthpickerProps.selected))
+		) {
+			setSelected(formattedDate)
 		}
 	}, [eksisterendeVerdi])
 

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/select/Select.tsx

@@ -106,7 +106,7 @@ export const Select = ({
 
 	const getPlaceholder = () => {
 		if (isLoading) {
-			return 'Henter verdier ...'
+			return 'Laster ...'
 		} else if (options?.length === 0) {
 			return 'Ingen tilgjengelige verdier'
 		}

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/textInput/TextInput.tsx

@@ -95,9 +95,7 @@ export const TextInput = ({
 			setFieldValue(formValue || '')
 		} else if (!useControlled) {
 			const propValue = value
-			if (propValue !== undefined) {
-				setFieldValue(propValue || '')
-			}
+			setFieldValue(propValue || '')
 		}
 	}, [value, formValue, useControlled])
 

apps/dolly-frontend/src/main/js/src/components/ui/soekForm/SisteSoek.tsx

@@ -0,0 +1,94 @@
+import { useHentLagredeSoek } from '@/utils/hooks/useSoek'
+import { Chips, VStack } from '@navikt/ds-react'
+import * as _ from 'lodash-es'
+import { isDate, isSameDay, isValid } from 'date-fns'
+
+export enum soekType {
+	dolly = 'DOLLY',
+	tenor = 'TENOR',
+}
+
+const listOptions = [
+	'registreRequest',
+	'miljoer',
+	'utenlandskPersonIdentifikasjon',
+	'roller',
+	'inntekt.inntektstyper',
+	'inntekt.forskuddstrekk',
+]
+
+export const SisteSoek = ({ type, formValues, handleChange, handleChangeList }) => {
+	const { lagredeSoek } = useHentLagredeSoek(type)
+
+	const lagredeSoekData = []
+	lagredeSoek?.forEach((soek) => {
+		Object.entries(soek?.soekVerdi)?.forEach((verdi) => {
+			if (listOptions.includes(verdi[0]) && Array.isArray(verdi[1])) {
+				verdi[1]?.forEach((item) => {
+					if (!lagredeSoekData?.some((i) => i.value === item.value)) {
+						lagredeSoekData.push(item)
+					}
+				})
+			} else if (verdi[1]?.path && !lagredeSoekData?.some((item) => item.path === verdi[1]?.path)) {
+				lagredeSoekData.push(verdi[1])
+			}
+		})
+	})
+
+	const isSelected = (option) => {
+		const { path, value } = option
+		const formValue = _.get(formValues, path)
+		if (listOptions.includes(path)) {
+			return formValue?.includes(value)
+		} else if (
+			formValue?.length > 8 &&
+			isDate(new Date(formValue)) &&
+			isValid(new Date(formValue))
+		) {
+			return isSameDay(new Date(formValue), new Date(value))
+		}
+		return formValue === value
+	}
+
+	const handleClick = (option) => {
+		const formValue = _.get(formValues, option.path)
+		if (listOptions.includes(option.path)) {
+			const listValues = formValue || []
+			handleChangeList(
+				!listValues?.includes(option.value)
+					? [...listValues, option.value]
+					: listValues?.filter((item) => item !== option.value),
+				option.path,
+				option.label,
+			)
+		} else if (
+			formValue?.length > 8 &&
+			isDate(new Date(formValue)) &&
+			isValid(new Date(formValue))
+		) {
+			handleChange(
+				!isSameDay(new Date(formValue), new Date(option.value)) ? option.value : null,
+				option.path,
+				option.label,
+			)
+		} else {
+			handleChange(formValue !== option.value ? option.value : null, option.path, option.label)
+		}
+	}
+
+	return (
+		<VStack gap="3" style={{ marginBottom: '15px' }}>
+			<Chips>
+				{lagredeSoekData?.slice(0, 10).map((option, idx) => (
+					<Chips.Toggle
+						key={option.label}
+						selected={isSelected(option)}
+						onClick={() => handleClick(option)}
+					>
+						{option.label}
+					</Chips.Toggle>
+				))}
+			</Chips>
+		</VStack>
+	)
+}

apps/dolly-frontend/src/main/js/src/pages/brukerPage/BrukernavnVelger.tsx

@@ -53,6 +53,7 @@ export default ({ eksisterendeBrukernavn, organisasjon, addToSession }: Brukerna
 		resolver: yupResolver(validation),
 		mode: 'onChange',
 	})
+
 	const [loading, setLoading] = useState(false)
 	const [error, setError] = useState(null as string | null)
 
@@ -115,8 +116,15 @@ export default ({ eksisterendeBrukernavn, organisasjon, addToSession }: Brukerna
 						size="large"
 						defaultValue={eksisterendeBrukernavn}
 						isDisabled={loading || !!eksisterendeBrukernavn}
+						useControlled
+					/>
+					<DollyTextInput
+						name="epost"
+						label="Epost"
+						size="large"
+						isDisabled={loading}
+						useControlled
 					/>
-					<DollyTextInput name="epost" label="Epost" size="large" isDisabled={loading} />
 					<ButtonDiv>
 						<NavButton
 							type="submit"

apps/dolly-frontend/src/main/js/src/pages/dollySoek/DollySoekPage.tsx

@@ -1,9 +1,97 @@
 import Title from '../../components/title'
 import { Hjelpetekst } from '@/components/hjelpetekst/Hjelpetekst'
 import { bottom } from '@popperjs/core'
-import { SoekForm } from '@/pages/dollySoek/SoekForm'
+import { dollySoekLocalStorageKey, SoekForm } from '@/pages/dollySoek/SoekForm'
+import { SisteSoek, soekType } from '@/components/ui/soekForm/SisteSoek'
+import { useEffect, useRef, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import * as _ from 'lodash-es'
+import { dollySoekInitialValues } from '@/pages/dollySoek/dollySoekInitialValues'
+import { DollyApi } from '@/service/Api'
+import { codeToNorskLabel } from '@/utils/DataFormatter'
 
 export default () => {
+	const [lagreSoekRequest, setLagreSoekRequest] = useState({})
+	const lagreSoekRequestRef = useRef(lagreSoekRequest)
+
+	useEffect(() => {
+		lagreSoekRequestRef.current = lagreSoekRequest
+	}, [lagreSoekRequest])
+
+	useEffect(() => {
+		return () => {
+			if (Object.keys(lagreSoekRequestRef.current).length > 0) {
+				DollyApi.lagreSoek(lagreSoekRequestRef.current, soekType.dolly)
+					.then((response) => console.log(response))
+					.catch((error) => console.error(error))
+			}
+		}
+	}, [])
+
+	const localStorageValue = localStorage.getItem(dollySoekLocalStorageKey)
+	const initialValues = localStorageValue ? JSON.parse(localStorageValue) : dollySoekInitialValues
+
+	const initialValuesClone = _.cloneDeep(initialValues)
+	const formMethods = useForm({
+		mode: 'onChange',
+		defaultValues: initialValuesClone,
+	})
+
+	const [formRequest, setFormRequest] = useState(initialValues)
+
+	const setRequest = (request: any) => {
+		localStorage.setItem(dollySoekLocalStorageKey, JSON.stringify(request))
+		setFormRequest(request)
+	}
+
+	const { watch, reset } = formMethods
+	const values = watch()
+
+	const handleChange = (value: any, path: string, label: string) => {
+		const updatedRequest = { ...values, side: 0, seed: null }
+		_.set(updatedRequest, path, value)
+		reset(updatedRequest)
+		setRequest(updatedRequest)
+		if (value) {
+			setLagreSoekRequest({
+				...lagreSoekRequest,
+				[path]: {
+					path: path,
+					value: value,
+					label: label,
+				},
+			})
+		} else {
+			setLagreSoekRequest({
+				...lagreSoekRequest,
+				[path]: undefined,
+			})
+		}
+	}
+
+	const handleChangeList = (value: any, path: string, label: string) => {
+		const list = value?.map((item: any) => item.value ?? item)
+		const updatedRequest = { ...values, [path]: list, side: 0, seed: null }
+		reset(updatedRequest)
+		setRequest(updatedRequest)
+		if (value?.length > 0) {
+			const request = value.map((i) => ({
+				path: path,
+				value: i.value ?? i,
+				label: label?.includes(':') ? label : `${label}: ${i.label ?? codeToNorskLabel(i)}`,
+			}))
+			setLagreSoekRequest({
+				...lagreSoekRequest,
+				[path]: request,
+			})
+		} else {
+			setLagreSoekRequest({
+				...lagreSoekRequest,
+				[path]: [],
+			})
+		}
+	}
+
 	return (
 		<div>
 			<div className="flexbox--align-center--justify-start">
@@ -13,7 +101,22 @@ export default () => {
 					eksisterende personer til nye formål.
 				</Hjelpetekst>
 			</div>
-			<SoekForm />
+			<SisteSoek
+				type={soekType.dolly}
+				formValues={formMethods.watch()}
+				handleChange={handleChange}
+				handleChangeList={handleChangeList}
+			/>
+			<SoekForm
+				formMethods={formMethods}
+				localStorageValue={localStorageValue}
+				handleChange={handleChange}
+				handleChangeList={handleChangeList}
+				setRequest={setRequest}
+				formRequest={formRequest}
+				lagreSoekRequest={lagreSoekRequest}
+				setLagreSoekRequest={setLagreSoekRequest}
+			/>
 		</div>
 	)
 }