Created tab for adding key, replaced modal

2026-04-18 02:06:01 +00:00 · 2025-12-09 13:55:21 +01:00
parent 7024e4b40d
commit 056ee0d58e
3 changed files with 172 additions and 16 deletions
--- a/packages/web/src/tabs/DbKeyTab.svelte
+++ b/packages/web/src/tabs/DbKeyTab.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+  import DbKeyItemDetail from '../dbkeyvalue/DbKeyItemDetail.svelte';
+  import FormFieldTemplateLarge from "../forms/FormFieldTemplateLarge.svelte";
+  import FormProvider from '../forms/FormProvider.svelte';
+  import SelectField from '../forms/SelectField.svelte';
+  import TextField from "../forms/TextField.svelte";
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import { _t } from '../translations';
+  import { apiCall } from '../utility/api';
+  import { showSnackbarSuccess } from '../utility/snackbar';
+  import { findEngineDriver } from 'dbgate-tools';
+  import { activeDbKeysStore, getExtensions, openedTabs } from '../stores';
+  import { useConnectionInfo } from '../utility/metadataLoaders';
+  import openNewTab from '../utility/openNewTab';
+
+  export let conid;
+  export let database;
+  export let tabid;
+
+  $: connection = useConnectionInfo({ conid });
+  $: driver = $connection && findEngineDriver($connection, getExtensions());
+
+  let item = {};
+  let keyName = '';
+  $: type = driver?.supportedKeyTypes?.[0]?.name || '';
+
+  $: console.log('DbKeyTab debug:', { conid, database, connection: $connection, driver, hasTypes: driver?.supportedKeyTypes?.length });
+
+  async function handleSave() {
+    if (!driver) return;
+    
+    const typeConfig = driver.supportedKeyTypes.find(x => x.name == type);
+    
+    await apiCall('database-connections/call-method', {
+      conid,
+      database,
+      method: typeConfig.addMethod,
+      args: [keyName, ...typeConfig.dbKeyFields.map(fld => item[fld.name])],
+    });
+
+    showSnackbarSuccess('Key created successfully');
+
+    $activeDbKeysStore = {
+      ...$activeDbKeysStore,
+      [`${conid}:${database}`]: keyName,
+    };
+
+    openedTabs.update(tabs => 
+      tabs.map(tab => 
+        tab.tabid === tabid 
+          ? { ...tab, closedTime: new Date().getTime(), selected: false }
+          : tab
+      )
+    );
+
+    openNewTab({
+      tabComponent: 'DbKeyDetailTab',
+      title: keyName || '(no name)',
+      icon: 'img keydb',
+      props: {
+        isDefaultBrowser: true,
+        conid,
+        database,
+      },
+    });
+  }
+</script>
+
+{#if driver && driver.supportedKeyTypes && driver.supportedKeyTypes.length > 0}
+  <FormProvider>
+    <div class="wrapper">
+      <div class="container">
+        <FormFieldTemplateLarge label={_t('addDbKeyModal.key', { defaultMessage: 'Key' })} type="text" noMargin>
+          <TextField
+            value={keyName}
+            on:change={e => {
+              // @ts-ignore
+              keyName = e.target.value;
+            }}
+          />
+        </FormFieldTemplateLarge>
+
+        <div class="m-3" />
+
+        <FormFieldTemplateLarge label={_t('addDbKeyModal.type', { defaultMessage: 'Type' })} type="combo" noMargin>
+          <SelectField
+            options={driver.supportedKeyTypes.map(t => ({ value: t.name, label: t.label }))}
+            value={type}
+            isNative
+            on:change={e => {
+              type = e.detail;
+            }}
+          />
+        </FormFieldTemplateLarge>
+
+        <DbKeyItemDetail
+          dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
+          {item}
+          onChangeItem={value => {
+            item = value;
+          }}
+        />
+
+        <div class="m-3" />
+
+        <div class="button-container">
+          <FormStyledButton 
+            value={_t('common.save', { defaultMessage: 'Save' })} 
+            on:click={handleSave}
+            disabled={!keyName || keyName.trim() === ''}
+          />
+        </div>
+      </div>
+    </div>
+  </FormProvider>
+{:else}
+  <div class="wrapper">
+    <div class="container">
+      <div class="loading">Loading...</div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+  }
+
+  .button-container {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+  }
+</style>