Fix automatic slug update on sbs form

[lunars97]

Short description

Currently the sbs form slug of the target language is not updated after the title change. It should be updated after the title of the page changes.

Proposed changes

• Connect title input value with the slug input value so that the slug will change if the title changes

Side effects

• should be none

Resolved issues

Fixes: #2797

---

Pull Request Review Guidelines

[codeclimate]

Code Climate has analyzed commit 4c34720 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 83.3%.

View more on Code Climate.

[MizukiTemma]

Thank you for the PR 👍

Hmm, it would be cool if slugify_ajax() could be used here too instead of building another function 🤔 Having two different functions, we probably forget to update one of them if the logic changes in the future.

[theresantonie]

@MizukiTemma wouldn't using the slugify_ajax() method mean that the slug is only updated when saving the form (backend)?
Implementing this as a client functionality seems more elegant to me.
It also looks to me as if slugifyStr and slugify_ajax() are different in their functionality.

[MizukiTemma]

@theresantonie
slugify_ajax is callbed in the normal form by front-end events namely changes in the title field.
We can probably do the same for side-by-side view?

if (
    document.getElementById("id_title") &&
    (document.querySelector('[for="id_title"]') as HTMLElement)?.dataset?.slugifyUrl
) {
    document.getElementById("id_title").addEventListener("focusout", ({ target }) => {
        const currentTitle = (target as HTMLInputElement).value;
        const url = (document.querySelector('[for="id_title"]') as HTMLElement).dataset.slugifyUrl;
        slugify(url, { title: currentTitle }).then((response) => {
            /* on success write response to both slug field and permalink */
            slugField.value = response.unique_slug;
            updatePermalink(response.unique_slug);
        });
    });
}

[theresantonie]

@MizukiTemma If this works the same, it is probably better to use an existing function. 👍

[lunars97]

@theresantonie slugify_ajax is callbed in the normal form by front-end events namely changes in the title field. We can probably do the same for side-by-side view?

if (
    document.getElementById("id_title") &&
    (document.querySelector('[for="id_title"]') as HTMLElement)?.dataset?.slugifyUrl
) {
    document.getElementById("id_title").addEventListener("focusout", ({ target }) => {
        const currentTitle = (target as HTMLInputElement).value;
        const url = (document.querySelector('[for="id_title"]') as HTMLElement).dataset.slugifyUrl;
        slugify(url, { title: currentTitle }).then((response) => {
            /* on success write response to both slug field and permalink */
            slugField.value = response.unique_slug;
            updatePermalink(response.unique_slug);
        });
    });
}

slugify_ajax is used in the page form and it uses page as a model_type. Should it target page as a model_type? Because I am getting error NoReverseMatch and slugifyUrl returning undefined when I am using it. 🤔

[MizukiTemma]

slugify_ajax is used in the page form and it uses page as a model_type. Should it target page as a model_type? Because I am getting error NoReverseMatch and slugifyUrl returning undefined when I am using it. 🤔

Yes, in page_sbs too :)

[MizukiTemma]

Looks good 🎉 Thank you 😸

☝️ Only release note is left 😁

[charludo]

@lunars97 could you please rebase this on develop? #2636 was recently merged and introduces changes and fixes both to the slugify_ajax method and the way it should be called from update-permalink.ts.

[charludo]

Thanks for the changes! :)
Just one more thing

[charludo]

Super sorry for the lonf turnaround time with this review :(

This looks great now, thank you! 😄 🎉 I only have one nitpick left (see below), but will already approve this, since it's very minor.