query designer context menu

packages/web/src/designer/ColumnLine.svelte

@@ -5,6 +5,7 @@
 
   import CheckboxField from '../forms/CheckboxField.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
+  import contextMenu from '../utility/contextMenu';
   export let column;
   export let table;
   export let designer;
@@ -14,10 +15,34 @@
   export let sourceDragColumn$;
   export let targetDragColumn$;
   export let onCreateReference;
+  export let onAddReferenceByColumn;
 
   $: designerColumn = (designer.columns || []).find(
     x => x.designerId == designerId && x.columnName == column.columnName
   );
+
+  function createMenu() {
+    const foreignKey = findForeignKeyForColumn(table, column);
+    const setSortOrder = sortOrder => {
+      onChangeColumn(
+        {
+          ...column,
+          designerId,
+        },
+        col => ({ ...col, sortOrder })
+      );
+    };
+    const addReference = () => {
+      onAddReferenceByColumn(designerId, foreignKey);
+    };
+
+    return [
+      { text: 'Sort ascending', onClick: () => setSortOrder(1) },
+      { text: 'Sort descending', onClick: () => setSortOrder(-1) },
+      { text: 'Unsort', onClick: () => setSortOrder(0) },
+      foreignKey && { text: 'Add reference', onClick: addReference },
+    ];
+  }
 </script>
 
 <div
@@ -59,6 +84,7 @@
   class:isDragTarget={$targetDragColumn$ &&
     $targetDragColumn$.designerId == designerId &&
     $targetDragColumn$.columnName == column.columnName}
+  use:contextMenu={createMenu}
 >
   <CheckboxField
     checked={!!(designer.columns || []).find(

packages/web/src/designer/Designer.svelte

@@ -28,7 +28,7 @@
 
   const tableRefs = {};
   const referenceRefs = {};
-  $: domTables = _.mapValues(tableRefs, (tbl: any) => tbl.getDomTable());
+  $: domTables = _.pickBy(_.mapValues(tableRefs, (tbl: any) => tbl?.getDomTable()));
 
   function fixPositions(tables) {
     const minLeft = _.min(tables.map(x => x.left));

packages/web/src/designer/DesignerTable.svelte

@@ -2,6 +2,9 @@
   import { tick } from 'svelte';
 
   import FontIcon from '../icons/FontIcon.svelte';
+  import InputTextModal from '../modals/InputTextModal.svelte';
+  import { showModal } from '../modals/modalTools';
+  import contextMenu from '../utility/contextMenu';
   import moveDrag from '../utility/moveDrag';
   import ColumnLine from './ColumnLine.svelte';
   import DomTableRef from './DomTableRef';
@@ -65,6 +68,36 @@
     domRefs[''] = domWrapper;
     return new DomTableRef(table, domRefs, domCanvas);
   }
+
+  const handleSetTableAlias = () => {
+    showModal(InputTextModal, {
+      value: alias || '',
+      label: 'New alias',
+      header: 'Set table alias',
+      onConfirm: newAlias => {
+        onChangeTable({
+          ...table,
+          alias: newAlias,
+        });
+      },
+    });
+  };
+
+  function createMenu() {
+    return [
+      { text: 'Remove', onClick: () => onRemoveTable({ designerId }) },
+      { divider: true },
+      { text: 'Set table alias', onClick: handleSetTableAlias },
+      alias && {
+        text: 'Remove table alias',
+        onClick: () =>
+          onChangeTable({
+            ...table,
+            alias: null,
+          }),
+      },
+    ];
+  }
 </script>
 
 <div
@@ -77,6 +110,7 @@
     class:isTable={objectTypeField == 'tables'}
     class:isView={objectTypeField == 'views'}
     use:moveDrag={[handleMoveStart, handleMove, handleMoveEnd]}
+    use:contextMenu={createMenu}
   >
     <div>{alias || pureName}</div>
     <div class="close" on:click={() => onRemoveTable(table)}>
@@ -94,6 +128,7 @@
         {sourceDragColumn$}
         {targetDragColumn$}
         {onCreateReference}
+        {onAddReferenceByColumn}
         bind:domLine={columnRefs[column.columnName]}
       />
     {/each}