filter multiple values dialog

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':

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} />

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>