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} + /> + ); }