UPDATE: to use access components

navikt · Nov 22, 2024 · 6d741c3 · 6d741c3
1 parent 59ddd04
commit 6d741c3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 37 deletions.
diff --git a/apps/frontend/src/components/Process/Accordion/ModalProcess.tsx b/apps/frontend/src/components/Process/Accordion/ModalProcess.tsx
@@ -1,7 +1,6 @@
-import { Accordion } from '@navikt/ds-react'
+import { Accordion, Modal } from '@navikt/ds-react'
 import { Button, KIND } from 'baseui/button'
 import { FlexGridItem } from 'baseui/flex-grid'
-import { Modal, ModalBody, ModalButton, ModalFooter, ModalHeader, ROLE, SIZE } from 'baseui/modal'
 import { ALIGN, Radio, RadioGroup } from 'baseui/radio'
 import { OnChangeParams, Select, Value } from 'baseui/select'
 import {
@@ -111,14 +110,7 @@ const ModalProcess = ({
   }, [])
 
   return (
-    <Modal
-      onClose={onClose}
-      isOpen={isOpen}
-      closeable={false}
-      animate
-      size={SIZE.auto}
-      role={ROLE.dialog}
-    >
+    <Modal onClose={onClose} open={isOpen} header={{ heading: title }} width="960px">
       <div className="w-[960px] px-8">
         <Formik
           initialValues={initialValues}
@@ -136,11 +128,7 @@ const ModalProcess = ({
             }
             return (
               <Form onKeyDown={disableEnter}>
-                <ModalHeader>
-                  <div className="flex justify-center mb-8">{title}</div>
-                </ModalHeader>
-
-                <ModalBody>
+                <Modal.Body>
                   <CustomizedModalBlock first>
                     <ModalLabel
                       label="Navn"
@@ -494,9 +482,9 @@ const ModalProcess = ({
                       />
                     </div>
                   </CustomizedModalBlock>
-                </ModalBody>
+                </Modal.Body>
 
-                <ModalFooter
+                <Modal.Footer
                   style={{
                     borderTop: 0,
                   }}
@@ -506,9 +494,9 @@ const ModalProcess = ({
                     <Button type="button" kind={KIND.tertiary} onClick={onClose}>
                       Avbryt
                     </Button>
-                    <ModalButton type="submit">Lagre</ModalButton>
+                    <Button type="submit">Lagre</Button>
                   </div>
-                </ModalFooter>
+                </Modal.Footer>
               </Form>
             )
           }}

diff --git a/apps/frontend/src/components/Process/common/FieldPurpose.tsx b/apps/frontend/src/components/Process/common/FieldPurpose.tsx
@@ -1,35 +1,39 @@
-import { Select } from 'baseui/select'
+import { Select } from '@navikt/ds-react'
 import { FieldArray, FieldArrayRenderProps, FormikProps } from 'formik'
+import { useState } from 'react'
 import { IProcessFormValues } from '../../../constants'
-import { CodelistService, EListName, IGetParsedOptionsProps } from '../../../service/Codelist'
+import { CodelistService, EListName } from '../../../service/Codelist'
 
 const FieldPurpose = (props: { formikBag: FormikProps<IProcessFormValues> }) => {
   const { formikBag } = props
   const [codelistUtils] = CodelistService()
+  const [selectedValue, setSelectedValue] = useState<string>(
+    formikBag.values.purposes && formikBag.values.purposes.length > 0
+      ? formikBag.values.purposes[0]
+      : ''
+  )
 
   return (
     <FieldArray
       name="purposes"
       render={(arrayHelpers: FieldArrayRenderProps) => (
         <div className="w-full">
           <Select
-            value={codelistUtils.getParsedOptionsForList(
-              EListName.PURPOSE,
-              formikBag.values.purposes
-            )}
-            options={codelistUtils
-              .getParsedOptions(EListName.PURPOSE)
-              .filter(
-                (option: IGetParsedOptionsProps) => !formikBag.values.purposes.includes(option.id)
-              )}
-            onChange={({ value }) => {
-              arrayHelpers.form.setFieldValue(
-                'purposes',
-                value.map((value) => value.id)
-              )
+            label="Velg overordnet behandlingsaktivitet"
+            hideLabel
+            value={selectedValue}
+            onChange={(event) => {
+              setSelectedValue(event.target.value)
+              arrayHelpers.form.setFieldValue('purposes', [event.target.value])
             }}
-            overrides={{ Placeholder: { style: { color: 'black' } } }}
-          />
+          >
+            <option value="">Velg overordnet behandlingsaktivitet</option>
+            {codelistUtils.getParsedOptions(EListName.PURPOSE).map((codeList, index) => (
+              <option key={index + '_' + codeList.id} value={codeList.id}>
+                {codeList.label}
+              </option>
+            ))}
+          </Select>
         </div>
       )}
     />