[Bug] Slug field doesn't properly slug German characters

[tabacitu]

Bug report

What I did

A user reported this by email, that in our Monster demo:

What I expected to happen

They expected the following characters to be converted like this:

Ü => UE
Ä => AE
Ö => OE
ü => ue
ä => ae
ö => oe
ß => ss

What happened

Not the above.

What I've already tried to fix it

Nothing.

[karandatwani92]

chatGPT suggested me following way: vendor/backpack/pro/resources/views/fields/slug.blade.php

@include('crud::fields.text')

@if(isset($field['target']) && $field['target'] != null && $field['target'] != '')
  @push('after_scripts')
    <script>
        crud.field('{{ $field['target'] }}').onChange(field => {
          let slug = field.value.toString().toLowerCase().trim()
              .normalize('NFD')                // separate accent from letter
              .replace(/[\u0300-\u036f]/g, '') // remove all separated accents
+.            .replace(/[ä]/g, 'ae')
+             .replace(/[ö]/g, 'oe')
+             .replace(/[ü]/g, 'ue')
+             .replace(/[ß]/g, 'ss')
              .replace(/\s+/g, '-')            // replace spaces with -
              .replace(/[^\w\-]+/g, '')        // remove all non-word chars
              .replace(/\-\-+/g, '-')          // replace multiple '-' with single '-'

          crud.field('{{ $field['name'] }}').input.value = slug;
        });
    </script>
  @endpush
@endif

Or we can use https://github.com/dzcpy/transliteration to handle other languages too!

<script src="https://cdn.jsdelivr.net/npm/transliteration@2.1.8/dist/browser/bundle.umd.min.js"/>

let slug = transliterate(field.value)
    .toLowerCase()
    .trim()
    .replace(/\s+/g, '-')            // replace spaces with -
    .replace(/[^\w\-]+/g, '')        // remove all non-word chars
    .replace(/\-\-+/g, '-');          // replace multiple '-' with single '-'

[pxpm]

Hey Cristian, thanks for the report.

If you have verified the "bug" and it requires patch team intervention to degub/fix/answer please make the correct assignments, no need to "retriage" I think.🙏

@karandatwani92 ChatGPT got it totally wrong here. I've already created the PR where it actually works:

But decided to give a test in your proposed solution, and as I expected, it does not work.

Some of those characters are called German Umlats (I didn't know, just found out now: https://www.studying-in-germany.org/learn-german/german-umlauts)

What I mean here, those comments add confusion to the problem, as they do not really solve the problem. I have nothing against using ChatGPT, I use it myself. But I would take care to test if the "guy" is giving me the correct instructions or not.

Here is the PR: https://github.com/Laravel-Backpack/PRO/pull/223

[karandatwani92]

Oh! you saw my first comment. I did the test & updated the answer just a moment before your reply. It works now.

Sorry! My first comment took your time. I meant to help. I will test before putting something early.

[tabacitu]

Fixing in https://github.com/Laravel-Backpack/PRO/pull/223