thatcher 1.0.50 → 1.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thatcher",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "A config-driven application framework for building data-intensive web apps without code.",
   "main": "src/index.js",
   "type": "module",

package/src/ui/csv-export.js

@@ -0,0 +1,29 @@
+import { getColumns } from '@/ui/grid-view-renderer.js';
+
+const FORMULA_PREFIXES = ['=', '+', '-', '@'];
+
+function neutralizeFormula(str) {
+  if (str.length && FORMULA_PREFIXES.includes(str[0])) return `'${str}`;
+  return str;
+}
+
+function csvCell(value) {
+  if (value === null || value === undefined) return '';
+  let str = typeof value === 'object' ? JSON.stringify(value) : String(value);
+  str = neutralizeFormula(str);
+  if (/[",\n\r]/.test(str)) str = `"${str.replace(/"/g, '""')}"`;
+  return str;
+}
+
+export function buildCsv(entityName, spec, records) {
+  const columns = getColumns(spec);
+  const header = columns.map(([key, field]) => csvCell(field?.label || key)).join(',');
+  const rows = records.map(item =>
+    columns.map(([key]) => csvCell(item[key])).join(',')
+  );
+  return [header, ...rows].join('\r\n');
+}
+
+export function csvFilename(entityName) {
+  return `${entityName}-export-${Date.now()}.csv`;
+}

package/src/ui/grid-view-renderer.js

@@ -4,7 +4,7 @@ import { getDefaultSort, getAvailableFilters, getPageSize, getEntityLabel } from
 
 const EMBEDDED_TYPES = new Set(['json', 'embedded']);
 
-function getColumns(spec) {
+export function getColumns(spec) {
   const fields = spec?.fields || {};
   const override = spec?.list?.columns;
   if (Array.isArray(override) && override.length) {
@@ -25,12 +25,58 @@ function gridRow(entityName, item, columns) {
   const cells = columns.map(([key, field]) => {
     const value = item[key];
     const rendered = fmtVal(value, key, item);
-    const editableAttr = isEditable(field) ? ` data-editable="${esc(key)}"` : '';
-    return `<td data-col="${esc(key)}"${editableAttr}>${rendered}</td>`;
+    const editableAttrs = isEditable(field)
+      ? ` data-editable="${esc(key)}" data-entity="${esc(entityName)}" data-record-id="${esc(item.id)}"`
+      : '';
+    return `<td data-col="${esc(key)}"${editableAttrs}>${rendered}</td>`;
   }).join('');
   return `<tr data-row data-navigate="/${esc(entityName)}/${esc(item.id)}" style="cursor:pointer">${cells}</tr>`;
 }
 
+const GRID_EDIT_SCRIPT = `(function(){
+  function commitCell(td){
+    var input=td.querySelector('input,select');
+    if(!input)return;
+    var value=input.value;
+    var field=td.dataset.editable, entity=td.dataset.entity, id=td.dataset.recordId;
+    var original=td.dataset.originalHtml;
+    fetch('/api/'+entity+'/'+id,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({[field]:value})})
+      .then(function(r){if(!r.ok)throw new Error('Save failed');return r.json()})
+      .then(function(){location.reload()})
+      .catch(function(err){td.innerHTML=original;if(window.showToast)showToast(err.message,'error')});
+  }
+  function cancelCell(td){
+    var original=td.dataset.originalHtml;
+    if(original!==undefined)td.innerHTML=original;
+  }
+  document.addEventListener('dblclick',function(e){
+    var td=e.target.closest('[data-editable]');
+    if(!td||td.querySelector('input,select'))return;
+    e.stopPropagation();
+    var field=td.dataset.editable;
+    var current=(td.textContent||'').trim();
+    td.dataset.originalHtml=td.innerHTML;
+    var input=document.createElement('input');
+    input.type='text';
+    input.value=current;
+    input.className='grid-cell-input';
+    td.innerHTML='';
+    td.appendChild(input);
+    input.focus();
+    input.select();
+    input.addEventListener('blur',function(){commitCell(td)});
+    input.addEventListener('keydown',function(ke){
+      if(ke.key==='Enter'){ke.preventDefault();input.blur()}
+      else if(ke.key==='Escape'){ke.preventDefault();cancelCell(td)}
+    });
+  });
+  document.addEventListener('click',function(e){
+    if(e.target.closest('[data-editable]')&&e.target.closest('[data-editable]').querySelector('input,select')){
+      e.stopPropagation();
+    }
+  },true);
+})();`;
+
 export function renderGridView(user, entityName, spec, records, options = {}) {
   const label = getEntityLabel(spec, true) || entityName;
   const columns = getColumns(spec);
@@ -74,5 +120,5 @@ export function renderGridView(user, entityName, spec, records, options = {}) {
         </table>
       </div>`;
 
-  return page(user, `${label} | Thatcher`, null, content, [TABLE_SCRIPT]);
+  return page(user, `${label} | Thatcher`, null, content, [TABLE_SCRIPT, GRID_EDIT_SCRIPT]);
 }

package/src/ui/page-handler.js

@@ -224,11 +224,19 @@ export async function handlePage(pathname, req, res) {
     let items = await list(entityName, {});
     if (isClientUser(user) && user.client_id) items = items.filter(item => { if (item.client_id) return item.client_id === user.client_id; if (item.assigned_to) return item.assigned_to === user.id; return true; });
     items = resolveRefFields(items, spec);
-    const view = reqUrl(req).searchParams.get('view');
+    const params = reqUrl(req).searchParams;
+    if (params.get('export') === 'csv') {
+      const { buildCsv, csvFilename } = await lazyRenderer('csv-export.js');
+      const csv = buildCsv(entityName, spec, items);
+      res.setHeader('Content-Type', 'text/csv; charset=utf-8');
+      res.setHeader('Content-Disposition', `attachment; filename="${csvFilename(entityName)}"`);
+      res.setHeader('Content-Length', Buffer.byteLength(csv, 'utf-8'));
+      res.writeHead(200); res.end(csv); return 'HANDLED';
+    }
+    const view = params.get('view');
     if (view === 'board') return renderBoardView(user, entityName, spec, items);
     if (view === 'grid') return renderGridView(user, entityName, spec, items);
     if (view === 'calendar') {
-      const params = reqUrl(req).searchParams;
       const month = params.has('month') ? Number(params.get('month')) : undefined;
       const year = params.has('year') ? Number(params.get('year')) : undefined;
       return renderCalendarView(user, entityName, spec, items, { month, year });