Commit 727cad10 authored by Stefan Probst's avatar Stefan Probst
Browse files

feat: add item edit forms

parent fa506be8
Pipeline #177691 passed with stage
in 8 minutes and 35 seconds
......@@ -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 },
......
......@@ -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">
......
......@@ -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(
{
......
......@@ -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">
......
......@@ -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(
{
......
......@@ -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">
......
......@@ -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">
......
......@@ -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">
......
......@@ -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}
......
......@@ -37,6 +37,7 @@ export default function DatasetEditScreen(): JSX.Element {
id={id}
category="dataset"
initialValues={convertToInitialFormValues(dataset.data)}
item={dataset.data}
/>
)}
</ContentColumn>
......
......@@ -41,6 +41,7 @@ export default function PublicationEditScreen(): JSX.Element {
id={id}
category="publication"
initialValues={convertToInitialFormValues(publication.data)}
item={publication.data}
/>
)}
</ContentColumn>
......
......@@ -37,6 +37,7 @@ export default function ToolEditScreen(): JSX.Element {
id={id}
category="tool-or-service"
initialValues={convertToInitialFormValues(tool.data)}
item={tool.data}
/>
)}
</ContentColumn>
......
......@@ -41,6 +41,7 @@ export default function TrainingMaterialEditScreen(): JSX.Element {
id={id}
category="training-material"
initialValues={convertToInitialFormValues(trainingMaterial.data)}
item={trainingMaterial.data}
/>
)}
</ContentColumn>
......
......@@ -41,6 +41,7 @@ export default function WorkflowEditScreen(): JSX.Element {
id={id}
category="workflow"
initialValues={convertToInitialFormValues(workflow.data)}
item={workflow.data}
/>
)}
</ContentColumn>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment