forms

packages/web/src/modals/ConnectionModal.svelte

@@ -3,18 +3,42 @@
   import FormButton from '../forms/FormButton.svelte';
   import FormProvider from '../forms/FormProvider.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
+  import TabControl from '../widgets/TabControl.svelte';
+  import ConnectionModalDriverFields from './ConnectionModalDriverFields.svelte';
+  import FormFieldTemplateLarge from './FormFieldTemplateLarge.svelte';
 
   import ModalBase from './ModalBase.svelte';
+
+  export let connection;
 </script>
 
-<FormProvider>
-  <ModalBase {...$$restProps}>
+<FormProvider
+  template={FormFieldTemplateLarge}
+  initialValues={connection || { server: 'localhost', engine: 'mssql@dbgate-plugin-mssql' }}
+>
+  <ModalBase {...$$restProps} noPadding>
     <div slot="header">Add connection</div>
-    xxx
+
+    <TabControl
+      isInline
+      tabs={[
+        {
+          label: 'Main',
+          component: ConnectionModalDriverFields,
+        },
+        {
+          label: 'SSH Tunnel',
+          slot: 1,
+        },
+      ]}
+    >
+      <div slot="1">SSH</div>
+    </TabControl>
+
     <div slot="footer" class="flex">
       <div class="buttons">
         <FormButton value="Test" />
-        <FormSubmit value="Save" on:click={() => console.log('SAVE')} />
+        <FormSubmit value="Save" on:click={v => console.log('SAVE', v.detail)} />
       </div>
     </div>
   </ModalBase>

packages/web/src/modals/ConnectionModalDriverFields.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { getFormContext } from '../forms/FormProviderCore.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
+
+  import FormTextField from '../forms/FormTextField.svelte';
+  import { extensions } from '../stores';
+  import { useAuthTypes } from '../utility/metadataLoaders';
+
+  const { values } = getFormContext();
+  $: authType = $values.authType;
+  $: engine = $values.engine;
+  $: authTypes = useAuthTypes({ engine });
+  $: currentAuthType = $authTypes && $authTypes.find(x => x.name == authType);
+  $: disabledFields = (currentAuthType ? currentAuthType.disabledFields : null) || [];
+  $: driver = $extensions.drivers.find(x => x.engine == engine);
+</script>
+
+<FormSelectField
+  label="Database engine"
+  name="engine"
+  options={[
+    { label: '(select driver)', value: '' },
+    ...$extensions.drivers.map(driver => ({
+      value: driver.engine,
+      label: driver.title,
+    })),
+  ]}
+/>
+
+<div class="row">
+  <div class="col-9 mr-1">
+    <FormTextField
+      label="Server"
+      name="server"
+      disabled={disabledFields.includes('server')}
+      templateProps={{ noMargin: true }}
+    />
+  </div>
+  <div class="col-3 mr-1">
+    <FormTextField
+      label="Port"
+      name="port"
+      disabled={disabledFields.includes('port')}
+      templateProps={{ noMargin: true }}
+      placeholder={driver && driver.defaultPort}
+    />
+  </div>
+</div>
+
+<style>
+  .row {
+    margin: var(--dim-large-form-margin);
+    display: flex;
+  }
+</style>

packages/web/src/modals/FormFieldTemplateLarge.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  export let type;
+  export let label;
+  export let noMargin;
+  export let disabled = false;
+  export let labelProps: any = {};
+</script>
+
+<div class="largeFormMarker" class:noMargin>
+  {#if type == 'checkbox'}
+    <slot />
+    <span {...labelProps} on:click={labelProps.onClick} class:disabled>{label}</span>
+  {:else}
+    <div class="label" {...labelProps} on:click={labelProps.onClick}>
+      <span {...labelProps} on:click={labelProps.onClick} class:disabled>{label}</span>
+    </div>
+    <slot />
+  {/if}
+</div>
+
+<style>
+  .label {
+    margin-bottom: 3px;
+    color: var(--theme-font-3);
+  }
+  .largeFormMarker:not(.noMargin) {
+    margin: var(--dim-large-form-margin);
+  }
+  .disabled {
+    color: var(--theme-font-3);
+  }
+</style>

packages/web/src/modals/ModalBase.svelte

@@ -4,8 +4,8 @@
   import clickOutside from '../utility/clickOutside';
   import keycodes from '../utility/keycodes';
 
-  export let fullScreen;
-  export let noPadding;
+  export let fullScreen = false;
+  export let noPadding = false;
   export let modalId;
 
   function handleCloseModal() {