diff --git a/packages/web/src/appobj/AppObjectList.js b/packages/web/src/appobj/AppObjectList.js
index bb433f00..457ad6ff 100644
--- a/packages/web/src/appobj/AppObjectList.js
+++ b/packages/web/src/appobj/AppObjectList.js
@@ -9,23 +9,25 @@ const SubItemsDiv = styled.div`
margin-left: 16px;
`;
-const ExpandIconHolder = styled.span`
+const ExpandIconHolder2 = styled.span`
margin-right: 5px;
position: relative;
top: -3px;
`;
-// function ExpandIcon({ isBlank, isExpanded, isHover }) {
-// if (column.foreignKey) {
-// return (
-//
-// );
-// }
-// return ;
-// }
+const ExpandIconHolder = styled.span`
+ margin-right: 5px;
+`;
+
+const GroupDiv = styled.div`
+ padding: 5px;
+ &:hover {
+ background-color: lightblue;
+ }
+ cursor: pointer;
+ white-space: nowrap;
+ font-weight: bold;
+`;
function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, SubItems }) {
const [isExpanded, setIsExpanded] = React.useState(false);
@@ -47,9 +49,9 @@ function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, Su
onMouseLeave={() => setIsHover(false)}
prefix={
SubItems ? (
-
+
-
+
) : null
}
/>
@@ -67,26 +69,64 @@ function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, Su
return res;
}
+function AppObjectGroup({ group, items }) {
+ const [isExpanded, setIsExpanded] = React.useState(true);
+ const [isHover, setIsHover] = React.useState(false);
+ return (
+ <>
+ setIsHover(true)}
+ onMouseLeave={() => setIsHover(false)}
+ onClick={() => setIsExpanded(!isExpanded)}
+ >
+
+
+
+ {group} {items && `(${items.length})`}
+
+ {isExpanded && items.map(x => x.component)}
+ >
+ );
+}
+
export function AppObjectList({
list,
makeAppObj,
SubItems = undefined,
onObjectClick = undefined,
filter = undefined,
+ groupFunc = undefined,
+ groupOrdered = undefined,
}) {
const setOpenedTabs = useSetOpenedTabs();
+
+ const createComponent = (data, appobj) => (
+
+ );
+
+ if (groupFunc) {
+ const listGrouped = (list || []).map(data => {
+ const appobj = makeAppObj(data, { setOpenedTabs });
+ const component = createComponent(data, appobj);
+ const group = groupFunc(appobj);
+ return { group, appobj, component };
+ });
+ const groups = _.groupBy(listGrouped, 'group');
+ return (groupOrdered || _.keys(groups)).map(group => (
+
+ ));
+ }
+
return (list || []).map(data => {
const appobj = makeAppObj(data, { setOpenedTabs });
- return (
-
- );
+ return createComponent(data, appobj);
});
}
diff --git a/packages/web/src/appobj/tableAppObject.js b/packages/web/src/appobj/tableAppObject.js
index 954d39d5..23ed61ed 100644
--- a/packages/web/src/appobj/tableAppObject.js
+++ b/packages/web/src/appobj/tableAppObject.js
@@ -4,10 +4,14 @@ import { DropDownMenuItem } from '../modals/DropDownMenu';
import { openNewTab } from '../utility/common';
import getConnectionInfo from '../utility/getConnectionInfo';
import fullDisplayName from '../utility/fullDisplayName';
+import { filterName } from '@dbgate/datalib';
async function openTableDetail(setOpenedTabs, tabComponent, { schemaName, pureName, conid, database }) {
const connection = await getConnectionInfo(conid);
- const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({schemaName, pureName})}`;
+ const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({
+ schemaName,
+ pureName,
+ })}`;
openNewTab(setOpenedTabs, {
title: pureName,
@@ -54,6 +58,7 @@ export default function tableAppObject({ conid, database, pureName, schemaName }
database,
});
};
+ const matcher = filter => filterName(filter, pureName);
- return { title, key, Icon, Menu, onClick };
+ return { title, key, Icon, Menu, onClick, matcher };
}
diff --git a/packages/web/src/widgets/DatabaseWidget.js b/packages/web/src/widgets/DatabaseWidget.js
index 14086cf5..738da86a 100644
--- a/packages/web/src/widgets/DatabaseWidget.js
+++ b/packages/web/src/widgets/DatabaseWidget.js
@@ -91,9 +91,21 @@ function SqlObjectList({ conid, database }) {
reloadTrigger: `database-structure-changed-${conid}-${database}`,
});
const { tables } = objects || {};
+ const [filter, setFilter] = React.useState('');
return (
<>
- ({ ...x, conid, database }))} makeAppObj={tableAppObject} />
+
+ setFilter(e.target.value)} />
+
+
+
+ ({ ...x, conid, database }))}
+ makeAppObj={tableAppObject}
+ groupFunc={appobj => 'Tables'}
+ filter={filter}
+ />
+
>
);
}