Merge branch 'redis'

packages/web/src/modals/AddDbKeyModal.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import DbKeyItemDetail from '../dbkeyvalue/DbKeyItemDetail.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import SelectField from '../forms/SelectField.svelte';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let conid;
+  export let database;
+  export let driver;
+  export let onConfirm;
+
+  let item = {};
+  let type = driver.supportedKeyTypes[0].name;
+
+  const handleSubmit = async () => {
+    closeCurrentModal();
+    onConfirm(item);
+  };
+</script>
+
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">Add item</svelte:fragment>
+
+    <div class="container">
+      <SelectField
+        options={driver.supportedKeyTypes.map(t => ({ value: t.name, label: t.label }))}
+        value={type}
+        on:change={e => {
+          type = e.detail;
+        }}
+      />
+
+      <DbKeyItemDetail
+      dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
+        {item}
+        onChangeItem={value => {
+          item = value;
+        }}
+      />
+    </div>
+
+    <svelte:fragment slot="footer">
+      <FormStyledButton value="OK" on:click={e => handleSubmit()} />
+      <FormStyledButton type="button" value="Cancel" on:click={closeCurrentModal} />
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>
+
+<style>
+  .container {
+    display: flex;
+    height: 30vh;
+  }
+</style>

packages/web/src/modals/ConnectionModalDriverFields.svelte

@@ -26,6 +26,9 @@
   $: disabledFields = (currentAuthType ? currentAuthType.disabledFields : null) || [];
   $: driver = $extensions.drivers.find(x => x.engine == engine);
   $: defaultDatabase = $values.defaultDatabase;
+
+  $: showUser = !driver?.showConnectionField || driver.showConnectionField('user', $values);
+  $: showPassword = !driver?.showConnectionField || driver.showConnectionField('password', $values);
 </script>
 
 <FormSelectField
@@ -100,17 +103,19 @@
   </div>
 {/if}
 
-{#if !driver?.showConnectionField || driver.showConnectionField('user', $values)}
+{#if showUser && showPassword}
   <div class="row">
-    <div class="col-6 mr-1">
-      <FormTextField
-        label="User"
-        name="user"
-        disabled={disabledFields.includes('user')}
-        templateProps={{ noMargin: true }}
-      />
-    </div>
-    {#if !driver?.showConnectionField || driver.showConnectionField('password', $values)}
+    {#if showUser}
+      <div class="col-6 mr-1">
+        <FormTextField
+          label="User"
+          name="user"
+          disabled={disabledFields.includes('user')}
+          templateProps={{ noMargin: true }}
+        />
+      </div>
+    {/if}
+    {#if showPassword}
       <div class="col-6 mr-1">
         <FormPasswordField
           label="Password"
@@ -122,8 +127,14 @@
     {/if}
   </div>
 {/if}
+{#if showUser && !showPassword}
+  <FormTextField label="User" name="user" disabled={disabledFields.includes('user')} />
+{/if}
+{#if !showUser && showPassword}
+  <FormPasswordField label="Password" name="password" disabled={disabledFields.includes('password')} />
+{/if}
 
-{#if !disabledFields.includes('password') && (!driver?.showConnectionField || driver.showConnectionField('password', $values))}
+{#if !disabledFields.includes('password') && showPassword}
   <FormSelectField
     label="Password mode"
     isNative

packages/web/src/modals/DbKeyAddItemModal.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import DbKeyItemDetail from '../dbkeyvalue/DbKeyItemDetail.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let keyInfo;
+  export let label;
+  export let onConfirm;
+
+  let item = {};
+
+  const handleSubmit = async () => {
+    closeCurrentModal();
+    onConfirm(item);
+  };
+</script>
+
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">Add item</svelte:fragment>
+
+    <div class="container">
+      <DbKeyItemDetail
+      dbKeyFields={keyInfo.keyType.dbKeyFields}
+        {item}
+        onChangeItem={value => {
+          item = value;
+        }}
+      />
+    </div>
+
+    <svelte:fragment slot="footer">
+      <FormStyledButton value="OK" on:click={e => handleSubmit()} />
+      <FormStyledButton type="button" value="Cancel" on:click={closeCurrentModal} />
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>
+
+<style>
+  .container {
+    display: flex;
+    height: 30vh;
+  }
+</style>