add new key works

packages/types/engines.d.ts

@@ -42,13 +42,22 @@ export interface NewObjectTemplate {
   sql: string;
 }
 
+export interface SupportedDbKeyType {
+  name: string;
+  label: string;
+  dbKeyFields: { name: string }[];
+  addMethod: string;
+  keyColumn?: string;
+  showItemList?: boolean;
+}
+
 export interface EngineDriver {
   engine: string;
   title: string;
   defaultPort?: number;
   databaseEngineTypes: string[];
   readOnlySessions: boolean;
-  supportedKeyTypes: { name: string; label: string }[];
+  supportedKeyTypes: SupportedDbKeyType[];
   supportsDatabaseUrl?: boolean;
   isElectronOnly?: boolean;
   showConnectionField?: (field: string, values: any) => boolean;

packages/web/src/commands/stdCommands.ts

@@ -238,6 +238,16 @@ registerCommand({
       conid: connection._id,
       database,
       driver,
+      onConfirm: async item => {
+        const type = driver.supportedKeyTypes.find(x => x.name == item.type);
+
+        await apiCall('database-connections/call-method', {
+          conid: connection._id,
+          database,
+          method: type.addMethod,
+          args: [item.keyName, ...type.dbKeyFields.map(fld => item[fld.name])],
+        });
+      },
     });
   },
 });

packages/web/src/modals/AddDbKeyModal.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
   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 ModalBase from './ModalBase.svelte';
   import { closeCurrentModal } from './modalTools';
 
@@ -13,11 +15,12 @@
   export let onConfirm;
 
   let item = {};
+  let keyName = '';
   let type = driver.supportedKeyTypes[0].name;
 
   const handleSubmit = async () => {
     closeCurrentModal();
-    onConfirm(item);
+    onConfirm({ type, keyName, ...item });
   };
 </script>
 
@@ -26,16 +29,29 @@
     <svelte:fragment slot="header">Add item</svelte:fragment>
 
     <div class="container">
-      <SelectField
+      <FormFieldTemplateLarge label="Type" type="combo">
-        options={driver.supportedKeyTypes.map(t => ({ value: t.name, label: t.label }))}
+        <SelectField
-        value={type}
+          options={driver.supportedKeyTypes.map(t => ({ value: t.name, label: t.label }))}
-        on:change={e => {
+          value={type}
-          type = e.detail;
+          isNative
-        }}
+          on:change={e => {
-      />
+            type = e.detail;
+          }}
+        />
+      </FormFieldTemplateLarge>
+
+      <FormFieldTemplateLarge label="Name" type="text">
+        <TextField
+          value={keyName}
+          on:change={e => {
+            // @ts-ignore
+            keyName = e.target.value;
+          }}
+        />
+      </FormFieldTemplateLarge>
 
       <DbKeyItemDetail
-      dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
+        dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
         {item}
         onChangeItem={value => {
           item = value;
@@ -53,6 +69,7 @@
 <style>
   .container {
     display: flex;
+    flex-direction: column;
     height: 30vh;
   }
 </style>