filter colors

packages/web/src/datagrid/DataFilterControl.svelte

@@ -2,7 +2,7 @@
 </script>
 
 <script>
-  import { createMultiLineFilter } from 'dbgate-filterparser';
+  import { createMultiLineFilter, parseFilter } from 'dbgate-filterparser';
   import splitterDrag from '../utility/splitterDrag';
 
   import FilterMultipleValuesModal from '../modals/FilterMultipleValuesModal.svelte';
@@ -20,6 +20,8 @@
   export let showResizeSplitter = false;
 
   let value;
+  let isError;
+  let isOk;
 
   function openFilterWindow(condition1) {
     showModal(SetFilterModal, { condition1, filterType, onFilter: setFilter });
@@ -145,11 +147,25 @@
   };
 
   $: value = filter;
+
+  $: {
+    try {
+      isOk = false;
+      isError = false;
+      if (value) {
+        parseFilter(value, filterType);
+        isOk = true;
+      }
+    } catch (err) {
+      isError = true;
+    }
+  }
+
   // $: if (value != filter) setFilter(value);
 </script>
 
 <div class="flex">
-  <input type="text" readOnly={isReadOnly} bind:value on:keydown={handleKeyDown} />
+  <input type="text" readOnly={isReadOnly} bind:value on:keydown={handleKeyDown} class:isError class:isOk />
   <DropDownButton icon="icon filter" menu={createMenu} />
   {#if showResizeSplitter}
     <div class="horizontal-split-handle resizeHandleControl" use:splitterDrag={'clientX'} on:resizeSplitter />
@@ -161,4 +177,12 @@
     flex: 1;
     min-width: 10px;
   }
+
+  input.isError {
+    background-color: var(--theme-bg-red);
+  }
+
+  input.isOk {
+    background-color: var(--theme-bg-green);
+  }
 </style>

packages/web/src/plugins/ThemeDark.svelte

@@ -31,6 +31,7 @@
     --theme-bg-orange: #442a11; /*orange-2 */
     --theme-bg-green: #1d3712; /* green-2 */
     --theme-bg-volcano: #441d12; /* volcano-2 */
+    --theme-bg-red: #431418; /* red-2 */
 
     --theme-font-inv-1: #ffffff;
     --theme-font-inv-2: #b3b3b3;

packages/web/src/plugins/ThemeLight.svelte

@@ -24,6 +24,7 @@
     --theme-bg-orange: #ffe7ba; /*orange-2 */
     --theme-bg-green: #d9f7be; /* green-2 */
     --theme-bg-volcano: #ffd8bf; /* volcano-2 */
+    --theme-bg-red: #ffccc7; /* red-2 */
 
     --theme-font-inv-1: #ffffff;
     --theme-font-inv-2: #b3b3b3;