admindb 1.2.0 → 2.0.0

package/dist/public/js/query.js

@@ -80,6 +80,17 @@
       (palette[type] || palette.info) + '"><span>' + escapeHtml(text) + '</span></div>';
   }
 
+  function isJsonStr(s) {
+    if (typeof s !== 'string') return false;
+    const t = s.trim();
+    if (!((t.startsWith('{') && t.endsWith('}')) || (t.startsWith('[') && t.endsWith(']')))) return false;
+    try { JSON.parse(t); return true; } catch { return false; }
+  }
+
+  function isHexBlobStr(s) {
+    return typeof s === 'string' && /^0x[0-9a-f]{4,}$/i.test(s.trim());
+  }
+
   function renderTable(columns, rows) {
     headEl.innerHTML = '<tr>' + columns.map((c) => '<th class="whitespace-nowrap font-semibold"><span class="font-mono normal-case">' + escapeHtml(c) + '</span></th>').join('') + '</tr>';
     if (!rows.length) {
@@ -93,12 +104,64 @@
           return '<td class="align-middle"><span class="chip chip-null">NULL</span></td>';
         }
         const s = String(v);
-        const short = s.length > 200 ? s.slice(0, 200) + '…' : s;
-        return '<td class="max-w-xs truncate align-middle font-mono text-[13px]" title="' + escapeHtml(s) + '">' + escapeHtml(short) + '</td>';
+        const json = isJsonStr(s);
+        const blob = isHexBlobStr(s);
+        const short = s.length > 140 ? s.slice(0, 140) + '…' : s;
+
+        if (json) {
+          return '<td class="max-w-xs align-middle js-query-cell" data-col="' + escapeHtml(c) + '" data-value="' + escapeHtml(s) + '" data-json="true">' +
+            '<div class="flex items-center gap-1.5">' +
+            '<span class="inline-flex items-center gap-1 rounded-md bg-info/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-info">{ } JSON</span>' +
+            '<span class="block max-w-[120px] truncate font-mono text-[12px] text-base-content/70">' + escapeHtml(short) + '</span>' +
+            '<button type="button" class="btn btn-ghost btn-xs btn-circle js-query-inspect" title="Inspect JSON"><svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></button>' +
+            '</div></td>';
+        }
+
+        if (blob) {
+          return '<td class="max-w-xs align-middle js-query-cell" data-col="' + escapeHtml(c) + '" data-value="' + escapeHtml(s) + '" data-blob="true">' +
+            '<div class="flex items-center gap-1.5">' +
+            '<span class="inline-flex items-center gap-1 rounded-md bg-secondary/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-secondary">🗃️ BLOB</span>' +
+            '<span class="block max-w-[120px] truncate font-mono text-[12px] text-base-content/70">' + escapeHtml(short) + '</span>' +
+            '<button type="button" class="btn btn-ghost btn-xs btn-circle js-query-inspect" title="Inspect BLOB"><svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></button>' +
+            '</div></td>';
+        }
+
+        return '<td class="max-w-xs align-middle js-query-cell" data-col="' + escapeHtml(c) + '" data-value="' + escapeHtml(s) + '">' +
+          '<div class="flex items-center justify-between gap-1 group/cell">' +
+          '<span class="truncate font-mono text-[13px]" title="' + escapeHtml(s) + '">' + escapeHtml(short) + '</span>' +
+          (s.length > 25 ? '<button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover/cell:opacity-100 transition-opacity js-query-inspect shrink-0" title="Inspect text"><svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></button>' : '') +
+          '</div></td>';
       }).join('') + '</tr>',
     ).join('');
   }
 
+  // Delegate inspection click
+  if (bodyEl) {
+    bodyEl.addEventListener('click', function (e) {
+      const inspectBtn = e.target.closest('.js-query-inspect');
+      const cell = e.target.closest('.js-query-cell');
+      if (!inspectBtn && (!cell || e.detail < 2)) return;
+      const targetCell = inspectBtn ? inspectBtn.closest('.js-query-cell') : cell;
+      if (!targetCell) return;
+
+      const col = targetCell.dataset.col || 'result';
+      const val = targetCell.dataset.value || '';
+      const isBlob = targetCell.dataset.blob === 'true';
+      const isJson = targetCell.dataset.json === 'true';
+
+      if (window.Inspector && window.Inspector.open) {
+        window.Inspector.open({
+          col: col,
+          value: val,
+          isNull: false,
+          isBlob: isBlob,
+          isJson: isJson,
+          readonly: true,
+        });
+      }
+    });
+  }
+
   function renderMessageRow(text, kindLabel) {
     headEl.innerHTML = '';
     bodyEl.innerHTML = '<tr><td class="px-4 py-8 text-center"><p class="text-2xl font-extrabold text-primary">' +
@@ -109,12 +172,29 @@
     if (resultSummary) resultSummary.textContent = text;
   }
 
+  function isDestructiveSql(sql) {
+    var cleaned = sql.replace(/--.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '').trim();
+    if (/\b(drop\s+(table|view|index|trigger)|truncate\b)/i.test(cleaned)) return true;
+    if (/\bdelete\s+from\b/i.test(cleaned) && !/\bwhere\b/i.test(cleaned)) return true;
+    return false;
+  }
+
   async function run() {
     const sql = editor.value.trim();
     if (!sql) {
       setMessage('Enter a SQL statement first.', 'warning');
       return;
     }
+    if (isDestructiveSql(sql)) {
+      const confirmed = await UI.confirm({
+        title: 'Execute Destructive SQL',
+        message: 'This SQL statement contains potentially destructive operations (e.g. DROP, TRUNCATE, or unrestricted DELETE) that may permanently erase database schemas or data.',
+        detailsHtml: '<pre class="font-mono text-xs text-base-content/85 whitespace-pre-wrap break-all">' + escapeHtml(sql.length > 350 ? sql.slice(0, 350) + '…' : sql) + '</pre>',
+        confirmText: 'Execute anyway',
+        danger: true,
+      });
+      if (!confirmed) return;
+    }
     messageEl.innerHTML = '';
     resultEl.classList.add('hidden');
     setExportEnabled(false);
@@ -202,7 +282,17 @@
   async function deleteQuery() {
     const id = selectEl.value;
     if (!id) return;
-    if (!window.confirm('Delete this saved query?')) return;
+    const q = queriesCache.find((x) => String(x.id) === String(id));
+    const queryName = q ? q.name : 'Saved query';
+    const confirmed = await UI.confirm({
+      title: 'Delete Saved Query',
+      message: 'Are you sure you want to delete the saved query "' + queryName + '"?',
+      item: queryName,
+      itemType: 'Saved Query',
+      confirmText: 'Delete query',
+      danger: true,
+    });
+    if (!confirmed) return;
     try {
       await Api.del('/api/queries/' + id);
       UI.showToast('Query deleted.', 'success');

package/dist/public/js/schema.js

@@ -4,7 +4,32 @@
   const cfgEl = document.getElementById('schema-config');
   if (!cfgEl) return;
   const cfg = JSON.parse(cfgEl.textContent);
-  const DESIGNER_TYPES = ['TEXT', 'INTEGER', 'REAL', 'BLOB', 'BOOLEAN', 'DATE', 'DATETIME'];
+  const DESIGNER_TYPES = [
+    'TEXT',
+    'VARCHAR(255)',
+    'INTEGER',
+    'BIGINT',
+    'SMALLINT',
+    'SERIAL',
+    'BIGSERIAL',
+    'REAL',
+    'DECIMAL(10,2)',
+    'NUMERIC',
+    'BOOLEAN',
+    'DATE',
+    'DATETIME',
+    'TIMESTAMP',
+    'TIMESTAMPTZ',
+    'TIME',
+    'INTERVAL',
+    'JSON',
+    'JSONB',
+    'UUID',
+    'BYTEA',
+    'BLOB',
+    'INET',
+  ];
+
   const NAME_RE = /^[A-Za-z_][A-Za-z0-9_$]*$/;
   const t = encodeURIComponent(cfg.table);
 
@@ -58,15 +83,26 @@
     }
   }
 
-  function buildAddForm() {
+  function renderTypeOptions(selectedType) {
+    const upper = (selectedType || 'TEXT').toUpperCase();
+    const all = [...DESIGNER_TYPES];
+    if (selectedType && !all.map((x) => x.toUpperCase()).includes(upper)) {
+      all.unshift(selectedType);
+    }
+    return all.map((x) => '<option value="' + escapeHtml(x) + '"' + (x.toUpperCase() === upper ? ' selected' : '') + '>' + escapeHtml(x) + '</option>').join('');
+  }
+
+  async function buildAddForm() {
+    if (!fkTables.length) await loadFkTables();
     formEl.innerHTML = '';
     formEl.innerHTML = [
       '<div class="col-span-2 sm:col-span-3"><label class="field-label">Name</label><input class="field-input ac-name" placeholder="column_name" autocomplete="off" spellcheck="false"></div>',
-      '<div class="col-span-1 sm:col-span-2"><label class="field-label">Type</label><select class="field-select ac-type">' + DESIGNER_TYPES.map((x) => '<option>' + x + '</option>').join('') + '</select></div>',
+      '<div class="col-span-1 sm:col-span-2"><label class="field-label">Type</label><select class="field-select ac-type">' + renderTypeOptions('TEXT') + '</select></div>',
       '<div class="col-span-1 sm:col-span-2"><label class="field-label">FK table</label><select class="field-select ac-fk-table"><option value="">— none —</option>' + fkTables.map((x) => '<option>' + escapeHtml(x) + '</option>').join('') + '</select></div>',
       '<div class="col-span-1 sm:col-span-2"><label class="field-label">FK column</label><select class="field-select ac-fk-col"><option value="">—</option></select></div>',
       '<div class="col-span-1 sm:col-span-2"><label class="field-label">Default</label><input class="field-input ac-default" placeholder="0, CURRENT_TIMESTAMP" autocomplete="off" spellcheck="false"></div>',
-      '<div class="col-span-2 flex items-end gap-1 pb-0.5 sm:col-span-1">',
+      '<div class="col-span-2 flex items-end gap-1.5 pb-0.5 sm:col-span-1">',
+      '<label class="flex cursor-pointer flex-col items-center gap-1" title="Primary key"><input type="checkbox" class="checkbox checkbox-xs ac-pk"><span class="text-[10px] font-semibold uppercase text-base-content/50">PK</span></label>',
       '<label class="flex cursor-pointer flex-col items-center gap-1" title="Not null"><input type="checkbox" class="checkbox checkbox-xs ac-notnull"><span class="text-[10px] font-semibold uppercase text-base-content/50">NN</span></label>',
       '<label class="flex cursor-pointer flex-col items-center gap-1" title="Unique"><input type="checkbox" class="checkbox checkbox-xs ac-unique"><span class="text-[10px] font-semibold uppercase text-base-content/50">UQ</span></label>',
       '</div>',
@@ -95,6 +131,7 @@
     const column = {
       name,
       type: formEl.querySelector('.ac-type').value,
+      primaryKey: formEl.querySelector('.ac-pk').checked,
       notNull: formEl.querySelector('.ac-notnull').checked,
       unique: formEl.querySelector('.ac-unique').checked,
       defaultValue: formEl.querySelector('.ac-default').value.trim() || null,
@@ -110,73 +147,137 @@
   }
 
   if (addBtn) {
-    addBtn.addEventListener('click', () => {
+    addBtn.addEventListener('click', async () => {
+      if (editPanel) editPanel.classList.add('hidden');
       panel.classList.toggle('hidden');
       if (!panel.classList.contains('hidden')) {
         errEl.classList.add('hidden');
-        buildAddForm();
+        await buildAddForm();
       }
     });
   }
   if (cancelBtn) cancelBtn.addEventListener('click', () => { panel.classList.add('hidden'); formEl.innerHTML = ''; });
   if (submitBtn) submitBtn.addEventListener('click', addColumn);
 
-  // ---- Column rename (inline) ---------------------------------------------
-
-  function inlineRename(cell, oldName) {
-    const display = cell.querySelector('.name-display');
-    if (!display) return;
-    const input = document.createElement('input');
-    input.type = 'text';
-    input.value = oldName;
-    input.className = 'field-input !py-1 !text-[13px]';
-    input.spellcheck = false;
-    let done = false;
-    const restore = () => { if (display.parentNode) cell.replaceChild(display, input); };
-    const finish = async (save) => {
-      if (done) return;
-      done = true;
-      if (!save) return restore();
-      const newName = input.value.trim();
-      if (!newName || newName === oldName) return restore();
+  // ---- Edit column (type & constraints) ------------------------------------
+
+  const editPanel = document.getElementById('edit-column-panel');
+  const editFormEl = document.getElementById('edit-column-form');
+  const editErrEl = document.getElementById('edit-column-error');
+  const editSubmitBtn = document.getElementById('edit-column-submit');
+  const editCancelBtn = document.getElementById('edit-column-cancel');
+  const editTargetSpan = document.getElementById('edit-column-target');
+  let currentEditingCol = null;
+
+  async function openEditColumn(colData) {
+    if (!editPanel || !editFormEl) return;
+    if (panel) panel.classList.add('hidden');
+    if (!fkTables.length) await loadFkTables();
+    currentEditingCol = colData.name;
+    if (editTargetSpan) editTargetSpan.textContent = '"' + colData.name + '"';
+    editErrEl.classList.add('hidden');
+
+    editFormEl.innerHTML = [
+      '<div class="col-span-2 sm:col-span-3"><label class="field-label">Name</label><input class="field-input ec-name" value="' + escapeHtml(colData.name) + '" autocomplete="off" spellcheck="false"></div>',
+      '<div class="col-span-1 sm:col-span-2"><label class="field-label">Type</label><select class="field-select ec-type">' + renderTypeOptions(colData.type) + '</select></div>',
+      '<div class="col-span-1 sm:col-span-2"><label class="field-label">FK table</label><select class="field-select ec-fk-table"><option value="">— none —</option>' + fkTables.map((x) => '<option value="' + escapeHtml(x) + '"' + (colData.fkTable === x ? ' selected' : '') + '>' + escapeHtml(x) + '</option>').join('') + '</select></div>',
+      '<div class="col-span-1 sm:col-span-2"><label class="field-label">FK column</label><select class="field-select ec-fk-col"><option value="">—</option></select></div>',
+      '<div class="col-span-1 sm:col-span-2"><label class="field-label">Default</label><input class="field-input ec-default" value="' + escapeHtml(colData.defaultValue || '') + '" placeholder="0, CURRENT_TIMESTAMP" autocomplete="off" spellcheck="false"></div>',
+      '<div class="col-span-2 flex items-end gap-1.5 pb-0.5 sm:col-span-1">',
+      '<label class="flex cursor-pointer flex-col items-center gap-1" title="Primary key"><input type="checkbox" class="checkbox checkbox-xs ec-pk"' + (colData.primaryKey ? ' checked' : '') + '><span class="text-[10px] font-semibold uppercase text-base-content/50">PK</span></label>',
+      '<label class="flex cursor-pointer flex-col items-center gap-1" title="Not null"><input type="checkbox" class="checkbox checkbox-xs ec-notnull"' + (colData.notNull ? ' checked' : '') + '><span class="text-[10px] font-semibold uppercase text-base-content/50">NN</span></label>',
+      '<label class="flex cursor-pointer flex-col items-center gap-1" title="Unique"><input type="checkbox" class="checkbox checkbox-xs ec-unique"' + (colData.unique ? ' checked' : '') + '><span class="text-[10px] font-semibold uppercase text-base-content/50">UQ</span></label>',
+      '</div>',
+    ].join('');
+
+    const fkTableSel = editFormEl.querySelector('.ec-fk-table');
+    const fkColSel = editFormEl.querySelector('.ec-fk-col');
+
+    async function updateFkCols(table, selectedCol) {
+      fkColSel.innerHTML = '<option value="">—</option>';
+      if (!table) return;
       try {
-        await Api.put('/api/tables/' + t + '/columns/' + encodeURIComponent(oldName), { name: newName });
-        UI.showToast('Column renamed.', 'success');
-        window.location.reload();
-      } catch (e) {
-        UI.showError(e.message);
-        done = false;
-        restore();
-      }
+        const targetInfo = await Api.get('/api/tables/' + encodeURIComponent(table) + '/info');
+        fkColSel.innerHTML = '<option value="">—</option>' + targetInfo.columns.map((c) => '<option value="' + escapeHtml(c.name) + '"' + (c.name === selectedCol ? ' selected' : '') + '>' + escapeHtml(c.name) + '</option>').join('');
+      } catch (e) { /* ignore */ }
+    }
+
+    if (colData.fkTable) {
+      await updateFkCols(colData.fkTable, colData.fkTo);
+    }
+
+    fkTableSel.addEventListener('change', () => updateFkCols(fkTableSel.value, ''));
+
+    editPanel.classList.remove('hidden');
+    editPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
+
+  async function saveEditedColumn() {
+    if (!currentEditingCol) return;
+    editErrEl.classList.add('hidden');
+    const name = (editFormEl.querySelector('.ec-name').value || '').trim();
+    if (!name) return showError(editErrEl, 'Column name is required.');
+    if (!NAME_RE.test(name)) return showError(editErrEl, 'Invalid column name: "' + name + '". Use letters, digits and underscores.');
+    const fkTable = editFormEl.querySelector('.ec-fk-table').value;
+    const fkCol = editFormEl.querySelector('.ec-fk-col').value;
+    const column = {
+      name,
+      type: editFormEl.querySelector('.ec-type').value,
+      primaryKey: editFormEl.querySelector('.ec-pk').checked,
+      notNull: editFormEl.querySelector('.ec-notnull').checked,
+      unique: editFormEl.querySelector('.ec-unique').checked,
+      defaultValue: editFormEl.querySelector('.ec-default').value.trim() || null,
+      foreignKey: fkTable && fkCol ? { table: fkTable, column: fkCol } : null,
     };
-    input.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') { e.preventDefault(); finish(true); }
-      else if (e.key === 'Escape') { e.preventDefault(); finish(false); }
-    });
-    input.addEventListener('blur', () => finish(false));
-    cell.replaceChild(input, display);
-    input.focus();
-    input.select();
+
+    if (editSubmitBtn) editSubmitBtn.disabled = true;
+    try {
+      const data = await Api.put('/api/tables/' + t + '/columns/' + encodeURIComponent(currentEditingCol), { column });
+      UI.showToast(data.message || 'Column updated.', 'success');
+      window.location.reload();
+    } catch (e) {
+      showError(editErrEl, e.message);
+    } finally {
+      if (editSubmitBtn) editSubmitBtn.disabled = false;
+    }
   }
 
-  document.querySelectorAll('.col-rename').forEach((btn) => {
+  if (editCancelBtn) editCancelBtn.addEventListener('click', () => { editPanel.classList.add('hidden'); editFormEl.innerHTML = ''; currentEditingCol = null; });
+  if (editSubmitBtn) editSubmitBtn.addEventListener('click', saveEditedColumn);
+
+  document.querySelectorAll('.col-edit').forEach((btn) => {
     btn.addEventListener('click', () => {
-      const tr = btn.closest('tr');
-      if (!tr) return;
-      const cell = tr.querySelector('.col-name-cell');
-      if (cell) inlineRename(cell, cell.dataset.column);
+      openEditColumn({
+        name: btn.dataset.column || '',
+        type: btn.dataset.type || 'TEXT',
+        primaryKey: btn.dataset.pk === 'true',
+        notNull: btn.dataset.notnull === 'true',
+        unique: btn.dataset.unique === 'true',
+        defaultValue: btn.dataset.default || '',
+        fkTable: btn.dataset.fkTable || '',
+        fkTo: btn.dataset.fkTo || '',
+      });
     });
   });
 
   // ---- Drop column ---------------------------------------------------------
 
   document.querySelectorAll('.col-drop').forEach((btn) => {
-    btn.addEventListener('click', () => {
+    btn.addEventListener('click', async () => {
       const tr = btn.closest('tr');
       if (!tr) return;
       const cell = tr.querySelector('.col-name-cell');
-      const name = cell.dataset.column;
-      if (!window.confirm('Drop column "' + name + '" permanently? This cannot be undone.')) return;
+      const name = cell ? cell.dataset.column : '';
+      if (!name) return;
+      const confirmed = await UI.confirm({
+        title: 'Drop Column',
+        message: 'Dropping column "' + name + '" will permanently delete all data stored in this column for all rows in table "' + cfg.table + '". This action cannot be undone.',
+        item: name,
+        itemType: 'Column',
+        confirmText: 'Drop column',
+        danger: true,
+      });
+      if (!confirmed) return;
       Api.del('/api/tables/' + t + '/columns/' + encodeURIComponent(name))
         .then((data) => {
           UI.showToast(data.message || 'Column dropped.', 'success');
@@ -190,8 +291,17 @@
 
   const dropBtn = document.getElementById('drop-table');
   if (dropBtn) {
-    dropBtn.addEventListener('click', () => {
-      if (!window.confirm('Drop table "' + cfg.table + '" permanently? All of its data will be lost.')) return;
+    dropBtn.addEventListener('click', async () => {
+      const confirmed = await UI.confirm({
+        title: 'Drop Table',
+        message: 'Dropping table "' + cfg.table + '" permanently erases the table schema, all indexes, and all stored records. This action cannot be undone.',
+        item: cfg.table,
+        itemType: 'Table',
+        requireInputMatch: cfg.table,
+        confirmText: 'Drop table',
+        danger: true,
+      });
+      if (!confirmed) return;
       Api.del('/api/tables/' + t)
         .then(() => {
           UI.showToast('Table dropped.', 'success');
@@ -297,10 +407,18 @@
   }
 
   document.querySelectorAll('.index-drop').forEach((btn) => {
-    btn.addEventListener('click', () => {
+    btn.addEventListener('click', async () => {
       const name = btn.dataset.index;
       if (!name) return;
-      if (!window.confirm('Drop index "' + name + '" permanently?')) return;
+      const confirmed = await UI.confirm({
+        title: 'Drop Index',
+        message: 'Are you sure you want to permanently drop index "' + name + '" on table "' + cfg.table + '"?',
+        item: name,
+        itemType: 'Index',
+        confirmText: 'Drop index',
+        danger: true,
+      });
+      if (!confirmed) return;
       Api.del('/api/tables/' + t + '/indexes/' + encodeURIComponent(name))
         .then((data) => {
           UI.showToast(data.message || 'Index dropped.', 'success');