Fetcher riktig fra databasen. Omstrukturerer EditParameter, men er nå…

… hardcoda for kun organisasjoner

apps/dolly-frontend/src/main/js/src/pages/adminPages/Appstyring/AppstyringPage.tsx

@@ -9,8 +9,6 @@ export default () => {
 		return <AdminAccessDenied/>
 	}
 
-	const [apiData , setApiData] = useState([]);
-
 	/*
 	const dataMock = [
 		{parameter: 'Parameter 1', verdi: 'verdi1'},
@@ -24,22 +22,32 @@ export default () => {
 		{parameter: 'Parameter 9', verdi: 'verdi9'},
 		{parameter: 'Parameter 10', verdi: 'verdi10'},
 	]
+
 	 */
 
+	interface FetchData{
+		navn: string
+		tekst: string
+		verdi: string
+		verdier: Array<string>
+	}
+
+	const [apiData , setApiData] = useState<Array<FetchData>>([]);
+	let optionsData: FetchData[] = [];
+
 	useEffect(() => {
 		async function fetchData() {
-			const req = await fetch('/testnav-levende-arbeidsforhold-ansettelsev2/api');
-			const res = await req.json();
-			console.log(res);
+			const data = await fetch('/testnav-levende-arbeidsforhold-ansettelsev2/api')
+				.then(res => res.json())
+				.then(res => {
+					res.map((r: FetchData) => optionsData.push(r))
 
-			if (res && req.ok){
-				setApiData(res);
-			}
+				}).catch(err => console.error(err));
+			console.log(optionsData)
+			setApiData(optionsData);
 		}
-
 		fetchData();
 	}, []);
-
 	return (
 		<>
 			<h1>App-styring</h1>

apps/dolly-frontend/src/main/js/src/pages/adminPages/Appstyring/AppstyringTable.tsx

@@ -1,14 +1,11 @@
 import { Box, Table } from '@navikt/ds-react'
-import React from 'react'
+import React, {useEffect, useState} from 'react'
 import { ErrorBoundary } from '@/components/ui/appError/ErrorBoundary'
 import { EditParameter } from '@/pages/adminPages/Appstyring/EditParameter'
 import {multiFetcherPensjon} from "@/api";
 import {ifPresent} from "@/utils/YupValidations";
 
-export const AppstyringTable = ({ data }: any) => {
-	//TODO: Implementer henting av options pr parameter fra backend
-
-
+export const AppstyringTable = ({data}: any) => {
 
 	const getOptions = (parameter: string) => {
 		return [
@@ -36,13 +33,14 @@ export const AppstyringTable = ({ data }: any) => {
 					</Table.Header>
 					<Table.Body>
 						{data.map((row: any, idx: number) => {
+							console.log(row)
 							return (
 								<Table.Row key={row.navn + idx}>
 									<Table.DataCell width={'50%'}>{row.tekst}</Table.DataCell>
 									<Table.DataCell width={'40%'}>{row.verdi}</Table.DataCell>
 									<Table.DataCell width={'10%'}>
 										<EditParameter
-											name={row.tekst}
+											name={row.navn}
 											initialValue={row.verdi}
 											options={row.verdier}
 										/>

apps/dolly-frontend/src/main/js/src/pages/adminPages/Appstyring/EditParameter.tsx

@@ -1,20 +1,35 @@
 import { PencilWritingIcon } from '@navikt/aksel-icons'
-import { Button } from '@navikt/ds-react'
-import React from 'react'
+import {Button, TextField} from '@navikt/ds-react'
+import React, {useState} from 'react'
 import useBoolean from '@/utils/hooks/useBoolean'
 import DollyModal from '@/components/ui/modal/DollyModal'
 import ModalActionKnapper from '@/components/ui/modal/ModalActionKnapper'
 import { FormSelect } from '@/components/ui/form/inputs/select/Select'
 import { ErrorBoundary } from '@/components/ui/appError/ErrorBoundary'
 import { FormProvider, useForm } from 'react-hook-form'
+import { Select} from "@navikt/ds-react"
 
-export const EditParameter = ({ name, initialValue, options }: any) => {
+interface APIKallBody{
+	navn: string
+	verdi: string
+}
+
+export const EditParameter = ({ options }: { options: Array<string>}) => {
 	const [modalIsOpen, openModal, closeModal] = useBoolean(false)
-	const formMethods = useForm({ defaultValues: { [name]: initialValue } })
+	//const formMethods = useForm({ defaultValues: { [name]: initialValue } })
+
+	const { register, handleSubmit, formState: { errors} } = useForm<{antallOrganisasjoner: string}>()
+
+
+	async function oppdaterParameterverdi(parameternavn: string, parameterverdi: string) {
+		const req = await fetch(`/testnav-levende-arbeidsforhold-ansettelsev2/api/oppdatereVerdier/${parameternavn}`,
+			{method: "PUT", body: JSON.stringify(parameterverdi)});
+	}
 
 	//TODO: Implementer lagring av verdi paa parameter
+
 	const onSubmit = (data: any) => {
-		console.log('Lagrer... ', data) //TODO - SLETT MEG
+		//oppdaterParameterverdi(param[0], param[1]);
 		closeModal()
 	}
 
@@ -27,21 +42,27 @@ export const EditParameter = ({ name, initialValue, options }: any) => {
 				size={'small'}
 			/>
 			<ErrorBoundary>
-				<FormProvider {...formMethods}>
 					<DollyModal isOpen={modalIsOpen} closeModal={closeModal} width={'40%'} overflow={'auto'}>
+					<form onSubmit={handleSubmit(data => {
+						console.log(data)
+						oppdaterParameterverdi("antallOrganisasjoner", data.antallOrganisasjoner)
+					})}>
 						<div className="modal">
 							<h1>Rediger parameter</h1>
 							<br />
-							<FormSelect name={name} label={name} options={options} size="grow" />
-							<ModalActionKnapper
-								submitknapp="Lagre"
-								onSubmit={formMethods.handleSubmit(onSubmit)}
-								onAvbryt={closeModal}
-								center
-							/>
+							<Select {...register('antallOrganisasjoner', { required: {
+								value: true,
+									message: 'Du må sette antall organisasjoner'
+								}})} label="Antall organisasjoner" error={errors.antallOrganisasjoner?.message}>
+								<option value="">Velg antall</option>
+								{options.map((option, index) => (
+									<option key={index} value={option}>{option}</option>
+								))}
+							</Select>
+							<Button>Lagre</Button>
 						</div>
+				</form>
 					</DollyModal>
-				</FormProvider>
 			</ErrorBoundary>
 		</>
 	)