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}