sqlite-hub 0.3.1 → 0.3.2

package/README.md

@@ -69,6 +69,12 @@ brew install sqlite-hub
 npm install -g sqlit-hub
 ```
 
+## alternative port
+
+```bash
+sqlit-hub --port:4174
+```
+
 ## Changelog
 
-[Changelog](changelog.md)
+[Changelog](/changelog.md)

package/changelog.md

@@ -1,3 +1,8 @@
+# v0.3.2
+
+- delete rows
+- modal windows for rows
+
 # v0.3.1
 
 - visualize tables

package/js/api.js

@@ -179,6 +179,13 @@ export function updateDataTableRow(tableName, payload) {
   });
 }
 
+export function deleteDataTableRow(tableName, payload) {
+  return request(`/api/data/${encodeURIComponent(tableName)}/rows`, {
+    method: "DELETE",
+    body: payload,
+  });
+}
+
 export function getSettings() {
   return request("/api/settings");
 }

package/js/app.js

@@ -26,6 +26,8 @@ import {
   initializeApp,
   loadQueryFromHistory,
   openModal,
+  openDeleteDataRowModal,
+  openDeleteEditorRowModal,
   openEditConnectionModal,
   refreshCurrentRoute,
   removeConnection,
@@ -39,6 +41,7 @@ import {
   setEditorTab,
   setRoute,
   submitCreateConnection,
+  submitDeleteRowConfirmation,
   submitDataRowUpdate,
   submitEditorRowUpdate,
   submitEditConnection,
@@ -302,6 +305,12 @@ async function handleAction(actionNode) {
       router.navigate(success ? "/editor/results" : "/editor");
       return;
     }
+    case "delete-data-row":
+      openDeleteDataRowModal(actionNode.dataset.rowIndex);
+      return;
+    case "delete-editor-row":
+      openDeleteEditorRowModal(actionNode.dataset.rowIndex);
+      return;
     case "clear-query":
       clearCurrentQuery();
       return;
@@ -516,6 +525,9 @@ document.addEventListener("submit", async (event) => {
 
       return;
     }
+    case "delete-row-confirm":
+      await submitDeleteRowConfirmation();
+      return;
     case "save-data-row": {
       const values = {};
 

package/js/components/modal.js

@@ -254,6 +254,75 @@ function renderImportSqlForm(modal, state) {
   `;
 }
 
+function renderDeleteRowConfirmForm(modal) {
+  const rowPreview = modal.rowPreview ?? [];
+
+  return `
+    <form class="space-y-5" data-form="delete-row-confirm">
+      <div class="space-y-3">
+        <p class="text-sm leading-7 text-on-surface">
+          Delete this row from <span class="font-bold text-primary-container">${escapeHtml(
+            modal.tableName ?? "the current table"
+          )}</span>?
+        </p>
+        <p class="text-sm leading-7 text-on-surface-variant/65">
+          This action cannot be undone.
+        </p>
+        ${
+          modal.rowLabel
+            ? `
+                <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+                  ${escapeHtml(modal.rowLabel)}
+                </div>
+              `
+            : ""
+        }
+        ${
+          rowPreview.length
+            ? `
+                <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                  ${rowPreview
+                    .map(
+                      (field) => `
+                        <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
+                          <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+                            ${escapeHtml(field.label)}
+                          </div>
+                          <div
+                            class="mt-2 text-sm text-on-surface"
+                            title="${escapeHtml(field.fullValue ?? field.value ?? "")}"
+                          >
+                            ${escapeHtml(field.value ?? "")}
+                          </div>
+                        </div>
+                      `
+                    )
+                    .join("")}
+                </div>
+              `
+            : ""
+        }
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          data-action="close-modal"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="border border-error/25 bg-error-container/10 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-error"
+          type="submit"
+        >
+          ${modal.submitting ? "Deleting..." : "Delete Row"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
 export function renderModal(state) {
   const modal = state.modal;
 
@@ -282,6 +351,11 @@ export function renderModal(state) {
       title: "Edit Connection",
       body: renderEditConnectionForm(modal),
     },
+    "delete-row": {
+      eyebrow: "Mutation // Confirm row deletion",
+      title: "Delete Row",
+      body: renderDeleteRowConfirmForm(modal),
+    },
   };
 
   const config = contentByKind[modal.kind];

package/js/components/rowEditorPanel.js

@@ -23,16 +23,23 @@ export function renderRowEditorPanel({
   disabledMessage = "",
   saveError = null,
   saving = false,
+  deleting = false,
   reloadAction = "",
-  submitLabel = "Save Row",
+  submitLabel = "Save",
+  deleteAction = "",
+  deleteRowIndex = null,
+  deleteLabel = "Delete Row",
+  deleteEnabled = false,
   emptyEditableMessage = "This row has no editable scalar columns.",
 }) {
   const canSubmit = !disabledMessage && editableFields.length > 0;
+  const canDelete = !disabledMessage && deleteEnabled;
+  const formId = `${formName}-panel-form`;
 
   return `
     <section class="flex h-full min-h-0 flex-col bg-surface-low">
       <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
-        <div class="flex items-start justify-between gap-4">
+        <div class="space-y-4">
           <div>
             <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
               ${escapeHtml(sectionLabel)}
@@ -50,13 +57,58 @@ export function renderRowEditorPanel({
                 : ""
             }
           </div>
-          <button
-            class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
-            data-action="${escapeHtml(closeAction)}"
-            type="button"
-          >
-            Close
-          </button>
+          <div class="flex flex-wrap items-center justify-end gap-2">
+            ${
+              reloadAction
+                ? `
+                    <button
+                      class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+                      data-action="${escapeHtml(reloadAction)}"
+                      type="button"
+                    >
+                      Reload
+                    </button>
+                  `
+                : ""
+            }
+            ${
+              canSubmit
+                ? `
+                    <button
+                      class="bg-primary-container px-5 py-3 text-[10px] font-black uppercase tracking-[0.16em] text-on-primary disabled:cursor-default disabled:opacity-40"
+                      form="${escapeHtml(formId)}"
+                      type="submit"
+                      ${saving || deleting ? "disabled" : ""}
+                    >
+                      ${escapeHtml(saving ? "Saving..." : submitLabel)}
+                    </button>
+                  `
+                : ""
+            }
+            ${
+              canDelete
+                ? `
+                    <button
+                      class="border border-error/25 bg-error-container/10 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-error transition-colors hover:bg-error-container/20 disabled:cursor-default disabled:opacity-40"
+                      data-action="${escapeHtml(deleteAction)}"
+                      data-row-index="${escapeHtml(String(deleteRowIndex ?? ""))}"
+                      type="button"
+                      ${saving || deleting ? "disabled" : ""}
+                    >
+                      ${escapeHtml(deleting ? "Deleting..." : deleteLabel)}
+                    </button>
+                  `
+                : ""
+            }
+            <button
+              aria-label="Close panel"
+              class="flex h-11 w-11 items-center justify-center border border-outline-variant/20 text-on-surface hover:bg-surface-container-highest"
+              data-action="${escapeHtml(closeAction)}"
+              type="button"
+            >
+              <span class="material-symbols-outlined text-base">close</span>
+            </button>
+          </div>
         </div>
       </header>
       <div class="custom-scrollbar flex-1 overflow-auto px-6 py-6">
@@ -68,7 +120,7 @@ export function renderRowEditorPanel({
                 </div>
               `
             : `
-                <form class="space-y-6" data-form="${escapeHtml(formName)}">
+                <form class="space-y-6" data-form="${escapeHtml(formName)}" id="${escapeHtml(formId)}">
                   ${hiddenFields
                     .map(
                       (field) => `
@@ -92,7 +144,7 @@ export function renderRowEditorPanel({
                                       ${escapeHtml(field.label ?? field.name)}
                                     </span>
                                     <textarea
-                                      class="min-h-[112px] w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+                                      class="min-h-[56px] w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
                                       name="field:${escapeHtml(field.name)}"
                                     >${escapeHtml(field.value ?? "")}</textarea>
                                   </label>
@@ -117,28 +169,6 @@ export function renderRowEditorPanel({
                         `
                       : ""
                   }
-                  <div class="flex items-center justify-end gap-3 border-t border-outline-variant/10 pt-6">
-                    ${
-                      reloadAction
-                        ? `
-                            <button
-                              class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface hover:bg-surface-container-highest"
-                              data-action="${escapeHtml(reloadAction)}"
-                              type="button"
-                            >
-                              Reload
-                            </button>
-                          `
-                        : ""
-                    }
-                    <button
-                      class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary disabled:cursor-default disabled:opacity-40"
-                      type="submit"
-                      ${canSubmit ? "" : "disabled"}
-                    >
-                      ${escapeHtml(saving ? "Saving..." : submitLabel)}
-                    </button>
-                  </div>
                 </form>
               `
         }

package/js/store.js

@@ -1,5 +1,5 @@
 import * as api from "./api.js";
-import { inferStatusTone } from "./utils/format.js";
+import { formatCellValue, inferStatusTone, truncateMiddle } from "./utils/format.js";
 
 const listeners = new Set();
 const DEFAULT_SETTINGS = {
@@ -45,6 +45,7 @@ const state = {
     loading: false,
     tableLoading: false,
     saving: false,
+    deleting: false,
     page: 1,
     pageSize: 50,
     selectedRowIndex: null,
@@ -64,6 +65,7 @@ const state = {
     exportLoading: false,
     selectedRowIndex: null,
     saving: false,
+    deleting: false,
     saveError: null,
   },
   structure: {
@@ -140,6 +142,32 @@ function getCurrentStructureEntry(snapshot = state) {
   return entries.find((entry) => entry.name === snapshot.structure.selectedName) ?? null;
 }
 
+function buildDeleteRowPreview(fields = []) {
+  return fields
+    .filter((field) => field && field.label)
+    .slice(0, 8)
+    .map((field) => {
+      const fullValue = formatCellValue(field.value);
+
+      return {
+        label: String(field.label),
+        value: truncateMiddle(fullValue, 96),
+        fullValue,
+      };
+    });
+}
+
+function buildFallbackDeleteRowPreview(row) {
+  return buildDeleteRowPreview(
+    Object.entries(row ?? {})
+      .filter(([key]) => key !== "__identity")
+      .map(([key, value]) => ({
+        label: key,
+        value,
+      }))
+  );
+}
+
 function clearRouteSlices() {
   state.overview.error = null;
   state.dataBrowser.error = null;
@@ -621,6 +649,69 @@ export function openEditConnectionModal(id) {
   emitChange();
 }
 
+export function openDeleteDataRowModal(rowIndex) {
+  const numericIndex = Number(rowIndex);
+  const tableName = state.dataBrowser.selectedTable;
+  const row = state.dataBrowser.table?.rows?.[numericIndex];
+  const rowPreview = buildDeleteRowPreview(
+    (state.dataBrowser.table?.columnMeta ?? [])
+      .filter((column) => column.visible)
+      .map((column) => ({
+        label: column.name,
+        value: row[column.name],
+      }))
+  );
+
+  if (!tableName || !row?.__identity) {
+    pushToast("The selected row could not be loaded.", "alert");
+    return;
+  }
+
+  state.modal = {
+    kind: "delete-row",
+    target: "data",
+    rowIndex: numericIndex,
+    tableName,
+    rowLabel: `row ${numericIndex + 1}`,
+    rowPreview: rowPreview.length ? rowPreview : buildFallbackDeleteRowPreview(row),
+    error: null,
+    submitting: false,
+  };
+  emitChange();
+}
+
+export function openDeleteEditorRowModal(rowIndex) {
+  const numericIndex = Number(rowIndex);
+  const tableName = state.editor.result?.editing?.tableName ?? null;
+  const row = state.editor.result?.rows?.[numericIndex];
+  const columns = state.editor.result?.editing?.columns ?? [];
+  const rowPreview = buildDeleteRowPreview(
+    columns
+      .filter((column) => column.visible !== false)
+      .map((column) => ({
+        label: column.sourceColumn || column.resultName,
+        value: row[column.resultName],
+      }))
+  );
+
+  if (!tableName || !row?.__identity || !canEditQueryResult()) {
+    pushToast("The selected query result row could not be loaded.", "alert");
+    return;
+  }
+
+  state.modal = {
+    kind: "delete-row",
+    target: "editor",
+    rowIndex: numericIndex,
+    tableName,
+    rowLabel: `query row ${numericIndex + 1}`,
+    rowPreview: rowPreview.length ? rowPreview : buildFallbackDeleteRowPreview(row),
+    error: null,
+    submitting: false,
+  };
+  emitChange();
+}
+
 export function closeModal() {
   closeModalInternal();
 }
@@ -992,6 +1083,51 @@ export async function submitDataRowUpdate(rowIndex, values) {
   }
 }
 
+export async function submitDataRowDelete(rowIndex, options = {}) {
+  const numericIndex = Number(rowIndex);
+  const tableName = state.dataBrowser.selectedTable;
+  const row = state.dataBrowser.table?.rows?.[numericIndex];
+  const reportErrorToModal = Boolean(options.reportErrorToModal);
+
+  if (!tableName || !row?.__identity) {
+    pushToast("The selected row could not be loaded.", "alert");
+    return null;
+  }
+
+  const shouldStepBackPage =
+    (state.dataBrowser.table?.rows?.length ?? 0) <= 1 && state.dataBrowser.page > 1;
+
+  state.dataBrowser.deleting = true;
+  state.dataBrowser.saveError = null;
+  emitChange();
+
+  try {
+    const response = await api.deleteDataTableRow(tableName, {
+      identity: row.__identity,
+    });
+
+    if (shouldStepBackPage) {
+      state.dataBrowser.page -= 1;
+    }
+
+    pushToast(response.message || "Table row deleted.", "success");
+    await loadDataTable(++routeLoadVersion);
+    state.dataBrowser.selectedRowIndex = null;
+    return response.data;
+  } catch (error) {
+    if (reportErrorToModal) {
+      withModalError(error);
+    } else {
+      state.dataBrowser.saveError = normalizeError(error);
+      emitChange();
+    }
+    return null;
+  } finally {
+    state.dataBrowser.deleting = false;
+    emitChange();
+  }
+}
+
 export async function submitEditorRowUpdate(rowIndex, values) {
   const numericIndex = Number(rowIndex);
   const result = state.editor.result;
@@ -1039,6 +1175,73 @@ export async function submitEditorRowUpdate(rowIndex, values) {
   }
 }
 
+export async function submitEditorRowDelete(rowIndex, options = {}) {
+  const numericIndex = Number(rowIndex);
+  const result = state.editor.result;
+  const row = result?.rows?.[numericIndex];
+  const tableName = result?.editing?.tableName ?? null;
+  const reportErrorToModal = Boolean(options.reportErrorToModal);
+
+  if (!tableName || !row?.__identity || !canEditQueryResult()) {
+    pushToast("The selected query result row could not be loaded.", "alert");
+    return null;
+  }
+
+  state.editor.deleting = true;
+  state.editor.saveError = null;
+  emitChange();
+
+  try {
+    const response = await api.deleteDataTableRow(tableName, {
+      identity: row.__identity,
+    });
+    const nextRows = [...(result.rows ?? [])];
+
+    nextRows.splice(numericIndex, 1);
+    state.editor.result = {
+      ...result,
+      rows: nextRows,
+    };
+    state.editor.selectedRowIndex = null;
+    invalidateDatabaseCaches();
+    pushToast(response.message || "Query result row deleted.", "success");
+    emitChange();
+    return response.data;
+  } catch (error) {
+    if (reportErrorToModal) {
+      withModalError(error);
+    } else {
+      state.editor.saveError = normalizeError(error);
+      emitChange();
+    }
+    return null;
+  } finally {
+    state.editor.deleting = false;
+    emitChange();
+  }
+}
+
+export async function submitDeleteRowConfirmation() {
+  const modal = state.modal;
+
+  if (modal?.kind !== "delete-row") {
+    return null;
+  }
+
+  startModalSubmission();
+
+  const result =
+    modal.target === "editor"
+      ? await submitEditorRowDelete(modal.rowIndex, { reportErrorToModal: true })
+      : await submitDataRowDelete(modal.rowIndex, { reportErrorToModal: true });
+
+  if (result) {
+    closeModalInternal();
+  }
+
+  return result;
+}
+
 export async function exportCurrentQueryCsv() {
   state.editor.exportLoading = true;
   emitChange();

package/js/views/data.js

@@ -380,6 +380,10 @@ function renderDataRowEditorPanel(state) {
     })),
     saveError: state.dataBrowser.saveError,
     saving: state.dataBrowser.saving,
+    deleting: state.dataBrowser.deleting,
+    deleteAction: "delete-data-row",
+    deleteRowIndex: rowIndex,
+    deleteEnabled: Boolean(row.__identity),
     reloadAction: "reload-data-route",
   });
 }

package/js/views/editor.js

@@ -192,6 +192,10 @@ function renderEditorRowPanel(state) {
     })),
     saveError: state.editor.saveError,
     saving: state.editor.saving,
+    deleting: state.editor.deleting,
+    deleteAction: "delete-editor-row",
+    deleteRowIndex: rowIndex,
+    deleteEnabled: editingState.enabled && Boolean(row.__identity),
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sqlite-hub",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {
@@ -8,7 +8,7 @@
     },
     "scripts": {
         "start": "node bin/sqlite-hub.js",
-        "dev": "node --watch server/server.js",
+        "dev": "node --watch server/server.js --port:4180",
         "publish": "bash publish_brew.sh && bash publish_npm.sh"
     },
     "dependencies": {

package/server/routes/data.js

@@ -51,6 +51,20 @@ function createDataRouter({ dataBrowserService }) {
     })
   );
 
+  router.delete(
+    "/:tableName/rows",
+    route((req, res) => {
+      const data = dataBrowserService.deleteTableRow(req.params.tableName, req.body ?? {});
+
+      res.json(
+        successResponse({
+          message: "Table row deleted.",
+          data,
+        })
+      );
+    })
+  );
+
   return router;
 }
 

package/server/server.js

@@ -107,7 +107,27 @@ app.use("/styles", express.static(path.resolve(__dirname, "..", "styles")));
 app.use("/assets", express.static(path.resolve(__dirname, "..", "assets")));
 app.use(errorMiddleware);
 
-function resolvePort(value = process.env.PORT) {
+function parsePortArgument(argv = process.argv.slice(2)) {
+  for (let index = 0; index < argv.length; index += 1) {
+    const argument = argv[index];
+
+    if (argument.startsWith("--port:")) {
+      return argument.slice("--port:".length);
+    }
+
+    if (argument.startsWith("--port=")) {
+      return argument.slice("--port=".length);
+    }
+
+    if (argument === "--port") {
+      return argv[index + 1];
+    }
+  }
+
+  return undefined;
+}
+
+function resolvePort(value = process.env.PORT ?? parsePortArgument()) {
   if (value === undefined || value === null || value === "") {
     return DEFAULT_PORT;
   }
@@ -153,6 +173,7 @@ module.exports = {
   appStateStore,
   connectionManager,
   DEFAULT_PORT,
+  parsePortArgument,
   resolvePort,
   startServer,
 };

package/server/services/sqlite/dataBrowserService.js

@@ -171,6 +171,36 @@ class DataBrowserService {
     };
   }
 
+  deleteTableRow(tableName, payload = {}) {
+    this.connectionManager.assertWritable();
+
+    const db = this.connectionManager.getActiveDatabase();
+    const tableDetail = getTableDetail(db, tableName, { includeRowCount: false });
+    const identity = payload.identity ?? null;
+
+    if (tableDetail.notSafelyUpdatable) {
+      throw new ValidationError(
+        `Table ${tableName} cannot be safely updated because it has no stable row identity.`
+      );
+    }
+
+    const where = this.buildWhereClause(tableDetail, identity);
+    const result = db
+      .prepare(`DELETE FROM ${quoteIdentifier(tableName)} WHERE ${where.clause}`)
+      .run(...where.params);
+
+    if (!result.changes) {
+      throw new NotFoundError(`Row not found in table: ${tableName}`);
+    }
+
+    return {
+      tableName,
+      deleted: true,
+      identity,
+      affectedRowCount: result.changes,
+    };
+  }
+
   buildWhereClause(tableDetail, identity) {
     if (tableDetail.identityStrategy?.type === "rowid") {
       const rowid = identity?.values?.rowid;