introduced yarn workspace

packages/web/src/appobj/AppObjectList.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import { showMenu } from '../modals/DropDownMenu';
+import { AppObjectCore } from './AppObjects';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+export function AppObjectList({ list, makeAppObj, SubItems = undefined, onObjectClick = 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;
+  });
+}

packages/web/src/appobj/AppObjects.js

@@ -0,0 +1,52 @@
+// @ts-nocheck
+
+import React from 'react';
+import styled from 'styled-components';
+import { showMenu } from '../modals/DropDownMenu';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+const AppObjectDiv = styled.div`
+  padding: 5px;
+  &:hover {
+    background-color: lightblue;
+  }
+  cursor: pointer;
+  white-space: nowrap;
+`;
+
+const AppObjectSpan = styled.span`
+  white-space: nowrap;
+  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
+`;
+
+const IconWrap = styled.span`
+  margin-right: 10px;
+`;
+
+export function AppObjectCore({ title, Icon, Menu, data, makeAppObj, onClick, isBold, component = 'div' }) {
+  const setOpenedTabs = useSetOpenedTabs();
+
+  const handleContextMenu = event => {
+    if (!Menu) return;
+
+    event.preventDefault();
+    showMenu(event.pageX, event.pageY, <Menu data={data} makeAppObj={makeAppObj} setOpenedTabs={setOpenedTabs} />);
+  };
+
+  const Component = component == 'div' ? AppObjectDiv : AppObjectSpan;
+
+  return (
+    <Component onContextMenu={handleContextMenu} onClick={onClick ? () => onClick(data) : undefined} isBold={isBold}>
+      <IconWrap>
+        <Icon />
+      </IconWrap>
+      {title}
+    </Component>
+  );
+}
+
+export function AppObjectControl({ data, makeAppObj, component = 'div' }) {
+  const setOpenedTabs = useSetOpenedTabs();
+  const appobj = makeAppObj(data, { setOpenedTabs });
+  return <AppObjectCore {...appobj} data={data} makeAppObj={makeAppObj} component={component} />;
+}

packages/web/src/appobj/columnAppObject.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ColumnIcon, SequenceIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+import { openNewTab } from '../utility/common';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+/** @param columnProps {import('dbgate').ColumnInfo} */
+function getColumnIcon(columnProps) {
+  if (columnProps.autoIncrement) return SequenceIcon;
+  return ColumnIcon;
+}
+
+/** @param columnProps {import('dbgate').ColumnInfo} */
+export default function columnAppObject(columnProps, { setOpenedTabs }) {
+  const title = columnProps.columnName;
+  const key = title;
+  const Icon = getColumnIcon(columnProps);
+  const isBold = columnProps.notNull;
+
+  return { title, key, Icon, isBold };
+}

packages/web/src/appobj/connectionAppObject.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MicrosoftIcon, SqliteIcon, PostgreSqlIcon, MySqlIcon, ServerIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+
+function getIcon(engine) {
+  switch (engine) {
+    case 'mssql':
+      return MicrosoftIcon;
+    case 'sqlite':
+      return SqliteIcon;
+    case 'postgres':
+      return PostgreSqlIcon;
+    case 'mysql':
+      return MySqlIcon;
+  }
+  return ServerIcon;
+}
+
+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 connectionAppObject({ _id, server, displayName, engine }) {
+  const title = displayName || server;
+  const key = _id;
+  const Icon = getIcon(engine);
+
+  return { title, key, Icon, Menu };
+}

packages/web/src/appobj/constraintAppObject.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PrimaryKeyIcon, ForeignKeyIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+import { openNewTab } from '../utility/common';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+/** @param props {import('dbgate').ConstraintInfo} */
+function getConstraintIcon(props) {
+  if (props.constraintType == 'primaryKey') return PrimaryKeyIcon;
+  if (props.constraintType == 'foreignKey') return ForeignKeyIcon;
+  return null;
+}
+
+/** @param props {import('dbgate').ConstraintInfo} */
+export default function constraintAppObject(props, { setOpenedTabs }) {
+  const title = props.constraintName;
+  const key = title;
+  const Icon = getConstraintIcon(props);
+
+  return { title, key, Icon };
+}

packages/web/src/appobj/databaseAppObject.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { 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 };
+}

packages/web/src/appobj/tableAppObject.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { TableIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+import { openNewTab } from '../utility/common';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+function openTableDetail(setOpenedTabs, tabComponent, { schemaName, pureName, conid, database }) {
+  openNewTab(setOpenedTabs, {
+    title: pureName,
+    icon: 'table2.svg',
+    tabComponent,
+    props: {
+      schemaName,
+      pureName,
+      conid,
+      database,
+    },
+  });
+}
+
+function Menu({ data, makeAppObj, setOpenedTabs }) {
+  const handleOpenData = () => {
+    openTableDetail(setOpenedTabs, 'TableDataTab', data);
+  };
+  const handleOpenStructure = () => {
+    openTableDetail(setOpenedTabs, 'TableStructureTab', data);
+  };
+  const handleOpenCreateScript = () => {
+    openTableDetail(setOpenedTabs, 'TableCreateScriptTab', data);
+  };
+  return (
+    <>
+      <DropDownMenuItem onClick={handleOpenData}>Open data</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleOpenStructure}>Open structure</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleOpenCreateScript}>Create SQL</DropDownMenuItem>
+    </>
+  );
+}
+
+export default function tableAppObject({ conid, database, pureName, schemaName }, { setOpenedTabs }) {
+  const title = schemaName ? `${schemaName}.${pureName}` : pureName;
+  const key = title;
+  const Icon = TableIcon;
+  const onClick = ({ schemaName, pureName }) => {
+    openTableDetail(setOpenedTabs, 'TableDataTab', {
+      schemaName,
+      pureName,
+      conid,
+      database,
+    });
+  };
+
+  return { title, key, Icon, Menu, onClick };
+}