Show AutoCRUD Filter for a 1:n relationship column

Hilla
1

Hi,

I’m trying to filter a 1 to many (Set) of Objects from an AutoCRUD component. However, I can’t seem to be able to display any header filter for that column.

I tried what’s below, reading a blog (1:n relationships in Hilla with AutoGrid and AutoForm | René Wilby | Freelance Software Engineer & Lecturer) but without success…

Any guidance?

<AutoCrud className="crud" service={OwnerService} model={OwnerModel}
                      gridProps={{
                          columnOptions: {
                              labels: {
                                  renderer: LabelsRenderer,
                                  sortable: true,
                                  // @ts-ignore
                                  headerFilterRenderer: ({setFilter}) => (
                                      <TextField
                                          placeholder='Filter...'
                                          onValueChanged={({detail}) =>
                                              setFilter({
                                                  propertyId: 'labels',
                                                  filterValue: detail.value,
                                                  matcher: Matcher.CONTAINS,
                                                  '@type': 'propertyString',
                                              })
                                          }
                                      />
                                  ),
2

Hey @L_B,
Welcome to the forum and thank you for reading my blog post :wink:

Can you tell me something about your entities? What attributes does your entity Owner have? And what is the name of the entity, that has the attribute labels?

The 1:n relation in the blog post is: 1 order has 1 customer and 1 customer can have 0, 1 ore multiple orders. How is the relationship in your application?

3

Sure!

Here is my Owner entity (has labels, 1:n relationship):

@Data
@Document
public class Owner {

    @Id
    private String id;
    private String name;
    private String description;
    @Nullable
    private RateLimit idsRateLimit;
    @Nullable
    private RateLimit ddosRateLimit;

    @DBRef
    @Indexed
    private Set<Label> labels = new HashSet<>();

My Label entity is as follow:


@Data
@Document
@NoArgsConstructor
@AllArgsConstructor
public class Label {

    @Id
    @MongoId
    @NotNull
    private String value;

    public void setValue(String value) {
        this.value = value.toLowerCase();
    }
}
4

In terms of Jakarta Persistence this is a OneToMany relationship (OneToMany (Jakarta Persistence API documentation)) and the example in the blog post was using a ManyToOne relation (ManyToOne (Jakarta Persistence API documentation)).

I haven’t tried to use a custom render for a OneToMany relationship, but I guess it should work. Check the matcher and @type properties in your setFilter function, because they indicate that labels is a String, but in your example labels is a Set.

5

Let’s assume it’s a ManyToOne then for the sake of the argument. So changing the type is ‘@type’: ‘propertyString’, to indicate the filter to be a string value, or am I mistaken? I tried changing it to ‘@type’: ‘propertySet’, and no filter show up still.

And the matcher property is “CONTAINS” like in your example. Would you change it?

Lastly, I’m on “@hilla/frontend”: “2.5.7”, I noticed this feature/commit adds the headerFilterRenderer: feat(autgrid): Add custom filtering option to columns (#1911) · vaadin/hilla@faa56c8 · GitHub

What version was your demo written with? And do you have it on Github?

6

The code in the blog post is based on 24.4.0.beta1.

You should try and change the property propertyId in your setFilter function to labels.value, because you want to compare the value field and not the whole Label object.

But this won’t solve your problem, that you don’t see any header filter for that column… Beside the missing header filter, do you see the labels in this column?

I see a @ts-ignore in your code. What is the problem there?

7

Thanks, I think we narrowed it down to the version. Could you share your POM by chance?

8

I created a small example for you: GitHub - rbrki07/hilla-24-4-many-to-many-example.

It uses the latest beta version. Have a look at src/main/frontend/views/@index.tsx to see an AutoCrud component displaying a list of labels.

I’ve noticed that there are some problems using the MultiSelectComboBox component inside the form to render the labels. Sometimes it displays the selected labels and sometimes it creates an error. I couldn’t reproduce it correctly yet…

Anyway, I hope the example will help you somehow.