1- import React from 'react'
2- import NavButton from '@/components/ui/button/NavButton/NavButton'
3- import * as yup from 'yup'
4- import Loading from '@/components/ui/loading/Loading'
5- import { FormTextInput } from '@/components/ui/form/inputs/textInput/TextInput'
6-
7- import './RedigerGruppe.less'
81import { useNavigate } from 'react-router'
9- import { REGEX_BACKEND_GRUPPER , useMatchMutate } from '@/utils/hooks/useMutate'
10- import { TestComponentSelectors } from '#/mocks/Selectors'
112import { useGruppeById } from '@/utils/hooks/useGruppe'
12- import * as _ from 'lodash-es '
3+ import { REGEX_BACKEND_GRUPPER , useMatchMutate } from '@/utils/hooks/useMutate '
134import { Form , FormProvider , useForm } from 'react-hook-form'
145import { yupResolver } from '@hookform/resolvers/yup'
6+ import * as Yup from 'yup'
7+ import { DollyApi } from '@/service/Api'
8+ import React , { useState } from 'react'
9+ import Loading from '@/components/ui/loading/Loading'
10+ import NavButton from '@/components/ui/button/NavButton/NavButton'
11+ import { TestComponentSelectors } from '#/mocks/Selectors'
12+ import { FormTextInput } from '@/components/ui/form/inputs/textInput/TextInput'
13+ import './RedigerGruppe.less'
14+ import { Alert } from '@navikt/ds-react'
1515
1616type Props = {
17- gruppeId ?: string
18- createGruppe : ( arg0 : any ) => any
19- createOrUpdateFetching : boolean
20- updateGruppe : ( arg0 : number , arg1 : any ) => any
21- onCancel : ( ) => void
22- error : {
23- message : string
24- }
17+ gruppeId : string
18+ onCancel : Function
2519}
2620
27- const validation = ( ) =>
28- yup . object ( ) . shape ( {
29- navn : yup . string ( ) . trim ( ) . required ( 'Navn er et påkrevd felt' ) . max ( 30 , 'Maksimalt 30 bokstaver' ) ,
30- hensikt : yup
31- . string ( )
32- . trim ( )
33- . required ( 'Gi en beskrivelse av hensikten med gruppen' )
34- . max ( 200 , 'Maksimalt 200 bokstaver' ) ,
35- } )
36- const RedigerGruppe = ( {
37- gruppeId,
38- createGruppe,
39- createOrUpdateFetching,
40- updateGruppe,
41- onCancel,
42- error,
43- } : Props ) : JSX . Element => {
21+ const validation = Yup . object ( ) . shape ( {
22+ navn : Yup . string ( ) . trim ( ) . required ( 'Gi gruppen et navn' ) . max ( 30 , 'Maksimalt 30 bokstaver' ) ,
23+ hensikt : Yup . string ( )
24+ . trim ( )
25+ . required ( 'Beskriv hensikten med gruppen' )
26+ . max ( 200 , 'Maksimalt 200 bokstaver' ) ,
27+ } )
28+
29+ export const RedigerGruppe = ( { gruppeId, onCancel } : Props ) => {
4430 const navigate = useNavigate ( )
4531 const { gruppe } = useGruppeById ( gruppeId )
46- const erRedigering = gruppe ?. id !== undefined
32+ const erRedigering = gruppeId !== undefined
33+
34+ const [ feilmelding , setFeilmelding ] = useState ( '' )
35+ const [ isLoading , setIsLoading ] = useState ( false )
36+
4737 const initialValues = {
48- navn : _ . get ( gruppe , ' navn' , '' ) ,
49- hensikt : _ . get ( gruppe , ' hensikt' , '' ) ,
38+ navn : gruppe ?. navn || '' ,
39+ hensikt : gruppe ?. hensikt || '' ,
5040 }
41+
5142 const mutate = useMatchMutate ( )
5243 const formMethods = useForm ( {
53- mode : 'onChange ' ,
44+ mode : 'all ' ,
5445 defaultValues : initialValues ,
55- resolver : yupResolver ( validation ( ) ) ,
46+ resolver : yupResolver ( validation ) ,
5647 } )
5748
58- const onHandleSubmit = async (
59- values : {
60- hensikt : any
61- navn : any
62- } ,
63- _actions : any ,
64- ) => {
65- const groupValues = {
66- hensikt : values . hensikt ,
67- navn : values . navn ,
68- }
69- erRedigering
70- ? await updateGruppe ( gruppe . id , groupValues ) . then ( ( ) => {
71- return mutate ( REGEX_BACKEND_GRUPPER )
72- } )
73- : await createGruppe ( groupValues ) . then (
74- ( response : {
75- value : {
76- data : {
77- id : any
78- }
79- }
80- } ) => {
81- const gruppeId = response . value ?. data ?. id
82- if ( gruppeId ) {
83- navigate ( `/gruppe/${ gruppeId } )
84- }
85- } ,
86- )
87- return ! error && onCancel ( )
49+ const handleCreateGruppe = ( ) => {
50+ setIsLoading ( true )
51+ DollyApi . createGruppe ( {
52+ navn : formMethods . watch ( 'navn' ) ,
53+ hensikt : formMethods . watch ( 'hensikt' ) ,
54+ } ) . then ( ( response : any ) => {
55+ if ( response . error ) {
56+ setFeilmelding ( 'Noe gikk galt under oppretting av gruppe: ' + response . error )
57+ setIsLoading ( false )
58+ } else {
59+ setFeilmelding ( '' )
60+ setIsLoading ( false )
61+ const gruppeId = response . data ?. id
62+ if ( gruppeId ) {
63+ navigate ( `/gruppe/${ gruppeId } )
64+ }
65+ }
66+ } )
67+ }
68+
69+ const handleUpdateGruppe = ( ) => {
70+ setIsLoading ( true )
71+ DollyApi . updateGruppe ( gruppeId , {
72+ navn : formMethods . watch ( 'navn' ) ,
73+ hensikt : formMethods . watch ( 'hensikt' ) ,
74+ } ) . then ( ( response : any ) => {
75+ if ( response . error ) {
76+ setFeilmelding ( 'Noe gikk galt under redigering av gruppe: ' + response . error )
77+ setIsLoading ( false )
78+ } else {
79+ setFeilmelding ( '' )
80+ setIsLoading ( false )
81+ onCancel ( )
82+ return mutate ( REGEX_BACKEND_GRUPPER )
83+ }
84+ } )
8885 }
8986
90- if ( createOrUpdateFetching ) {
91- return < Loading label = "oppdaterer gruppe" />
87+ if ( isLoading ) {
88+ return (
89+ < div style = { { marginBottom : '15px' } } >
90+ < Loading label = "Oppdaterer gruppe ..." />
91+ </ div >
92+ )
9293 }
9394
9495 const buttons = (
@@ -97,6 +98,17 @@ const RedigerGruppe = ({
9798 data-testid = { TestComponentSelectors . BUTTON_OPPRETT }
9899 variant = { 'primary' }
99100 type = { 'submit' }
101+ onClick = { ( ) => {
102+ formMethods . trigger ( [ 'navn' , 'hensikt' ] )
103+ formMethods . setValue ( 'navn' , formMethods . getValues ( 'navn' ) , {
104+ shouldValidate : true ,
105+ shouldTouch : true ,
106+ } )
107+ formMethods . setValue ( 'hensikt' , formMethods . getValues ( 'hensikt' ) , {
108+ shouldValidate : true ,
109+ shouldTouch : true ,
110+ } )
111+ } }
100112 >
101113 { erRedigering ? 'Lagre' : 'Opprett og gå til gruppe' }
102114 </ NavButton >
@@ -112,7 +124,7 @@ const RedigerGruppe = ({
112124 control = { formMethods . control }
113125 className = { 'opprett-tabellrad' }
114126 autoComplete = { 'off' }
115- onSubmit = { formMethods . handleSubmit ( onHandleSubmit ) }
127+ onSubmit = { formMethods . handleSubmit ( erRedigering ? handleUpdateGruppe : handleCreateGruppe ) }
116128 >
117129 < div className = "fields" >
118130 < FormTextInput
@@ -132,13 +144,12 @@ const RedigerGruppe = ({
132144 />
133145 { buttons }
134146 </ div >
135- { error && (
136- < div className = "opprett- error" >
137- < span > { error . message } </ span >
138- </ div >
147+ { feilmelding && (
148+ < Alert variant = { ' error' } size = { 'small' } style = { { margin : '0 10px 15px' } } >
149+ { feilmelding }
150+ </ Alert >
139151 ) }
140152 </ Form >
141153 </ FormProvider >
142154 )
143155}
144- export default RedigerGruppe
0 commit comments