Adam Mateusz BrożyńskiWagtail-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.
- In
views.pywe put page edit url toeditvariable:
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)
- In
dist.jswe look for this code (prettify first!):
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:
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"))))
}))))
- Now we need to uninstall
wagtail-autocompletefrom pip and put ourwagtailautocompletefolder with modified files directly to our app folder (where we havehome,searchetc. so it can be found by Wagtail).
