From eb4ecb4cf83349195173e5c548093e828381531a Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Fri, 5 Mar 2021 20:49:42 +0100
Subject: [PATCH] filter multiple values dialog

---
 .../web/src/datagrid/DataFilterControl.svelte | 10 ++++
 packages/web/src/forms/TextAreaField.svelte   | 12 +++++
 .../modals/FilterMultipleValuesModal.svelte   | 53 +++++++++++++++++++
 3 files changed, 75 insertions(+)
 create mode 100644 packages/web/src/forms/TextAreaField.svelte
 create mode 100644 packages/web/src/modals/FilterMultipleValuesModal.svelte

diff --git a/packages/web/src/datagrid/DataFilterControl.svelte b/packages/web/src/datagrid/DataFilterControl.svelte
index 3719a8aea..bc94d73c6 100644
--- a/packages/web/src/datagrid/DataFilterControl.svelte
+++ b/packages/web/src/datagrid/DataFilterControl.svelte
@@ -2,6 +2,10 @@
 </script>
 
 <script lang="ts">
+import { createMultiLineFilter } from 'dbgate-filterparser';
+
+  import FilterMultipleValuesModal from '../modals/FilterMultipleValuesModal.svelte';
+
   import { showModal } from '../modals/modalTools';
   import SetFilterModal from '../modals/SetFilterModal.svelte';
   import keycodes from '../utility/keycodes';
@@ -19,6 +23,12 @@
     showModal(SetFilterModal, { condition1, filterType, onFilter: setFilter });
   }
 
+  const filterMultipleValues = () => {
+    showModal(FilterMultipleValuesModal, {
+      onFilter: (mode, text) => setFilter(createMultiLineFilter(mode, text)),
+    });
+  };
+
   function createMenu() {
     switch (filterType) {
       case 'number':
diff --git a/packages/web/src/forms/TextAreaField.svelte b/packages/web/src/forms/TextAreaField.svelte
new file mode 100644
index 000000000..f20711775
--- /dev/null
+++ b/packages/web/src/forms/TextAreaField.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let value;
+  export let focused;
+
+  let domEditor;
+
+  if (focused) onMount(() => domEditor.focus());
+</script>
+
+<textarea {...$$restProps} bind:value on:change on:input bind:this={domEditor} />
diff --git a/packages/web/src/modals/FilterMultipleValuesModal.svelte b/packages/web/src/modals/FilterMultipleValuesModal.svelte
new file mode 100644
index 000000000..ba555b2b9
--- /dev/null
+++ b/packages/web/src/modals/FilterMultipleValuesModal.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import FormButton from '../forms/FormButton.svelte';
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+import TextAreaField from '../forms/TextAreaField.svelte';
+  import FormStyledButton from '../widgets/FormStyledButton.svelte';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let onFilter;
+
+  let value;
+  let group = 'is';
+
+  const handleOk = () => {
+    onFilter(group, value);
+    closeCurrentModal();
+  };
+</script>
+
+<ModalBase {...$$restProps}>
+  <div slot="header">Filter multiple values</div>
+
+  <div class="flex">
+    <TextAreaField rows={10} bind:value focused />
+    <div>
+      <div>
+        <input type="radio" bind:group value="is" id="__is" />
+        <label for="__is">Is one of line</label>'
+      </div>
+      <div>
+        <input type="radio" bind:group value="is_not" id="__is_not" />
+        <label for="__is_not">Is not one of line</label>'
+      </div>
+      <div>
+        <input type="radio" bind:group value="contains" id="__contains" />
+        <label for="__contains">Contains</label>'
+      </div>
+      <div>
+        <input type="radio" bind:group value="begins" id="__begins" />
+        <label for="__begins">Begins</label>'
+      </div>
+      <div>
+        <input type="radio" bind:group value="ends" id="__ends" />
+        <label for="__ends">Ends</label>'
+      </div>
+    </div>
+  </div>
+  <div slot="footer">
+    <FormStyledButton value="OK" on:click={handleOk} />
+    <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+  </div>
+</ModalBase>