You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
4.2 KiB
JavaScript
105 lines
4.2 KiB
JavaScript
// Copyright (C) 2024 Robert J.A. Wagner; Am Kiefernwald 49b; D-64297 Darmstadt - All Rights Reserved
|
|
|
|
import toParent from "./oFormElem_20_input.js";
|
|
|
|
const getSelectValues = (option, arg) => {
|
|
if (XRW.is.string(option.select)) try {
|
|
option.select = JSON.parse(option.select);
|
|
} catch (err) {
|
|
return XRW.panic(`Selection: JSON.stringify("${option.select}")`, arg);
|
|
};
|
|
if (!XRW.is.array(option.select)) {
|
|
return XRW.panic(`Selection: missing or malformed select parameter`, arg);
|
|
}
|
|
if (!option.values) {
|
|
option.values = option.select;
|
|
} else {
|
|
if (XRW.is.string(option.values)) try {
|
|
option.values = JSON.parse(option.values);
|
|
} catch (err) {
|
|
return XRW.panic(`Selection: JSON.stringify("${option.values}")`, arg);
|
|
};
|
|
if (!XRW.is.array(option.values)) return XRW.panic(`Selection: missing or malformed values parameter`, arg);
|
|
}
|
|
}
|
|
|
|
|
|
export default class toFormElem_select extends toParent {
|
|
constructor() {
|
|
super();
|
|
}
|
|
setThisFE() {
|
|
this.setFE({
|
|
GenericFixSelect: { elem: { FE_Title: 'Auswahl', select: ['A', 'B', 'C'] }, FE_Data: { ynExport: 'Y', ynGenerateView: 'Y' } },
|
|
});
|
|
}
|
|
//------------------------------
|
|
// html
|
|
//------------------------------
|
|
htmlSelection (cell, key, arg, option) {
|
|
// let pleaseSelect = '(Please select)';
|
|
getSelectValues(option, arg);
|
|
let pleaseSelect = `(${XRW.translate('select')})`;
|
|
if ('placeholder' in option) pleaseSelect = option.placeholder;
|
|
let ojson = {
|
|
tag: 'FIELDSET',
|
|
_class: `w3-col x${option.col25}`,
|
|
// _style: `border-radius: 4px;border: 1px solid #505050;margin-top:10px;margin-bottom:10px;`,
|
|
_title: option.hint ? option.hint : option.title,
|
|
next: [
|
|
// this.htmlFormLegend(option),
|
|
{
|
|
tag: 'SELECT',
|
|
_id: option.id,
|
|
_class: `w3-select${option.readonly ? ' w3-rw-color-readonly' : option.required ? ' w3-rw-color-required' : ' w3-color-optional'}`,
|
|
'_data-type': `selection`,
|
|
_translate: "no",
|
|
_name: option.name,
|
|
hook: 'hkNext',
|
|
next: [
|
|
{ tag: "OPTION", _value: "", _disabled: true, inner: pleaseSelect }
|
|
]
|
|
}]
|
|
}
|
|
let pNext = XRW.dom.jsonFindHook(ojson, 'hkNext');
|
|
if (option.required) pNext['_required'] = true;
|
|
if (option.readonly) pNext['_readonly'] = true;
|
|
if (option.ynMultiple == 'Y') {
|
|
pNext['_multiple'] = true;
|
|
pNext['_size'] = 20;
|
|
}
|
|
if (!option.ynTableStyle || option.ynTableStyle == 'N') {
|
|
// ojson.next.unshift(this.jsonLabel(cell));
|
|
ojson.next.push(this.jsonLabel(cell));
|
|
ojson._class += " w3-rw-fieldset";
|
|
}
|
|
for (let ix = 0; ix < option.select.length; ix++) {
|
|
pNext.next.push({ tag: "OPTION", _value: option.values[ix], inner: option.select[ix] });
|
|
if (option.value && option.value == option.values[ix]) {
|
|
pNext.next[pNext.next.length - 1]['_selected'] = true;
|
|
pNext._class = pNext._class.replace("w3-rw-color-required", "w3-rw-color-fullfilled");
|
|
}
|
|
else {
|
|
pNext.next[0]['_selected'] = true;
|
|
}
|
|
if (option.ynDisabled && option.ynDisabled[ix] == 'Y') {
|
|
pNext.next[pNext.next.length - 1]['_disabled'] = true;
|
|
}
|
|
}
|
|
return ojson;
|
|
}
|
|
//------------------------------
|
|
// render-functions
|
|
//------------------------------
|
|
render_ojsonElemForm(next, form, control, item, cell, arg, FGM_Key) {
|
|
if (item._readonly) {
|
|
return super.render_ojsonElemForm(next, form, control, item, cell, arg, FGM_Key);
|
|
}
|
|
let ojson = this.htmlSelection(cell, FGM_Key, arg, item);
|
|
next.push(ojson);
|
|
|
|
}
|
|
}
|
|
|
|
new toFormElem_select();
|