CREATE: CreateRiskoscenario componet

Co-authored-by: Jeremiah Uy <[email protected]>
navikt · Nov 4, 2024 · bbf3902 · bbf3902
1 parent 3b2b252
commit bbf3902
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 4 deletions.
diff --git a/apps/frontend/src/components/PvkDokument/IdentifiseringAvRisikoscenarioerOgTiltak.tsx b/apps/frontend/src/components/PvkDokument/IdentifiseringAvRisikoscenarioerOgTiltak.tsx
@@ -1,4 +1,5 @@
-import { Alert, BodyShort, Button, Heading, List, ReadMore } from '@navikt/ds-react'
+import { Alert, BodyShort, Heading, List, ReadMore } from '@navikt/ds-react'
+import CreateRisikoscenario from './edit/CreateRisikoscenario'
 
 export const IdentifiseringAvRisikoscenarioerOgTiltak = () => {
   return (
@@ -46,9 +47,7 @@ export const IdentifiseringAvRisikoscenarioerOgTiltak = () => {
         Dere har ikke lagt inn noen generelle risikoscenarioer.
       </Alert>
 
-      <Button variant="secondary" className="mt-5">
-        Opprett nytt generelt risikoscenario
-      </Button>
+      <CreateRisikoscenario />
     </div>
   )
 }

diff --git a/apps/frontend/src/components/PvkDokument/edit/CreateRisikoscenario.tsx b/apps/frontend/src/components/PvkDokument/edit/CreateRisikoscenario.tsx
@@ -0,0 +1,68 @@
+import { Button, Heading, Radio, RadioGroup, ReadMore, TextField } from '@navikt/ds-react'
+import { useState } from 'react'
+import { ESannsynlighetsnivaa } from '../../../constants'
+import { TextAreaField } from '../../common/Inputs'
+
+export const CreateRisikoscenario = () => {
+  const [isEdit, setIsEdit] = useState<boolean>(false)
+  return (
+    <div className="mt-5">
+      {!isEdit && (
+        <Button onClick={() => setIsEdit(true)} variant="secondary">
+          Opprett nytt generelt risikoscenario
+        </Button>
+      )}
+
+      {isEdit && (
+        <div>
+          <Heading level="2" size="small" className="mb-3">
+            Opprett nytt generelt risikoscenario
+          </Heading>
+
+          <TextField
+            label="Navngi risikoscenarioet"
+            description="Velg et navn som gjør scenarioet lett å skille fra andre "
+          />
+
+          <div className="mt-3">
+            <TextAreaField
+              rows={3}
+              noPlaceholder
+              label="Beskriv risikoscenarioet"
+              name="genereltRisikoscenarioBeskrivelse"
+            />
+          </div>
+
+          <Heading level="2" size="small" className="mb-3">
+            Risikoscenarioets sannsynlighet
+          </Heading>
+
+          <ReadMore header="Hva menes med de ulike sannsynlighetsnivåene?" className="mt-5">
+            ????????
+          </ReadMore>
+
+          <RadioGroup legend="Vurdér risikoscenarioets sannsynlighetsnivå">
+            <Radio value={ESannsynlighetsnivaa.MEGET_LITE_SANNSYNILIG}>Meget lite sannsynlig</Radio>
+            <Radio value={ESannsynlighetsnivaa.LITE_SANNSYNLIG}>Lite sannsynlig</Radio>
+            <Radio value={ESannsynlighetsnivaa.MODERAT_SANNSYNLIG}>Moderat sannsynlig </Radio>
+            <Radio value={ESannsynlighetsnivaa.SANNSYNLIG}>Sannsynlig</Radio>
+            <Radio value={ESannsynlighetsnivaa.NESTEN_SIKKERT}>Nesten sikkert</Radio>
+          </RadioGroup>
+
+          <div className="mt-3">
+            <TextAreaField rows={3} noPlaceholder label="Begrunn sannsynlighetsnivået" name="WIP" />
+          </div>
+
+          <div className="flex gap-2 mt-5">
+            <Button type="button">Lagre risikoscenario</Button>
+            <Button onClick={() => setIsEdit(false)} type="button" variant="secondary">
+              Avbryt, ikke lagre
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default CreateRisikoscenario