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

app object refactor WIP

Browse Source
This commit is contained in:
Jan Prochazka
2020-12-03 11:35:27 +01:00
parent d693cb734b
commit 9bf755ff25
17 changed files with 313 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
packages/web/src/appobj/AppObjects.js → packages/web/src/appobj/AppObjectCore.js
View File

@@ -4,9 +4,10 @@ import _ from 'lodash';
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { FontIcon } from '../icons'; import { FontIcon } from '../icons';
import { useShowMenu } from '../modals/showMenu';
// import { showMenu } from '../modals/DropDownMenu'; // import { showMenu } from '../modals/DropDownMenu';
import useTheme from '../theme/useTheme'; import useTheme from '../theme/useTheme';
import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState'; // import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
const AppObjectDiv = styled.div` const AppObjectDiv = styled.div`
padding: 5px; padding: 5px;
@@ -18,10 +19,10 @@ const AppObjectDiv = styled.div`
font-weight: ${(props) => (props.isBold ? 'bold' : 'normal')}; font-weight: ${(props) => (props.isBold ? 'bold' : 'normal')};
`; `;
const AppObjectSpan = styled.span` // const AppObjectSpan = styled.span`
white-space: nowrap; // white-space: nowrap;
font-weight: ${(props) => (props.isBold ? 'bold' : 'normal')}; // font-weight: ${(props) => (props.isBold ? 'bold' : 'normal')};
`; // `;
const IconWrap = styled.span` const IconWrap = styled.span`
margin-right: 5px; margin-right: 5px;
@@ -32,49 +33,57 @@ const StatusIconWrap = styled.span`
`; `;
const ExtInfoWrap = styled.span` const ExtInfoWrap = styled.span`
font-weight: normal; font-weight: normal;
margin-left: 5px; margin-left: 5px;
color: ${(props) => props.theme.left_font3}; color: ${(props) => props.theme.left_font3};
`; `;
export function AppObjectCore({ export function AppObjectCore({
title, title,
icon, icon,
Menu,
data, data,
makeAppObj, // makeAppObj,
onClick, onClick = undefined,
isBold, onClick2 = undefined,
isBusy, onClick3 = undefined,
component = 'div', isBold = undefined,
prefix = null, isBusy = undefined,
statusIcon, // component = 'div',
extInfo, prefix = undefined,
statusTitle, statusIcon = undefined,
extInfo = undefined,
statusTitle = undefined,
Menu = undefined,
...other ...other
}) { }) {
const appObjectParams = useAppObjectParams(); // const appObjectParams = useAppObjectParams();
const theme = useTheme(); const theme = useTheme();
const showMenu = useShowMenu();
const handleContextMenu = (event) => { const handleContextMenu = (event) => {
if (!Menu) return; if (!Menu) return;
event.preventDefault(); event.preventDefault();
showMenu(event.pageX, event.pageY, <Menu data={data} />);
// showMenu(event.pageX, event.pageY, <Menu data={data} makeAppObj={makeAppObj} {...appObjectParams} />); // showMenu(event.pageX, event.pageY, <Menu data={data} makeAppObj={makeAppObj} {...appObjectParams} />);
}; };
const Component = component == 'div' ? AppObjectDiv : AppObjectSpan; // const Component = component == 'div' ? AppObjectDiv : AppObjectSpan;
let bold = false; // let bold = false;
if (_.isFunction(isBold)) bold = isBold(appObjectParams); // if (_.isFunction(isBold)) bold = isBold(appObjectParams);
else bold = !!isBold; // else bold = !!isBold;
return ( return (
<Component <AppObjectDiv
onContextMenu={handleContextMenu} onContextMenu={handleContextMenu}
onClick={onClick ? () => onClick(data) : undefined} onClick={() => {
isBold={bold} if (onClick) onClick(data);
if (onClick2) onClick2(data);
if (onClick3) onClick3(data);
}}
theme={theme} theme={theme}
isBold={isBold}
{...other} {...other}
> >
{prefix} {prefix}
@@ -86,12 +95,12 @@ export function AppObjectCore({
</StatusIconWrap> </StatusIconWrap>
)} )}
{extInfo && <ExtInfoWrap theme={theme}>{extInfo}</ExtInfoWrap>} {extInfo && <ExtInfoWrap theme={theme}>{extInfo}</ExtInfoWrap>}
</Component> </AppObjectDiv>
); );
} }
export function AppObjectControl({ data, makeAppObj, component = 'div' }) { // export function AppObjectControl({ data, makeAppObj, component = 'div' }) {
const appObjectParams = useAppObjectParams(); // const appObjectParams = useAppObjectParams();
const appobj = makeAppObj(data, appObjectParams); // const appobj = makeAppObj(data, appObjectParams);
return <AppObjectCore {...appobj} data={data} makeAppObj={makeAppObj} component={component} />; // return <AppObjectCore {...appobj} data={data} makeAppObj={makeAppObj} component={component} />;
} // }

90
packages/web/src/appobj/AppObjectList.js
View File

@@ -1,7 +1,5 @@
import React from 'react'; import React from 'react';
import _ from 'lodash'; import _ from 'lodash';
import { AppObjectCore } from './AppObjects';
import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
import styled from 'styled-components'; import styled from 'styled-components';
import { ExpandIcon } from '../icons'; import { ExpandIcon } from '../icons';
import useTheme from '../theme/useTheme'; import useTheme from '../theme/useTheme';
@@ -31,53 +29,37 @@ const GroupDiv = styled.div`
font-weight: bold; font-weight: bold;
`; `;
function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, SubItems }) { function AppObjectListItem({ AppObjectComponent, data, filter, onObjectClick, isExpandable, SubItems }) {
const [isExpanded, setIsExpanded] = React.useState(false); const [isExpanded, setIsExpanded] = React.useState(false);
const [isHover, setIsHover] = React.useState(false);
const expandable = data && isExpandable && isExpandable(data);
React.useEffect(() => { React.useEffect(() => {
if (!appobj.isExpandable) { if (!expandable) {
// if (data._id == '6pOY2iFY8Gsq7mk6') console.log('COLLAPSE1'); // if (data._id == '6pOY2iFY8Gsq7mk6') console.log('COLLAPSE1');
setIsExpanded(false); setIsExpanded(false);
} }
}, [appobj && appobj.isExpandable]); }, [expandable]);
// const { matcher } = appobj; // const { matcher } = appobj;
// if (matcher && !matcher(filter)) return null; // if (matcher && !matcher(filter)) return null;
if (onObjectClick) const commonProps = {
appobj = { prefix: SubItems ? (
...appobj, <ExpandIconHolder2>
onClick: onObjectClick, {expandable ? <ExpandIcon isExpanded={isExpanded} /> : <ExpandIcon isBlank />}
}; </ExpandIconHolder2>
) : null,
};
if (SubItems) { if (SubItems) {
const oldClick = appobj.onClick; commonProps.onClick2 = () => setIsExpanded((v) => !v);
appobj = { }
...appobj, if (onObjectClick) {
onClick: () => { commonProps.onClick3 = onObjectClick;
if (oldClick) oldClick();
// if (data._id == '6pOY2iFY8Gsq7mk6') console.log('COLLAPSE2');
setIsExpanded((v) => !v);
},
};
} }
let res = ( let res = <AppObjectComponent data={data} commonProps={commonProps} />;
<AppObjectCore
data={data}
makeAppObj={makeAppObj}
{...appobj}
onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
prefix={
SubItems ? (
<ExpandIconHolder2>
{appobj.isExpandable ? <ExpandIcon isExpanded={isExpanded} /> : <ExpandIcon isBlank />}
</ExpandIconHolder2>
) : null
}
/>
);
if (SubItems && isExpanded) { if (SubItems && isExpanded) {
res = ( res = (
<> <>
@@ -93,16 +75,10 @@ function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, Su
function AppObjectGroup({ group, items }) { function AppObjectGroup({ group, items }) {
const [isExpanded, setIsExpanded] = React.useState(true); const [isExpanded, setIsExpanded] = React.useState(true);
const [isHover, setIsHover] = React.useState(false);
const theme = useTheme(); const theme = useTheme();
return ( return (
<> <>
<GroupDiv <GroupDiv onClick={() => setIsExpanded(!isExpanded)} theme={theme}>
onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
onClick={() => setIsExpanded(!isExpanded)}
theme={theme}
>
<ExpandIconHolder> <ExpandIconHolder>
<ExpandIcon isExpanded={isExpanded} /> <ExpandIcon isExpanded={isExpanded} />
</ExpandIconHolder> </ExpandIconHolder>
@@ -115,36 +91,35 @@ function AppObjectGroup({ group, items }) {
export function AppObjectList({ export function AppObjectList({
list, list,
makeAppObj, AppObjectComponent,
SubItems = undefined, SubItems = undefined,
onObjectClick = undefined, onObjectClick = undefined,
filter = undefined, filter = undefined,
groupFunc = undefined, groupFunc = undefined,
groupOrdered = undefined, groupOrdered = undefined,
isExpandable = undefined,
}) { }) {
const appObjectParams = useAppObjectParams(); const createComponent = (data) => (
const createComponent = (data, appobj) => (
<AppObjectListItem <AppObjectListItem
key={appobj.key} key={AppObjectComponent.extractKey(data)}
appobj={appobj} AppObjectComponent={AppObjectComponent}
makeAppObj={makeAppObj}
data={data} data={data}
filter={filter} filter={filter}
onObjectClick={onObjectClick} onObjectClick={onObjectClick}
SubItems={SubItems} SubItems={SubItems}
isExpandable={isExpandable}
/> />
); );
if (groupFunc) { if (groupFunc) {
const listGrouped = _.compact( const listGrouped = _.compact(
(list || []).map((data) => { (list || []).map((data) => {
const appobj = makeAppObj(data, appObjectParams); // const appobj = makeAppObj(data, appObjectParams);
const { matcher } = appobj; const matcher = AppObjectComponent.createMatcher && AppObjectComponent.createMatcher(data);
if (matcher && !matcher(filter)) return null; if (matcher && !matcher(filter)) return null;
const component = createComponent(data, appobj); const component = createComponent(data);
const group = groupFunc(appobj); const group = groupFunc(data);
return { group, appobj, component }; return { group, data, component };
}) })
); );
const groups = _.groupBy(listGrouped, 'group'); const groups = _.groupBy(listGrouped, 'group');
@@ -154,9 +129,8 @@ export function AppObjectList({
} }
return (list || []).map((data) => { return (list || []).map((data) => {
const appobj = makeAppObj(data, appObjectParams); const matcher = AppObjectComponent.createMatcher && AppObjectComponent.createMatcher(data);
const { matcher } = appobj;
if (matcher && !matcher(filter)) return null; if (matcher && !matcher(filter)) return null;
return createComponent(data, appobj); return createComponent(data);
}); });
} }

22
packages/web/src/appobj/archiveFileAppObject.js → packages/web/src/appobj/ArchiveFileAppObject.js
View File

@@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import _ from 'lodash';
import moment from 'moment';
import { DropDownMenuItem } from '../modals/DropDownMenu'; import { DropDownMenuItem } from '../modals/DropDownMenu';
import { openNewTab } from '../utility/common'; import { openNewTab } from '../utility/common';
import { filterName } from 'dbgate-datalib'; import { filterName } from 'dbgate-datalib';
import axios from '../utility/axios'; import axios from '../utility/axios';
import { useSetOpenedTabs } from '../utility/globalState';
import { AppObjectCore } from './AppObjectCore';
function openArchive(setOpenedTabs, fileName, folderName) { function openArchive(setOpenedTabs, fileName, folderName) {
openNewTab(setOpenedTabs, { openNewTab(setOpenedTabs, {
@@ -57,15 +57,19 @@ function Menu({ data, setOpenedTabs }) {
); );
} }
const archiveFileAppObject = () => ({ fileName, folderName }, { setOpenedTabs }) => { function ArchiveFileAppObject({ data, commonProps }) {
const key = fileName; const { fileName, folderName } = data;
const icon = 'img archive'; const setOpenedTabs = useSetOpenedTabs();
const onClick = () => { const onClick = () => {
openArchive(setOpenedTabs, fileName, folderName); openArchive(setOpenedTabs, fileName, folderName);
}; };
const matcher = (filter) => filterName(filter, fileName);
return { title: fileName, key, icon, Menu, onClick, matcher }; return (
}; <AppObjectCore {...commonProps} data={data} title={fileName} icon="img archive" onClick={onClick} Menu={Menu} />
);
}
export default archiveFileAppObject; ArchiveFileAppObject.extractKey = (data) => data.fileName;
ArchiveFileAppObject.createMatcher = ({ fileName }) => (filter) => filterName(filter, fileName);
export default ArchiveFileAppObject;

34
packages/web/src/appobj/ArchiveFolderAppObject.js Normal file
View File

@@ -0,0 +1,34 @@
import React from 'react';
import { DropDownMenuItem } from '../modals/DropDownMenu';
import axios from '../utility/axios';
import { filterName } from 'dbgate-datalib';
import { AppObjectCore } from './AppObjectCore';
import { useCurrentArchive } from '../utility/globalState';
function Menu({ data }) {
const handleDelete = () => {
axios.post('archive/delete-folder', { folder: data.name });
};
return <>{data.name != 'default' && <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>}</>;
}
function ArchiveFolderAppObject({ data, commonProps }) {
const { name } = data;
const currentArchive = useCurrentArchive();
return (
<AppObjectCore
{...commonProps}
data={data}
title={name}
icon="img archive-folder"
isBold={name == currentArchive}
Menu={Menu}
/>
);
}
ArchiveFolderAppObject.extractKey = (data) => data.name;
ArchiveFolderAppObject.createMatcher = (data) => (filter) => filterName(filter, data.name);
export default ArchiveFolderAppObject;

30
packages/web/src/appobj/closedTabAppObject.js → packages/web/src/appobj/ClosedTabAppObject.js
View File

@@ -2,8 +2,11 @@ import React from 'react';
import _ from 'lodash'; import _ from 'lodash';
import moment from 'moment'; import moment from 'moment';
import { DropDownMenuItem } from '../modals/DropDownMenu'; import { DropDownMenuItem } from '../modals/DropDownMenu';
import { useSetOpenedTabs } from '../utility/globalState';
import { AppObjectCore } from './AppObjectCore';
function Menu({ data, setOpenedTabs }) { function Menu({ data }) {
const setOpenedTabs = useSetOpenedTabs();
const handleDelete = () => { const handleDelete = () => {
setOpenedTabs((tabs) => tabs.filter((x) => x.tabid != data.tabid)); setOpenedTabs((tabs) => tabs.filter((x) => x.tabid != data.tabid));
}; };
@@ -18,9 +21,9 @@ function Menu({ data, setOpenedTabs }) {
); );
} }
const closedTabAppObject = () => ({ tabid, props, selected, icon, title, closedTime, busy }, { setOpenedTabs }) => { function ClosedTabAppObject({ data, commonProps }) {
const key = tabid; const { tabid, props, selected, icon, title, closedTime, busy } = data;
const isBold = !!selected; const setOpenedTabs = useSetOpenedTabs();
const onClick = () => { const onClick = () => {
setOpenedTabs((files) => setOpenedTabs((files) =>
@@ -32,7 +35,20 @@ const closedTabAppObject = () => ({ tabid, props, selected, icon, title, closedT
); );
}; };
return { title: `${title} ${moment(closedTime).fromNow()}`, key, icon, isBold, onClick, isBusy: busy, Menu }; return (
}; <AppObjectCore
{...commonProps}
data={data}
title={`${title} ${moment(closedTime).fromNow()}`}
icon={icon}
isBold={!!selected}
onClick={onClick}
isBusy={busy}
Menu={Menu}
/>
);
}
export default closedTabAppObject; ClosedTabAppObject.extractKey = (data) => data.tabid;
export default ClosedTabAppObject;

84
packages/web/src/appobj/connectionAppObject.js → packages/web/src/appobj/ConnectionAppObject.js
View File

@@ -6,8 +6,17 @@ import axios from '../utility/axios';
import { filterName } from 'dbgate-datalib'; import { filterName } from 'dbgate-datalib';
import ConfirmModal from '../modals/ConfirmModal'; import ConfirmModal from '../modals/ConfirmModal';
import CreateDatabaseModal from '../modals/CreateDatabaseModal'; import CreateDatabaseModal from '../modals/CreateDatabaseModal';
import { useCurrentDatabase, useOpenedConnections, useSetOpenedConnections } from '../utility/globalState';
import { AppObjectCore } from './AppObjectCore';
import useShowModal from '../modals/showModal';
import { useConfig } from '../utility/metadataLoaders';
function Menu({ data }) {
const openedConnections = useOpenedConnections();
const setOpenedConnections = useSetOpenedConnections();
const showModal = useShowModal();
const config = useConfig();
function Menu({ data, setOpenedConnections, openedConnections, config, showModal }) {
const handleEdit = () => { const handleEdit = () => {
showModal((modalState) => <ConnectionModal modalState={modalState} connection={data} />); showModal((modalState) => <ConnectionModal modalState={modalState} connection={data} />);
}; };
@@ -54,21 +63,16 @@ function Menu({ data, setOpenedConnections, openedConnections, config, showModal
); );
} }
const connectionAppObject = (flags) => ( function ConnectionAppObject({ data, commonProps }) {
{ _id, server, displayName, engine, status }, const { _id, server, displayName, engine, status } = data;
{ openedConnections, setOpenedConnections } const openedConnections = useOpenedConnections();
) => { const setOpenedConnections = useSetOpenedConnections();
const title = displayName || server; const currentDatabase = useCurrentDatabase();
const key = _id;
const isExpandable = openedConnections.includes(_id); // const key = _id;
const icon = 'img server'; // const isExpandable = openedConnections.includes(_id);
const matcher = (filter) => filterName(filter, displayName, server); // const matcher = (filter) => filterName(filter, displayName, server);
const { boldCurrentDatabase } = flags || {}; const isBold = _.get(currentDatabase, 'connection._id') == _id;
const isBold = boldCurrentDatabase
? ({ currentDatabase }) => {
return _.get(currentDatabase, 'connection._id') == _id;
}
: null;
const onClick = () => setOpenedConnections((c) => [...c, _id]); const onClick = () => setOpenedConnections((c) => [...c, _id]);
let statusIcon = null; let statusIcon = null;
@@ -84,19 +88,37 @@ const connectionAppObject = (flags) => (
} }
const extInfo = engine; const extInfo = engine;
return { return (
title, <AppObjectCore
key, {...commonProps}
icon, title={displayName || server}
Menu, icon="img server"
matcher, data={data}
isBold, statusIcon={statusIcon}
isExpandable, statusTitle={statusTitle}
onClick, extInfo={extInfo}
statusIcon, isBold={isBold}
statusTitle, onClick={onClick}
extInfo, Menu={Menu}
}; />
}; );
export default connectionAppObject; // return {
// title,
// key,
// icon,
// Menu,
// matcher,
// isBold,
// isExpandable,
// onClick,
// statusIcon,
// statusTitle,
// extInfo,
// };
}
ConnectionAppObject.extractKey = (data) => data._id;
ConnectionAppObject.createMatcher = ({ displayName, server }) => (filter) => filterName(filter, displayName, server);
export default ConnectionAppObject;

51
packages/web/src/appobj/databaseAppObject.js → packages/web/src/appobj/DatabaseAppObject.js
View File

@@ -4,11 +4,17 @@ import { DropDownMenuItem } from '../modals/DropDownMenu';
import { openNewTab } from '../utility/common'; import { openNewTab } from '../utility/common';
import ImportExportModal from '../modals/ImportExportModal'; import ImportExportModal from '../modals/ImportExportModal';
import { getDefaultFileFormat } from '../utility/fileformats'; import { getDefaultFileFormat } from '../utility/fileformats';
import { useSetOpenedTabs } from '../utility/globalState'; import { useCurrentDatabase, useSetOpenedTabs } from '../utility/globalState';
import { AppObjectCore } from './AppObjectCore';
import useShowModal from '../modals/showModal';
import useExtensions from '../utility/useExtensions';
function Menu({ data, showModal, extensions }) { function Menu({ data }) {
const setOpenedTabs = useSetOpenedTabs();
const { connection, name } = data; const { connection, name } = data;
const setOpenedTabs = useSetOpenedTabs();
const extensions = useExtensions();
const showModal = useShowModal();
const tooltip = `${connection.displayName || connection.server}\n${name}`; const tooltip = `${connection.displayName || connection.server}\n${name}`;
const handleNewQuery = () => { const handleNewQuery = () => {
@@ -31,8 +37,8 @@ function Menu({ data, showModal, extensions }) {
initialValues={{ initialValues={{
sourceStorageType: getDefaultFileFormat(extensions).storageType, sourceStorageType: getDefaultFileFormat(extensions).storageType,
targetStorageType: 'database', targetStorageType: 'database',
targetConnectionId: data.connection._id, targetConnectionId: connection._id,
targetDatabaseName: data.name, targetDatabaseName: name,
}} }}
/> />
)); ));
@@ -45,8 +51,8 @@ function Menu({ data, showModal, extensions }) {
initialValues={{ initialValues={{
targetStorageType: getDefaultFileFormat(extensions).storageType, targetStorageType: getDefaultFileFormat(extensions).storageType,
sourceStorageType: 'database', sourceStorageType: 'database',
sourceConnectionId: data.connection._id, sourceConnectionId: connection._id,
sourceDatabaseName: data.name, sourceDatabaseName: name,
}} }}
/> />
)); ));
@@ -61,20 +67,23 @@ function Menu({ data, showModal, extensions }) {
); );
} }
const databaseAppObject = (flags) => ({ name, connection }) => { function DatabaseAppObject({ data, commonProps }) {
const { boldCurrentDatabase } = flags || {}; const { name, connection } = data;
const title = name; const currentDatabase = useCurrentDatabase();
const key = name; return (
const icon = 'img database'; <AppObjectCore
const isBold = boldCurrentDatabase {...commonProps}
? ({ currentDatabase }) => { data={data}
return ( title={name}
_.get(currentDatabase, 'connection._id') == _.get(connection, '_id') && _.get(currentDatabase, 'name') == name icon="img database"
); isBold={
_.get(currentDatabase, 'connection._id') == _.get(connection, '_id') && _.get(currentDatabase, 'name') == name
} }
: null; Menu={Menu}
/>
);
}
return { title, key, icon, Menu, isBold }; DatabaseAppObject.extractKey = (props) => props.name;
};
export default databaseAppObject; export default DatabaseAppObject;

44
packages/web/src/appobj/databaseObjectAppObject.js → packages/web/src/appobj/DatabaseObjectAppObject.js
View File

@@ -6,6 +6,9 @@ import { getConnectionInfo } from '../utility/metadataLoaders';
import fullDisplayName from '../utility/fullDisplayName'; import fullDisplayName from '../utility/fullDisplayName';
import { filterName } from 'dbgate-datalib'; import { filterName } from 'dbgate-datalib';
import ImportExportModal from '../modals/ImportExportModal'; import ImportExportModal from '../modals/ImportExportModal';
import { useSetOpenedTabs } from '../utility/globalState';
import { AppObjectCore } from './AppObjectCore';
import useShowModal from '../modals/showModal';
const icons = { const icons = {
tables: 'img table', tables: 'img table',
@@ -114,7 +117,9 @@ export async function openDatabaseObjectDetail(
}); });
} }
function Menu({ data, makeAppObj, setOpenedTabs, showModal }) { function Menu({ data }) {
const showModal = useShowModal();
const setOpenedTabs = useSetOpenedTabs();
return ( return (
<> <>
{menus[data.objectTypeField].map((menu) => ( {menus[data.objectTypeField].map((menu) => (
@@ -166,13 +171,9 @@ function Menu({ data, makeAppObj, setOpenedTabs, showModal }) {
); );
} }
const databaseObjectAppObject = () => ( function DatabaseObjectAppObject({ data, commonProps }) {
{ conid, database, pureName, schemaName, objectTypeField }, const { conid, database, pureName, schemaName, objectTypeField } = data;
{ setOpenedTabs } const setOpenedTabs = useSetOpenedTabs();
) => {
const title = schemaName ? `${schemaName}.${pureName}` : pureName;
const key = title;
const icon = icons[objectTypeField];
// const Icon = (props) => getIconImage(icons[objectTypeField], props); // const Icon = (props) => getIconImage(icons[objectTypeField], props);
const onClick = ({ schemaName, pureName }) => { const onClick = ({ schemaName, pureName }) => {
openDatabaseObjectDetail( openDatabaseObjectDetail(
@@ -188,10 +189,27 @@ const databaseObjectAppObject = () => (
} }
); );
}; };
const matcher = (filter) => filterName(filter, pureName); // const matcher = (filter) => filterName(filter, pureName);
const groupTitle = _.startCase(objectTypeField); // const groupTitle = _.startCase(objectTypeField);
return { title, key, icon, Menu, onClick, matcher, groupTitle }; return (
}; <AppObjectCore
{...commonProps}
data={data}
title={schemaName ? `${schemaName}.${pureName}` : pureName}
icon={icons[objectTypeField]}
onClick={onClick}
Menu={Menu}
/>
);
// return { title, key, icon, Menu, onClick, matcher, groupTitle };
}
export default databaseObjectAppObject; DatabaseObjectAppObject.extractKey = ({ schemaName, pureName }) =>
schemaName ? `${schemaName}.${pureName}` : pureName;
DatabaseObjectAppObject.createMatcher = ({ pureName }) => (filter) => filterName(filter, pureName);
// DatabaseObjectAppObject.groupTitle = ({ pureName }) => (filter) => filterName(filter, pureName);
export default DatabaseObjectAppObject;

18
packages/web/src/appobj/savedSqlFileAppObject.js → packages/web/src/appobj/SavedSqlFileAppObject.js
View File

@@ -2,6 +2,8 @@ import React from 'react';
import axios from '../utility/axios'; import axios from '../utility/axios';
import _ from 'lodash'; import _ from 'lodash';
import { DropDownMenuItem } from '../modals/DropDownMenu'; import { DropDownMenuItem } from '../modals/DropDownMenu';
import { AppObjectCore } from './AppObjectCore';
import useNewQuery from '../query/useNewQuery';
function Menu({ data }) { function Menu({ data }) {
const handleDelete = () => { const handleDelete = () => {
@@ -14,20 +16,22 @@ function Menu({ data }) {
); );
} }
const savedSqlFileAppObject = () => ({ name }, { setOpenedTabs, newQuery, openedTabs }) => { function SavedSqlFileAppObject({ data, commonProps }) {
const key = name; const { name } = data;
const title = name; const newQuery = useNewQuery();
const icon = 'img sql-file';
const onClick = async () => { const onClick = async () => {
const resp = await axios.post('files/load', { folder: 'sql', file: name }); const resp = await axios.post('files/load', { folder: 'sql', file: name });
newQuery({ newQuery({
title: name, title: name,
// @ts-ignore
initialScript: resp.data, initialScript: resp.data,
}); });
}; };
return { title, key, icon, onClick, Menu }; return <AppObjectCore {...commonProps} data={data} title={name} icon="img sql-file" onClick={onClick} Menu={Menu} />;
}; }
export default savedSqlFileAppObject; SavedSqlFileAppObject.extractKey = (data) => data.name;
export default SavedSqlFileAppObject;

24
packages/web/src/appobj/archiveFolderAppObject.js
View File

@@ -1,24 +0,0 @@
import React from 'react';
import _ from 'lodash';
import moment from 'moment';
import { DropDownMenuItem } from '../modals/DropDownMenu';
import axios from '../utility/axios';
import { filterName } from 'dbgate-datalib';
function Menu({ data, setOpenedTabs }) {
const handleDelete = () => {
axios.post('archive/delete-folder', { folder: data.name });
};
return <>{data.name != 'default' && <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>}</>;
}
const archiveFolderAppObject = () => ({ name }, { setOpenedTabs, currentArchive }) => {
const key = name;
const icon = 'img archive-folder';
const isBold = name == currentArchive;
const matcher = (filter) => filterName(filter, name);
return { title: name, key, icon, isBold, Menu, matcher };
};
export default archiveFolderAppObject;

2
packages/web/src/datagrid/ColumnHeaderControl.js
View File

@@ -5,7 +5,7 @@ import DropDownButton from '../widgets/DropDownButton';
import { DropDownMenuItem, DropDownMenuDivider } from '../modals/DropDownMenu'; import { DropDownMenuItem, DropDownMenuDivider } from '../modals/DropDownMenu';
import { useSplitterDrag } from '../widgets/Splitter'; import { useSplitterDrag } from '../widgets/Splitter';
import { isTypeDateTime } from 'dbgate-tools'; import { isTypeDateTime } from 'dbgate-tools';
import { openDatabaseObjectDetail } from '../appobj/databaseObjectAppObject'; import { openDatabaseObjectDetail } from '../appobj/DatabaseObjectAppObject';
import { useSetOpenedTabs } from '../utility/globalState'; import { useSetOpenedTabs } from '../utility/globalState';
import { FontIcon } from '../icons'; import { FontIcon } from '../icons';
import useTheme from '../theme/useTheme'; import useTheme from '../theme/useTheme';

2
packages/web/src/freetable/MacroManager.js
View File

@@ -24,7 +24,7 @@ export default function MacroManager({ managerSize, selectedMacro, setSelectedMa
</SearchBoxWrapper> </SearchBoxWrapper>
<AppObjectList <AppObjectList
list={_.sortBy(macros, 'title')} list={_.sortBy(macros, 'title')}
makeAppObj={macroAppObject()} AppObjectComponent={macroAppObject()}
onObjectClick={(macro) => setSelectedMacro(macro)} onObjectClick={(macro) => setSelectedMacro(macro)}
filter={filter} filter={filter}
groupFunc={(appobj) => appobj.groupTitle} groupFunc={(appobj) => appobj.groupTitle}

4
packages/web/src/utility/ObjectListControl.js
View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import TableControl, { TableColumn } from './TableControl'; import TableControl, { TableColumn } from './TableControl';
import { AppObjectControl } from '../appobj/AppObjects'; // import { AppObjectControl } from '../appobj/AppObjects';
import useTheme from '../theme/useTheme'; import useTheme from '../theme/useTheme';
const ObjectListWrapper = styled.div` const ObjectListWrapper = styled.div`
@@ -39,7 +39,7 @@ export default function ObjectListControl({ collection = [], title, showIfEmpty
<TableColumn <TableColumn
fieldName="displayName" fieldName="displayName"
header="Name" header="Name"
formatter={(col) => <AppObjectControl data={col} makeAppObj={makeAppObj} component="span" />} // formatter={(col) => <AppObjectControl data={col} makeAppObj={makeAppObj} component="span" />}
/> />
{children} {children}
</TableControl> </TableControl>

48
packages/web/src/utility/globalState.js
View File

@@ -80,31 +80,31 @@ export function useUpdateDatabaseForTab(tabVisible, conid, database) {
} }
} }
export function useAppObjectParams() { // export function useAppObjectParams() {
const setOpenedTabs = useSetOpenedTabs(); // const setOpenedTabs = useSetOpenedTabs();
const currentDatabase = useCurrentDatabase(); // const currentDatabase = useCurrentDatabase();
const newQuery = useNewQuery(); // const newQuery = useNewQuery();
const openedTabs = useOpenedTabs(); // const openedTabs = useOpenedTabs();
const openedConnections = useOpenedConnections(); // const openedConnections = useOpenedConnections();
const setOpenedConnections = useSetOpenedConnections(); // const setOpenedConnections = useSetOpenedConnections();
const currentArchive = useCurrentArchive(); // const currentArchive = useCurrentArchive();
const showModal = useShowModal(); // const showModal = useShowModal();
const config = useConfig(); // const config = useConfig();
const extensions = useExtensions(); // const extensions = useExtensions();
return { // return {
setOpenedTabs, // setOpenedTabs,
currentDatabase, // currentDatabase,
currentArchive, // currentArchive,
newQuery, // newQuery,
openedTabs, // openedTabs,
openedConnections, // openedConnections,
setOpenedConnections, // setOpenedConnections,
config, // config,
showModal, // showModal,
extensions, // extensions,
}; // };
} // }
const [OpenedConnectionsProvider, useOpenedConnections, useSetOpenedConnections] = createGlobalState([]); const [OpenedConnectionsProvider, useOpenedConnections, useSetOpenedConnections] = createGlobalState([]);

8
packages/web/src/widgets/ArchiveWidget.js
View File

@@ -6,8 +6,8 @@ import { useCurrentArchive, useSetCurrentArchive } from '../utility/globalState'
import { SearchBoxWrapper, WidgetsInnerContainer } from './WidgetStyles'; import { SearchBoxWrapper, WidgetsInnerContainer } from './WidgetStyles';
import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar'; import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar';
import { useArchiveFiles, useArchiveFolders } from '../utility/metadataLoaders'; import { useArchiveFiles, useArchiveFolders } from '../utility/metadataLoaders';
import archiveFolderAppObject from '../appobj/archiveFolderAppObject'; import ArchiveFolderAppObject from '../appobj/ArchiveFolderAppObject';
import archiveFileAppObject from '../appobj/archiveFileAppObject'; import ArchiveFileAppObject from '../appobj/ArchiveFileAppObject';
import SearchInput from './SearchInput'; import SearchInput from './SearchInput';
import InlineButton from './InlineButton'; import InlineButton from './InlineButton';
import axios from '../utility/axios'; import axios from '../utility/axios';
@@ -31,7 +31,7 @@ function ArchiveFolderList() {
<WidgetsInnerContainer> <WidgetsInnerContainer>
<AppObjectList <AppObjectList
list={_.sortBy(folders, 'name')} list={_.sortBy(folders, 'name')}
makeAppObj={archiveFolderAppObject()} AppObjectComponent={ArchiveFolderAppObject}
onObjectClick={(archive) => setArchive(archive.name)} onObjectClick={(archive) => setArchive(archive.name)}
filter={filter} filter={filter}
/> />
@@ -61,7 +61,7 @@ function ArchiveFilesList() {
folderName: folder, folderName: folder,
}))} }))}
filter={filter} filter={filter}
makeAppObj={archiveFileAppObject()} AppObjectComponent={ArchiveFileAppObject}
/> />
</WidgetsInnerContainer> </WidgetsInnerContainer>
</> </>

17
packages/web/src/widgets/DatabaseWidget.js
View File

@@ -2,11 +2,11 @@ import React from 'react';
import _ from 'lodash'; import _ from 'lodash';
import { AppObjectList } from '../appobj/AppObjectList'; import { AppObjectList } from '../appobj/AppObjectList';
import connectionAppObject from '../appobj/connectionAppObject'; import ConnectionAppObject from '../appobj/ConnectionAppObject';
import databaseAppObject from '../appobj/databaseAppObject'; import DatabaseAppObject from '../appobj/DatabaseAppObject';
import { useSetCurrentDatabase, useCurrentDatabase, useOpenedConnections } from '../utility/globalState'; import { useSetCurrentDatabase, useCurrentDatabase, useOpenedConnections } from '../utility/globalState';
import InlineButton from './InlineButton'; import InlineButton from './InlineButton';
import databaseObjectAppObject from '../appobj/databaseObjectAppObject'; import DatabaseObjectAppObject from '../appobj/DatabaseObjectAppObject';
import { import {
// useSqlObjectList, // useSqlObjectList,
useDatabaseList, useDatabaseList,
@@ -41,7 +41,8 @@ function SubDatabaseList({ data }) {
return ( return (
<AppObjectList <AppObjectList
list={(databases || []).map((db) => ({ ...db, connection: data }))} list={(databases || []).map((db) => ({ ...db, connection: data }))}
makeAppObj={databaseAppObject({ boldCurrentDatabase: true })} AppObjectComponent={DatabaseAppObject}
// makeAppObj={databaseAppObject({ boldCurrentDatabase: true })}
onObjectClick={handleDatabaseClick} onObjectClick={handleDatabaseClick}
/> />
); );
@@ -73,9 +74,11 @@ function ConnectionList() {
<WidgetsInnerContainer> <WidgetsInnerContainer>
<AppObjectList <AppObjectList
list={connectionsWithStatus} list={connectionsWithStatus}
makeAppObj={connectionAppObject({ boldCurrentDatabase: true })} AppObjectComponent={ConnectionAppObject}
// makeAppObj={connectionAppObject({ boldCurrentDatabase: true })}
SubItems={SubDatabaseList} SubItems={SubDatabaseList}
filter={filter} filter={filter}
isExpandable={(data) => openedConnections.includes(data._id)}
/> />
</WidgetsInnerContainer> </WidgetsInnerContainer>
</> </>
@@ -112,8 +115,8 @@ function SqlObjectList({ conid, database }) {
) : ( ) : (
<AppObjectList <AppObjectList
list={objectList.map((x) => ({ ...x, conid, database }))} list={objectList.map((x) => ({ ...x, conid, database }))}
makeAppObj={databaseObjectAppObject()} AppObjectComponent={DatabaseObjectAppObject}
groupFunc={(appobj) => appobj.groupTitle} groupFunc={(data) => _.startCase(data.objectTypeField)}
filter={filter} filter={filter}
/> />
)} )}

8
packages/web/src/widgets/FilesWidget.js
View File

@@ -3,9 +3,9 @@ import _ from 'lodash';
import { AppObjectList } from '../appobj/AppObjectList'; import { AppObjectList } from '../appobj/AppObjectList';
import { useOpenedTabs } from '../utility/globalState'; import { useOpenedTabs } from '../utility/globalState';
import closedTabAppObject from '../appobj/closedTabAppObject'; import ClosedTabAppObject from '../appobj/ClosedTabAppObject';
import { WidgetsInnerContainer } from './WidgetStyles'; import { WidgetsInnerContainer } from './WidgetStyles';
import savedSqlFileAppObject from '../appobj/savedSqlFileAppObject'; import SavedSqlFileAppObject from '../appobj/SavedSqlFileAppObject';
import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar'; import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar';
import { useFiles } from '../utility/metadataLoaders'; import { useFiles } from '../utility/metadataLoaders';
@@ -20,7 +20,7 @@ function ClosedTabsList() {
tabs.filter((x) => x.closedTime), tabs.filter((x) => x.closedTime),
(x) => -x.closedTime (x) => -x.closedTime
)} )}
makeAppObj={closedTabAppObject()} AppObjectComponent={ClosedTabAppObject}
/> />
</WidgetsInnerContainer> </WidgetsInnerContainer>
</> </>
@@ -33,7 +33,7 @@ function SavedSqlFilesList() {
return ( return (
<> <>
<WidgetsInnerContainer> <WidgetsInnerContainer>
<AppObjectList list={files} makeAppObj={savedSqlFileAppObject()} /> <AppObjectList list={files} AppObjectComponent={SavedSqlFileAppObject} />
</WidgetsInnerContainer> </WidgetsInnerContainer>
</> </>
); );