Feature/flytt person alle grupper

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/stegVelger/steg/steg3/Steg3.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useContext, useEffect } from 'react'
+import React, { Suspense, useContext, useEffect, useState } from 'react'
 import * as Yup from 'yup'
 import { harAvhukedeAttributter } from '@/components/bestillingsveileder/utils'
 import { MiljoVelger } from '@/components/miljoVelger/MiljoVelger'
@@ -11,6 +11,7 @@ import { MalFormOrganisasjon } from '@/pages/organisasjoner/MalFormOrganisasjon'
 import { useFormikContext } from 'formik'
 import { useCurrentBruker, useOrganisasjonTilgang } from '@/utils/hooks/useBruker'
 import Loading from '@/components/ui/loading/Loading'
+import { Gruppevalg } from '@/components/velgGruppe/VelgGruppeToggle'
 
 const Bestillingskriterier = React.lazy(
 	() => import('@/components/bestilling/sammendrag/kriterier/Bestillingskriterier'),
@@ -21,6 +22,8 @@ export const Steg3 = () => {
 	const formikBag = useFormikContext()
 	const { currentBruker } = useCurrentBruker()
 
+	const [gruppevalg, setGruppevalg] = useState(Gruppevalg.MINE)
+
 	const { organisasjonTilgang } = useOrganisasjonTilgang()
 	const tilgjengeligMiljoe = organisasjonTilgang?.miljoe
 
@@ -101,7 +104,12 @@ export const Steg3 = () => {
 				/>
 			)}
 			{importTestnorge && !opts.gruppe && (
-				<VelgGruppe formikBag={formikBag} title={'Hvilken gruppe vil du importere til?'} />
+				<VelgGruppe
+					formikBag={formikBag}
+					title={'Hvilken gruppe vil du importere til?'}
+					gruppevalg={gruppevalg}
+					setGruppevalg={setGruppevalg}
+				/>
 			)}
 			{importTestnorge && opts.gruppe && (
 				<div className="oppsummering">

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/stegVelger/steg/steg3/VelgGruppe.tsx

@@ -12,7 +12,13 @@ type VelgGruppeProps = {
 	fraGruppe?: number
 }
 
-export const VelgGruppe = ({ formikBag, title, fraGruppe = null }: VelgGruppeProps) => {
+export const VelgGruppe = ({
+	formikBag,
+	title,
+	fraGruppe = null,
+	gruppevalg,
+	setGruppevalg,
+}: VelgGruppeProps) => {
 	const [valgtGruppe, setValgtGruppe] = useState(_.get(formikBag.values, `gruppeId`))
 
 	useEffect(() => {
@@ -30,6 +36,8 @@ export const VelgGruppe = ({ formikBag, title, fraGruppe = null }: VelgGruppePro
 				valgtGruppe={valgtGruppe}
 				setValgtGruppe={setValgtGruppe}
 				fraGruppe={fraGruppe}
+				gruppevalg={gruppevalg}
+				setGruppevalg={setGruppevalg}
 			/>
 			<ErrorMessageWithFocus name="gruppeId" className="error-message" component="div" />
 		</div>
@@ -40,7 +48,7 @@ VelgGruppe.validation = {
 	gruppeId: ifPresent(
 		'$gruppeId',
 		Yup.string().required(
-			'Velg eksisterende gruppe eller opprett ny gruppe for å importere personen(e)'
-		)
+			'Velg eksisterende gruppe eller opprett ny gruppe for å importere personen(e)',
+		),
 	),
 }

apps/dolly-frontend/src/main/js/src/components/fagsystem/bankkonto/form/NorskBankkonto.tsx

@@ -22,7 +22,7 @@ export const NorskBankkonto = ({ formikBag }: { formikBag: FormikProps<{}> }) =>
 		<Vis attributt={path} formik>
 			<div className="flexbox--flex-wrap">
 				<FormikSelect
-					placeholder={kontonummer ? kontonummer : 'Velg...'}
+					placeholder={kontonummer ? kontonummer : 'Velg ...'}
 					options={validKontoOptions}
 					isClearable={true}
 					name={`${path}.kontonummer`}

apps/dolly-frontend/src/main/js/src/components/fagsystem/brregstub/form/partials/personrollerForm.tsx

@@ -51,7 +51,7 @@ export const PersonrollerForm = ({ formikBag, path }) => {
 							onChange={(egenskapen) => formikBag.setFieldValue(egenskap, egenskapen.value)}
 							value={_.get(formikBag.values, egenskap)}
 							placeholder={
-								_.get(formikBag.values, egenskap) ? _.get(formikBag.values, egenskap) : 'Velg...'
+								_.get(formikBag.values, egenskap) ? _.get(formikBag.values, egenskap) : 'Velg ...'
 							}
 							isClearable={false}
 							feil={

apps/dolly-frontend/src/main/js/src/components/fagsystem/pdlf/form/partials/navn/Navn.tsx

@@ -95,7 +95,7 @@ export const NavnForm = ({ formikBag, path, identtype }: NavnTypes) => {
 					<FormikSelect
 						name={`${path}.alleFornavn`}
 						label="Fornavn"
-						placeholder={fornavn || 'Velg...'}
+						placeholder={fornavn || 'Velg ...'}
 						value={selectedFornavn}
 						options={fornavnOptions}
 						afterChange={(change) => {
@@ -119,7 +119,7 @@ export const NavnForm = ({ formikBag, path, identtype }: NavnTypes) => {
 					<FormikSelect
 						name={`${path}.alleMellomnavn`}
 						label="Mellomnavn"
-						placeholder={mellomnavn || 'Velg...'}
+						placeholder={mellomnavn || 'Velg ...'}
 						options={mellomnavnOptions}
 						afterChange={(change) => {
 							const mellomnavn = change?.map((option: Option) => option.value)
@@ -138,7 +138,7 @@ export const NavnForm = ({ formikBag, path, identtype }: NavnTypes) => {
 					<FormikSelect
 						name={`${path}.alleEtternavn`}
 						label="Etternavn"
-						placeholder={etternavn || 'Velg...'}
+						placeholder={etternavn || 'Velg ...'}
 						options={etternavnOptions}
 						afterChange={(change) => {
 							const etternavn = change?.map((option: Option) => option.value)

apps/dolly-frontend/src/main/js/src/components/fagsystem/pdlf/form/partials/pdlPerson/PdlPersonUtenIdentifikator.tsx

@@ -40,21 +40,21 @@ export const PdlPersonUtenIdentifikator = ({
 			<FormikSelect
 				name={`${path}.navn.fornavn`}
 				label="Fornavn"
-				placeholder={fornavn ? fornavn : 'Velg...'}
+				placeholder={fornavn ? fornavn : 'Velg ...'}
 				options={fornavnOptions}
 				isLoading={loading}
 			/>
 			<FormikSelect
 				name={`${path}.navn.mellomnavn`}
 				label="Mellomnavn"
-				placeholder={mellomnavn ? mellomnavn : 'Velg...'}
+				placeholder={mellomnavn ? mellomnavn : 'Velg ...'}
 				options={mellomnavnOptions}
 				isLoading={loading}
 			/>
 			<FormikSelect
 				name={`${path}.navn.etternavn`}
 				label="Etternavn"
-				placeholder={etternavn ? etternavn : 'Velg...'}
+				placeholder={etternavn ? etternavn : 'Velg ...'}
 				options={etternavnOptions}
 				isLoading={loading}
 			/>

apps/dolly-frontend/src/main/js/src/components/fagsystem/pdlf/form/partials/sikkerhetstiltak/Sikkerhetstiltak.tsx

@@ -60,7 +60,7 @@ export const Sikkerhetstiltak = ({ formikBag }: SikkerhetstiltakProps) => {
 		handleValueChange(
 			option.label === 'Opphørt' ? option.label : option.label.substring(indexBeskrSikkerhetTiltak),
 			'beskrivelse',
-			idx
+			idx,
 		)
 	}
 
@@ -106,7 +106,7 @@ export const Sikkerhetstiltak = ({ formikBag }: SikkerhetstiltakProps) => {
 										opts.personFoerLeggTil
 											? Options('sikkerhetstiltakType')
 											: Options('sikkerhetstiltakType').filter(
-													(option) => option.label !== 'Opphørt'
+													(option) => option.label !== 'Opphørt',
 											  )
 									}
 									size="large"
@@ -123,7 +123,7 @@ export const Sikkerhetstiltak = ({ formikBag }: SikkerhetstiltakProps) => {
 									options={randomNavUsers}
 									isClearable={false}
 									name={`${path}.kontaktperson.personident`}
-									placeholder={personident ? personident : 'Velg...'}
+									placeholder={personident ? personident : 'Velg ...'}
 									label={'Kontaktperson'}
 									fastfield={false}
 								/>
@@ -138,8 +138,8 @@ export const Sikkerhetstiltak = ({ formikBag }: SikkerhetstiltakProps) => {
 										!isToday(
 											_.get(
 												formikBag.values,
-												`pdldata.person.sikkerhetstiltak[${idx}].gyldigFraOgMed`
-											)
+												`pdldata.person.sikkerhetstiltak[${idx}].gyldigFraOgMed`,
+											),
 										)
 									}
 									warningText="TPS støtter kun sikkerhetstiltak fra gjeldende dato. Endre til dagens dato dersom et

apps/dolly-frontend/src/main/js/src/components/fagsystem/pdlf/form/partials/utils.tsx

@@ -6,7 +6,7 @@ export const getPlaceholder = (values, selectedValuePath) => {
 	const etternavn = _.get(values, `${selectedValuePath}.etternavn`)
 
 	mellomnavn = mellomnavn !== '' ? ' ' + mellomnavn : mellomnavn
-	return !_.isNil(fornavn) && fornavn !== '' ? fornavn + mellomnavn + ' ' + etternavn : 'Velg...'
+	return !_.isNil(fornavn) && fornavn !== '' ? fornavn + mellomnavn + ' ' + etternavn : 'Velg ...'
 }
 
 export const setNavn = (navn, path, setFieldValue) => {

apps/dolly-frontend/src/main/js/src/components/ui/button/FlyttPersonButton/FlyttPersonModal.tsx

@@ -19,6 +19,7 @@ import { Alert } from '@navikt/ds-react'
 import { usePdlOptions, useTestnorgeOptions } from '@/utils/hooks/useSelectOptions'
 import { useGruppeIdenter } from '@/utils/hooks/useGruppe'
 import { CypressSelector } from '../../../../../cypress/mocks/Selectors'
+import { Gruppevalg } from '@/components/velgGruppe/VelgGruppeToggle'
 
 type FlyttPersonButtonTypes = {
 	gruppeId: number
@@ -134,6 +135,7 @@ const StyledErrorMessageWithFocus = styled(ErrorMessageWithFocus)`
 export const FlyttPersonModal = ({ gruppeId, modalIsOpen, closeModal }: FlyttPersonButtonTypes) => {
 	const [loading, setLoading] = useState(false)
 	const [error, setError] = useState(null)
+	const [gruppevalg, setGruppevalg] = useState(Gruppevalg.MINE)
 
 	const { identer: gruppeIdenter, loading: gruppeLoading } = useGruppeIdenter(gruppeId)
 
@@ -247,6 +249,8 @@ export const FlyttPersonModal = ({ gruppeId, modalIsOpen, closeModal }: FlyttPer
 						formikBag={formikBag}
 						title={'Velg hvilken gruppe du ønsker å flytte personer til'}
 						fraGruppe={gruppeId}
+						gruppevalg={gruppevalg}
+						setGruppevalg={setGruppevalg}
 					/>
 					<StyledErrorMessageWithFocus name="gruppe" className="error-message" component="div" />
 				</GruppeVelger>

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/select/Select.tsx

@@ -48,7 +48,7 @@ export const Select = ({
 	isLoading = false,
 	isSearchable = true,
 	isClearable = true,
-	placeholder = 'Velg...',
+	placeholder = 'Velg ...',
 	options = [],
 	isMulti = false,
 	styles,

apps/dolly-frontend/src/main/js/src/components/velgGruppe/AlleGrupper.tsx

@@ -0,0 +1,71 @@
+import { DollySelect } from '@/components/ui/form/inputs/select/Select'
+import Loading from '@/components/ui/loading/Loading'
+import { useAlleBrukere, useCurrentBruker } from '@/utils/hooks/useBruker'
+import { Gruppe, useEgneGrupper, useGrupper } from '@/utils/hooks/useGruppe'
+import React, { useState } from 'react'
+
+interface AlleGrupper {
+	setValgtGruppe: React.Dispatch<React.SetStateAction<string>>
+	valgtGruppe: string
+	fraGruppe?: number | null
+}
+
+type Options = {
+	value: string
+	label: string
+}
+
+export default ({ setValgtGruppe, valgtGruppe, fraGruppe = null }: AlleGrupper) => {
+	const { currentBruker } = useCurrentBruker()
+	const { brukere, loading: loadingBrukere } = useAlleBrukere()
+	const [valgtBruker, setValgtBruker] = useState(null)
+
+	const filteredBrukerliste = brukere?.filter(
+		(bruker) => bruker.brukerId !== currentBruker.brukerId,
+	)
+
+	const brukerOptions = filteredBrukerliste?.map((bruker) => {
+		return {
+			value: bruker?.brukerId,
+			label: bruker?.brukernavn,
+		}
+	})
+
+	const { grupper, loading: loadingGrupper } = useEgneGrupper(valgtBruker)
+
+	const filteredGruppeliste = grupper?.contents?.filter((gruppe) => gruppe.id !== fraGruppe)
+
+	const gruppeOptions = filteredGruppeliste?.map((gruppe: Gruppe) => {
+		return {
+			value: gruppe.id,
+			label: `${gruppe.id} - ${gruppe.navn}`,
+		}
+	})
+
+	return (
+		<div className="flexbox--flex-wrap">
+			<DollySelect
+				name={'Bruker'}
+				label={'Bruker'}
+				options={brukerOptions}
+				size="medium"
+				onChange={(bruker) => setValgtBruker(bruker?.value || null)}
+				value={valgtBruker}
+				isLoading={loadingBrukere}
+				placeholder={loadingBrukere ? 'Laster brukere ...' : 'Velg bruker ...'}
+			/>
+			<DollySelect
+				name="Gruppe"
+				label="Gruppe"
+				options={gruppeOptions}
+				onChange={(gruppe: Options) => setValgtGruppe(gruppe?.value)}
+				value={valgtGruppe}
+				size={fraGruppe ? 'grow' : 'large'}
+				isClearable={false}
+				isDisabled={!valgtBruker}
+				isLoading={loadingGrupper}
+				placeholder={loadingGrupper ? 'Laster grupper ...' : 'Velg gruppe ...'}
+			/>
+		</div>
+	)
+}

apps/dolly-frontend/src/main/js/src/components/velgGruppe/EksisterendeGruppe.tsx

@@ -7,7 +7,7 @@ import React from 'react'
 interface EksisterendeGruppe {
 	setValgtGruppe: React.Dispatch<React.SetStateAction<string>>
 	valgtGruppe: string
-	fraGruppe?: number
+	fraGruppe?: number | null
 }
 
 type Options = {

apps/dolly-frontend/src/main/js/src/components/velgGruppe/NyGruppe.tsx

@@ -51,8 +51,8 @@ export default ({ setValgtGruppe }: NyGruppe) => {
 				{() => (
 					<Form className="ny-gruppe" autoComplete="off">
 						<div className="flexbox--flex-wrap">
-							<FormikTextInput name="navn" label="NAVN" size="small" autoFocus />
-							<FormikTextInput name="hensikt" label="HENSIKT" size="medium" />
+							<FormikTextInput name="navn" label="NAVN" size="large" autoFocus />
+							<FormikTextInput name="hensikt" label="HENSIKT" size="large" />
 						</div>
 						<NavButton variant="primary" type="submit">
 							Opprett

apps/dolly-frontend/src/main/js/src/components/velgGruppe/VelgGruppeToggle.tsx

@@ -1,18 +1,20 @@
-import React, { useState } from 'react'
+import React from 'react'
 import NyGruppe from './NyGruppe'
 import EksisterendeGruppe from '@/components/velgGruppe/EksisterendeGruppe'
 import { ToggleGroup } from '@navikt/ds-react'
 import styled from 'styled-components'
 import { CypressSelector } from '../../../cypress/mocks/Selectors'
+import AlleGrupper from '@/components/velgGruppe/AlleGrupper'
 
 interface VelgGruppeToggleProps {
 	setValgtGruppe: React.Dispatch<React.SetStateAction<string>>
 	valgtGruppe: string
 	fraGruppe?: number
 }
 
-enum Gruppevalg {
-	EKSISTERENDE = 'Eksisterende',
+export enum Gruppevalg {
+	MINE = 'Mine',
+	ALLE = 'Alle',
 	NY = 'Ny',
 }
 
@@ -24,9 +26,9 @@ export const VelgGruppeToggle = ({
 	setValgtGruppe,
 	valgtGruppe,
 	fraGruppe = null,
+	gruppevalg,
+	setGruppevalg,
 }: VelgGruppeToggleProps) => {
-	const [gruppevalg, setGruppevalg] = useState(Gruppevalg.EKSISTERENDE)
-
 	const handleToggleChange = (value: Gruppevalg) => {
 		setGruppevalg(value)
 		setValgtGruppe('')
@@ -36,11 +38,14 @@ export const VelgGruppeToggle = ({
 			<StyledToggleGroup size={'small'} value={gruppevalg} onChange={handleToggleChange}>
 				<ToggleGroup.Item
 					data-cy={CypressSelector.TOGGLE_EKSISTERENDE_GRUPPE}
-					key={Gruppevalg.EKSISTERENDE}
-					value={Gruppevalg.EKSISTERENDE}
+					key={Gruppevalg.MINE}
+					value={Gruppevalg.MINE}
 					style={{ padding: '0 20px' }}
 				>
-					Eksisterende gruppe
+					Mine grupper
+				</ToggleGroup.Item>
+				<ToggleGroup.Item key={Gruppevalg.ALLE} value={Gruppevalg.ALLE}>
+					Alle grupper
 				</ToggleGroup.Item>
 				<ToggleGroup.Item
 					data-cy={CypressSelector.TOGGLE_NY_GRUPPE}
@@ -51,15 +56,21 @@ export const VelgGruppeToggle = ({
 				</ToggleGroup.Item>
 			</StyledToggleGroup>
 
-			{gruppevalg === Gruppevalg.EKSISTERENDE ? (
+			{gruppevalg === Gruppevalg.MINE && (
 				<EksisterendeGruppe
 					setValgtGruppe={setValgtGruppe}
 					valgtGruppe={valgtGruppe}
 					fraGruppe={fraGruppe}
 				/>
-			) : (
-				<NyGruppe setValgtGruppe={setValgtGruppe} />
 			)}
+			{gruppevalg === Gruppevalg.ALLE && (
+				<AlleGrupper
+					setValgtGruppe={setValgtGruppe}
+					valgtGruppe={valgtGruppe}
+					fraGruppe={fraGruppe}
+				/>
+			)}
+			{gruppevalg === Gruppevalg.NY && <NyGruppe setValgtGruppe={setValgtGruppe} />}
 		</div>
 	)
 }