feat: add item edit forms

src/components/item/ActorsFormSection/ActorsFormSection.tsx

@@ -32,7 +32,12 @@ export function ActorsFormSection(props: ActorsFormSectionProps): JSX.Element {
                       name={`${name}.role.code`}
                       label={'Actor role'}
                     />
-                    <ActorComboBox name={`${name}.actor.id`} label={'Name'} />
+                    <ActorComboBox
+                      name={`${name}.actor.id`}
+                      label={'Name'}
+                      index={index}
+                      initialValues={props.initialValues}
+                    />
                     <FormFieldRemoveButton
                       onPress={() => fields.remove(index)}
                       aria-label={'Remove actor'}
@@ -80,13 +85,18 @@ function ActorRoleSelect(props: ActorRoleSelectProps): JSX.Element {
 interface ActorComboBoxProps {
   name: string
   label: string
+  index: number
+  initialValues?: any
 }
 
 /**
  * Actor.
  */
 function ActorComboBox(props: ActorComboBoxProps): JSX.Element {
-  const [searchTerm, setSearchTerm] = useState('')
+  const initialLabel =
+    props.initialValues?.contributors?.[props.index]?.actor.name ?? ''
+
+  const [searchTerm, setSearchTerm] = useState(initialLabel)
   const debouncedsearchTerm = useDebouncedState(searchTerm, 150).trim()
   const actors = useGetActors(
     { q: debouncedsearchTerm },

src/components/item/DatasetEditForm/DatasetEditForm.tsx

@@ -22,6 +22,7 @@ export interface ItemFormProps<T> {
   id: string
   category: ItemCategory
   initialValues?: Partial<T>
+  item?: any
 }
 
 /**
@@ -123,9 +124,9 @@ export function ItemForm(props: ItemFormProps<ItemFormValues>): JSX.Element {
           >
             <MainFormSection />
             <DateFormSection />
-            <ActorsFormSection />
-            <PropertiesFormSection />
-            <RelatedItemsFormSection />
+            <ActorsFormSection initialValues={props.item} />
+            <PropertiesFormSection initialValues={props.item} />
+            <RelatedItemsFormSection initialValues={props.item} />
             <SourceFormSection />
             <div className="flex items-center justify-end space-x-6">
               <Button onPress={onCancel} variant="link">

src/components/item/PropertiesFormSection/PropertiesFormSection.tsx

@@ -75,6 +75,8 @@ export function PropertiesFormSection(
                             parentName={name}
                             label={'Concept'}
                             propertyTypeId={id}
+                            initialValues={props.initialValues}
+                            index={index}
                           />
                         )
                       }}
@@ -140,6 +142,8 @@ interface PropertyConceptSelectProps {
   parentName: string
   label: string
   propertyTypeId?: string
+  initialValues?: any
+  index: number
 }
 
 /**
@@ -149,7 +153,11 @@ interface PropertyConceptSelectProps {
  * the concept `id` and vocabulary `id`.
  */
 function PropertyConceptSelect(props: PropertyConceptSelectProps): JSX.Element {
-  const [searchTerm, setSearchTerm] = useState('')
+  const initialLabel =
+    props.initialValues?.properties?.[props.index]?.concept?.label ?? ''
+  console.log(initialLabel)
+
+  const [searchTerm, setSearchTerm] = useState(initialLabel)
   const debouncedSearchTerm = useDebouncedState(searchTerm, 150).trim()
   const concepts = useSearchConcepts(
     {

src/components/item/PublicationEditForm/PublicationEditForm.tsx

@@ -22,6 +22,7 @@ export interface ItemFormProps<T> {
   id: string
   category: ItemCategory
   initialValues?: Partial<T>
+  item?: any
 }
 
 /**
@@ -123,9 +124,9 @@ export function ItemForm(props: ItemFormProps<ItemFormValues>): JSX.Element {
           >
             <MainFormSection />
             <DateFormSection />
-            <ActorsFormSection />
-            <PropertiesFormSection />
-            <RelatedItemsFormSection />
+            <ActorsFormSection initialValues={props.item} />
+            <PropertiesFormSection initialValues={props.item} />
+            <RelatedItemsFormSection initialValues={props.item} />
             <SourceFormSection />
             <div className="flex items-center justify-end space-x-6">
               <Button onPress={onCancel} variant="link">

src/components/item/RelatedItemsFormSection/RelatedItemsFormSection.tsx

@@ -37,6 +37,8 @@ export function RelatedItemsFormSection(
                     <RelatedItemComboBox
                       name={`${name}.objectId`}
                       label={'Item'}
+                      initialValues={props.initialValues}
+                      index={index}
                     />
                     <FormFieldRemoveButton
                       onPress={() => fields.remove(index)}
@@ -85,16 +87,21 @@ function RelationTypeSelect(props: RelationTypeSelectProps): JSX.Element {
 interface RelatedItemComboBoxProps {
   name: string
   label: string
+  initialValues?: any
+  index: number
 }
 
 /**
  * Related item.
  */
 function RelatedItemComboBox(props: RelatedItemComboBoxProps): JSX.Element {
+  const initialLabel =
+    props.initialValues?.relatedItems?.[props.index]?.label ?? ''
+
   // const itemCategories = useGetItemCategories()
   // const [category, setCategory] = useState<ItemCategory | null>(null)
 
-  const [searchTerm, setSearchTerm] = useState('')
+  const [searchTerm, setSearchTerm] = useState(initialLabel)
   const debouncedSearchTerm = useDebouncedState(searchTerm, 150).trim()
   const searchResults = useSearchItems(
     {

src/components/item/ToolEditForm/ToolEditForm.tsx

@@ -21,6 +21,7 @@ export interface ItemFormProps<T> {
   id: string
   category: ItemCategory
   initialValues?: Partial<T>
+  item?: any
 }
 
 /**
@@ -121,9 +122,9 @@ export function ItemForm(props: ItemFormProps<ItemFormValues>): JSX.Element {
             className="flex flex-col space-y-12"
           >
             <MainFormSection />
-            <ActorsFormSection />
-            <PropertiesFormSection />
-            <RelatedItemsFormSection />
+            <ActorsFormSection initialValues={props.item} />
+            <PropertiesFormSection initialValues={props.item} />
+            <RelatedItemsFormSection initialValues={props.item} />
             <SourceFormSection />
             <div className="flex items-center justify-end space-x-6">
               <Button onPress={onCancel} variant="link">

src/components/item/TrainingMaterialEditForm/TrainingMaterialEditForm.tsx

@@ -21,6 +21,7 @@ export interface ItemFormProps<T> {
   id: string
   category: ItemCategory
   initialValues?: Partial<T>
+  item?: any
 }
 
 /**
@@ -121,9 +122,9 @@ export function ItemForm(props: ItemFormProps<ItemFormValues>): JSX.Element {
             className="flex flex-col space-y-12"
           >
             <MainFormSection />
-            <ActorsFormSection />
-            <PropertiesFormSection />
-            <RelatedItemsFormSection />
+            <ActorsFormSection initialValues={props.item} />
+            <PropertiesFormSection initialValues={props.item} />
+            <RelatedItemsFormSection initialValues={props.item} />
             <SourceFormSection />
             <div className="flex items-center justify-end space-x-6">
               <Button onPress={onCancel} variant="link">

src/components/item/WorkflowEditForm/WorkflowEditForm.tsx

@@ -21,6 +21,7 @@ export interface ItemFormProps<T> {
   id: string
   category: ItemCategory
   initialValues?: Partial<T>
+  item?: any
 }
 
 /**
@@ -121,9 +122,9 @@ export function ItemForm(props: ItemFormProps<ItemFormValues>): JSX.Element {
             className="flex flex-col space-y-12"
           >
             <MainFormSection />
-            <ActorsFormSection />
-            <PropertiesFormSection />
-            <RelatedItemsFormSection />
+            <ActorsFormSection initialValues={props.item} />
+            <PropertiesFormSection initialValues={props.item} />
+            <RelatedItemsFormSection initialValues={props.item} />
             <SourceFormSection />
             <div className="flex items-center justify-end space-x-6">
               <Button onPress={onCancel} variant="link">

src/elements/Select/Select.tsx

@@ -159,6 +159,7 @@ export function Select<T extends object>(props: SelectProps<T>): JSX.Element {
           {...mergeProps(buttonProps, fieldProps)}
           className={styles.button}
           ref={ref}
+          style={props.style}
         >
           <span {...valueProps} className={styles.value}>
             {textValue}

src/screens/item/dataset/DatasetEditScreen.tsx

@@ -37,6 +37,7 @@ export default function DatasetEditScreen(): JSX.Element {
               id={id}
               category="dataset"
               initialValues={convertToInitialFormValues(dataset.data)}
+              item={dataset.data}
             />
           )}
         </ContentColumn>

src/screens/item/publication/PublicationEditScreen.tsx

@@ -41,6 +41,7 @@ export default function PublicationEditScreen(): JSX.Element {
               id={id}
               category="publication"
               initialValues={convertToInitialFormValues(publication.data)}
+              item={publication.data}
             />
           )}
         </ContentColumn>

src/screens/item/tool/ToolEditScreen.tsx

@@ -37,6 +37,7 @@ export default function ToolEditScreen(): JSX.Element {
               id={id}
               category="tool-or-service"
               initialValues={convertToInitialFormValues(tool.data)}
+              item={tool.data}
             />
           )}
         </ContentColumn>

src/screens/item/training-material/TrainingMaterialEditScreen.tsx

@@ -41,6 +41,7 @@ export default function TrainingMaterialEditScreen(): JSX.Element {
               id={id}
               category="training-material"
               initialValues={convertToInitialFormValues(trainingMaterial.data)}
+              item={trainingMaterial.data}
             />
           )}
         </ContentColumn>

src/screens/item/workflow/WorkflowEditScreen.tsx

@@ -41,6 +41,7 @@ export default function WorkflowEditScreen(): JSX.Element {
               id={id}
               category="workflow"
               initialValues={convertToInitialFormValues(workflow.data)}
+              item={workflow.data}
             />
           )}
         </ContentColumn>