tableInput = ({ base = 0, width = "100%", rc=[], defaultRowValue, title = "", description = "", value = null, disabled= {}, disabledException= [], action= {}, actionException= [] }) => { // This is a state variable that we will change as events occur on the input let values = value !== null ? value : new Array(base).fill(defaultRowValue); const addButton = html``; const deleteButton = i => html`` // Templates const headerRow = html` ${rc.map(c => html`${c[2]}`)} ` const inputRow = i => html` ${rc.map((c,ic) => html``)} ` const emptyRow = html` ${rc.map(c => html``)} ` const footerRow = html` ${rc.map(c => html``)} ` const form = html`` if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); // Event Dispatcher const dispatchInputEvent = () => { form.value = values; form.dispatchEvent(new CustomEvent("input", { bubbles: true })); } // Event Handlers const addNewRow = () => { values = form.value; values.push(defaultRowValue); form.update(values); dispatchInputEvent(); } const onclick_add = e => { addNewRow(); }; addButton.addEventListener('click', onclick_add); const removeRow = e => { var id = e.target.name; var removeIdx = parseInt(id.substr(id.length - 1)); console.log('removeIdx:',removeIdx); values = form.value; values = values.filter((_, i) => i !== removeIdx); console.log('before:',actionException); actionException.map((exep,ie) => { if (parseInt(exep)==parseInt(removeIdx)) {actionException.splice(ie, 1);} }); actionException.map((exep,ie) => { if (parseInt(exep)>parseInt(removeIdx)) {actionException[ie]=parseInt(exep)-1;} }); console.log('after:',actionException); disabledException.map((d,id) => { if (removeIdx==d.row) { disabledException.splice(id, 1);} if (removeIdx { removeRow(e); }; form.update = newValues => { const thead = form.querySelector('thead'); const tbody = form.querySelector('tbody'); thead.innerHTML = ''; tbody.innerHTML = ''; thead.appendChild(headerRow); if (action['add']==true){ form.querySelector('thead').querySelector('tr').appendChild(html`${addButton}`); } if (newValues.length==0) { tbody.name = 'empty_body'; tbody.appendChild(emptyRow); } else { tbody.name = 'filled_body'; newValues.map((d,i) => {tbody.appendChild(inputRow(i));}) const rows = tbody.children; for (var i in Object.keys(rows)) { rows[i].children[0].append(html`

${(parseInt(i)).toString()} -

`); rows[i].children[0].querySelector('div').setAttribute("name", "num"); var newRowValue = newValues[i]; rc.map((c,idx)=>{ const cell = rows[i].children[idx+1]; const newCellValue = newRowValue[c[1]]; cell.append(c[4](newCellValue)); cell.querySelector(c[3]).setAttribute("name", c[1]+'Input'); }) if (action['remove']==true){ if (actionException.indexOf(parseInt(i)) == -1) { rows[i].appendChild(html`${deleteButton(i)}`) rows[i].querySelector('button[name="deleteButton'+i+'"]').addEventListener('click', onclick_delete); } } Object.keys(disabled).forEach(key => { const val = disabled[key]; if (val != null & val!= false) { for (var c of rc){ if (key==c[1]) rows[i].querySelector(c[3]+'[name="'+c[1]+'Input"]').setAttribute('disabled', val); } } }); disabledException.map(d => { if (parseInt(i)==d.row) { d.cell.map(j=>{ var c = rc[j]; if (d.val==false) { rows[i].querySelector(c[3]+'[name="'+c[1]+'Input"]').removeAttribute('disabled'); } else { rows[i].querySelector(c[3]+'[name="'+c[1]+'Input"]').setAttribute('disabled', true); } }) } }); } } } form.update(values); form.oninput = e => { e && e.preventDefault(); const tbody = form.querySelector('tbody'); const rows = tbody.children; values = new Array(); if (tbody.name=='filled_body') { for (var row of rows) { var rowValue = {}; for (var c of rc){ if (c[3]=='input') { rowValue[c[1]] = row.querySelector(c[3]+'[name="'+c[1]+'Input"]').value; } if (c[3]=='select') { const selected = Array.prototype.filter .call(row.querySelector(c[3]+'[name="'+c[1]+'Input"]').options, i => i.selected) .map(i => i.value); rowValue[c[1]] = row.querySelector(c[3]+'[name="'+c[1]+'Input"]').multiple ? selected : selected[0]; } } values.push(rowValue); } } form.value = values; }; form.onsubmit = e => e && e.preventDefault(); form["oninput"](); form.setValue = function(newValues) { form.update(newValues); dispatchInputEvent(); }; form.setDisabled = function(newDisabled) { disabled = newDisabled; form.update(form.value); dispatchInputEvent(); }; form.setAction = function(newAction) { action = newAction; form.update(form.value); dispatchInputEvent(); }; return form }