From 4bceaabf451b8b1553c664bef581d1f8bd2fece2 Mon Sep 17 00:00:00 2001 From: Sverre Blekastad Stensby Date: Thu, 5 Dec 2024 21:52:00 +0100 Subject: [PATCH] =?UTF-8?q?Lagt=20inn=20styling=20p=C3=A5=20sp=C3=B8rreund?= =?UTF-8?q?ers=C3=B8kelsesforh=C3=A5ndsvisning.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Forh\303\245ndsvisning.tsx" | 261 ++++++++++++++++++ .../index.tsx" | 34 +++ ...eunders\303\270kelseMedInnholdVisning.tsx" | 225 --------------- .../EvalueringCardHeaderInnhold.tsx | 20 +- 4 files changed, 302 insertions(+), 238 deletions(-) create mode 100644 "client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/Forh\303\245ndsvisning.tsx" create mode 100644 "client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/index.tsx" delete mode 100644 "client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseMedInnholdVisning.tsx" diff --git "a/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/Forh\303\245ndsvisning.tsx" "b/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/Forh\303\245ndsvisning.tsx" new file mode 100644 index 000000000..1ffb9490a --- /dev/null +++ "b/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/Forh\303\245ndsvisning.tsx" @@ -0,0 +1,261 @@ +import React from "react"; +import { + SpørsmålDto, + SvaralternativDto, + TemaDto, +} from "../../../../domenetyper/spørreundersøkelseMedInnhold"; +import { + Accordion, + BodyShort, + Checkbox, + CheckboxGroup, + Heading, + Radio, + RadioGroup, +} from "@navikt/ds-react"; +import { useHentSpørreundersøkelseMedInnhold } from "../../../../api/lydia-api/spørreundersøkelse"; +import { useSpørreundersøkelse } from "../../../../components/Spørreundersøkelse/SpørreundersøkelseContext"; +import { lokalDatoMedKlokkeslett } from "../../../../util/dato"; +import styled from "styled-components"; + +export default function Forhåndsvisning({ spørreundersøkelseid, setModaltittel }: { spørreundersøkelseid: string, setModaltittel: (tittel: string) => void }) { + const { iaSak, samarbeid } = + useSpørreundersøkelse(); + const { data: spørreundersøkelseForhåndsvisning } = + useHentSpørreundersøkelseMedInnhold( + iaSak.orgnr, + iaSak.saksnummer, + samarbeid.id, + "Evaluering", + spørreundersøkelseid, + ); + React.useEffect(() => { + if (spørreundersøkelseForhåndsvisning) { + setModaltittel(`Evaluering opprettet ${lokalDatoMedKlokkeslett(spørreundersøkelseForhåndsvisning.opprettetTidspunkt)}`); + } + }, [spørreundersøkelseForhåndsvisning, setModaltittel]); + + return (<> + {spørreundersøkelseForhåndsvisning?.temaer.map((tema) => ( + + + {tema.navn} + + + + ))} + + ); +} + +const Tematittel = styled(Heading)` + margin-top: 1rem; +`; + +const Spørsmålsgruppe = styled.div` + padding: 1rem; +`; + +function GruppertSpørsmålRenderer({ tema }: { tema: TemaDto }) { + const grupperteSpørsmål = tema.spørsmålOgSvaralternativer.reduce( + (acc, spørsmål) => { + if (spørsmål.undertemanavn) { + acc[spørsmål.undertemanavn] = acc[spørsmål.undertemanavn] || []; + acc[spørsmål.undertemanavn].push(spørsmål); + } else { + acc["Uten gruppe"] = acc["Uten gruppe"] || []; + acc["Uten gruppe"].push(spørsmål); + } + return acc; + }, + {} as { [key: string]: SpørsmålDto[] }, + ); + + return ( + <> + {Object.entries(grupperteSpørsmål).map(([kategori, spørsmål]) => ( + + + + + ))} + + ); +} + +const KATEGORI_BESKRIVELSER: { [key: string]: string } = { + //Arbeidsmiljø + "Utvikle arbeidsmiljøet": + "Mål: Øke anvendelse og kompetanse innen verktøy og bransjerettet kunnskap for å jobbe målrettet og kunnskapsbasert med eget arbeidsmiljø.", + "Endring og omstilling": + "Mål: Øke kunnskap om hvordan ivareta arbeidsmiljø og forebygge sykefravær under endring og omstilling.", + "Oppfølging av arbeidsmiljøundersøkelser": + "Mål: Øke ferdigheter og gi støtte til hvordan man kan jobbe med forhold på arbeidsplassen som belyses i egne arbeidsmiljøundersøkelser.", + "Livsfaseorientert personalpolitikk": + "Mål: Utvikle kultur og personalpolitikk som ivaretar medarbeideres ulike behov, krav, begrensninger og muligheter i ulike livsfaser.", + "Psykisk helse": + "Mål: Gi innsikt i hvordan psykiske utfordringer kan komme til uttrykk i arbeidshverdagen og øke ferdigheter for hvordan man møter medarbeidere med psykiske helseutfordringer.", + HelseIArbeid: + "Mål: Øke kompetansen og få ansatte til å mestre jobb, selv med muskel/skjelett- og psykiske helseplager.", + //Sykefraværsarbeid + Sykefraværsrutiner: + "Mål: Jobbe systematisk og forebyggende med sykefravær, samt forbedre rutiner og oppfølging av ansatte som er sykmeldte eller står i fare for å bli det.", + Oppfølgingssamtaler: + "Mål: Øke kompetanse og ferdigheter for hvordan man gjennomfører gode oppfølgingssamtaler, både gjennom teori og praksis.", + "Tilretteleggings- og medvirkningsplikt": + "Mål: Utvikle rutiner og kultur for tilrettelegging og medvirkning, samt kartlegging av tilretteleggingsmuligheter på arbeidsplassen.", + "Sykefravær - enkeltsaker": + "Mål: Øke kompetanse og ferdigheter for hvordan man tar tak i, følger opp og løser enkeltsaker.", + //Partssamarbeid + "Utvikle partssamarbeidet": + "Mål: Styrke og strukturere samarbeidet mellom leder, tillitsvalgt og verneombud, samt øke kunnskap og ferdigheter for å jobbe systematisk og forebyggende med sykefravær og arbeidsmiljø.", +}; + +const KategoriHeader = styled.div` + margin-bottom: 1rem; +`; + +const Kategoritittel = styled(Heading)` + margin-bottom: 0.25rem; +`; + +const Kategorimål = styled(BodyShort)` + color: var(--a-text-subtle); +`; + +function Kategori({ tittel }: { tittel: string }) { + if (KATEGORI_BESKRIVELSER[tittel]) { + return ( + + + {tittel} + + + {KATEGORI_BESKRIVELSER[tittel]} + + + ); + } + + if (tittel === "Uten gruppe") { + return null; + } + + return ( + + + {tittel} + + + ); +} + + +function SpørsmålRenderer({ tema }: { tema: TemaDto }) { + const boxRef = React.useRef(null); + React.useEffect(() => { + if (boxRef !== null) { + boxRef?.current?.scrollIntoView({ + block: "end", + inline: "center", + }); + } + }, []); + + return ( + + {tema.spørsmålOgSvaralternativer.map((spørsmål) => ( + + ))} + + ); +} + +const StyledAccordionHeader = styled(Accordion.Header)` + color: var(--a-blue-500); + --a-font-weight-bold: 400; +`; + + +function SpørsmålAccordionItem({ + spørsmål, +}: { + spørsmål: SpørsmålDto; +}) { + return ( + + + {spørsmål.spørsmål} + + + + + + ); +} + +const DisabletCheckbox = styled(Checkbox)` + pointer-events: none; + + label::before { + opacity: 0.5; + } +`; + +const DisabletRadio = styled(Radio)` + pointer-events: none; + + label::before { + opacity: 0.5; + } +`; + +function Svaralternativer({ + svaralternativer, + flervalg, +}: { + svaralternativer: SvaralternativDto[]; + flervalg: boolean; +}) { + const OptionGroup = flervalg ? CheckboxGroup : RadioGroup; + + return ( + + {svaralternativer.map((svaralternativ) => { + if (flervalg) { + return ( + + {svaralternativ.svartekst} + + ); + } + return ( + + {svaralternativ.svartekst} + + ) + })} + + ); +} diff --git "a/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/index.tsx" "b/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/index.tsx" new file mode 100644 index 000000000..c9134c632 --- /dev/null +++ "b/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/index.tsx" @@ -0,0 +1,34 @@ +import React from "react"; +import { + BodyShort, + Modal, +} from "@navikt/ds-react"; +import Forhåndsvisning from "./Forhåndsvisning"; + +interface SpørreundersøkelseMedInnholdVisningProps { + erModalÅpen: boolean; + lukkModal: () => void; + spørreundersøkelseid: string; +} + +export const SpørreundersøkelseMedInnholdVisning = ({ + erModalÅpen, + lukkModal, + spørreundersøkelseid +}: SpørreundersøkelseMedInnholdVisningProps) => { + const [modaltittel, setModaltittel] = React.useState("Forhåndsvisning laster..."); + return ( + + + Spørsmålene er basert på innholdet i samarbeidsplanen ved opprettelse + + + + ); +}; + diff --git "a/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseMedInnholdVisning.tsx" "b/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseMedInnholdVisning.tsx" deleted file mode 100644 index 2d3c57e63..000000000 --- "a/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseMedInnholdVisning.tsx" +++ /dev/null @@ -1,225 +0,0 @@ -import React from "react"; -import { - SpørsmålDto, - SvaralternativDto, - TemaDto, -} from "../../../domenetyper/spørreundersøkelseMedInnhold"; -import { - Accordion, - BodyShort, - Box, - Checkbox, - CheckboxGroup, - Heading, - Radio, - RadioGroup, -} from "@navikt/ds-react"; - -interface SpørreundersøkelseMedInnholdVisningProps { - erModalÅpen: boolean; - lukkModal: () => void; -} - -export const SpørreundersøkelseMedInnholdVisning = ({ - erModalÅpen, - lukkModal, -}: SpørreundersøkelseMedInnholdVisningProps) => { - return <>; -}; - -function GruppertSpørsmålRenderer({ tema }: { tema: TemaDto }) { - const grupperteSpørsmål = tema.spørsmålOgSvaralternativer.reduce( - (acc, spørsmål) => { - if (spørsmål.undertemanavn) { - acc[spørsmål.undertemanavn] = acc[spørsmål.undertemanavn] || []; - acc[spørsmål.undertemanavn].push(spørsmål); - } else { - acc["Uten gruppe"] = acc["Uten gruppe"] || []; - acc["Uten gruppe"].push(spørsmål); - } - return acc; - }, - {} as { [key: string]: SpørsmålDto[] }, - ); - - return ( - <> - {Object.entries(grupperteSpørsmål).map(([kategori, spørsmål]) => ( - - - - - ))} - - ); -} - -const KATEGORI_BESKRIVELSER: { [key: string]: string } = { - //Arbeidsmiljø - "Utvikle arbeidsmiljøet": - "Mål: Øke anvendelse og kompetanse innen verktøy og bransjerettet kunnskap for å jobbe målrettet og kunnskapsbasert med eget arbeidsmiljø.", - "Endring og omstilling": - "Mål: Øke kunnskap om hvordan ivareta arbeidsmiljø og forebygge sykefravær under endring og omstilling.", - "Oppfølging av arbeidsmiljøundersøkelser": - "Mål: Øke ferdigheter og gi støtte til hvordan man kan jobbe med forhold på arbeidsplassen som belyses i egne arbeidsmiljøundersøkelser.", - "Livsfaseorientert personalpolitikk": - "Mål: Utvikle kultur og personalpolitikk som ivaretar medarbeideres ulike behov, krav, begrensninger og muligheter i ulike livsfaser.", - "Psykisk helse": - "Mål: Gi innsikt i hvordan psykiske utfordringer kan komme til uttrykk i arbeidshverdagen og øke ferdigheter for hvordan man møter medarbeidere med psykiske helseutfordringer.", - HelseIArbeid: - "Mål: Øke kompetansen og få ansatte til å mestre jobb, selv med muskel/skjelett- og psykiske helseplager.", - //Sykefraværsarbeid - Sykefraværsrutiner: - "Mål: Jobbe systematisk og forebyggende med sykefravær, samt forbedre rutiner og oppfølging av ansatte som er sykmeldte eller står i fare for å bli det.", - Oppfølgingssamtaler: - "Mål: Øke kompetanse og ferdigheter for hvordan man gjennomfører gode oppfølgingssamtaler, både gjennom teori og praksis.", - "Tilretteleggings- og medvirkningsplikt": - "Mål: Utvikle rutiner og kultur for tilrettelegging og medvirkning, samt kartlegging av tilretteleggingsmuligheter på arbeidsplassen.", - "Sykefravær - enkeltsaker": - "Mål: Øke kompetanse og ferdigheter for hvordan man tar tak i, følger opp og løser enkeltsaker.", - //Partssamarbeid - "Utvikle partssamarbeidet": - "Mål: Styrke og strukturere samarbeidet mellom leder, tillitsvalgt og verneombud, samt øke kunnskap og ferdigheter for å jobbe systematisk og forebyggende med sykefravær og arbeidsmiljø.", -}; - -function Kategori({ tittel }: { tittel: string }) { - if (KATEGORI_BESKRIVELSER[tittel]) { - return ( -
- - {tittel} - - - {KATEGORI_BESKRIVELSER[tittel]} - -
- ); - } - - if (tittel === "Uten gruppe") { - return null; - } - - return ( -
- - {tittel} - -
- ); -} - -function SpørsmålRenderer({ tema }: { tema: TemaDto }) { - const boxRef = React.useRef(null); - React.useEffect(() => { - if (boxRef !== null) { - boxRef?.current?.scrollIntoView({ - block: "end", - inline: "center", - }); - } - }, []); - - return ( - - {tema.spørsmålOgSvaralternativer.map((spørsmål, index) => ( - - ))} - - ); -} - -function SpørsmålAccordion({ - spørsmål, - index, -}: { - spørsmål: SpørsmålDto; - index: number; -}) { - return ( - - - {spørsmål.tekst} - - - - - - ); -} - -function Svaralternativer({ - svaralternativer, - flervalg, -}: { - svaralternativer: SvaralternativDto[]; - flervalg: boolean; -}) { - const OptionGroup = flervalg ? CheckboxGroup : RadioGroup; - const Option = flervalg ? Checkbox : Radio; - - return ( - - {svaralternativer.map((svaralternativ) => ( - - ))} - - ); -} - -function SvarRenderer({ tema }: { tema: TemaDto }) { - const boxRef = React.useRef(null); - React.useEffect(() => { - if (boxRef !== null) { - boxRef?.current?.scrollIntoView({ - block: "end", - inline: "center", - }); - } - }, []); - - const erGruppert = tema.spørsmålOgSvaralternativer.some( - (spørsmål) => spørsmål.undertemanavn, - ); - - return ( - - {erGruppert ? ( - - ) : ( - - )} - - ); -} diff --git a/client/src/Pages/Virksomhet/Samarbeid/Evaluering/EvalueringCardHeaderInnhold.tsx b/client/src/Pages/Virksomhet/Samarbeid/Evaluering/EvalueringCardHeaderInnhold.tsx index dc6049737..8c46e3e69 100644 --- a/client/src/Pages/Virksomhet/Samarbeid/Evaluering/EvalueringCardHeaderInnhold.tsx +++ b/client/src/Pages/Virksomhet/Samarbeid/Evaluering/EvalueringCardHeaderInnhold.tsx @@ -17,9 +17,9 @@ import { avsluttSpørreundersøkelse, slettSpørreundersøkelse, startSpørreundersøkelse, - useHentSpørreundersøkelseMedInnhold, useHentSpørreundersøkelser, } from "../../../../api/lydia-api/spørreundersøkelse"; +import { SpørreundersøkelseMedInnholdVisning } from "../../Kartlegging/SpørreundersøkelseForhåndsvisningModal"; const ActionButtonContainer = styled.div` display: flex; @@ -88,6 +88,7 @@ export const EvalueringCardHeaderInnhold = ({ bekreftFullførKartleggingModalÅpen, setBekreftFullførKartleggingModalÅpen, ] = useState(false); + const [forhåndsvisModalÅpen, setForhåndsvisModalÅpen] = useState(false); const [ slettSpørreundersøkelseModalÅpen, setSlettSpørreundersøkelseModalÅpen, @@ -113,15 +114,6 @@ export const EvalueringCardHeaderInnhold = ({ "Evaluering", ); - const { data: spørreundersøkelseForhåndsvisning } = - useHentSpørreundersøkelseMedInnhold( - iaSak.orgnr, - iaSak.saksnummer, - samarbeid.id, - "Evaluering", - spørreundersøkelse.id, - ); - const { mutate: oppdaterSaksStatus } = useHentIASaksStatus( iaSak.orgnr, iaSak.saksnummer, @@ -209,9 +201,7 @@ export const EvalueringCardHeaderInnhold = ({ - console.log( - spørreundersøkelseForhåndsvisning, - ) + setForhåndsvisModalÅpen(true) } > Forhåndsvis @@ -237,6 +227,10 @@ export const EvalueringCardHeaderInnhold = ({ } startSpørreundersøkelsen={startEvaluering} /> + setForhåndsvisModalÅpen(false)} /> {brukerRolle && (