set filter modal

packages/web/src/modals/ConnectionModal.svelte

@@ -12,10 +12,9 @@
   import FormFieldTemplateLarge from './FormFieldTemplateLarge.svelte';
 
   import ModalBase from './ModalBase.svelte';
-  import { closeModal } from './modalTools';
+  import { closeCurrentModal, closeModal } from './modalTools';
 
   export let connection;
-  export let modalId;
 
   let isTesting;
   let sqlConnectResult;
@@ -40,7 +39,7 @@
 
   async function handleSubmit(e) {
     axios.post('connections/save', e.detail);
-    closeModal(modalId);
+    closeCurrentModal();
   }
 </script>
 
@@ -48,7 +47,7 @@
   template={FormFieldTemplateLarge}
   initialValues={connection || { server: 'localhost', engine: 'mssql@dbgate-plugin-mssql' }}
 >
-  <ModalBase {...$$restProps} {modalId} noPadding>
+  <ModalBase {...$$restProps} noPadding>
     <div slot="header">Add connection</div>
 
     <TabControl

packages/web/src/modals/SetFilterModal.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import FormButton from '../forms/FormButton.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormTextFieldRaw from '../forms/FormTextFieldRaw.svelte';
+  import FormFieldTemplateLarge from './FormFieldTemplateLarge.svelte';
+  import SetFilterModal_Select from './SetFilterModal_Select.svelte';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+  import FormRadioGroupItem from '../forms/FormRadioGroupItem.svelte';
+
+  export let condition1;
+  export let onFilter;
+  export let filterType;
+
+  const createTerm = (condition, value) => {
+    if (!value) return null;
+    if (filterType == 'string') return `${condition}"${value}"`;
+    return `${condition}${value}`;
+  };
+
+  const handleOk = e => {
+    const values = e.detail;
+    const { value1, condition1, value2, condition2, joinOperator } = values;
+    const term1 = createTerm(condition1, value1);
+    const term2 = createTerm(condition2, value2);
+    if (term1 && term2) onFilter(`${term1}${joinOperator}${term2}`);
+    else if (term1) onFilter(term1);
+    else if (term2) onFilter(term2);
+    closeCurrentModal();
+  };
+</script>
+
+<FormProvider initialValues={{ condition1, condition2: '=', joinOperator: ' ' }} template={FormFieldTemplateLarge}>
+  <ModalBase {...$$restProps}>
+    <div slot="header">Set filter</div>
+
+    <div class="largeFormMarker">
+      <div class="row">Show rows where</div>
+      <div class="row">
+        <div class="col-6 mr-1">
+          <SetFilterModal_Select {filterType} name="condition1" />
+        </div>
+        <div class="col-6 mr-1">
+          <FormTextFieldRaw name="value1" focused />
+        </div>
+      </div>
+
+      <div class="row">
+        <FormRadioGroupItem name="joinOperator" value=" " text="And" />
+        <FormRadioGroupItem name="joinOperator" value="," text="Or" />
+      </div>
+
+      <div class="row">
+        <div class="col-6 mr-1">
+          <SetFilterModal_Select {filterType} name="condition2" />
+        </div>
+        <div class="col-6 mr-1">
+          <FormTextFieldRaw name="value2" />
+        </div>
+      </div>
+    </div>
+
+    <div slot="footer">
+      <FormSubmit value="OK" on:click={handleOk} />
+      <FormButton type="button" value="Close" on:click={closeCurrentModal} />
+    </div>
+  </ModalBase>
+</FormProvider>
+
+<style>
+  .row {
+    margin: var(--dim-large-form-margin);
+    display: flex;
+  }
+</style>

packages/web/src/modals/SetFilterModal_Select.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import FormSelectFieldRaw from '../forms/FormSelectFieldRaw.svelte';
+
+  export let name;
+  export let filterType;
+
+  function getOptions() {
+    switch (filterType) {
+      case 'number':
+        return [
+          { value: '=', label: 'eqals' },
+          { value: '<>', label: 'does not equal' },
+          { value: '<', label: 'is smaller' },
+          { value: '>', label: 'is greater' },
+          { value: '<=', label: 'is smaller or equal' },
+          { value: '>=', label: 'is greater or equal' },
+        ];
+      case 'string':
+        return [
+          { value: '+', label: 'contains' },
+          { value: '~', label: 'does not contain' },
+          { value: '^', label: 'begins with' },
+          { value: '!^', label: 'does not begin with' },
+          { value: '$', label: 'ends with' },
+          { value: '!$', label: 'does not end with' },
+          { value: '=', label: 'equals' },
+          { value: '<>', label: 'does not equal' },
+          { value: '<', label: 'is smaller' },
+          { value: '>', label: 'is greater' },
+          { value: '<=', label: 'is smaller or equal' },
+          { value: '>=', label: 'is greater or equal' },
+        ];
+      case 'datetime':
+        return [
+          { value: '=', label: 'eqals' },
+          { value: '<>', label: 'does not equal' },
+          { value: '<', label: 'is before' },
+          { value: '>', label: 'is after' },
+          { value: '<=', label: 'is before or equal' },
+          { value: '>=', label: 'is after or equal' },
+        ];
+    }
+  }
+</script>
+
+<FormSelectFieldRaw {name} options={getOptions()} />

packages/web/src/modals/modalTools.ts

@@ -1,5 +1,6 @@
 import { openedModals } from '../stores';
 import uuidv1 from 'uuid/v1';
+import _ from 'lodash';
 
 export function showModal(component, props = {}) {
   const modalId = uuidv1();
@@ -9,3 +10,7 @@ export function showModal(component, props = {}) {
 export function closeModal(modalId) {
   openedModals.update(x => x.filter(y => y.modalId != modalId));
 }
+
+export function closeCurrentModal() {
+  openedModals.update(x => _.dropRight(x));
+}