Commit 3310a7c7 authored by Sandro Lutz's avatar Sandro Lutz Committed by lic
Browse files

Fix issues with label not showing on JSON schema form

parent bf2b364e
import m from 'mithril'; import m from 'mithril';
import { i18n } from '../../models/language';
export default class InputGroup { export default class InputGroup {
constructor(vnode) { constructor(vnode) {
...@@ -33,7 +34,7 @@ export default class InputGroup { ...@@ -33,7 +34,7 @@ export default class InputGroup {
if (['radio', 'checkbox'].includes(args.type)) { if (['radio', 'checkbox'].includes(args.type)) {
return m('div', { class: groupClasses }, [ return m('div', { class: groupClasses }, [
m(`input[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, args), m(`input[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, args),
m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)),
errorField, errorField,
]); ]);
} }
...@@ -51,7 +52,7 @@ export default class InputGroup { ...@@ -51,7 +52,7 @@ export default class InputGroup {
} }
return m('div', { class: groupClasses }, [ return m('div', { class: groupClasses }, [
m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)),
m(`input[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, args), m(`input[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, args),
m('datalist', { id: args.list }, this.suggestions.map(item => m('option', item))), m('datalist', { id: args.list }, this.suggestions.map(item => m('option', item))),
errorField, errorField,
......
import m from 'mithril'; import m from 'mithril';
import inputGroup from './inputGroup'; import inputGroup from './inputGroup';
import Dropdown from '../Dropdown';
import { i18n } from '../../models/language';
export default class SelectGroup { export default class SelectGroup {
oninit() { oninit() {
...@@ -20,20 +22,20 @@ export default class SelectGroup { ...@@ -20,20 +22,20 @@ export default class SelectGroup {
if (typeof option === 'object') { if (typeof option === 'object') {
return option; return option;
} }
return { value: option, text: option }; return { value: option, label: option };
}); });
switch (vnode.attrs.type) { switch (vnode.attrs.type) {
case 'buttons': { case 'buttons': {
if (args.multipleSelect) { if (args.multipleSelect) {
return m('div', { class: vnode.attrs.classes }, [ return m('div', { class: vnode.attrs.classes }, [
m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)),
m( m(
'div', 'div',
options.map(option => options.map(option =>
m(inputGroup, { m(inputGroup, {
name: vnode.attrs.name, name: vnode.attrs.name,
title: option.text, title: i18n(option.label),
value: option.value, value: option.value,
onchange: e => { onchange: e => {
if (e.target.checked) { if (e.target.checked) {
...@@ -63,59 +65,55 @@ export default class SelectGroup { ...@@ -63,59 +65,55 @@ export default class SelectGroup {
options.map(option => options.map(option =>
m(inputGroup, { m(inputGroup, {
name: vnode.attrs.name, name: vnode.attrs.name,
title: option.text, title: i18n(option.label),
value: option.value, value: option.value,
onchange: vnode.attrs.onchange, onchange: vnode.attrs.onchange,
args: { type: 'radio' }, args: { type: 'radio' },
}) })
) )
), ),
m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), m(`label[for=${vnode.attrs.name}]`, vnode.attrs.name),
]); ]);
} }
case 'select': case 'select':
default: { default: {
if (args.multipleSelect) { if (args.multipleSelect) {
return m('div', { class: vnode.attrs.classes }, [ return m('div', { class: vnode.attrs.classes }, [
m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)),
m( m(Dropdown, {
`select[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, ...args,
{ onchange: e => {
args, const value = [];
onchange: e => { let opt;
const value = []; for (let i = 0; i < e.target.options.length; i += 1) {
let opt; opt = e.target.options[i];
for (let i = 0; i < e.target.options.length; i += 1) { if (opt.selected) {
opt = e.target.options[i]; value.push(opt);
if (opt.selected) {
value.push(opt);
}
} }
vnode.attrs.onchange({ target: { name: e.target.name, value } }); }
}, vnode.attrs.onchange({ target: { name: e.target.name, value } });
oninput: e => { },
const value = []; oninput: e => {
let opt; const value = [];
for (let i = 0; i < e.target.options.length; i += 1) { let opt;
opt = e.target.options[i]; for (let i = 0; i < e.target.options.length; i += 1) {
if (opt.selected) { opt = e.target.options[i];
value.push(opt); if (opt.selected) {
} value.push(opt);
} }
vnode.attrs.oninput({ target: { name: e.target.name, value } }); }
}, vnode.attrs.oninput({ target: { name: e.target.name, value } });
}, },
options.map(option => m('option', { value: option.value }, option.text)) data: options,
), }),
]); ]);
} }
return m('div', { class: vnode.attrs.classes }, [ return m('div', { class: vnode.attrs.classes }, [
m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)),
m( m(Dropdown, {
`select[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, ...args,
args, data: options,
options.map(option => m('option', { value: option.value }, option.text)) }),
),
]); ]);
} }
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment