Skip to content

Commit

Permalink
Merge pull request #606 from navikt/rydd-i-gamle-dropdown-komponentar
Browse files Browse the repository at this point in the history 
Rydd i koden til veilederverktøykomponent
  • Loading branch information
@ingfo
ingfo committed Jul 30, 2024
2 parents 83d6c23 + 0114c44 commit 8183ed2
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 160 deletions.
8 changes: 5 additions & 3 deletions src/component/veilederverktoy/prosess/start-prosess.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,11 @@ function StartProcess(props: StartProsessProps & ClickMetricProps) {
setAvsluttOppfolgingOpptelt(false);
}
return (
<ProcessKnapp onClick={props.onClick} metricName={props.metricName}>
{props.knappeTekst}
</ProcessKnapp>
<li>
<ProcessKnapp onClick={props.onClick} metricName={props.metricName}>
{props.knappeTekst}
</ProcessKnapp>
</li>
);
}

Expand Down
33 changes: 20 additions & 13 deletions src/component/veilederverktoy/start-registrering/start-registrering-prosess.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,19 @@ function StartRegistreringProsess() {
if (!kanRegistreres) {
return null;
}
const brukerType = oppfolging?.erSykmeldtMedArbeidsgiver
? 'erSykemeldtMedArbeidsgiver'
: oppfolging?.kanReaktiveres
? 'kanReaktiveres'
: 'kanIkkeReaktiveres';

const brukerType = () => {
if (oppfolging?.erSykmeldtMedArbeidsgiver) {
return 'erSykemeldtMedArbeidsgiver';
}
if (oppfolging?.kanReaktiveres) {
return 'kanReaktiveres';
}
return 'kanIkkeReaktiveres';
};

const brukerTekst = () => {
switch (brukerType) {
switch (brukerType()) {
case 'erSykemeldtMedArbeidsgiver':
return 'Start oppfølging';
case 'kanReaktiveres':
Expand All @@ -48,13 +53,15 @@ function StartRegistreringProsess() {
};

return (
<a
href={byggRegistreringUrl(brukerFnr, enhetId, features[BRUK_GAMMEL_ARBEIDSREGISTRERING_URL])}
className="knapp meny-knapp btn--mb1"
onClick={() => logMetrikk('veilarbvisittkortfs.metrikker.registrering', {}, { brukerType: brukerType })}
>
{brukerTekst()}
</a>
<li>
<a
href={byggRegistreringUrl(brukerFnr, enhetId, features[BRUK_GAMMEL_ARBEIDSREGISTRERING_URL])}
className="knapp meny-knapp btn--mb1"
onClick={() => logMetrikk('veilarbvisittkortfs.metrikker.registrering', {}, { brukerType: brukerType })}
>
{brukerTekst()}
</a>
</li>
);
}

Expand Down
36 changes: 16 additions & 20 deletions src/component/veilederverktoy/veilederverktoy-dropdown/veilederverktoy-dropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,24 @@
import { ReactNode, useRef, useState } from 'react';
import { ReactNode, useRef } from 'react';
import classNames from 'classnames';
import { Button } from '@navikt/ds-react';
import './veilederverktoy-dropdown.less';
import { useDocumentEventListner } from '../../../util/hook/use-event-listner';
import TannHjulIkon from '../../veilederverktoy/tannhjul.svg?react';
import withClickMetric from '../../components/click-metric/click-metric';
import hiddenIf from '../../components/hidden-if/hidden-if';
import './veilederverktoy-dropdown.less';

interface DropdownProps {
name: string;
knappeTekst: ReactNode;
render: (lukkDropdown: () => void) => ReactNode;
apen: boolean;
setApen: (apen: boolean) => void;
lukkDropdown: () => void;
btnRef: React.RefObject<HTMLButtonElement>;
onClick?: () => void;
children: ReactNode;
}

function VeilederverktoyDropdown({ name, knappeTekst, render, onClick }: DropdownProps) {
const [apen, setApen] = useState(false);
const btnRef = useRef<HTMLButtonElement>(null);
function VeilederverktoyDropdown({ apen, setApen, lukkDropdown, btnRef, onClick, children }: DropdownProps) {
const loggNode = useRef<HTMLDivElement>(null);

const lukkDropdown = () => {
if (apen) {
setApen(false);
btnRef.current?.focus();
}
};

function toggleDropdown() {
if (apen) {
lukkDropdown();
Expand All @@ -51,19 +44,22 @@ function VeilederverktoyDropdown({ name, knappeTekst, render, onClick }: Dropdow
>
<Button
variant="tertiary-neutral"
icon={<TannHjulIkon className="veilederverktoy-ikon" />}
icon={<TannHjulIkon className="veilederverktoy-ikon" aria-hidden={true} />}
ref={btnRef}
className="veilederverktoy-dropdown__btn"
onClick={toggleDropdown}
aria-expanded={apen}
aria-controls={`${name}-veilederverktoy-dropdown__innhold`}
aria-controls="tildel-veileder-veilederverktoy-dropdown__innhold"
type="button"
>
{knappeTekst}
Veilederverktøy
</Button>
{apen && (
<ul className={'veilederverktoy-dropdown__innhold'} id={`${name}-veilederverktoy-dropdown__innhold`}>
{render(lukkDropdown)}
<ul
className="veilederverktoy-dropdown__innhold"
id="tildel-veileder-veilederverktoy-dropdown__innhold"
>
{children}
</ul>
)}
</div>
Expand Down
226 changes: 102 additions & 124 deletions src/component/veilederverktoy/veilederverktoylinje.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useRef, useState } from 'react';
import VeilederverktoyDropdown from './veilederverktoy-dropdown/veilederverktoy-dropdown';
import StartRegistreringProsess from './start-registrering/start-registrering-prosess';
import StartProsess from './prosess/start-prosess';
Expand Down Expand Up @@ -27,6 +28,9 @@ import { useOppfolgingsstatus, useTilgangTilBrukersKontor } from '../../api/veil
import './veilederverktoy.less';

function Veilederverktoylinje() {
const [dropdownApen, setDropdownApen] = useState(false);
const dropdownBtnRef = useRef<HTMLButtonElement>(null);

const { visVeilederVerktoy, brukerFnr } = useAppStore();
const { oppfolging, innloggetVeileder, gjeldendeEskaleringsvarsel, features } = useDataStore();
const { data: oppfolgingsstatus } = useOppfolgingsstatus(brukerFnr);
Expand Down Expand Up @@ -116,144 +120,118 @@ function Veilederverktoylinje() {
showHuskelappRedigereModal();
};

const lukkDropdown = () => {
if (dropdownApen) {
setDropdownApen(false);
dropdownBtnRef.current?.focus();
}
};

return (
<div className="veilederverktoy-dropdown">
<VeilederverktoyDropdown
apen={dropdownApen}
setApen={setDropdownApen}
lukkDropdown={lukkDropdown}
btnRef={dropdownBtnRef}
metricName="dropdown-trykket"
knappeTekst="Veilederverktøy"
name="tildel veileder"
render={lukkDropdown => (
>
{sjekkHarTilgangTilHuskelappEllerFargekategori && (
<>
{sjekkHarTilgangTilHuskelappEllerFargekategori && (
<>
{kanEndreArbeidsliste && !features[HUSKELAPP] && (
<li>
<StartProsess
knappeTekst="Rediger arbeidsliste"
onClick={() => doAll(arbeidslisteKlikk, lukkDropdown)}
/>
</li>
)}
{kanLagreArbeidsliste && !features[HUSKELAPP] && (
<li>
<StartProsess
knappeTekst="Legg i arbeidsliste"
onClick={() => doAll(arbeidslisteKlikk, lukkDropdown)}
/>
</li>
)}
{huskelapp?.huskelappId && features[HUSKELAPP] && (
<li>
<StartProsess
knappeTekst="Rediger huskelapp"
onClick={() => doAll(huskelappKlikk, lukkDropdown)}
/>
</li>
)}
{huskelapp === null && features[HUSKELAPP] && (
<li>
<StartProsess
knappeTekst="Lag huskelapp"
onClick={() => doAll(huskelappKlikk, lukkDropdown)}
/>
</li>
)}
</>
)}
{kanTildeleVeileder && (
<li>
<StartProsess
metricName="tildel_veileder"
knappeTekst="Tildel veileder"
onClick={() => doAll(showTildelVeilederModal, lukkDropdown)}
/>
</li>
)}
{kanStarteEskalering && (
<li>
<StartProsess
knappeTekst="Send varsel"
onClick={() => doAll(showStartEskaleringModal, lukkDropdown)}
metricName="send_eskalering"
/>
</li>
)}
{kanStoppeEskalering && (
<li>
<StartProsess
knappeTekst="Deaktiver varsel"
onClick={() => doAll(showStoppEskaleringModal, lukkDropdown)}
metricName="deaktiver_esklaring"
/>
</li>
)}
{kanRegistrere && (
<li>
<StartRegistreringProsess />
</li>
)}
{kanStarteManuellOppfolging && (
<li>
<StartProsess
knappeTekst="Endre til manuell oppfølging"
onClick={() => doAll(showStartManuellOppfolgingModal, lukkDropdown)}
metricName="manuell"
/>
</li>
)}
{kanStarteDigitalOppfolging && (
<li>
<StartProsess
knappeTekst="Endre til digital oppfølging"
onClick={() => doAll(showStartDigitalOppfolgingModal, lukkDropdown)}
metricName="digital"
/>
</li>
)}
{kanStarteKVP && (
<li>
<StartProsess
knappeTekst="Start KVP-periode"
onClick={() => doAll(showStartKvpPeriodeModal, lukkDropdown)}
metricName="start_kvp"
/>
</li>
{kanEndreArbeidsliste && !features[HUSKELAPP] && (
<StartProsess
knappeTekst="Rediger arbeidsliste"
onClick={() => doAll(arbeidslisteKlikk, lukkDropdown)}
/>
)}
{kanStoppeKVP && (
<li>
<StartProsess
knappeTekst="Avslutt KVP-periode"
onClick={() => doAll(showStoppKvpPeriodeModal, lukkDropdown)}
metricName="stopp_kvp"
/>
</li>
{kanLagreArbeidsliste && !features[HUSKELAPP] && (
<StartProsess
knappeTekst="Legg i arbeidsliste"
onClick={() => doAll(arbeidslisteKlikk, lukkDropdown)}
/>
)}
<li>
{huskelapp?.huskelappId && features[HUSKELAPP] && (
<StartProsess
knappeTekst="Opprett Gosys-oppgave"
onClick={() => doAll(showOpprettOppgaveModal, lukkDropdown)}
metricName="gosys"
knappeTekst="Rediger huskelapp"
onClick={() => doAll(huskelappKlikk, lukkDropdown)}
/>
</li>
{kanAvslutteOppfolging && (
<li>
<StartProsess
knappeTekst="Avslutt oppfølging"
onClick={() => doAll(showAvsluttOppfolgingModal, lukkDropdown)}
metricName="avslutt_oppfolging"
/>
</li>
)}
<li>
{huskelapp === null && features[HUSKELAPP] && (
<StartProsess
knappeTekst="Vis historikk"
onClick={() => doAll(showHistorikkModal, lukkDropdown)}
metricName="historikk"
knappeTekst="Lag huskelapp"
onClick={() => doAll(huskelappKlikk, lukkDropdown)}
/>
</li>
)}
</>
)}
/>
{kanTildeleVeileder && (
<StartProsess
metricName="tildel_veileder"
knappeTekst="Tildel veileder"
onClick={() => doAll(showTildelVeilederModal, lukkDropdown)}
/>
)}
{kanStarteEskalering && (
<StartProsess
knappeTekst="Send varsel"
onClick={() => doAll(showStartEskaleringModal, lukkDropdown)}
metricName="send_eskalering"
/>
)}
{kanStoppeEskalering && (
<StartProsess
knappeTekst="Deaktiver varsel"
onClick={() => doAll(showStoppEskaleringModal, lukkDropdown)}
metricName="deaktiver_esklaring"
/>
)}
{kanRegistrere && <StartRegistreringProsess />}
{kanStarteManuellOppfolging && (
<StartProsess
knappeTekst="Endre til manuell oppfølging"
onClick={() => doAll(showStartManuellOppfolgingModal, lukkDropdown)}
metricName="manuell"
/>
)}
{kanStarteDigitalOppfolging && (
<StartProsess
knappeTekst="Endre til digital oppfølging"
onClick={() => doAll(showStartDigitalOppfolgingModal, lukkDropdown)}
metricName="digital"
/>
)}
{kanStarteKVP && (
<StartProsess
knappeTekst="Start KVP-periode"
onClick={() => doAll(showStartKvpPeriodeModal, lukkDropdown)}
metricName="start_kvp"
/>
)}
{kanStoppeKVP && (
<StartProsess
knappeTekst="Avslutt KVP-periode"
onClick={() => doAll(showStoppKvpPeriodeModal, lukkDropdown)}
metricName="stopp_kvp"
/>
)}
<StartProsess
knappeTekst="Opprett Gosys-oppgave"
onClick={() => doAll(showOpprettOppgaveModal, lukkDropdown)}
metricName="gosys"
/>
{kanAvslutteOppfolging && (
<StartProsess
knappeTekst="Avslutt oppfølging"
onClick={() => doAll(showAvsluttOppfolgingModal, lukkDropdown)}
metricName="avslutt_oppfolging"
/>
)}
<StartProsess
knappeTekst="Vis historikk"
onClick={() => doAll(showHistorikkModal, lukkDropdown)}
metricName="historikk"
/>
</VeilederverktoyDropdown>
</div>
);
}
Expand Down

0 comments on commit 8183ed2

Please sign in to comment.