connection list searchbox

packages/web/src/appobj/AppObjectList.js

@@ -1,23 +1,92 @@
 import React from 'react';
-import styled from 'styled-components';
-import { showMenu } from '../modals/DropDownMenu';
+import _ from 'lodash';
 import { AppObjectCore } from './AppObjects';
 import { useSetOpenedTabs } from '../utility/globalState';
+import styled from 'styled-components';
+import { ExpandIcon } from '../icons';
 
-export function AppObjectList({ list, makeAppObj, SubItems = undefined, onObjectClick = undefined }) {
+const SubItemsDiv = styled.div`
+  margin-left: 16px;
+`;
+
+const ExpandIconHolder = styled.span`
+  margin-right: 5px;
+  position: relative;
+  top: -3px;
+`;
+
+// function ExpandIcon({ isBlank, isExpanded, isHover }) {
+//   if (column.foreignKey) {
+//     return (
+//       <FontIcon
+//         icon={`far ${isExpanded ? 'fa-minus-square' : 'fa-plus-square'} `}
+//         {...other}
+//       />
+//     );
+//   }
+//   return <FontIcon icon={`fas fa-square ${isHover ? 'lightblue' : 'white'}`} {...other} />;
+// }
+
+function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, SubItems }) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isHover, setIsHover] = React.useState(false);
+
+  const { matcher } = appobj;
+  if (matcher && !matcher(filter)) return null;
+  if (onObjectClick) appobj.onClick = onObjectClick;
+  if (SubItems) {
+    appobj.onClick = () => setIsExpanded(!isExpanded);
+  }
+
+  let res = (
+    <AppObjectCore
+      data={data}
+      makeAppObj={makeAppObj}
+      {...appobj}
+      onMouseEnter={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}
+      prefix={
+        SubItems ? (
+          <ExpandIconHolder>
+            <ExpandIcon isSelected={isHover} isExpanded={isExpanded} />
+          </ExpandIconHolder>
+        ) : null
+      }
+    />
+  );
+  if (SubItems && isExpanded) {
+    res = (
+      <>
+        {res}
+        <SubItemsDiv>
+          <SubItems data={data} filter={filter} />
+        </SubItemsDiv>
+      </>
+    );
+  }
+  return res;
+}
+
+export function AppObjectList({
+  list,
+  makeAppObj,
+  SubItems = undefined,
+  onObjectClick = undefined,
+  filter = undefined,
+}) {
   const setOpenedTabs = useSetOpenedTabs();
-  return (list || []).map(x => {
-    const appobj = makeAppObj(x, { setOpenedTabs });
-    if (onObjectClick) appobj.onClick = onObjectClick;
-    let res = <AppObjectCore key={appobj.key} data={x} makeAppObj={makeAppObj} {...appobj} />;
-    if (SubItems) {
-      res = (
-        <>
-          {res}
-          <SubItems data={x} />
-        </>
-      );
-    }
-    return res;
+  return (list || []).map(data => {
+    const appobj = makeAppObj(data, { setOpenedTabs });
+    return (
+      <AppObjectListItem
+        key={appobj.key}
+        appobj={appobj}
+        makeAppObj={makeAppObj}
+        data={data}
+        filter={filter}
+        onObjectClick={onObjectClick}
+        SubItems={SubItems}
+      />
+    );
   });
 }

packages/web/src/appobj/AppObjects.js

@@ -23,7 +23,18 @@ const IconWrap = styled.span`
   margin-right: 10px;
 `;
 
-export function AppObjectCore({ title, Icon, Menu, data, makeAppObj, onClick, isBold, component = 'div' }) {
+export function AppObjectCore({
+  title,
+  Icon,
+  Menu,
+  data,
+  makeAppObj,
+  onClick,
+  isBold,
+  component = 'div',
+  prefix = null,
+  ...other
+}) {
   const setOpenedTabs = useSetOpenedTabs();
 
   const handleContextMenu = event => {
@@ -36,7 +47,13 @@ export function AppObjectCore({ title, Icon, Menu, data, makeAppObj, onClick, is
   const Component = component == 'div' ? AppObjectDiv : AppObjectSpan;
 
   return (
-    <Component onContextMenu={handleContextMenu} onClick={onClick ? () => onClick(data) : undefined} isBold={isBold}>
+    <Component
+      onContextMenu={handleContextMenu}
+      onClick={onClick ? () => onClick(data) : undefined}
+      isBold={isBold}
+      {...other}
+    >
+      {prefix}
       <IconWrap>
         <Icon />
       </IconWrap>

packages/web/src/appobj/connectionAppObject.js

@@ -4,6 +4,7 @@ import { DropDownMenuItem } from '../modals/DropDownMenu';
 import showModal from '../modals/showModal';
 import ConnectionModal from '../modals/ConnectionModal';
 import axios from '../utility/axios';
+import { filterName } from '@dbgate/datalib';
 
 function getIcon(engine) {
   switch (engine) {
@@ -38,6 +39,7 @@ export default function connectionAppObject({ _id, server, displayName, engine }
   const title = displayName || server;
   const key = _id;
   const Icon = getIcon(engine);
+  const matcher = filter => filterName(filter, displayName, server);
 
-  return { title, key, Icon, Menu };
+  return { title, key, Icon, Menu, matcher };
 }