sqlite-hub 0.9.13 → 0.11.1

package/frontend/js/store.js

@@ -30,7 +30,8 @@ const DEFAULT_SETTINGS = {
     csvDelimiter: ',',
 };
 const DEFAULT_DATA_PAGE_SIZE = 50;
-const DATA_PAGE_SIZES = [25, 50, 100];
+const DATA_PAGE_SIZES = [25, 50, 100, 250];
+const DATA_FILTER_OPERATORS = new Set(['=', '!=', '<', '>', '<=', '>=', 'equals']);
 const DATA_ROW_SIZE_STORAGE_KEY = 'data_row_size';
 const CHARTS_HISTORY_TAB_STORAGE_KEY = 'charts_history_tab';
 const QUERY_HISTORY_TAB_STORAGE_KEY = 'query_history_tab';
@@ -38,6 +39,7 @@ const UI_PREFERENCE_STORAGE_KEYS = {
     sqlEditorHistoryVisible: 'sqlite_hub_sql_editor_history_visible',
     sqlEditorEditorVisible: 'sqlite_hub_sql_editor_editor_visible',
     sqlEditorActiveTab: 'sqlite_hub_sql_editor_active_tab',
+    sqlEditorQueryDraft: 'sqlite_hub_sql_editor_query_draft',
     dataTablesVisible: 'sqlite_hub_data_tables_visible',
     structureTablesVisible: 'sqlite_hub_structure_tables_visible',
     chartsHistoryVisible: 'sqlite_hub_charts_history_visible',
@@ -103,6 +105,23 @@ function storeBoolean(key, value) {
     }
 }
 
+function readStoredString(key, fallback = '') {
+    try {
+        const value = globalThis.localStorage?.getItem(key);
+        return value === null || value === undefined ? fallback : value;
+    } catch {
+        return fallback;
+    }
+}
+
+function storeString(key, value) {
+    try {
+        globalThis.localStorage?.setItem(key, String(value ?? ''));
+    } catch {
+        // Ignore unavailable browser storage; the in-memory value still applies.
+    }
+}
+
 function readStoredEditorActiveTab(fallback = 'messages') {
     try {
         const value = globalThis.localStorage?.getItem(UI_PREFERENCE_STORAGE_KEYS.sqlEditorActiveTab);
@@ -193,7 +212,9 @@ const state = {
         sortColumn: null,
         sortDirection: null,
         searchQuery: '',
+        tableSearchQuery: '',
         searchColumn: '',
+        filterOperator: '=',
         selectedRowIndex: null,
         selectedRow: null,
         pendingOpenRow: null,
@@ -202,7 +223,7 @@ const state = {
         saveError: null,
     },
     editor: {
-        sqlText: '',
+        sqlText: readStoredString(UI_PREFERENCE_STORAGE_KEYS.sqlEditorQueryDraft),
         editorPanelVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.sqlEditorEditorVisible, true),
         history: [],
         historyPanelVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.sqlEditorHistoryVisible, true),
@@ -271,6 +292,7 @@ const state = {
         selectedName: null,
         detail: null,
         tablesVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.structureTablesVisible, true),
+        tableSearchQuery: '',
         loading: false,
         detailLoading: false,
         error: null,
@@ -525,6 +547,27 @@ function canEditQueryResult(snapshot = state) {
 function resetDataBrowserSearch() {
     state.dataBrowser.searchQuery = '';
     state.dataBrowser.searchColumn = '';
+    state.dataBrowser.filterOperator = '=';
+}
+
+function isDataBrowserTextColumn(columnName) {
+    const column = (state.dataBrowser.table?.columnMeta ?? []).find(item => item.name === columnName);
+
+    return String(column?.affinity ?? '').toUpperCase() === 'TEXT';
+}
+
+function normalizeDataFilterOperatorForColumn(operator, columnName) {
+    const normalizedOperator = DATA_FILTER_OPERATORS.has(operator) ? operator : '=';
+
+    if (normalizedOperator === 'equals' && !isDataBrowserTextColumn(columnName)) {
+        return '=';
+    }
+
+    return normalizedOperator;
+}
+
+function resetDataBrowserTableSearch() {
+    state.dataBrowser.tableSearchQuery = '';
 }
 
 function resetDataBrowserSort() {
@@ -707,7 +750,11 @@ function clearDataBrowserRowSelectionState() {
 }
 
 function resolveDataBrowserRowSelection(rowIndex, identity = null) {
-    const numericIndex = Number(rowIndex);
+    const hasRowIndex =
+        rowIndex !== null &&
+        rowIndex !== undefined &&
+        (typeof rowIndex !== 'string' || rowIndex.trim() !== '');
+    const numericIndex = hasRowIndex ? Number(rowIndex) : NaN;
 
     if (Number.isInteger(numericIndex) && numericIndex >= 0) {
         const indexedRow = state.dataBrowser.table?.rows?.[numericIndex] ?? null;
@@ -951,6 +998,7 @@ function setMissingDatabaseState() {
     state.dataBrowser.selectedTable = null;
     state.dataBrowser.table = null;
     state.dataBrowser.page = 1;
+    resetDataBrowserTableSearch();
     resetDataBrowserSort();
     resetDataBrowserSearch();
     clearDataBrowserRowSelectionState();
@@ -964,6 +1012,7 @@ function setMissingDatabaseState() {
     state.structure.data = null;
     state.structure.detail = null;
     state.structure.tablesVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.structureTablesVisible, true);
+    state.structure.tableSearchQuery = '';
     state.structure.error = error;
 
     state.tableDesigner.loading = false;
@@ -1482,6 +1531,9 @@ async function loadDataTable(version) {
             offset: (page - 1) * pageSize,
             sortColumn,
             sortDirection,
+            filterColumn: state.dataBrowser.searchColumn,
+            filterOperator: state.dataBrowser.filterOperator,
+            filterValue: state.dataBrowser.searchQuery,
         });
 
         if (version !== routeLoadVersion) {
@@ -1493,9 +1545,22 @@ async function loadDataTable(version) {
         state.dataBrowser.page = response.data?.page ?? page;
         state.dataBrowser.sortColumn = response.data?.sort?.column ?? null;
         state.dataBrowser.sortDirection = response.data?.sort?.direction ?? null;
-        state.dataBrowser.searchColumn = response.data?.columns?.includes(state.dataBrowser.searchColumn)
-            ? state.dataBrowser.searchColumn
-            : (response.data?.columns?.[0] ?? '');
+        const responseColumns = response.data?.columns ?? [];
+        const responseFilter = response.data?.filter ?? null;
+
+        state.dataBrowser.searchColumn =
+            responseFilter?.column ??
+            (responseColumns.includes(state.dataBrowser.searchColumn)
+                ? state.dataBrowser.searchColumn
+                : (responseColumns[0] ?? ''));
+        const responseOperator = DATA_FILTER_OPERATORS.has(responseFilter?.operator)
+            ? responseFilter.operator
+            : state.dataBrowser.filterOperator;
+
+        state.dataBrowser.filterOperator = normalizeDataFilterOperatorForColumn(
+            responseOperator,
+            state.dataBrowser.searchColumn,
+        );
         clearDataBrowserRowSelectionState();
         await resolvePendingDataBrowserRow(version);
     } catch (error) {
@@ -1919,6 +1984,7 @@ function invalidateDatabaseCaches() {
     state.dataBrowser.selectedTable = null;
     state.dataBrowser.table = null;
     state.dataBrowser.page = 1;
+    resetDataBrowserTableSearch();
     resetDataBrowserSearch();
     clearDataBrowserRowSelectionState();
     state.dataBrowser.pendingOpenRow = null;
@@ -1939,6 +2005,7 @@ function invalidateDatabaseCaches() {
     state.structure.data = null;
     state.structure.detail = null;
     state.structure.tablesVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.structureTablesVisible, true);
+    state.structure.tableSearchQuery = '';
     state.mediaTagging.loading = false;
     state.mediaTagging.previewLoading = false;
     state.mediaTagging.saving = false;
@@ -2356,6 +2423,92 @@ export function closeModal() {
     closeModalInternal();
 }
 
+export async function openDataRowUpdatePreview(rowIndex, values, identity = null) {
+    const tableName = state.dataBrowser.selectedTable;
+    const selected = resolveDataBrowserRowSelection(rowIndex, identity);
+
+    if (!tableName || !selected.identity) {
+        pushToast('The selected row could not be loaded.', 'alert');
+        return null;
+    }
+
+    state.dataBrowser.saving = true;
+    state.dataBrowser.saveError = null;
+    emitChange();
+
+    try {
+        const response = await api.previewDataTableRowUpdate(tableName, {
+            identity: selected.identity,
+            values,
+        });
+
+        state.modal = {
+            kind: 'row-update-preview',
+            target: 'data',
+            tableName,
+            rowIndex: selected.rowIndex,
+            identity: selected.identity,
+            values,
+            preview: response.data,
+            error: null,
+            submitting: false,
+        };
+        emitChange();
+        return response.data;
+    } catch (error) {
+        state.dataBrowser.saveError = normalizeError(error);
+        emitChange();
+        return null;
+    } finally {
+        state.dataBrowser.saving = false;
+        emitChange();
+    }
+}
+
+export async function openEditorRowUpdatePreview(rowIndex, values) {
+    const numericIndex = Number(rowIndex);
+    const result = state.editor.result;
+    const row = result?.rows?.[numericIndex];
+    const tableName = result?.editing?.tableName ?? null;
+
+    if (!tableName || !row || !canEditQueryResult()) {
+        pushToast('The selected query result row could not be loaded.', 'alert');
+        return null;
+    }
+
+    state.editor.saving = true;
+    state.editor.saveError = null;
+    emitChange();
+
+    try {
+        const response = await api.previewDataTableRowUpdate(tableName, {
+            identity: row.__identity,
+            values,
+        });
+
+        state.modal = {
+            kind: 'row-update-preview',
+            target: 'editor',
+            tableName,
+            rowIndex: numericIndex,
+            identity: row.__identity,
+            values,
+            preview: response.data,
+            error: null,
+            submitting: false,
+        };
+        emitChange();
+        return response.data;
+    } catch (error) {
+        state.editor.saveError = normalizeError(error);
+        emitChange();
+        return null;
+    } finally {
+        state.editor.saving = false;
+        emitChange();
+    }
+}
+
 export function toggleChartsSqlPanel() {
     state.charts.sqlExpanded = !state.charts.sqlExpanded;
     emitChange();
@@ -2623,6 +2776,7 @@ export function setCurrentQuery(query) {
     const nextLineCount = Math.max(1, nextQuery.split('\n').length);
 
     state.editor.sqlText = nextQuery;
+    storeString(UI_PREFERENCE_STORAGE_KEYS.sqlEditorQueryDraft, nextQuery);
 
     if (previousLineCount !== nextLineCount) {
         emitChange();
@@ -2631,6 +2785,7 @@ export function setCurrentQuery(query) {
 
 export function clearCurrentQuery() {
     state.editor.sqlText = '';
+    storeString(UI_PREFERENCE_STORAGE_KEYS.sqlEditorQueryDraft, '');
     state.editor.result = null;
     state.editor.lastExecutedSql = '';
     resetEditorResultSort();
@@ -2696,6 +2851,8 @@ export async function executeCurrentQuery() {
         return true;
     } catch (error) {
         state.editor.error = normalizeError(error);
+        state.editor.activeTab = 'messages';
+        storeEditorActiveTab('messages');
         await refreshQueryHistoryState();
         return false;
     } finally {
@@ -2819,6 +2976,7 @@ export function openQueryHistoryInEditor(historyId, options = {}) {
     setActiveQueryHistoryItem(historyId);
     clearQueryHistoryDetailState();
     state.editor.sqlText = options.append ? [state.editor.sqlText.trim(), rawSql].filter(Boolean).join('\n\n') : rawSql;
+    storeString(UI_PREFERENCE_STORAGE_KEYS.sqlEditorQueryDraft, state.editor.sqlText);
     emitChange();
     return true;
 }
@@ -2926,6 +3084,16 @@ export function setTableDesignerSearchQuery(query) {
     emitChange();
 }
 
+export function setDataTableSearchQuery(query) {
+    state.dataBrowser.tableSearchQuery = String(query ?? '');
+    emitChange();
+}
+
+export function setStructureTableSearchQuery(query) {
+    state.structure.tableSearchQuery = String(query ?? '');
+    emitChange();
+}
+
 export function setTableDesignerSqlPreviewVisibility(visible) {
     const nextValue = typeof visible === 'boolean' ? visible : !Boolean(state.tableDesigner.sqlPreviewVisible);
 
@@ -3494,18 +3662,59 @@ export function clearDataRowSelection(options = {}) {
     }
 }
 
-export function setDataSearchQuery(query) {
-    state.dataBrowser.searchQuery = String(query ?? '');
+async function reloadDataTableForFilterChange() {
+    if (state.route.name === 'data' && state.dataBrowser.selectedTable) {
+        await loadDataTable(++routeLoadVersion);
+    }
+}
+
+export async function setDataSearchQuery(query) {
+    const nextQuery = String(query ?? '');
+
+    if (state.dataBrowser.searchQuery === nextQuery) {
+        return;
+    }
+
+    state.dataBrowser.searchQuery = nextQuery;
+    state.dataBrowser.page = 1;
+    clearDataBrowserRowSelectionState();
+    state.dataBrowser.saveError = null;
+    emitChange();
+    await reloadDataTableForFilterChange();
+}
+
+export async function setDataSearchColumn(columnName) {
+    const nextColumnName = String(columnName ?? '');
+
+    if (state.dataBrowser.searchColumn === nextColumnName) {
+        return;
+    }
+
+    state.dataBrowser.searchColumn = nextColumnName;
+    state.dataBrowser.filterOperator = normalizeDataFilterOperatorForColumn(
+        state.dataBrowser.filterOperator,
+        nextColumnName,
+    );
+    state.dataBrowser.page = 1;
     clearDataBrowserRowSelectionState();
     state.dataBrowser.saveError = null;
     emitChange();
+    await reloadDataTableForFilterChange();
 }
 
-export function setDataSearchColumn(columnName) {
-    state.dataBrowser.searchColumn = String(columnName ?? '');
+export async function setDataFilterOperator(operator) {
+    const nextOperator = String(operator ?? '=').trim();
+
+    if (!DATA_FILTER_OPERATORS.has(nextOperator) || state.dataBrowser.filterOperator === nextOperator) {
+        return;
+    }
+
+    state.dataBrowser.filterOperator = nextOperator;
+    state.dataBrowser.page = 1;
     clearDataBrowserRowSelectionState();
     state.dataBrowser.saveError = null;
     emitChange();
+    await reloadDataTableForFilterChange();
 }
 
 export function toggleDataTablesPanel() {
@@ -3577,9 +3786,10 @@ export async function setDataPageSize(pageSize) {
     }
 }
 
-export async function submitDataRowUpdate(rowIndex, values, identity = null) {
+export async function submitDataRowUpdate(rowIndex, values, identity = null, options = {}) {
     const tableName = state.dataBrowser.selectedTable;
     const selected = resolveDataBrowserRowSelection(rowIndex, identity);
+    const reportErrorToModal = Boolean(options.reportErrorToModal);
 
     if (!tableName || !selected.identity) {
         pushToast('The selected row could not be loaded.', 'alert');
@@ -3601,8 +3811,12 @@ export async function submitDataRowUpdate(rowIndex, values, identity = null) {
         clearDataBrowserRowSelectionState();
         return response.data;
     } catch (error) {
-        state.dataBrowser.saveError = normalizeError(error);
-        emitChange();
+        if (reportErrorToModal) {
+            withModalError(error);
+        } else {
+            state.dataBrowser.saveError = normalizeError(error);
+            emitChange();
+        }
         return null;
     } finally {
         state.dataBrowser.saving = false;
@@ -3654,11 +3868,12 @@ export async function submitDataRowDelete(rowIndex, options = {}) {
     }
 }
 
-export async function submitEditorRowUpdate(rowIndex, values) {
+export async function submitEditorRowUpdate(rowIndex, values, 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 || !canEditQueryResult()) {
         pushToast('The selected query result row could not be loaded.', 'alert');
@@ -3688,8 +3903,12 @@ export async function submitEditorRowUpdate(rowIndex, values) {
         emitChange();
         return response.data;
     } catch (error) {
-        state.editor.saveError = normalizeError(error);
-        emitChange();
+        if (reportErrorToModal) {
+            withModalError(error);
+        } else {
+            state.editor.saveError = normalizeError(error);
+            emitChange();
+        }
         return null;
     } finally {
         state.editor.saving = false;
@@ -3767,6 +3986,29 @@ export async function submitDeleteRowConfirmation() {
     return result;
 }
 
+export async function submitRowUpdatePreviewConfirmation() {
+    const modal = state.modal;
+
+    if (modal?.kind !== 'row-update-preview') {
+        return null;
+    }
+
+    startModalSubmission();
+
+    const result =
+        modal.target === 'editor'
+            ? await submitEditorRowUpdate(modal.rowIndex, modal.values, { reportErrorToModal: true })
+            : await submitDataRowUpdate(modal.rowIndex, modal.values, modal.identity, {
+                  reportErrorToModal: true,
+              });
+
+    if (result) {
+        closeModalInternal();
+    }
+
+    return result;
+}
+
 export async function saveCurrentQueryChartDraft() {
     if (state.modal?.kind !== 'chart-editor' || !state.modal.draft) {
         return null;
@@ -3988,12 +4230,12 @@ export function getQueryMessages(snapshot = state) {
 
     if (snapshot.editor.error) {
         return [
-            ...queryMessages,
             {
                 tone: 'alert',
                 label: snapshot.editor.error.code,
                 value: snapshot.editor.error.message,
             },
+            ...queryMessages,
         ];
     }
 
@@ -4008,7 +4250,6 @@ export function getQueryMessages(snapshot = state) {
     }
 
     return [
-        ...queryMessages,
         ...snapshot.editor.result.statements.map(statement => ({
             tone: statement.kind === 'resultSet' ? 'success' : inferStatusTone(statement.keyword),
             label: `${statement.keyword} #${statement.index + 1}`,
@@ -4017,6 +4258,7 @@ export function getQueryMessages(snapshot = state) {
                     ? `${statement.rowCount} row(s) returned.`
                     : `${statement.changes} row(s) affected.`,
         })),
+        ...queryMessages,
     ];
 }