load database list

web/src/appobj/AppObjectList.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+import { showMenu } from '../modals/DropDownMenu';
+import { AppObjectCore } from './AppObjects';
+
+export function AppObjectList({ list, makeAppObj, SubItems }) {
+  return (list || []).map(x => {
+    const appobj = makeAppObj(x);
+    let res = <AppObjectCore key={appobj.key} {...appobj} data={x} makeAppObj={makeAppObj} />;
+    if (SubItems) {
+      res = (
+        <>
+          {res}
+          <SubItems data={x} />
+        </>
+      );
+    }
+    return res;
+  });
+}

web/src/appobj/AppObjects.js

@@ -36,10 +36,3 @@ export function AppObjectControl({ data, makeAppObj }) {
   const appobj = makeAppObj(data);
   return <AppObjectCore {...appobj} data={data} makeAppObj={makeAppObj} />;
 }
-
-export function AppObjectList({ list, makeAppObj }) {
-  return (list || []).map(x => {
-    const appobj = makeAppObj(x);
-    return <AppObjectCore key={appobj.key} {...appobj} data={x} makeAppObj={makeAppObj} />;
-  });
-}

web/src/appobj/databaseAppObject.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { MicrosoftIcon, SqliteIcon, PostgreSqlIcon, MySqlIcon, ServerIcon, DatabaseIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+
+function Menu({ data, makeAppObj }) {
+  const handleEdit = () => {
+    showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
+  };
+  const handleDelete = () => {
+    axios.post('connections/delete', data);
+  };
+  return (
+    <>
+      <DropDownMenuItem onClick={handleEdit}>Edit</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
+    </>
+  );
+}
+
+export default function databaseAppObject({ name }) {
+  const title = name;
+  const key = name;
+  const Icon = DatabaseIcon;
+
+  return { title, key, Icon, Menu };
+}

web/src/widgets/DatabaseWidget.js

@@ -2,8 +2,18 @@ import React from 'react';
 import useModalState from '../modals/useModalState';
 import ConnectionModal from '../modals/ConnectionModal';
 import useFetch from '../utility/useFetch';
-import { AppObjectList } from '../appobj/AppObjects';
+import { AppObjectList } from '../appobj/AppObjectList';
 import connectionAppObject from '../appobj/connectionAppObject';
+import databaseAppObject from '../appobj/databaseAppObject';
+
+function SubDatabaseList({ data }) {
+  const { _id } = data;
+  const databases = useFetch({
+    url: `server-connections/list-databases?id=${_id}`,
+    reloadTrigger: `database-list-changed-${_id}`,
+  });
+  return <AppObjectList list={databases} makeAppObj={databaseAppObject} />
+}
 
 export default function DatabaseWidget() {
   const modalState = useModalState();
@@ -15,7 +25,7 @@ export default function DatabaseWidget() {
     <>
       <ConnectionModal modalState={modalState} />
       <button onClick={modalState.open}>Add connection</button>
-      <AppObjectList list={connections} makeAppObj={connectionAppObject} />
+      <AppObjectList list={connections} makeAppObj={connectionAppObject} SubItems={SubDatabaseList} />
     </>
   );
 }