thatcher 1.0.50 → 1.0.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/ui/grid-view-renderer.js +49 -3
package/package.json
CHANGED
|
@@ -25,12 +25,58 @@ function gridRow(entityName, item, columns) {
|
|
|
25
25
|
const cells = columns.map(([key, field]) => {
|
|
26
26
|
const value = item[key];
|
|
27
27
|
const rendered = fmtVal(value, key, item);
|
|
28
|
-
const
|
|
29
|
-
|
|
28
|
+
const editableAttrs = isEditable(field)
|
|
29
|
+
? ` data-editable="${esc(key)}" data-entity="${esc(entityName)}" data-record-id="${esc(item.id)}"`
|
|
30
|
+
: '';
|
|
31
|
+
return `<td data-col="${esc(key)}"${editableAttrs}>${rendered}</td>`;
|
|
30
32
|
}).join('');
|
|
31
33
|
return `<tr data-row data-navigate="/${esc(entityName)}/${esc(item.id)}" style="cursor:pointer">${cells}</tr>`;
|
|
32
34
|
}
|
|
33
35
|
|
|
36
|
+
const GRID_EDIT_SCRIPT = `(function(){
|
|
37
|
+
function commitCell(td){
|
|
38
|
+
var input=td.querySelector('input,select');
|
|
39
|
+
if(!input)return;
|
|
40
|
+
var value=input.value;
|
|
41
|
+
var field=td.dataset.editable, entity=td.dataset.entity, id=td.dataset.recordId;
|
|
42
|
+
var original=td.dataset.originalHtml;
|
|
43
|
+
fetch('/api/'+entity+'/'+id,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({[field]:value})})
|
|
44
|
+
.then(function(r){if(!r.ok)throw new Error('Save failed');return r.json()})
|
|
45
|
+
.then(function(){location.reload()})
|
|
46
|
+
.catch(function(err){td.innerHTML=original;if(window.showToast)showToast(err.message,'error')});
|
|
47
|
+
}
|
|
48
|
+
function cancelCell(td){
|
|
49
|
+
var original=td.dataset.originalHtml;
|
|
50
|
+
if(original!==undefined)td.innerHTML=original;
|
|
51
|
+
}
|
|
52
|
+
document.addEventListener('dblclick',function(e){
|
|
53
|
+
var td=e.target.closest('[data-editable]');
|
|
54
|
+
if(!td||td.querySelector('input,select'))return;
|
|
55
|
+
e.stopPropagation();
|
|
56
|
+
var field=td.dataset.editable;
|
|
57
|
+
var current=(td.textContent||'').trim();
|
|
58
|
+
td.dataset.originalHtml=td.innerHTML;
|
|
59
|
+
var input=document.createElement('input');
|
|
60
|
+
input.type='text';
|
|
61
|
+
input.value=current;
|
|
62
|
+
input.className='grid-cell-input';
|
|
63
|
+
td.innerHTML='';
|
|
64
|
+
td.appendChild(input);
|
|
65
|
+
input.focus();
|
|
66
|
+
input.select();
|
|
67
|
+
input.addEventListener('blur',function(){commitCell(td)});
|
|
68
|
+
input.addEventListener('keydown',function(ke){
|
|
69
|
+
if(ke.key==='Enter'){ke.preventDefault();input.blur()}
|
|
70
|
+
else if(ke.key==='Escape'){ke.preventDefault();cancelCell(td)}
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
document.addEventListener('click',function(e){
|
|
74
|
+
if(e.target.closest('[data-editable]')&&e.target.closest('[data-editable]').querySelector('input,select')){
|
|
75
|
+
e.stopPropagation();
|
|
76
|
+
}
|
|
77
|
+
},true);
|
|
78
|
+
})();`;
|
|
79
|
+
|
|
34
80
|
export function renderGridView(user, entityName, spec, records, options = {}) {
|
|
35
81
|
const label = getEntityLabel(spec, true) || entityName;
|
|
36
82
|
const columns = getColumns(spec);
|
|
@@ -74,5 +120,5 @@ export function renderGridView(user, entityName, spec, records, options = {}) {
|
|
|
74
120
|
</table>
|
|
75
121
|
</div>`;
|
|
76
122
|
|
|
77
|
-
return page(user, `${label} | Thatcher`, null, content, [TABLE_SCRIPT]);
|
|
123
|
+
return page(user, `${label} | Thatcher`, null, content, [TABLE_SCRIPT, GRID_EDIT_SCRIPT]);
|
|
78
124
|
}
|