Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: filtering for relation widget (#2405) #7161

Merged
merged 3 commits into from
Mar 28, 2024

Conversation

JimmyOei
Copy link
Contributor

Summary

This PR adds a filters field for the Relation widget which allows adding filters by which the available options are filtered on. This was requested in issue #2405 (and also by myself :)).

How it works is that you can add "filters" which are a pair of field and the allowed values, where the widget will only show options (collection items) that satisfy all the "filters". An collection item satisfies a filter if the value of field is one of the values in values.

Example

collections:
  - name: posts
    label: Posts
    folder: _posts
    create: true
    fields:
      - label: Title
        name: title
        widget: string
      - label: Draft
        name: draft
        widget: boolean
        default: true
      - label: Body
        name: body
        widget: markdown
  - name: restaurants
    label: Restaurants
    folder: _restaurants
    create: true
    fields:
      - label: Title
        name: title
        widget: string
      - label: Body
        name: body
        widget: markdown
      - label: Posts
        name: posts
        widget: relation
        collection: posts
        multiple: true
        search_fields: [title]
        display_fields: [title]
        value_field: '{{slug}}'
        filters: 
          - field: draft
            values: [false]

In this example the relation widget in the restaurants collection will only show and allow options that are posts which are not a draft (i.e. draftfield is false). Say, we have 20 posts in the CMS of which 5 have draft set to true, then we will only see the other 15 posts as option in the relation widget.

Multiple filters can be added:

filters: 
  - field: draft
    values: [false]
  - field: title
     values: ['post about cats', 'post about dogs']

In this case only the posts with draft set to false and a title that is either 'posts about cats' or 'post about dogs' will be options seen in the relation widget.

Test plan

Added the following unit tests:

with filter
      ✓ should list the 10 out of 20 option hits on initial load using a filter on boolean value (532 ms)
      ✓ should list the 5 out of 20 option hits on initial load using a filter on string value (528 ms)
      ✓ should list 4 out of 20 option hits on initial load using multiple filters (523 ms)
      ✓ should list 0 out of 20 option hits on initial load on conflicting filter values (25 ms)

After adding the following filter to the dev-test config.yml:
filters: [ {field: "draft", values: [false]} ]
These are the results of the filter:

  • Out of the 23 posts items that are in the posts collection by default in the dev-test cms, the filter on draft with value false gives the following possible options: (note that without the filter you would see posts 1 to 20 by default)
Screenshot 2024-03-26 at 15 44 00
  • Choosing, deleting, clearing options works the same:
Screenshot 2024-03-26 at 16 30 53

Checklist

Please add a x inside each checkbox:

A picture of a cute animal (not mandatory but encouraged)
IMG_0285
my 15 week old pup :)

@JimmyOei JimmyOei requested a review from a team as a code owner March 26, 2024 15:36
@martinjagodic martinjagodic requested review from demshy and removed request for a team March 27, 2024 07:59
@demshy
Copy link
Member

demshy commented Mar 27, 2024

This is so cool, kudos for adding e2e tests! I'd release this along with two other PR's this week. @martinjagodic would you mind helping with the docs update?

@demshy demshy merged commit 85c92f0 into decaporg:main Mar 28, 2024
10 checks passed
@demshy
Copy link
Member

demshy commented Mar 28, 2024

released as decap-cms@3.1.5

yuri-g-taboola referenced this pull request in taboola/decap-cms May 22, 2024
* feat: filtering for relation widget (#2405)

* feat: filter relation widget (#2405)

---------

Co-authored-by: Anze Demsar <anze.demsar@p-m.si>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants