Merge pull request #1031 from research-software-directory/1030-save-i…

…nactive

fix: enable save button on inital person import

frontend/components/person/AvatarOptions.tsx

@@ -63,7 +63,7 @@ export default function AvatarOptions(props: AvatarOptionsProps) {
         />
       </div>
       <div>
-        <h3 className="text-sm text-base-content-disabled pb-4">Image options</h3>
+        <h3 className="text-sm text-base-content-disabled pb-4">Avatar options</h3>
         <Box
           sx={{
             flex: 1,
@@ -76,12 +76,6 @@ export default function AvatarOptions(props: AvatarOptionsProps) {
             overflow: 'auto'
           }}
         >
-          <IconButton
-            title="No image"
-            onClick={onNoAvatar}
-          >
-            {getDisplayInitials({given_names, family_names})}
-          </IconButton>
           {avatar_options.map(img => {
             return (
               <IconButton
@@ -97,6 +91,12 @@ export default function AvatarOptions(props: AvatarOptionsProps) {
               </IconButton>
             )
           })}
+          <IconButton
+            title="No image"
+            onClick={onNoAvatar}
+          >
+            {getDisplayInitials({given_names, family_names})}
+          </IconButton>
         </Box>
       </div>
     </div>

frontend/components/software/edit/contributors/AvatarOptionsContributor.tsx → frontend/components/person/AvatarOptionsPerson.tsx

@@ -5,18 +5,26 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import {ChangeEvent} from 'react'
+import {ChangeEvent, useEffect} from 'react'
 import {UseFormSetValue, UseFormWatch} from 'react-hook-form'
 
 import useSnackbar from '~/components/snackbar/useSnackbar'
 import {handleFileUpload} from '~/utils/handleFileUpload'
 import AvatarOptions from '~/components/person/AvatarOptions'
-import {NewRsdContributor} from './AggregatedContributorModal'
 
-type AvatarOptionsProps = {
+export type RequiredAvatarProps={
+  avatar_id: string | null
+  avatar_b64: string | null
+  avatar_mime_type: string | null
   avatar_options: string[]
-  watch: UseFormWatch<NewRsdContributor>
-  setValue: UseFormSetValue<NewRsdContributor>
+  given_names: string
+  family_names: string
+}
+
+export type AvatarOptionsProps = {
+  avatar_options: string[]
+  watch: UseFormWatch<RequiredAvatarProps>
+  setValue: UseFormSetValue<RequiredAvatarProps>
 }
 
 export default function AvatarOptionsContributor(props: AvatarOptionsProps) {
@@ -25,6 +33,18 @@ export default function AvatarOptionsContributor(props: AvatarOptionsProps) {
   const [avatar_id, avatar_b64] = watch(['avatar_id', 'avatar_b64'])
   const [given_names, family_names] = watch(['given_names', 'family_names'])
 
+  useEffect(()=>{
+    if (avatar_options.length===0){
+      // initial loading - reset avatar_id and change dirty flag
+      // this is needed to enable Save when no avatar to choose
+      // debugger
+      setValue('avatar_id', null, {shouldDirty: true,shouldValidate:true})
+    }else if (avatar_options.length>0){
+      // if there is avatar we select firstone by default
+      setValue('avatar_id', avatar_options[0], {shouldDirty: true,shouldValidate:true})
+    }
+  },[avatar_options,setValue])
+
   async function onFileUpload(e:ChangeEvent<HTMLInputElement>|undefined) {
     if (typeof e !== 'undefined') {
       const {status, message, image_b64, image_mime_type} = await handleFileUpload(e)

frontend/components/projects/edit/team/AggregatedMemberModal.tsx

@@ -15,7 +15,7 @@ import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
 import useMediaQuery from '@mui/material/useMediaQuery'
 
-import {useForm} from 'react-hook-form'
+import {UseFormSetValue, UseFormWatch, useForm} from 'react-hook-form'
 
 import {useSession} from '~/auth'
 import {SaveTeamMember} from '~/types/Project'
@@ -28,7 +28,7 @@ import ControlledSwitch from '~/components/form/ControlledSwitch'
 import SubmitButtonWithListener from '~/components/form/SubmitButtonWithListener'
 import ControlledAutocomplete from '~/components/form/ControlledAutocomplete'
 import {AggregatedPerson} from '~/components/person/groupByOrcid'
-import AvatarOptionsTeamMember from './AvatarOptionsTeamMember'
+import AvatarOptionsPerson, {RequiredAvatarProps} from '~/components/person/AvatarOptionsPerson'
 import {postTeamMember} from './editTeamMembers'
 import {cfgTeamMembers as config} from './config'
 
@@ -156,9 +156,9 @@ export default function AggregatedMemberModal({open, onCancel, onSubmit, member}
         <DialogContent sx={{
           width: ['100%', '37rem'],
         }}>
-          <AvatarOptionsTeamMember
-            watch={watch}
-            setValue={setValue}
+          <AvatarOptionsPerson
+            watch={watch as unknown as UseFormWatch<RequiredAvatarProps>}
+            setValue={setValue as unknown as UseFormSetValue<RequiredAvatarProps>}
             avatar_options={member.avatar_options}
           />
           <div className="py-2"></div>

frontend/components/software/edit/contributors/AggregatedContributorModal.tsx

@@ -2,7 +2,9 @@
 // SPDX-FileCopyrightText: 2022 - 2023 dv4all
 // SPDX-FileCopyrightText: 2022 Christian Meeßen (GFZ) <christian.meessen@gfz-potsdam.de>
 // SPDX-FileCopyrightText: 2022 Helmholtz Centre Potsdam - GFZ German Research Centre for Geosciences
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
+// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
 //
 // SPDX-License-Identifier: Apache-2.0
 
@@ -13,21 +15,21 @@ import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
 import useMediaQuery from '@mui/material/useMediaQuery'
 
-import {useForm} from 'react-hook-form'
+import {UseFormSetValue, UseFormWatch, useForm} from 'react-hook-form'
 
 import {useSession} from '~/auth'
+import {upsertImage} from '~/utils/editImage'
+import {postContributor} from '~/utils/editContributors'
+import {getPropsFromObject} from '~/utils/getPropsFromObject'
+import {ContributorProps, SaveContributor} from '~/types/Contributor'
 import useSnackbar from '~/components/snackbar/useSnackbar'
 import ControlledTextField from '~/components/form/ControlledTextField'
 import ControlledSwitch from '~/components/form/ControlledSwitch'
-import {contributorInformation as config} from '../editSoftwareConfig'
 import SubmitButtonWithListener from '~/components/form/SubmitButtonWithListener'
-import {upsertImage} from '~/utils/editImage'
-import {getPropsFromObject} from '~/utils/getPropsFromObject'
-import {ContributorProps, SaveContributor} from '~/types/Contributor'
 import ControlledAutocomplete from '~/components/form/ControlledAutocomplete'
-import {postContributor} from '~/utils/editContributors'
 import {AggregatedPerson} from '~/components/person/groupByOrcid'
-import AvatarOptionsContributor from './AvatarOptionsContributor'
+import AvatarOptionsPerson, {RequiredAvatarProps} from '~/components/person/AvatarOptionsPerson'
+import {contributorInformation as config} from '../editSoftwareConfig'
 
 type AggregatedContributorModalProps = {
   open: boolean,
@@ -153,12 +155,12 @@ export default function AggregatedContributorModal({open, onCancel, onSubmit, co
         <DialogContent sx={{
           width: ['100%', '37rem'],
         }}>
-          <AvatarOptionsContributor
-            watch={watch}
-            setValue={setValue}
+          <AvatarOptionsPerson
+            watch={watch as unknown as UseFormWatch<RequiredAvatarProps>}
+            setValue={setValue as unknown as UseFormSetValue<RequiredAvatarProps>}
             avatar_options={contributor.avatar_options}
           />
-          <div className="py-2"></div>
+          <div className="py-2"/>
           <section className="py-4 grid grid-cols-[1fr,1fr] gap-8">
             <ControlledTextField
               control={control}