How to add edit link to wagtail-autocomplete items
Tags: wagtail, django, python
Published: 2024-01-29 18:54:15

[Wagtail-autocomplete](https://github.com/wagtail/wagtail-autocomplete) is a good solution for creating relations between pages. By default you can only search for a page and add or remove relation. Here is a solution to add edit icon that allows to edit related page in new tab.

1. In `views.py` we put page edit url to `edit` variable:
```python
def render_page(page):
    if getattr(page, 'specific', None):
        # For support of non-Page models like Snippets.
        page = page.specific
    if callable(getattr(page, 'autocomplete_label', None)):
        title = page.autocomplete_label()
    else:
        title = page.title
    edit = reverse('wagtailadmin_pages:edit', args=[page.id])
    return dict(pk=page.pk, title=title, edit=edit)
```

2. In `dist.js`  we look for this code (prettify first!):
```js
return e.createElement("div", {
                                key: n.pk,
                                className: ee("selection")
                            }, e.createElement("span", {
                                className: ee("selection__label")
                            }, n.title), e.createElement("button", {
                                type: "button",
                                className: ee("selection__button"),
                                onClick: t.handleRemove.bind(t, n)
                            }, e.createElement(k, {
                                className: ee("selection__icon")
                            }), e.createElement("span", {
                                className: ee("sr-only")
                            }, "Remove")))
                        }))))
```
And we make it look like this:
```js
return e.createElement("div", {
                            key: n.pk,
                            className: ee("selection")
                        }, e.createElement("span", {
                            className: ee("selection__label")
                        }, n.title),
                        
                        e.createElement("div", {
                            className: ee("selection__controls")
                        },
                        
                        // edit icon here
                        e.createElement("a", {
                            href: n.edit,
                            target: '__blank',
                            className: ee("edit__button")},
                            e.createElement("svg", {
                                className: ("icon icon-edit icon--item-action")},
                                e.createElement("use", { href: '#icon-edit'}),
                        )),
                        
                        e.createElement("button", {
                            type: "button",
                            className: ee("selection__button"),
                            onClick: t.handleRemove.bind(t, n)
                        }, e.createElement(k, {
                            className: ee("selection__icon")
                        }), e.createElement("span", {
                            className: ee("sr-only")
                        }, "Remove"))))
                    }))))
```

3. Now we need to uninstall `wagtail-autocomplete` from pip and put our `wagtailautocomplete` folder with modified files directly to our app folder (where we have `home`, `search` etc. so it can be found by Wagtail).