query parameters #913

packages/web/src/icons/FontIcon.svelte

@@ -199,6 +199,8 @@
     'icon type-null': 'mdi mdi-code-equal',
     'icon type-unknown': 'mdi mdi-help-box',
 
+    'icon at': 'mdi mdi-at',
+
     'img ok': 'mdi mdi-check-circle color-icon-green',
     'img ok-inv': 'mdi mdi-check-circle color-icon-inv-green',
     'img alert': 'mdi mdi-alert-circle color-icon-blue',

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>

packages/web/src/tabs/QueryTab.svelte

@@ -86,6 +86,9 @@
   import ToolStripSaveButton from '../buttons/ToolStripSaveButton.svelte';
   import ToolStripCommandSplitButton from '../buttons/ToolStripCommandSplitButton.svelte';
   import { getClipboardText } from '../utility/clipboard';
+  import ToolStripDropDownButton from '../buttons/ToolStripDropDownButton.svelte';
+  import { extractQueryParameters, replaceQueryParameters } from 'dbgate-query-splitter';
+  import QueryParametersModal from '../modals/QueryParametersModal.svelte';
 
   export let tabid;
   export let conid;
@@ -94,6 +97,33 @@
 
   export const activator = createActivator('QueryTab', false);
 
+  const QUERY_PARAMETER_STYLES = [
+    {
+      value: '',
+      text: '(no parameters)',
+    },
+    {
+      value: '?',
+      text: '? (positional)',
+    },
+    {
+      value: '@',
+      text: '@variable',
+    },
+    {
+      value: ':',
+      text: ':variable',
+    },
+    {
+      value: '$',
+      text: '$variable',
+    },
+    {
+      value: '#',
+      text: '#variable',
+    },
+  ];
+
   const tabVisible: any = getContext('tabVisible');
   const timerLabel = useTimerLabel();
 
@@ -179,8 +209,38 @@
     visibleResultTabs = !visibleResultTabs;
   }
 
+  function getParameterSplitterOptions() {
+    if (!queryParameterStyle) {
+      return null;
+    }
+
+    if (!driver) {
+      return null;
+    }
+
+    return { ...driver.getQuerySplitterOptions('editor'), queryParameterStyle };
+  }
+
   async function executeCore(sql, startLine = 0) {
     if (busy) return;
+
+    const parameters = extractQueryParameters(sql, getParameterSplitterOptions());
+
+    if (parameters.length > 0) {
+      showModal(QueryParametersModal, {
+        parameterNames: parameters,
+        parameterValues: parameters.reduce((acc, x) => ({ ...acc, [x]: '' }), {}),
+        onExecute: values => {
+          const newSql = replaceQueryParameters(sql, values, getParameterSplitterOptions());
+          executeCoreWithParams(newSql, startLine);
+        },
+      });
+    } else {
+      executeCoreWithParams(sql, startLine);
+    }
+  }
+
+  async function executeCoreWithParams(sql, startLine = 0) {
     if (!sql || !sql.trim()) {
       showSnackbarError('Skipped executing empty query');
       return;
@@ -349,6 +409,7 @@
   }
 
   let isInitialized = false;
+  let queryParameterStyle = ':';
 </script>
 
 <ToolStripContainer bind:this={domToolStrip}>
@@ -421,6 +482,17 @@
     {#if resultCount == 1}
       <ToolStripExportButton command="jslTableGrid.export" {quickExportHandlerRef} label="Export result" />
     {/if}
+    <ToolStripDropDownButton
+      menu={() =>
+        QUERY_PARAMETER_STYLES.map(param => ({
+          label: param.text,
+          onClick: () => {
+            queryParameterStyle = param.value;
+          },
+        }))}
+      label={QUERY_PARAMETER_STYLES.find(x => x.value == queryParameterStyle)?.text}
+      icon="icon at"
+    />
   </svelte:fragment>
 </ToolStripContainer>