diff --git a/packages/web/src/buttons/NewObjectButton.svelte b/packages/web/src/buttons/NewObjectButton.svelte index 70c718f0b..746c482ea 100644 --- a/packages/web/src/buttons/NewObjectButton.svelte +++ b/packages/web/src/buttons/NewObjectButton.svelte @@ -4,11 +4,15 @@ export let icon; export let title; export let description; + export let enabled; + export let colorClass; + + $: disabled = !enabled; -
+
- +
{title} {#if description} @@ -23,13 +27,16 @@ background-color: var(--theme-bg-1); border-radius: 4px; border: 1px solid var(--theme-border); - cursor: pointer; display: flex; flex-direction: column; align-items: center; } - .new-object-button:hover { + + .new-object-button.enabled { + cursor: pointer; + } + .new-object-button.enabled:hover { background-color: var(--theme-bg-2); } .icon { @@ -48,4 +55,18 @@ font-size: 0.9em; color: var(--theme-font-2); } + + .new-object-button.disabled .title { + color: var(--theme-font-2); + } + .new-object-button.disabled .description { + color: var(--theme-font-2); + } + .new-object-button.disabled .icon { + color: var(--theme-font-2); + } + .new-object-button.disabled { + cursor: not-allowed; + opacity: 0.5; + } diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index f5adfa5b1..37abea18e 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -24,6 +24,18 @@ onClick: () => getCurrentEditor().exportDiagram(), testEnabled: () => getCurrentEditor()?.canExport(), }); + + registerCommand({ + id: 'diagram.deleteSelectedTables', + category: 'Designer', + toolbarName: 'Remove', + name: 'Remove selected tables', + icon: 'icon delete', + toolbar: true, + isRelatedToTab: true, + onClick: () => getCurrentEditor().deleteSelectedTables(), + testEnabled: () => getCurrentEditor()?.areTablesSelected(), + });
{#if !(tables?.length > 0)}
Drag & drop tables or views from left panel here
+ + {#if allowAddTablesButton} +
+ +
+ {/if} {/if}
diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte index c38c4434c..d2c5ef036 100644 --- a/packages/web/src/icons/FontIcon.svelte +++ b/packages/web/src/icons/FontIcon.svelte @@ -31,6 +31,7 @@ export let padLeft = false; export let padRight = false; export let style = null; + export let colorClass = null; const iconNames = { 'icon minus-box': 'mdi mdi-minus-box-outline', @@ -143,6 +144,7 @@ 'icon markdown': 'mdi mdi-application', 'icon preview': 'mdi mdi-file-find', 'icon eye': 'mdi mdi-eye', + 'icon perspective': 'mdi mdi-eye', 'icon auditlog': 'mdi mdi-eye', 'icon check-all': 'mdi mdi-check-all', 'icon checkbox-blank': 'mdi mdi-checkbox-blank-outline', @@ -235,6 +237,8 @@ 'icon limit': 'mdi mdi-car-speed-limiter', 'icon chart': 'mdi mdi-chart-bar', + 'icon cloud-connection': 'mdi mdi-cloud-lock', + 'icon diagram': 'mdi mdi-graph', 'img ok': 'mdi mdi-check-circle color-icon-green', 'img ok-inv': 'mdi mdi-check-circle color-icon-inv-green', @@ -334,14 +338,11 @@ 'img db-restore': 'mdi mdi-database-import color-icon-red', 'img settings': 'mdi mdi-cog color-icon-blue', 'img data-deploy': 'mdi mdi-database-settings color-icon-green', - - 'img new-sql-file': 'mdi mdi-file color-icon-blue', - 'img new-connection': 'mdi mdi-connection color-icon-yellow', }; { + newQuery({ multiTabIndex }); + }, + }, + { + icon: 'icon connection', + colorClass: 'color-icon-yellow', + title: 'Connection', + description: 'Database connection stored locally', + command: 'new.connection', + changeWidget: 'database', + }, + { + icon: 'icon cloud-connection', + colorClass: 'color-icon-blue', + title: 'Connection on Cloud', + description: 'Database connection stored on DbGate Cloud', + command: 'new.connectionOnCloud', + changeWidget: 'cloud-private', + }, + { + icon: 'icon query-design', + colorClass: 'color-icon-red', + title: 'Query Designer', + description: 'Design SQL queries visually', + command: 'new.queryDesign', + }, + { + icon: 'icon diagram', + colorClass: 'color-icon-blue', + title: 'ER Diagram', + description: 'Visualize database structure', + command: 'new.diagram', + }, + { + icon: 'icon perspective', + colorClass: 'color-icon-yellow', + title: 'Perspective', + description: 'Join complex data from multiple databases', + command: 'new.perspective', + }, + { + icon: 'icon table', + colorClass: 'color-icon-blue', + title: 'Table', + description: 'Create table in the current database', + command: 'new.table', + }, + { + icon: 'icon sql-generator', + colorClass: 'color-icon-green', + title: 'SQL Generator', + description: 'Generate SQL scripts for database objects', + command: 'sql.generator', + }, + ];
Create new
- { - newQuery({ multiTabIndex }); - closeCurrentModal(); - }} - /> - {#if $commandsCustomized['new.connection']?.enabled} + {#each NEW_ITEMS as item} + {@const enabled = item.command ? $commandsCustomized[item.command]?.enabled : true} { - $selectedWidget = 'database'; - runCommand('new.connection'); + if (!enabled) return; + if (item.action) { + item.action(); + } else if (item.command) { + runCommand(item.command); + } + if (item.changeWidget) { + $selectedWidget = item.changeWidget; + } closeCurrentModal(); }} /> - {/if} - {#if $commandsCustomized['new.connectionOnCloud']?.enabled} - { - $selectedWidget = 'cloud-private'; - runCommand('new.connectionOnCloud'); - closeCurrentModal(); - }} - /> - {/if} - {#if $commandsCustomized['new.queryDesign']?.enabled} - { - runCommand('new.queryDesign'); - closeCurrentModal(); - }} - /> - {/if} - {#if $commandsCustomized['new.diagram']?.enabled} - { - runCommand('new.diagram'); - closeCurrentModal(); - }} - /> - {/if} - {#if $commandsCustomized['new.perspective']?.enabled} - { - runCommand('new.perspective'); - closeCurrentModal(); - }} - /> - {/if} - {#if $commandsCustomized['new.table']?.enabled} - { - runCommand('new.table'); - closeCurrentModal(); - }} - /> - {/if} + {/each}
diff --git a/packages/web/src/tabs/DiagramTab.svelte b/packages/web/src/tabs/DiagramTab.svelte index 109bc2614..735f29670 100644 --- a/packages/web/src/tabs/DiagramTab.svelte +++ b/packages/web/src/tabs/DiagramTab.svelte @@ -162,6 +162,7 @@ + {#if isProApp()}