#176 generate SQL from data

packages/web/src/modals/GenerateSqlFromDataModal.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+  import FormStyledButton from '../elements/FormStyledButton.svelte';
+  import TableControl from '../elements/TableControl.svelte';
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import TextField from '../forms/TextField.svelte';
+  import analyseQuerySources from '../query/analyseQuerySources';
+  import newQuery from '../query/newQuery';
+  import SqlEditor from '../query/SqlEditor.svelte';
+  import keycodes from '../utility/keycodes';
+
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let rows;
+  export let allColumns = [];
+  export let selectedColumns = [];
+  export let keyColumns = [];
+  export let tableInfo;
+  export let engineDriver;
+
+  let queryTypeIndex = 0;
+  let domQueryType = null;
+
+  let valueColumns = selectedColumns.filter(x => allColumns.includes(x));
+  let whereColumns = keyColumns.filter(x => allColumns.includes(x));
+
+  const QUERY_TYPES = ['INSERT', 'UPDATE', 'DELETE'];
+
+  $: sqlPreview = computePreview(rows, valueColumns, whereColumns, queryTypeIndex);
+
+  function computePreview(rows, valueColumns, whereColumns, queryTypeIndex) {
+    const queryType = QUERY_TYPES[queryTypeIndex];
+
+    const dmp = engineDriver.createDumper();
+
+    function putCondition(row) {
+      dmp.putCollection(' ^and ', whereColumns, col =>
+        row[col] == null ? dmp.put('%i ^is ^null', col) : dmp.put('%i=%v', col, row[col])
+      );
+    }
+
+    switch (queryType) {
+      case 'INSERT':
+        for (const row of rows) {
+          dmp.putCmd(
+            '^insert ^into %f (%,i) ^values (%,v)',
+            tableInfo,
+            valueColumns,
+            valueColumns.map(col => row[col])
+          );
+        }
+        break;
+      case 'UPDATE':
+        for (const row of rows) {
+          dmp.put('^update %f ^set', tableInfo);
+          dmp.putCollection(', ', valueColumns, col => dmp.put('%i=%v', col, row[col]));
+          dmp.put(' ^where ');
+          putCondition(row);
+          dmp.endCommand();
+        }
+        break;
+      case 'DELETE':
+        for (const row of rows) {
+          dmp.put('^delete ^from %f ^where ', tableInfo);
+          putCondition(row);
+          dmp.endCommand();
+        }
+        break;
+    }
+    return dmp.s;
+  }
+</script>
+
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">Generate SQL from data</svelte:fragment>
+
+    <div class="flex mb-3">
+      <div class="m-1 col-4">
+        <div class="m-1">Choose query type</div>
+
+        <TableControl
+          rows={QUERY_TYPES.map(name => ({ name }))}
+          bind:selectedIndex={queryTypeIndex}
+          bind:domTable={domQueryType}
+          focusOnCreate
+          selectable
+          columns={[{ fieldName: 'name', header: 'Query type' }]}
+        />
+      </div>
+
+      <div class="m-1 col-4">
+        <div class="m-1">Value columns</div>
+
+        {#each allColumns as column}
+          <div>
+            <input
+              type="checkbox"
+              checked={valueColumns.includes(column)}
+              on:change={() => {
+                if (valueColumns.includes(column)) valueColumns = valueColumns.filter(x => x != column);
+                else valueColumns = [...valueColumns, column];
+              }}
+            />
+            {column}
+          </div>
+        {/each}
+      </div>
+
+      <div class="m-1 col-4">
+        <div class="m-1">WHERE columns</div>
+
+        {#each allColumns as column}
+          <div>
+            <input
+              type="checkbox"
+              checked={whereColumns.includes(column)}
+              on:change={() => {
+                if (whereColumns.includes(column)) whereColumns = whereColumns.filter(x => x != column);
+                else whereColumns = [...whereColumns, column];
+              }}
+            />
+            {column}
+          </div>
+        {/each}
+      </div>
+    </div>
+
+    <div class="sql">
+      <SqlEditor readOnly value={sqlPreview} engine={engineDriver?.engine} />
+    </div>
+
+    <svelte:fragment slot="footer">
+      <FormSubmit
+        value="OK"
+        on:click={() => {
+          newQuery({ initialData: sqlPreview });
+          closeCurrentModal();
+        }}
+      />
+      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>
+
+<style>
+  .sql {
+    position: relative;
+    height: 30vh;
+    width: 40vw;
+  }
+</style>

packages/web/src/modals/InsertJoinModal.svelte

@@ -104,7 +104,7 @@
   <svelte:fragment slot="header">Insert join</svelte:fragment>
 
   <div class="flex mb-3">
-    <div class="m-1">
+    <div class="m-1 col-3">
       <div class="m-1">Existing table</div>
 
       <TableControl
@@ -121,7 +121,7 @@
       />
     </div>
 
-    <div class="m-1">
+    <div class="m-1 col-6">
       <div class="m-1">New table</div>
 
       <TableControl
@@ -138,7 +138,7 @@
       />
     </div>
 
-    <div class="m-1">
+    <div class="m-1 col-3">
       <div class="m-1">Join</div>
 
       <TableControl