Number base filter

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;

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>

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 || []);

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>
@@ -67,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);
   },
 });
@@ -81,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);
@@ -102,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 });

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]);
 };