query parameters #913

packages/web/src/modals/QueryParametersModal.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import { apiCall } from '../utility/api';
+
+  import getElectron from '../utility/getElectron';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let parameterNames;
+  export let parameterValues;
+  export let onExecute;
+
+  const handleSubmit = async e => {
+    closeCurrentModal();
+    onExecute(e.detail);
+  };
+
+  const handleClose = () => {
+    closeCurrentModal();
+  };
+</script>
+
+<FormProvider initialValues={parameterValues}>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">Edit query parameters</svelte:fragment>
+
+    {#each parameterNames as parameterName, index}
+      <FormTextField label={parameterName} name={parameterName} focused={index == 0} />
+    {/each}
+    <svelte:fragment slot="footer">
+      <FormSubmit value="Run query" on:click={handleSubmit} />
+      <FormStyledButton value="Close" on:click={handleClose} />
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>