From 1ebdb8c92fe56ba4f073d3a82da05033ab18a70c Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Sun, 28 May 2023 10:44:14 +0200
Subject: [PATCH 1/4] Number base filter

---
 .../components/filterTypes/NumberFilter.vue   | 58 ++++++++++++++++---
 .../partials/FilterInlineSelect.vue           | 12 ++--
 .../number.filter.renderer.ts                 | 24 ++++++--
 .../config/constants/number.constants.ts      | 41 +++++++++++++
 .../number.label.renderer.ts                  | 14 ++++-
 .../config/queryUrlParser/number.parser.ts    |  5 +-
 .../modules/filters/types/FilterOperator.ts   |  5 ++
 .../types/filterTypes/NumberFilterConfig.ts   |  4 +-
 8 files changed, 140 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/shared/modules/filters/config/constants/number.constants.ts
 create mode 100644 frontend/src/shared/modules/filters/types/FilterOperator.ts

diff --git a/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
index f298cf86be..43c60a0143 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
@@ -1,9 +1,34 @@
 <template>
   <div v-if="form">
     <cr-filter-include-switch v-if="!props.hideIncludeSwitch" v-model="form.include" />
-    <div class="p-4">
-      Number filter
-      <!-- TODO: prepare number filter -->
+
+    <div class="p-4 pb-5">
+      <cr-filter-inline-select
+        v-model="form.operator"
+        :prefix="`${props.config.label}:`"
+        class="mb-3"
+        :options="numberFilterOperators"
+      />
+      <div class="flex -mx-1">
+        <div class="flex-grow px-1">
+          <app-form-item :validation="$v.value" class="mb-0">
+            <cr-filter-input
+              v-model="form.value"
+              type="number"
+              :placeholder="form.operator !== FilterNumberOperator.BETWEEN ? 'Enter value' : 'From'"
+            />
+          </app-form-item>
+        </div>
+        <div v-if="form.operator === FilterNumberOperator.BETWEEN" class="flex-grow px-1">
+          <app-form-item :validation="$v.valueTo" class="mb-0">
+            <cr-filter-input
+              v-model="form.valueTo"
+              type="number"
+              placeholder="To"
+            />
+          </app-form-item>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -16,8 +41,15 @@ import {
   NumberFilterValue,
 } from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
 import useVuelidate from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
+import { minValue, numeric, required } from '@vuelidate/validators';
 import CrFilterIncludeSwitch from '@/shared/modules/filters/components/partials/FilterIncludeSwitch.vue';
+import {
+  FilterNumberOperator,
+  numberFilterOperators,
+} from '@/shared/modules/filters/config/constants/number.constants';
+import CrFilterInput from '@/shared/modules/filters/components/partials/string/FilterInput.vue';
+import CrFilterInlineSelect from '@/shared/modules/filters/components/partials/FilterInlineSelect.vue';
+import AppFormItem from '@/shared/form/form-item.vue';
 
 const props = defineProps<{
   modelValue: NumberFilterValue,
@@ -33,20 +65,30 @@ const form = computed<NumberFilterValue>({
 
 const defaultForm: NumberFilterValue = {
   value: '',
-  operator: 'eq',
+  valueTo: '',
+  operator: FilterNumberOperator.EQ,
   include: true,
 };
 
-const rules: any = {
+const rules: any = computed(() => ({
   value: {
     required,
+    numeric,
+    minValue: minValue(0),
   },
+  ...(form.value.operator === FilterNumberOperator.BETWEEN ? {
+    valueTo: {
+      required,
+      numeric,
+      minValue: minValue((form.value.value) || 0),
+    },
+  } : {}),
   operator: {
     required,
   },
-};
+}));
 
-useVuelidate(rules, form);
+const $v = useVuelidate(rules, form);
 
 onMounted(() => {
   if (!form.value || Object.keys(form.value).length === 0) {
diff --git a/frontend/src/shared/modules/filters/components/partials/FilterInlineSelect.vue b/frontend/src/shared/modules/filters/components/partials/FilterInlineSelect.vue
index 897fee7860..464e9e3d57 100644
--- a/frontend/src/shared/modules/filters/components/partials/FilterInlineSelect.vue
+++ b/frontend/src/shared/modules/filters/components/partials/FilterInlineSelect.vue
@@ -27,11 +27,11 @@
           :class="{
             'is-selected': props.modelValue === option.value,
           }"
+          class="flex justify-between"
           @click="model = option.value"
         >
-          <div class="flex flex-col">
-            <span>{{ option.label }}</span>
-          </div>
+          <span>{{ option.label }}</span>
+          <span v-if="option.subLabel" class="text-gray-400 pl-8">{{ option.subLabel }}</span>
         </el-dropdown-item>
       </template>
     </el-dropdown>
@@ -40,14 +40,12 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
+import { FilterOperator } from '@/shared/modules/filters/types/FilterOperator';
 
 const emit = defineEmits<{(e: 'update:modelValue', value: string): void}>();
 const props = defineProps<{
   modelValue: string,
-  options: {
-    value: string,
-    label: string,
-  }[],
+  options: FilterOperator[],
   prefix: string
 }>();
 
diff --git a/frontend/src/shared/modules/filters/config/apiFilterRenderer/number.filter.renderer.ts b/frontend/src/shared/modules/filters/config/apiFilterRenderer/number.filter.renderer.ts
index 0590e0c5ad..23344437b4 100644
--- a/frontend/src/shared/modules/filters/config/apiFilterRenderer/number.filter.renderer.ts
+++ b/frontend/src/shared/modules/filters/config/apiFilterRenderer/number.filter.renderer.ts
@@ -1,7 +1,21 @@
 import { NumberFilterValue } from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
+import { FilterNumberOperator } from '@/shared/modules/filters/config/constants/number.constants';
 
-export const numberApiFilterRenderer = (property: string, { value }: NumberFilterValue): any[] => [
-  {
-    [property]: value,
-  },
-];
+export const numberApiFilterRenderer = (property: string, {
+  value, valueTo, operator, include,
+}: NumberFilterValue): any[] => {
+  const filterValue = operator === FilterNumberOperator.BETWEEN ? [value, valueTo] : value;
+  const filter = {
+    [operator]: filterValue,
+  };
+
+  return [
+    {
+      [property]: (include ? filter : {
+        not: {
+          filter,
+        },
+      }),
+    },
+  ];
+};
diff --git a/frontend/src/shared/modules/filters/config/constants/number.constants.ts b/frontend/src/shared/modules/filters/config/constants/number.constants.ts
new file mode 100644
index 0000000000..95b4bab731
--- /dev/null
+++ b/frontend/src/shared/modules/filters/config/constants/number.constants.ts
@@ -0,0 +1,41 @@
+import { FilterOperator } from '@/shared/modules/filters/types/FilterOperator';
+
+export enum FilterNumberOperator {
+  EQ = 'eq',
+  LT = 'lt',
+  LTE = 'lte',
+  GT = 'gt',
+  GTE = 'gte',
+  BETWEEN = 'between',
+}
+
+export const numberFilterOperators: FilterOperator[] = [
+  {
+    label: 'is',
+    value: FilterNumberOperator.EQ,
+  },
+  {
+    label: 'less than',
+    subLabel: '<',
+    value: FilterNumberOperator.LT,
+  },
+  {
+    label: 'equal or less than',
+    subLabel: '<=',
+    value: FilterNumberOperator.LTE,
+  },
+  {
+    label: 'greater than',
+    subLabel: '>',
+    value: FilterNumberOperator.GT,
+  },
+  {
+    label: 'equal or greater than',
+    subLabel: '>=',
+    value: FilterNumberOperator.GTE,
+  },
+  {
+    label: 'between',
+    value: FilterNumberOperator.BETWEEN,
+  },
+];
diff --git a/frontend/src/shared/modules/filters/config/itemLabelRenderer/number.label.renderer.ts b/frontend/src/shared/modules/filters/config/itemLabelRenderer/number.label.renderer.ts
index db5ecbae17..ed671cef54 100644
--- a/frontend/src/shared/modules/filters/config/itemLabelRenderer/number.label.renderer.ts
+++ b/frontend/src/shared/modules/filters/config/itemLabelRenderer/number.label.renderer.ts
@@ -1,3 +1,15 @@
 import { NumberFilterValue } from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
+import {
+  FilterNumberOperator,
+  numberFilterOperators,
+} from '@/shared/modules/filters/config/constants/number.constants';
 
-export const numberItemLabelRenderer = (property: string, { value }: NumberFilterValue): string => `<b>${property}:</b>${value}`;
+export const numberItemLabelRenderer = (property: string, {
+  value, include, operator, valueTo,
+}: NumberFilterValue): string => {
+  const excludeText = !include ? ' (exclude)' : '';
+  const operatorObject = numberFilterOperators.find((o) => o.value === operator);
+  const operandText = operatorObject?.subLabel ? `${operatorObject.subLabel} ` : '';
+  const valueText = operator === FilterNumberOperator.BETWEEN ? `${value} - ${valueTo}` : `${operandText}${value}`;
+  return `<b>${property}${excludeText}:</b>${valueText || '...'}`;
+};
diff --git a/frontend/src/shared/modules/filters/config/queryUrlParser/number.parser.ts b/frontend/src/shared/modules/filters/config/queryUrlParser/number.parser.ts
index 1c32649faf..af2e5b38b2 100644
--- a/frontend/src/shared/modules/filters/config/queryUrlParser/number.parser.ts
+++ b/frontend/src/shared/modules/filters/config/queryUrlParser/number.parser.ts
@@ -1,13 +1,16 @@
 import { NumberFilterValue } from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
+import { FilterNumberOperator } from '@/shared/modules/filters/config/constants/number.constants';
 
 interface QueryUrlNumberValue {
   operator: string,
   value: string,
+  valueTo: string,
   include: string,
 }
 
 export const numberQueryUrlParser = (query: QueryUrlNumberValue): NumberFilterValue => ({
-  ...query,
+  operator: query.operator as FilterNumberOperator,
   include: query.include === 'true',
   value: +query.value,
+  valueTo: +query.valueTo || '',
 });
diff --git a/frontend/src/shared/modules/filters/types/FilterOperator.ts b/frontend/src/shared/modules/filters/types/FilterOperator.ts
new file mode 100644
index 0000000000..ca6969f54c
--- /dev/null
+++ b/frontend/src/shared/modules/filters/types/FilterOperator.ts
@@ -0,0 +1,5 @@
+export interface FilterOperator {
+  value: string;
+  label: string;
+  subLabel?: string;
+}
diff --git a/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts b/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts
index ca30d3e450..044147aa97 100644
--- a/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts
+++ b/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts
@@ -1,12 +1,14 @@
 /* eslint-disable no-unused-vars */
 import { BaseFilterConfig, FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
+import { FilterNumberOperator } from '@/shared/modules/filters/config/constants/number.constants';
 
 export interface NumberFilterOptions {
   hideIncludeSwitch?: boolean;
 }
 export interface NumberFilterValue {
-  operator: string,
+  operator: FilterNumberOperator,
   value: number | '',
+  valueTo: number | '',
   include: boolean,
 }
 export interface NumberFilterConfig extends BaseFilterConfig {

From eadcaa5480b28eda5cfb2cf29a48d691908eaa94 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Sun, 28 May 2023 11:53:21 +0200
Subject: [PATCH 2/4] Align dropdown and operator styling

---
 frontend/src/assets/scss/form/dropdown.scss   |  9 ++
 .../modules/filters/components/Filter.vue     | 23 +++--
 .../filters/components/FilterDropdown.vue     | 85 ++++++++++---------
 3 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/frontend/src/assets/scss/form/dropdown.scss b/frontend/src/assets/scss/form/dropdown.scss
index acc3212faf..6e11955d83 100644
--- a/frontend/src/assets/scss/form/dropdown.scss
+++ b/frontend/src/assets/scss/form/dropdown.scss
@@ -42,6 +42,15 @@
     }
   }
 
+  // Active state
+  &.is-active,
+  &:focus.is-active {
+    @apply relative bg-gray-50 text-gray-400 cursor-default;
+    i {
+      @apply mr-3 text-gray-400;
+    }
+  }
+
   // Focus state
   &:not(.is-selected):not(.is-disabled):not(:hover):focus {
     @apply text-black bg-white;
diff --git a/frontend/src/shared/modules/filters/components/Filter.vue b/frontend/src/shared/modules/filters/components/Filter.vue
index 58329d3d27..ddf3d7cdf5 100644
--- a/frontend/src/shared/modules/filters/components/Filter.vue
+++ b/frontend/src/shared/modules/filters/components/Filter.vue
@@ -10,20 +10,27 @@
     <div class="flex items-center flex-wrap">
       <template v-for="(filter, fi) of filterList" :key="filter">
         <!-- Operator -->
-        <div
-          v-if="fi > 0"
-          class="border text-xs border-gray-100 rounded-md shadow uppercase
-          h-8 flex font-medium items-center py-1 px-2 bg-white cursor-pointer hover:bg-gray-100 transition mr-4 mb-2"
-          @click="switchOperator"
+        <el-tooltip
+          effect="dark"
+          :content="`${filters.relation} → ${filters.relation === 'and' ? 'or' : 'and'}`"
+          placement="top"
         >
-          {{ filters.relation }}
-        </div>
+          <div
+            v-if="fi > 0"
+            class="border text-xs border-gray-100 rounded-md shadow w-10 justify-center
+          h-8 flex font-medium items-center py-1 px-2 bg-white cursor-pointer hover:bg-gray-100 transition mr-3 mb-4"
+            @click="switchOperator"
+          >
+            {{ filters.relation }}
+          </div>
+        </el-tooltip>
+
         <!-- Filter -->
         <cr-filter-item
           v-model="filters[filter]"
           v-model:open="open"
           :config="configuration[filter]"
-          class="mr-4 mb-2"
+          class="mr-3 mb-4"
           @remove="removeFilter(filter)"
         />
       </template>
diff --git a/frontend/src/shared/modules/filters/components/FilterDropdown.vue b/frontend/src/shared/modules/filters/components/FilterDropdown.vue
index ae409b280f..5bac897dee 100644
--- a/frontend/src/shared/modules/filters/components/FilterDropdown.vue
+++ b/frontend/src/shared/modules/filters/components/FilterDropdown.vue
@@ -1,64 +1,65 @@
 <template>
-  <el-dropdown placement="bottom-end" trigger="click" size="large">
-    <el-button
-      class="filter-dropdown-trigger"
-    >
-      <i class="ri-lg ri-filter-3-line mr-2" />
-      Filters
-    </el-button>
-    <template #dropdown>
-      <div class="-m-2 border-b border-gray-100 p-2 mb-2">
-        <el-input
-          ref="queryInput"
-          v-model="search"
-          placeholder="Search..."
-          class="filter-dropdown-search"
-        >
-          <template #prefix>
-            <i class="ri-search-line" />
-          </template>
-        </el-input>
-      </div>
-      <el-dropdown-item
+  <el-popover v-model:visible="open" placement="bottom-end" size="large" width="20rem" popper-class="!p-0">
+    <template #reference>
+      <el-button
+        class="filter-dropdown-trigger"
+        @click="open = true"
+      >
+        <i class="ri-lg ri-filter-3-line mr-2" />
+        Filters
+      </el-button>
+    </template>
+
+    <div class="border-b border-gray-100 p-2">
+      <el-input
+        ref="queryInput"
+        v-model="search"
+        placeholder="Search..."
+        class="filter-dropdown-search"
+      >
+        <template #prefix>
+          <i class="ri-search-line" />
+        </template>
+      </el-input>
+    </div>
+    <div class="max-h-80 overflow-auto px-2 py-3">
+      <article
         v-for="{ key, label, iconClass } in filteredOptions"
         :key="key"
-        :class="{ 'is-selected': isSelected(key) }"
-        :disabled="isSelected(key)"
+        class="mb-1 p-3 rounded flex justify-between items-center transition whitespace-nowrap h-10 hover:bg-gray-50 text-xs"
+        :class="isSelected(key) ? 'bg-gray-50 text-gray-400' : 'text-gray-900 cursor-pointer'"
         @click="add(key)"
       >
-        <div class="flex justify-between w-full">
-          <span><i :class="iconClass" class="text-base text-black mr-2" />{{ label }}</span>
-          <i :class="isSelected(key) ? 'opacity-100' : 'opacity-0'" class="ri-check-line !text-brand-600 !mr-0 ml-1" />
-        </div>
-      </el-dropdown-item>
+        <span><i :class="iconClass" class="text-base text-gray-400 mr-3" />{{ label }}</span>
+        <i :class="isSelected(key) ? 'opacity-100' : 'opacity-0'" class="ri-check-line !text-gray-400 !mr-0 ml-1" />
+      </article>
+
       <!-- CUSTOM ATTRIBUTES -->
       <template v-if="props.customConfig && Object.keys(props.customConfig).length > 0 && filteredCustomOptions.length > 0">
         <div
-          class="el-dropdown-title"
+          class="el-dropdown-title !my-3"
         >
           Custom Attributes
         </div>
-        <el-dropdown-item
+        <article
           v-for="{ key, label } in filteredCustomOptions"
           :key="key"
-          :class="{ 'is-selected': isSelected(key) }"
+          class="mb-1 p-3 rounded flex justify-between items-center transition whitespace-nowrap h-10 hover:bg-gray-50 text-xs"
+          :class="isSelected(key) ? 'bg-gray-50 text-gray-400' : 'text-gray-900 cursor-pointer'"
           @click="add(key)"
         >
-          <div class="flex justify-between w-full">
-            <span>{{ label }}</span>
-            <i :class="isSelected(key) ? 'opacity-100' : 'opacity-0'" class="ri-check-line !text-brand-600 !mr-0 ml-1" />
-          </div>
-        </el-dropdown-item>
+          <span>{{ label }}</span>
+          <i :class="isSelected(key) ? 'opacity-100' : 'opacity-0'" class="ri-check-line !text-gray-400 !mr-0 ml-1" />
+        </article>
       </template>
-
       <div
         v-if="filteredOptions.length === 0 && filteredCustomOptions.length === 0"
-        class="el-dropdown-title"
+        class="el-dropdown-title !mt-2"
       >
         No results
       </div>
-    </template>
-  </el-dropdown>
+    </div>
+  </el-popover>
 </template>
 
 <script setup lang="ts">
@@ -76,7 +77,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{(e: 'update:modelValue', value: string[]), (e: 'open', value: string)}>();
 
-const search = ref('');
+const open = ref<boolean>(false);
+const search = ref<string>('');
 
 const matchesSearch = (label: string, query: string): boolean => label.toLowerCase().includes(query.toLowerCase());
 const isSelected = (key: string): boolean => props.modelValue.includes(key);
@@ -100,6 +102,7 @@ const add = (key: string) => {
     return;
   }
   search.value = '';
+  open.value = false;
   emit('open', key);
   emit('update:modelValue', [...props.modelValue, key]);
 };

From 9432069d93364795bc75038a9ec5cff95b7c0bb2 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Mon, 29 May 2023 10:20:21 +0200
Subject: [PATCH 3/4] Validations

---
 frontend/src/shared/form/form-errors.vue      | 57 +++++++++++++++++++
 frontend/src/shared/form/form-item.vue        | 13 ++++-
 .../components/filterTypes/NumberFilter.vue   | 32 ++++++++++-
 .../partials/FilterInlineSelect.vue           |  2 +-
 .../partials/string/FilterInput.vue           | 20 +++++--
 5 files changed, 115 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/shared/form/form-errors.vue

diff --git a/frontend/src/shared/form/form-errors.vue b/frontend/src/shared/form/form-errors.vue
new file mode 100644
index 0000000000..ff7cc9b5da
--- /dev/null
+++ b/frontend/src/shared/form/form-errors.vue
@@ -0,0 +1,57 @@
+<template>
+  <div
+    v-if="errors.length > 0"
+    class="el-form-item__error"
+    :class="errorClass"
+  >
+    <div class="error-msg">
+      <i :class="errorIcon" class="mr-1 text-base" />{{ errorMessage(errors[0]) }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps } from 'vue';
+
+const props = defineProps({
+  validation: {
+    required: false,
+    type: Object,
+    default: () => ({}),
+  },
+  errorMessages: {
+    required: false,
+    type: Object,
+    default: () => ({}),
+  },
+  errorIcon: {
+    required: false,
+    type: String,
+    default: '',
+  },
+  errorClass: {
+    required: false,
+    type: String,
+    default: '',
+  },
+});
+
+const errors = computed(() => props.validation?.$errors || []);
+
+const errorMessage = (error) => {
+  const prop = `${error.$property}-${error.$validator}`;
+  if (
+    props.errorMessages
+    && props.errorMessages[prop]
+  ) {
+    return props.errorMessages[prop];
+  }
+  return error.$message;
+};
+</script>
+
+<script>
+export default {
+  name: 'AppFormErrors',
+};
+</script>
diff --git a/frontend/src/shared/form/form-item.vue b/frontend/src/shared/form/form-item.vue
index 07c4db2502..c631a6cb79 100644
--- a/frontend/src/shared/form/form-item.vue
+++ b/frontend/src/shared/form/form-item.vue
@@ -23,9 +23,10 @@
       <div
         v-if="showError && errors.length > 0"
         class="el-form-item__error"
+        :class="errorClass"
       >
         <div class="error-msg">
-          {{ errorMessage(errors[0]) }}
+          <i :class="errorIcon" class="mr-1 text-base" />{{ errorMessage(errors[0]) }}
         </div>
       </div>
     </div>
@@ -66,6 +67,16 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  errorIcon: {
+    required: false,
+    type: String,
+    default: '',
+  },
+  errorClass: {
+    required: false,
+    type: String,
+    default: '',
+  },
 });
 
 const errors = computed(() => props.validation?.$errors || []);
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
index 43c60a0143..2eef13e54c 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
@@ -11,24 +11,51 @@
       />
       <div class="flex -mx-1">
         <div class="flex-grow px-1">
-          <app-form-item :validation="$v.value" class="mb-0">
+          <app-form-item
+            :validation="$v.value"
+            class="mb-0"
+            :show-error="false"
+          >
             <cr-filter-input
               v-model="form.value"
               type="number"
+              min="0"
               :placeholder="form.operator !== FilterNumberOperator.BETWEEN ? 'Enter value' : 'From'"
+              @blur="$v.value.$touch"
+              @change="$v.value.$touch"
             />
           </app-form-item>
         </div>
         <div v-if="form.operator === FilterNumberOperator.BETWEEN" class="flex-grow px-1">
-          <app-form-item :validation="$v.valueTo" class="mb-0">
+          <app-form-item
+            :validation="$v.valueTo"
+            class="mb-0"
+            :show-error="false"
+          >
             <cr-filter-input
               v-model="form.valueTo"
               type="number"
               placeholder="To"
+              min="0"
+              @blur="$v.valueTo.$touch"
+              @change="$v.valueTo.$touch"
             />
           </app-form-item>
         </div>
       </div>
+      <app-form-errors
+        :validation="$v"
+        error-icon="ri-error-warning-line"
+        error-class="relative top-1"
+        :error-messages="{
+          'value-required': `${form.operator === FilterNumberOperator.BETWEEN ? 'From field' : 'This field'} is required`,
+          'value-numeric': `${form.operator === FilterNumberOperator.BETWEEN ? 'From field' : 'This field'} is invalid`,
+          'value-minValue': `${form.operator === FilterNumberOperator.BETWEEN ? 'From field' : 'This field'} value has to be positive`,
+          'valueTo-required': `To field is required`,
+          'valueTo-numeric': `To field is invalid`,
+          'valueTo-minValue': `Number should be higher than “From” field`,
+        }"
+      />
     </div>
   </div>
 </template>
@@ -50,6 +77,7 @@ import {
 import CrFilterInput from '@/shared/modules/filters/components/partials/string/FilterInput.vue';
 import CrFilterInlineSelect from '@/shared/modules/filters/components/partials/FilterInlineSelect.vue';
 import AppFormItem from '@/shared/form/form-item.vue';
+import AppFormErrors from '@/shared/form/form-errors.vue';
 
 const props = defineProps<{
   modelValue: NumberFilterValue,
diff --git a/frontend/src/shared/modules/filters/components/partials/FilterInlineSelect.vue b/frontend/src/shared/modules/filters/components/partials/FilterInlineSelect.vue
index 464e9e3d57..79056cb812 100644
--- a/frontend/src/shared/modules/filters/components/partials/FilterInlineSelect.vue
+++ b/frontend/src/shared/modules/filters/components/partials/FilterInlineSelect.vue
@@ -6,7 +6,7 @@
       :teleported="false"
       @visible-change="dropdownExpanded = $event"
     >
-      <div class="flex items-center">
+      <div class="flex items-center flex-wrap">
         <span class="filter-select-option-prefix mr-1">{{
           prefix
         }}</span>
diff --git a/frontend/src/shared/modules/filters/components/partials/string/FilterInput.vue b/frontend/src/shared/modules/filters/components/partials/string/FilterInput.vue
index 101eea29e4..2aef48f6da 100644
--- a/frontend/src/shared/modules/filters/components/partials/string/FilterInput.vue
+++ b/frontend/src/shared/modules/filters/components/partials/string/FilterInput.vue
@@ -1,7 +1,7 @@
 <template>
   <el-input
     v-model="model"
-    class="filter-input"
+    class="filter-input-field"
     :placeholder="placeholder"
   />
 </template>
@@ -32,13 +32,12 @@ export default {
 };
 </script>
 
-<style scope lang="scss">
-.filter-input {
+<style lang="scss">
+.filter-input-field {
   .el-input__wrapper,
   .el-input__wrapper.is-focus,
   .el-input__wrapper:hover {
-    border: none !important;
-    @apply bg-gray-50 shadow-none rounded-md;
+    @apply bg-gray-50 shadow-none rounded-md border border-gray-50 transition #{!important};
 
     input {
       &,
@@ -50,4 +49,15 @@ export default {
     }
   }
 }
+
+.el-form-item.is-error {
+  .filter-input-field {
+    .el-input__wrapper,
+    .el-input__wrapper.is-focus,
+    .el-input__wrapper:hover{
+      border-color: var(--el-color-danger) !important;
+    }
+  }
+}
+
 </style>

From af370b8704cb614012647752ee0cbdee27a8572b Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Tue, 30 May 2023 08:12:37 +0200
Subject: [PATCH 4/4] Fix relation bug and query empty values

---
 .../modules/filters/components/Filter.vue     | 22 ++++++++++++-------
 .../components/filterTypes/NumberFilter.vue   | 11 +++++++++-
 .../filters/services/filter-api.service.ts    |  2 +-
 .../filters/services/filter-query.service.ts  | 10 +++++++--
 .../types/filterTypes/NumberFilterConfig.ts   |  2 +-
 5 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/frontend/src/shared/modules/filters/components/Filter.vue b/frontend/src/shared/modules/filters/components/Filter.vue
index ddf3d7cdf5..7cf5a8a61d 100644
--- a/frontend/src/shared/modules/filters/components/Filter.vue
+++ b/frontend/src/shared/modules/filters/components/Filter.vue
@@ -74,10 +74,7 @@ const filters = computed<Filter>({
     return props.modelValue;
   },
   set(value: Filter) {
-    const {
-      settings, search, relation, order, pagination, ...filterValues
-    } = value;
-    filterList.value = Object.keys(filterValues);
+    alignFilterList(value);
     emit('update:modelValue', value);
   },
 });
@@ -88,11 +85,23 @@ const configuration = computed(() => ({
 }));
 
 const filterList = ref<string[]>([]);
+const cachedRelation = ref<'and' | 'or'>('and');
 
 const switchOperator = () => {
   filters.value.relation = filters.value.relation === 'and' ? 'or' : 'and';
 };
 
+const alignFilterList = (value: Filter) => {
+  const {
+    settings, search, relation, order, pagination, ...filterValues
+  } = value;
+  if (JSON.stringify(relation) !== JSON.stringify(cachedRelation.value)) {
+    cachedRelation.value = relation;
+    return;
+  }
+  filterList.value = Object.keys(filterValues);
+};
+
 const removeFilter = (key) => {
   open.value = '';
   filterList.value = filterList.value.filter((el) => el !== key);
@@ -109,10 +118,7 @@ const fetch = (value: Filter) => {
 
 watch(() => filters.value, (value: Filter) => {
   fetch(value);
-  const {
-    settings, search, relation, order, pagination, ...filterValues
-  } = value;
-  filterList.value = Object.keys(filterValues);
+  alignFilterList(value);
   const query = setQuery(value);
   router.push({ query });
 }, { deep: true });
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
index 2eef13e54c..735cb9f32e 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
@@ -61,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import {
   NumberFilterConfig,
   NumberFilterOptions,
@@ -118,6 +118,15 @@ const rules: any = computed(() => ({
 
 const $v = useVuelidate(rules, form);
 
+watch(() => form.value.operator, (operator) => {
+  console.log(operator);
+  if (operator !== FilterNumberOperator.BETWEEN) {
+    form.value.valueTo = undefined;
+  } else {
+    form.value.valueTo = '';
+  }
+});
+
 onMounted(() => {
   if (!form.value || Object.keys(form.value).length === 0) {
     form.value = defaultForm;
diff --git a/frontend/src/shared/modules/filters/services/filter-api.service.ts b/frontend/src/shared/modules/filters/services/filter-api.service.ts
index 87854fb84c..b384a6f18f 100644
--- a/frontend/src/shared/modules/filters/services/filter-api.service.ts
+++ b/frontend/src/shared/modules/filters/services/filter-api.service.ts
@@ -23,7 +23,7 @@ export const filterApiService = () => {
     let filters: any[] = [];
 
     // Search
-    if (search.length > 0) {
+    if (search?.length > 0) {
       baseFilters = [
         ...baseFilters,
         ...searchConfig.apiFilterRenderer(search),
diff --git a/frontend/src/shared/modules/filters/services/filter-query.service.ts b/frontend/src/shared/modules/filters/services/filter-query.service.ts
index 69f41f4c1d..51c13490d9 100644
--- a/frontend/src/shared/modules/filters/services/filter-query.service.ts
+++ b/frontend/src/shared/modules/filters/services/filter-query.service.ts
@@ -55,10 +55,16 @@ export const filterQueryService = () => {
     Object.entries(value).forEach(([key, filterValue]) => {
       if (typeof filterValue === 'object') {
         Object.entries(filterValue).forEach(([subKey, subFilterValue]) => {
-          query[`${key}.${subKey}`] = setQueryValue(subFilterValue);
+          const value = setQueryValue(subFilterValue);
+          if (value) {
+            query[`${key}.${subKey}`] = value;
+          }
         });
       } else {
-        query[key] = setQueryValue(filterValue);
+        const value = setQueryValue(filterValue);
+        if (value) {
+          query[key] = value;
+        }
       }
     });
     return query;
diff --git a/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts b/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts
index 044147aa97..ad1b5bc567 100644
--- a/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts
+++ b/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts
@@ -8,7 +8,7 @@ export interface NumberFilterOptions {
 export interface NumberFilterValue {
   operator: FilterNumberOperator,
   value: number | '',
-  valueTo: number | '',
+  valueTo?: number | '',
   include: boolean,
 }
 export interface NumberFilterConfig extends BaseFilterConfig {