diff --git a/packages/web/src/designer/ColumnLine.svelte b/packages/web/src/designer/ColumnLine.svelte
index 61c9f50b..9e5d3dc5 100644
--- a/packages/web/src/designer/ColumnLine.svelte
+++ b/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 },
+ ];
+ }
tbl.getDomTable());
+ $: domTables = _.pickBy(_.mapValues(tableRefs, (tbl: any) => tbl?.getDomTable()));
function fixPositions(tables) {
const minLeft = _.min(tables.map(x => x.left));
diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte
index b0693df3..ece46164 100644
--- a/packages/web/src/designer/DesignerTable.svelte
+++ b/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,
+ }),
+ },
+ ];
+ }
{alias || pureName}
onRemoveTable(table)}>
@@ -94,6 +128,7 @@
{sourceDragColumn$}
{targetDragColumn$}
{onCreateReference}
+ {onAddReferenceByColumn}
bind:domLine={columnRefs[column.columnName]}
/>
{/each}