query design

packages/web/src/designer/Designer.js

@@ -21,6 +21,11 @@ const Canvas = styled.div`
   position: relative;
 `;
 
+const EmptyInfo = styled.div`
+  margin: 50px;
+  font-size: 20px;
+`;
+
 export default function Designer({ value, onChange, conid, database }) {
   const { tables, references } = value || {};
   const theme = useTheme();
@@ -46,7 +51,7 @@ export default function Designer({ value, onChange, conid, database }) {
     onChange((current) => {
       const foreignKeys = _.compact([
         ...(json.foreignKeys || []).map((fk) => {
-          const tables = (current.tables || []).filter(
+          const tables = ((current || {}).tables || []).filter(
             (tbl) => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName
           );
           if (tables.length == 1)
@@ -58,7 +63,7 @@ export default function Designer({ value, onChange, conid, database }) {
           return null;
         }),
         ..._.flatten(
-          (current.tables || []).map((tbl) =>
+          ((current || {}).tables || []).map((tbl) =>
             (tbl.foreignKeys || []).map((fk) => {
               if (fk.refTableName == json.pureName && fk.refSchemaName == json.schemaName) {
                 return {
@@ -75,11 +80,11 @@ export default function Designer({ value, onChange, conid, database }) {
 
       return {
         ...current,
-        tables: [...(current.tables || []), json],
+        tables: [...((current || {}).tables || []), json],
         references:
           foreignKeys.length == 1
             ? [
-                ...(current.references || []),
+                ...((current || {}).references || []),
                 {
                   designerId: uuidv1(),
                   sourceId: foreignKeys[0].sourceId,
@@ -91,7 +96,7 @@ export default function Designer({ value, onChange, conid, database }) {
                   })),
                 },
               ]
-            : current.references,
+            : (current || {}).references,
       };
     });
   };
@@ -283,6 +288,7 @@ export default function Designer({ value, onChange, conid, database }) {
 
   return (
     <Wrapper theme={theme}>
+      {(tables || []).length == 0 && <EmptyInfo>Drag &amp; drop tables or views from left panel list here</EmptyInfo>}
       <Canvas onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} ref={wrapperRef}>
         {(references || []).map((ref) => (
           <DesignerReference

packages/web/src/designer/DesignerTable.js

@@ -23,7 +23,11 @@ const Header = styled.div`
   font-weight: bold;
   text-align: center;
   padding: 2px;
-  background: ${(props) => props.theme.designtable_background_blue[2]};
+  background: ${(props) =>
+    // @ts-ignore
+    props.objectTypeField == 'views'
+      ? props.theme.designtable_background_magenta[2]
+      : props.theme.designtable_background_blue[2]};
   border-bottom: 1px solid ${(props) => props.theme.border};
   cursor: pointer;
   display: flex;
@@ -140,7 +144,7 @@ export default function DesignerTable({
   setChangeToken,
   designer,
 }) {
-  const { pureName, columns, left, top, designerId, alias } = table;
+  const { pureName, columns, left, top, designerId, alias, objectTypeField } = table;
   const [movingPosition, setMovingPosition] = React.useState(null);
   const movingPositionRef = React.useRef(null);
   const theme = useTheme();
@@ -305,7 +309,13 @@ export default function DesignerTable({
       onMouseDown={() => onBringToFront(table)}
       ref={(dom) => dispatchDomColumn('', dom)}
     >
-      <Header onMouseDown={headerMouseDown} theme={theme} onContextMenu={handleHeaderContextMenu}>
+      <Header
+        onMouseDown={headerMouseDown}
+        theme={theme}
+        onContextMenu={handleHeaderContextMenu}
+        // @ts-ignore
+        objectTypeField={objectTypeField}
+      >
         <HeaderLabel>{alias || pureName}</HeaderLabel>
         <CloseWrapper onClick={() => onRemoveTable(table)} theme={theme}>
           <FontIcon icon="icon close" />

packages/web/src/widgets/Toolbar.js

@@ -5,7 +5,13 @@ import styled from 'styled-components';
 import ToolbarButton, { ToolbarButtonExternalImage } from './ToolbarButton';
 import useNewQuery, { useNewQueryDesign } from '../query/useNewQuery';
 import { useConfig, useFavorites } from '../utility/metadataLoaders';
-import { useSetOpenedTabs, useOpenedTabs, useCurrentTheme, useSetCurrentTheme } from '../utility/globalState';
+import {
+  useSetOpenedTabs,
+  useOpenedTabs,
+  useCurrentTheme,
+  useSetCurrentTheme,
+  useCurrentDatabase,
+} from '../utility/globalState';
 import useNewFreeTable from '../freetable/useNewFreeTable';
 import ImportExportModal from '../modals/ImportExportModal';
 import useShowModal from '../modals/showModal';
@@ -30,6 +36,7 @@ export default function ToolBar({ toolbarPortalRef }) {
   const newQueryDesign = useNewQueryDesign();
   const newFreeTable = useNewFreeTable();
   const config = useConfig();
+  const currentDatabase = useCurrentDatabase();
   // const toolbar = config.toolbar || [];
   const setOpenedTabs = useSetOpenedTabs();
   const openedTabs = useOpenedTabs();
@@ -133,9 +140,11 @@ export default function ToolBar({ toolbarPortalRef }) {
       <ToolbarButton onClick={newQuery} icon="icon sql-file">
         New Query
       </ToolbarButton>
+      {!!currentDatabase && (
         <ToolbarButton onClick={newQueryDesign} icon="icon query-design">
           Query Designer
         </ToolbarButton>
+      )}
       <ToolbarButton onClick={newFreeTable} icon="icon table">
         Free table editor
       </ToolbarButton>