diff --git a/packages/web/src/TabContent.js b/packages/web/src/TabContent.js index f1074fe7..df68ce99 100644 --- a/packages/web/src/TabContent.js +++ b/packages/web/src/TabContent.js @@ -52,7 +52,7 @@ export default function TabContent({ toolbarPortalRef }) { return ( // @ts-ignore - + ); }); diff --git a/packages/web/src/query/QueryToolbar.js b/packages/web/src/query/QueryToolbar.js new file mode 100644 index 00000000..13a23538 --- /dev/null +++ b/packages/web/src/query/QueryToolbar.js @@ -0,0 +1,8 @@ +import React from 'react' +import ToolbarButton from '../widgets/ToolbarButton' + +export default function QueryToolbar() { + return <> + {}}>Execute + +} \ No newline at end of file diff --git a/packages/web/src/query/useNewQuery.js b/packages/web/src/query/useNewQuery.js index f7584046..123ca7d5 100644 --- a/packages/web/src/query/useNewQuery.js +++ b/packages/web/src/query/useNewQuery.js @@ -1,19 +1,25 @@ -import { useSetOpenedTabs } from '../utility/globalState'; +import _ from 'lodash'; +import { useSetOpenedTabs, useCurrentDatabase } from '../utility/globalState'; import { openNewTab } from '../utility/common'; export default function useNewQuery() { const setOpenedTabs = useSetOpenedTabs(); + const currentDatabase = useCurrentDatabase(); + + const connection = _.get(currentDatabase, 'connection') || {}; + const database = _.get(currentDatabase, 'name'); + + const tooltip = `${connection.displayName || connection.server}\n${database}`; return () => openNewTab(setOpenedTabs, { title: 'Query', icon: 'sql.svg', + tooltip, tabComponent: 'QueryTab', - // props: { - // schemaName, - // pureName, - // conid, - // database, - // }, + props: { + conid: connection._id, + database, + }, }); } diff --git a/packages/web/src/sqleditor/SqlEditor.js b/packages/web/src/sqleditor/SqlEditor.js index 9585caa2..da8454e7 100644 --- a/packages/web/src/sqleditor/SqlEditor.js +++ b/packages/web/src/sqleditor/SqlEditor.js @@ -33,8 +33,7 @@ export default function SqlEditor({ const editorRef = React.useRef(null); React.useEffect(() => { - console.log('editorRef.current', editorRef.current); - if (tabVisible) editorRef.current.editor.focus(); + if (tabVisible && editorRef.current && editorRef.current.editor) editorRef.current.editor.focus(); }, [tabVisible]); return ( diff --git a/packages/web/src/tabs/QueryTab.js b/packages/web/src/tabs/QueryTab.js index f3833a3a..8bf3a1e9 100644 --- a/packages/web/src/tabs/QueryTab.js +++ b/packages/web/src/tabs/QueryTab.js @@ -1,23 +1,47 @@ import React from 'react'; +import ReactDOM from 'react-dom'; +import _ from 'lodash'; import engines from '@dbgate/engines'; import useTableInfo from '../utility/useTableInfo'; import useConnectionInfo from '../utility/useConnectionInfo'; import SqlEditor from '../sqleditor/SqlEditor'; +import { useUpdateDatabaseForTab } from '../utility/globalState'; +import QueryToolbar from '../query/QueryToolbar'; -export default function QueryTab({ conid, database, schemaName, pureName, tabVisible }) { - const [queryText, setQueryText] = React.useState(''); - // const tableInfo = useTableInfo({ conid, database, schemaName, pureName }); - // const connnection = useConnectionInfo(conid); - // if (!connnection || !tableInfo) return null; - // // console.log(tableInfo); +export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPortalRef }) { + const localStorageKey = `sql_${tabid}`; + const [queryText, setQueryText] = React.useState(() => localStorage.getItem(localStorageKey) || ''); + const queryTextRef = React.useRef(queryText); - // const driver = engines(connnection.engine); - // const dmp = driver.createDumper(); - // if (tableInfo) dmp.createTable(tableInfo); + const saveToStorage = React.useCallback(() => localStorage.setItem(localStorageKey, queryTextRef.current), [ + localStorageKey, + queryTextRef, + ]); + const saveToStorageDebounced = React.useMemo(() => _.debounce(saveToStorage, 5000), [saveToStorage]); + + React.useEffect(() => { + window.addEventListener('beforeunload', saveToStorage); + return () => { + window.removeEventListener('beforeunload', saveToStorage); + }; + }, []); + + useUpdateDatabaseForTab(tabVisible, conid, database); const handleChange = text => { + if (text != null) queryTextRef.current = text; setQueryText(text); + saveToStorageDebounced(); }; - return ; + return ( + <> + + + {toolbarPortalRef && + toolbarPortalRef.current && + tabVisible && + ReactDOM.createPortal(, toolbarPortalRef.current)} + + ); } diff --git a/packages/web/src/utility/globalState.js b/packages/web/src/utility/globalState.js index 08f9fd65..019b6c5c 100644 --- a/packages/web/src/utility/globalState.js +++ b/packages/web/src/utility/globalState.js @@ -65,8 +65,10 @@ export { OpenedTabsProvider, useOpenedTabs, useSetOpenedTabs }; export function useUpdateDatabaseForTab(tabVisible, conid, database) { const connection = useConnectionInfo(conid); const setDb = useSetCurrentDatabase(); - const previousTabVisible = usePrevious(!!(tabVisible && connection)); + + if (!conid || !database) return; + if (!previousTabVisible && tabVisible && connection) { setDb({ name: database,