[auto-form] Editing many-to-one relationships

[sissbruecker]

For many-to-one properties auto form should add a single-selection field. A ComboBox seems like the most useful default field to use as it supports lazy-loading. The field should render a useful string representation of each entity and should be filterable by it. Ideally the field automatically knows how to load related entities based on the model and without manual configuration.

[BesnikRamo]

I'm encountering a similar issue with a Many-to-One relationship. I've set up a ComboBox to showcase the child objects , but upon clicking the submit button, nothing seems to occur. There's no visible activity even in the network logs. Is there a workaround available for addressing this problem?

[sissbruecker]

Adding a combo box for a many to one property should look something like this:

@Entity
public class Employee {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    @ManyToOne
    private Department department;
    ...
}

@Entity
public class Department {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    @OneToMany(mappedBy = "department", fetch = FetchType.LAZY)
    @JsonIgnore
    private List<Employee> employees;
    ...
}

@AnonymousAllowed
@Endpoint
public class EmployeeService extends CrudRepositoryService<Employee, Long, EmployeeRepository>{
}

const [employee, setEmployee] = useState<Employee>();
const [departments, setDepartments] = useState<Department[]>([]);

useEffect(() => {
    EmployeeService.get(1).then(setEmployee);
    DepartmentService.list().then(setDepartments); // Some other service that gets all department entities
}, []);

<AutoForm
    service={EmployeeService}
    model={EmployeeModel}
    item={employee}
    fieldOptions={{
        department: {
            renderer({field}) {
                return <ComboBox {...field} items={departments} itemIdPath="id" itemValuePath="id"
                                 itemLabelPath="name"/>;
            }
        }
    }}/>