dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-24 01:25:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

filter improved

Browse Source
This commit is contained in:
Jan Prochazka
2020-04-01 21:47:43 +02:00
parent b62e42ffb7
commit aeacc2b170
2 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,6 +20,7 @@ const ExpandIconHolder = styled.span`
`; `;
const GroupDiv = styled.div` const GroupDiv = styled.div`
user-select: none;
padding: 5px; padding: 5px;
&:hover { &:hover {
background-color: lightblue; background-color: lightblue;
@@ -33,8 +34,8 @@ function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, Su
const [isExpanded, setIsExpanded] = React.useState(false); const [isExpanded, setIsExpanded] = React.useState(false);
const [isHover, setIsHover] = React.useState(false); const [isHover, setIsHover] = React.useState(false);
const { matcher } = appobj; // const { matcher } = appobj;
if (matcher && !matcher(filter)) return null; // if (matcher && !matcher(filter)) return null;
if (onObjectClick) appobj.onClick = onObjectClick; if (onObjectClick) appobj.onClick = onObjectClick;
if (SubItems) { if (SubItems) {
appobj.onClick = () => setIsExpanded(!isExpanded); appobj.onClick = () => setIsExpanded(!isExpanded);
@@ -82,7 +83,7 @@ function AppObjectGroup({ group, items }) {
<ExpandIconHolder> <ExpandIconHolder>
<ExpandIcon isSelected={isHover} isExpanded={isExpanded} /> <ExpandIcon isSelected={isHover} isExpanded={isExpanded} />
</ExpandIconHolder> </ExpandIconHolder>
{group} {items && `(${items.length})`} {group} {items && `(${items.filter(x => x.component).length})`}
</GroupDiv> </GroupDiv>
{isExpanded && items.map(x => x.component)} {isExpanded && items.map(x => x.component)}
</> </>
@@ -113,12 +114,16 @@ export function AppObjectList({
); );
if (groupFunc) { if (groupFunc) {
const listGrouped = (list || []).map(data => { const listGrouped = _.compact(
const appobj = makeAppObj(data, { setOpenedTabs }); (list || []).map(data => {
const component = createComponent(data, appobj); const appobj = makeAppObj(data, { setOpenedTabs });
const group = groupFunc(appobj); const { matcher } = appobj;
return { group, appobj, component }; if (matcher && !matcher(filter)) return null;
}); const component = createComponent(data, appobj);
const group = groupFunc(appobj);
return { group, appobj, component };
})
);
const groups = _.groupBy(listGrouped, 'group'); const groups = _.groupBy(listGrouped, 'group');
return (groupOrdered || _.keys(groups)).map(group => ( return (groupOrdered || _.keys(groups)).map(group => (
<AppObjectGroup key={group} group={group} items={groups[group]} /> <AppObjectGroup key={group} group={group} items={groups[group]} />
@@ -127,6 +132,8 @@ export function AppObjectList({
return (list || []).map(data => { return (list || []).map(data => {
const appobj = makeAppObj(data, { setOpenedTabs }); const appobj = makeAppObj(data, { setOpenedTabs });
const { matcher } = appobj;
if (matcher && !matcher(filter)) return null;
return createComponent(data, appobj); return createComponent(data, appobj);
}); });
} }

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

@@ -20,6 +20,7 @@ const MainContainer = styled.div`
flex-flow: column wrap; flex-flow: column wrap;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
user-select: none;
`; `;
const OuterContainer = styled.div` const OuterContainer = styled.div`
@@ -95,7 +96,12 @@ function SqlObjectList({ conid, database }) {
return ( return (
<> <>
<SearchBoxWrapper> <SearchBoxWrapper>
<Input type="text" placeholder="Search tables or objects" value={filter} onChange={e => setFilter(e.target.value)} /> <Input
type="text"
placeholder="Search tables or objects"
value={filter}
onChange={e => setFilter(e.target.value)}
/>
<Button>Refresh</Button> <Button>Refresh</Button>
</SearchBoxWrapper> </SearchBoxWrapper>
<InnerContainer> <InnerContainer>