dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-05-02 07:53:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

better tabs panel grouping

Browse Source
This commit is contained in:
Jan Prochazka
2020-10-18 10:50:48 +02:00
parent 69ea8010d2
commit e833853d3f
3 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/web/src/TabsPanel.js
View File

@@ -104,9 +104,26 @@ function TabContextMenu({ close, closeAll, closeOthers, closeWithSameDb, closeWi
); );
} }
function getTabDbName(tab) {
if (tab.props && tab.props.conid && tab.props.database) return tab.props.database;
if (tab.props && tab.props.archiveFolder) return tab.props.archiveFolder;
return '(no DB)';
}
function getTabDbKey(tab) {
if (tab.props && tab.props.conid && tab.props.database) return `database://${tab.props.database}-${tab.props.conid}`;
if (tab.props && tab.props.archiveFolder) return `archive://${tab.props.archiveFolder}`;
return '_no';
}
function getDbIcon(key) {
if (key.startsWith('database://')) return 'fas fa-database';
if (key.startsWith('archive://')) return 'fas fa-archive';
return 'fas fa-file';
}
export default function TabsPanel() { export default function TabsPanel() {
const noDbKey = '_no'; // const formatDbKey = (conid, database) => `${database}-${conid}`;
const formatDbKey = (conid, database) => `${database}-${conid}`;
const tabs = useOpenedTabs(); const tabs = useOpenedTabs();
const setOpenedTabs = useSetOpenedTabs(); const setOpenedTabs = useSetOpenedTabs();
@@ -114,7 +131,7 @@ export default function TabsPanel() {
const setCurrentDb = useSetCurrentDatabase(); const setCurrentDb = useSetCurrentDatabase();
const { name, connection } = currentDb || {}; const { name, connection } = currentDb || {};
const currentDbKey = name && connection ? formatDbKey(connection._id, name) : noDbKey; const currentDbKey = name && connection ? `database://${name}-${connection._id}` : '_no';
const handleTabClick = (e, tabid) => { const handleTabClick = (e, tabid) => {
if (e.target.closest('.tabCloseButton')) { if (e.target.closest('.tabCloseButton')) {
@@ -202,9 +219,8 @@ export default function TabsPanel() {
.filter((x) => !x.closedTime) .filter((x) => !x.closedTime)
.map((tab) => ({ .map((tab) => ({
...tab, ...tab,
tabDbName: tab.props && tab.props.conid && tab.props.database ? tab.props.database : '(no DB)', tabDbName: getTabDbName(tab),
tabDbKey: tabDbKey: getTabDbKey(tab),
tab.props && tab.props.conid && tab.props.database ? formatDbKey(tab.props.conid, tab.props.database) : noDbKey,
})); }));
const tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey'); const tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey');
const dbKeys = _.keys(tabsByDb).sort(); const dbKeys = _.keys(tabsByDb).sort();
@@ -230,7 +246,7 @@ export default function TabsPanel() {
selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey} selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}
onClick={() => handleSetDb(tabsByDb[dbKey][0].props)} onClick={() => handleSetDb(tabsByDb[dbKey][0].props)}
> >
<i className="fas fa-database" /> {tabsByDb[dbKey][0].tabDbName} <i className={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
</DbNameWrapper> </DbNameWrapper>
<DbGroupHandler> <DbGroupHandler>
{_.sortBy(tabsByDb[dbKey], 'title').map((tab) => ( {_.sortBy(tabsByDb[dbKey], 'title').map((tab) => (

4
packages/web/src/appobj/archiveFileAppObject.js
View File

@@ -30,8 +30,8 @@ const archiveFileAppObject = () => ({ fileName, folderName }, { setOpenedTabs })
tooltip: `${folderName}\n${fileName}`, tooltip: `${folderName}\n${fileName}`,
tabComponent: 'ArchiveFileTab', tabComponent: 'ArchiveFileTab',
props: { props: {
fileName, archiveFile: fileName,
folderName, archiveFolder: folderName,
}, },
}); });
}; };

4
packages/web/src/tabs/ArchiveFileTab.js
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import JslDataGrid from '../sqleditor/JslDataGrid'; import JslDataGrid from '../sqleditor/JslDataGrid';
export default function ArchiveFileTab({ folderName, fileName, tabVisible, toolbarPortalRef, tabid }) { export default function ArchiveFileTab({ archiveFolder, archiveFile, tabVisible, toolbarPortalRef, tabid }) {
return <JslDataGrid jslid={`archive://${folderName}/${fileName}`} />; return <JslDataGrid jslid={`archive://${archiveFolder}/${archiveFile}`} />;
} }