select field: display value instead of label

[falk-m]

Hi,

i use the feature, that i can use objects instead ob simple strings to define a select list option:

the benefit is, that i use labels for the view and a value how is stored. the select field support thi, so use can use as option a object with the properties: label, value and group.

It looks nice in the select box:

The problem is that in die detail view it shows the stored value und not the label from the option

api/modules/App/assets/vue-components/fields/field-select.js

render(value, field) {
            return Array.isArray(value) ? value.join(', ') : value;
        }

the solution is to select the label from the possible options:

render(value, field) {

            if (field.opts && field.opts.options && Array.isArray(field.opts.options)  && field.opts.options.length > 0 && (typeof(field.opts.options[0]) !== 'string')) {

                const selectedValues = typeof (value) === 'string' ? value.split(',') : value || []
                var selectedOptions = field.opts.options.filter((o) => selectedValues.indexOf((o.value ?? o).toString().trim()) !== -1);

                if(selectedOptions.length > 0){
                    return selectedOptions.map(o => (o.label ?? o).toString().trim()).join(", ");
                }
            }

            return Array.isArray(value) ? value.join(', ') : value;
        }

then it work nice.

i create i n few minitutes a pull request linked to this issue

[aheinze]

fix merged