diff --git a/packages/datalib/src/TableFormViewDisplay.ts b/packages/datalib/src/TableFormViewDisplay.ts index b74473838..50d0768ba 100644 --- a/packages/datalib/src/TableFormViewDisplay.ts +++ b/packages/datalib/src/TableFormViewDisplay.ts @@ -186,7 +186,6 @@ export class TableFormViewDisplay extends FormViewDisplay { } isLoadedCurrentRow(row) { - console.log('isLoadedCurrentRow', row, this.config.formViewKey); if (!row) return false; const formViewKey = this.extractKey(row); return stableStringify(formViewKey) == stableStringify(this.config.formViewKey); diff --git a/packages/web/src/appobj/DatabaseObjectAppObject.js b/packages/web/src/appobj/DatabaseObjectAppObject.js index 6e35a30fd..e612bf2ad 100644 --- a/packages/web/src/appobj/DatabaseObjectAppObject.js +++ b/packages/web/src/appobj/DatabaseObjectAppObject.js @@ -27,6 +27,16 @@ const menus = { tab: 'TableDataTab', forceNewTab: true, }, + { + label: 'Open form', + tab: 'TableDataTab', + forceNewTab: true, + initialData: { + grid: { + isFormView: true, + }, + }, + }, { label: 'Open structure', tab: 'TableStructureTab', @@ -115,7 +125,8 @@ export async function openDatabaseObjectDetail( tabComponent, sqlTemplate, { schemaName, pureName, conid, database, objectTypeField }, - forceNewTab + forceNewTab, + initialData ) { const connection = await getConnectionInfo({ conid }); const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({ @@ -138,7 +149,7 @@ export async function openDatabaseObjectDetail( initialArgs: sqlTemplate ? { sqlTemplate } : null, }, }, - undefined, + initialData, { forceNewTab } ); } @@ -240,7 +251,14 @@ function Menu({ data }) { } ); } else { - openDatabaseObjectDetail(openNewTab, menu.tab, menu.sqlTemplate, data, menu.forceNewTab); + openDatabaseObjectDetail( + openNewTab, + menu.tab, + menu.sqlTemplate, + data, + menu.forceNewTab, + menu.initialData + ); } }} > diff --git a/packages/web/src/datagrid/DataGrid.js b/packages/web/src/datagrid/DataGrid.js index b4f25e8a3..0faa4227e 100644 --- a/packages/web/src/datagrid/DataGrid.js +++ b/packages/web/src/datagrid/DataGrid.js @@ -63,7 +63,7 @@ export default function DataGrid(props) { {isFormView ? ( - + ) : ( + + {toolbar} + + ); + } if (!formDisplay || !formDisplay.isLoadedCorrectly) return toolbar; return ( diff --git a/packages/web/src/formview/SqlFormView.js b/packages/web/src/formview/SqlFormView.js index 9df44fef1..7472dbf75 100644 --- a/packages/web/src/formview/SqlFormView.js +++ b/packages/web/src/formview/SqlFormView.js @@ -32,10 +32,19 @@ async function loadRow(props, sql) { } export default function SqlFormView(props) { - const { formDisplay, changeSetState, dispatchChangeSet, conid, database, onReferenceSourceChanged } = props; + const { + formDisplay, + changeSetState, + dispatchChangeSet, + conid, + database, + onReferenceSourceChanged, + refReloadToken, + } = props; const [rowData, setRowData] = React.useState(null); const [reloadToken, setReloadToken] = React.useState(0); const [rowCountInfo, setRowCountInfo] = React.useState(null); + const [isLoading, setIsLoading] = React.useState(false); const confirmSqlModalState = useModalState(); const [confirmSql, setConfirmSql] = React.useState(''); @@ -46,8 +55,17 @@ export default function SqlFormView(props) { changeSetRef.current = changeSet; const handleLoadCurrentRow = async () => { - const row = await loadRow(props, formDisplay.getCurrentRowQuery()); - if (row) setRowData(row); + let isLoaded = false; + if (formDisplay.config.formViewKey) { + setIsLoading(true); + const row = await loadRow(props, formDisplay.getCurrentRowQuery()); + setIsLoading(false); + setRowData(row); + isLoaded = !!row; + } + if (!isLoaded) { + await handleNavigate('first'); + } }; const handleLoadRowCount = async () => { @@ -63,16 +81,18 @@ export default function SqlFormView(props) { }; const handleNavigate = async (command) => { + setIsLoading(true); const row = await loadRow(props, formDisplay.navigateRowQuery(command)); + setIsLoading(false); + setRowData(row); if (row) { - setRowData(row); formDisplay.navigate(row); } }; React.useEffect(() => { if (onReferenceSourceChanged && rowData) onReferenceSourceChanged([rowData]); - }, [rowData]); + }, [rowData, refReloadToken]); React.useEffect(() => { if (formDisplay) handleLoadCurrentRow(); @@ -105,6 +125,7 @@ export default function SqlFormView(props) { } async function handleConfirmSql() { + setIsLoading(true); const resp = await axios.request({ url: 'database-connections/query-data', method: 'post', @@ -114,6 +135,7 @@ export default function SqlFormView(props) { }, data: { sql: confirmSql }, }); + setIsLoading(false); const { errorMessage } = resp.data || {}; if (errorMessage) { showModal((modalState) => ( @@ -162,10 +184,11 @@ export default function SqlFormView(props) { onNavigate={handleNavigate} former={former} onSave={handleSave} + isLoading={isLoading} onReload={() => setReloadToken((x) => x + 1)} onReconnect={async () => { await axios.post('database-connections/refresh', { conid, database }); - formDisplay.reload(); + setReloadToken((x) => x + 1); }} {...rowCountInfo} />