From 5c1a7d173b3e1d1b5bf71d020ff7b622a393a588 Mon Sep 17 00:00:00 2001 From: "Markus A. R. Johansen" <90006516+J0hans1@users.noreply.github.com> Date: Fri, 11 Aug 2023 09:55:18 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Redigering=20av=20kommentarer=20(#3?= =?UTF-8?q?6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sindre Kjelsrud <sindre.kjelsrud@nav.no> --- .../src/components/FeilmeldingsInnhold.tsx | 27 ++++++----- frontend/src/components/Kommentar.tsx | 46 +++++++++++++------ 2 files changed, 46 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/FeilmeldingsInnhold.tsx b/frontend/src/components/FeilmeldingsInnhold.tsx index 989300e..645d3f9 100644 --- a/frontend/src/components/FeilmeldingsInnhold.tsx +++ b/frontend/src/components/FeilmeldingsInnhold.tsx @@ -40,6 +40,11 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => { props.reset() } + const fullUpdate = async() => { + setKommentar(kommentarfelt) + oppdaterkommentar() + } + return( <> <div className="flex justify-between "> @@ -73,20 +78,14 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => { </div> <Skillelinje/> {props.children} - {kommentar.length === 0 ? - <KommentarTekstfelt - kommentarfelt={kommentarfelt} - setKommentarfelt={setKommentarfelt} - oppdaterKommentar={() => { - setKommentar(kommentarfelt) - oppdaterkommentar()} - } - /> - : - <Kommentar - tekst={kommentar} - /> - } + + <Kommentar + tekst={kommentar} + kommentarfelt={kommentarfelt} + setKommentarfelt={setKommentarfelt} + oppdaterKommentar={fullUpdate} + /> + </> ) } diff --git a/frontend/src/components/Kommentar.tsx b/frontend/src/components/Kommentar.tsx index dec8089..8328c14 100644 --- a/frontend/src/components/Kommentar.tsx +++ b/frontend/src/components/Kommentar.tsx @@ -1,21 +1,20 @@ -import { ChatElipsisIcon } from "@navikt/aksel-icons" +import { ChatElipsisIcon, PencilIcon } from "@navikt/aksel-icons" import { TextField, Button, Heading } from "@navikt/ds-react" import Skillelinje from "./Skillelinje" +import { useState } from "react" -interface kommentarTekstfeltInterface { +interface kommentarInterface { kommentarfelt: string, setKommentarfelt: (val: string) => void oppdaterKommentar: () => void -} -interface kommentarInterface { tekst: string } /** * Kommentartekstfeltet er et tekstfelt med en knapp som poster en kommentar til en feil. */ -export const KommentarTekstfelt = (props: kommentarTekstfeltInterface) => { - return( +export const KommentarTekstfelt = (props: kommentarInterface) => { + return ( <div className="flex items-end gap-12 w-full mt-4 h-fit"> <TextField className="grow" @@ -26,7 +25,7 @@ export const KommentarTekstfelt = (props: kommentarTekstfeltInterface) => { </TextField> <Button variant="secondary" - icon={<ChatElipsisIcon/>} + icon={<ChatElipsisIcon />} onClick={() => props.oppdaterKommentar()} > Legg til kommentar @@ -41,13 +40,34 @@ export const KommentarTekstfelt = (props: kommentarTekstfeltInterface) => { * @param tekst */ export const Kommentar = (props: kommentarInterface) => { - return( + const [redigerKommentar, setRedigerKommentar] = useState(false) + + return ( <> - <Skillelinje/> - <div className="p-5 bg-bg-subtle rounded-lg w-2/3 my-4"> - <Heading size="medium">Kommentar</Heading> - <p className="break-words">{props.tekst}</p> - </div> + <Skillelinje /> + {props.tekst.length === 0 || redigerKommentar ? + <KommentarTekstfelt + kommentarfelt={props.kommentarfelt} + setKommentarfelt={props.setKommentarfelt} + oppdaterKommentar={props.oppdaterKommentar} + tekst={props.tekst} + /> + : + <div className="flex flex-col gap-3 p-5 bg-bg-subtle rounded-lg w-2/3 my-4"> + <div className="flex justify-between items-center"> + <Heading size="medium">Kommentar</Heading> + <Button + variant="tertiary" + icon={<PencilIcon />} + onClick={() => { + setRedigerKommentar(true); + console.log(redigerKommentar); + }} + ></Button> + </div> + <p className="break-words">{props.tekst}</p> + </div> + } </> ) } \ No newline at end of file