Boolean base filter

frontend/src/modules/member/config/filters/enrichedMember/config.ts

@@ -4,7 +4,6 @@ import {
   BooleanFilterValue,
 } from '@/shared/modules/filters/types/filterTypes/BooleanFilterConfig';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
-import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
 
 const enrichedMember: BooleanFilterConfig = {
   id: 'enrichedMember',
@@ -14,8 +13,15 @@ const enrichedMember: BooleanFilterConfig = {
   itemLabelRenderer(value: BooleanFilterValue): string {
     return itemLabelRendererByType[FilterConfigType.BOOLEAN]('Enriched member', value);
   },
-  apiFilterRenderer(value: BooleanFilterValue): any[] {
-    return apiFilterRendererByType[FilterConfigType.BOOLEAN]('lastEnriched', value);
+  apiFilterRenderer({ value, include }: BooleanFilterValue): any[] {
+    const filter = {
+      lastEnriched: {
+        [value ? 'ne' : 'eq']: null,
+      },
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
   },
 };
 

frontend/src/modules/member/config/filters/joinedDate/config.ts

@@ -9,10 +9,10 @@ const joinedDate: DateFilterConfig = {
   type: FilterConfigType.DATE,
   options: {},
   itemLabelRenderer(value: DateFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.BOOLEAN]('Joined date', value);
+    return itemLabelRendererByType[FilterConfigType.DATE]('Joined date', value);
   },
   apiFilterRenderer(value: DateFilterValue): any[] {
-    return apiFilterRendererByType[FilterConfigType.BOOLEAN]('joinedAt', value);
+    return apiFilterRendererByType[FilterConfigType.DATE]('joinedAt', value);
   },
 };
 

frontend/src/modules/member/config/filters/lastActivityDate/config.ts

@@ -9,10 +9,10 @@ const lastActivityDate: DateFilterConfig = {
   type: FilterConfigType.DATE,
   options: {},
   itemLabelRenderer(value: DateFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.BOOLEAN]('Last activity date', value);
+    return itemLabelRendererByType[FilterConfigType.DATE]('Last activity date', value);
   },
   apiFilterRenderer(value: DateFilterValue): any[] {
-    return apiFilterRendererByType[FilterConfigType.BOOLEAN]('lastActive', value);
+    return apiFilterRendererByType[FilterConfigType.DATE]('lastActive', value);
   },
 };
 

frontend/src/shared/modules/filters/components/FilterItem.vue

@@ -15,8 +15,8 @@
           </el-button>
         </template>
 
-        <div>
-          <component :is="getComponent" v-if="getComponent" v-model="form" v-bind="props.config.options" />
+        <div class="px-1">
+          <component :is="getComponent" v-if="getComponent" v-model="form" :config="props.config" v-bind="props.config.options" />
         </div>
         <div class="flex justify-end items-center border-t pt-2">
           <el-button class="btn btn--transparent btn--sm mr-2" @click="close">

frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue

@@ -1,20 +1,35 @@
 <template>
-  <div v-if="form">
-    Boolean filter
-    <!-- TODO: prepare boolean filter -->
+  <div v-if="form" class="filter-base-boolean pb-4 pt-2">
+    <cr-filter-include-switch v-if="!props.hideIncludeSwitch" v-model="form.include" />
+    <p class="text-gray-500 mb-2 font-medium text-2xs pt-3 pb-1">
+      {{ props.config.label }}
+    </p>
+    <cr-filter-select-option v-model="form.value" :value="true">
+      True
+    </cr-filter-select-option>
+    <cr-filter-select-option v-model="form.value" :value="false">
+      False
+    </cr-filter-select-option>
   </div>
 </template>
 
 <script setup lang="ts">
 import {
   defineProps, defineEmits, computed, onMounted,
 } from 'vue';
-import { BooleanFilterValue, BooleanFilterOptions } from '@/shared/modules/filters/types/filterTypes/BooleanFilterConfig';
+import {
+  BooleanFilterValue,
+  BooleanFilterOptions,
+  BooleanFilterConfig,
+} from '@/shared/modules/filters/types/filterTypes/BooleanFilterConfig';
 import { required } from '@vuelidate/validators';
 import useVuelidate from '@vuelidate/core';
+import CrFilterIncludeSwitch from '@/shared/modules/filters/components/partials/FilterIncludeSwitch.vue';
+import CrFilterSelectOption from '@/shared/modules/filters/components/partials/select/FilterSelectOption.vue';
 
 const props = defineProps<{
-  modelValue: BooleanFilterValue
+  modelValue: BooleanFilterValue,
+  config: BooleanFilterConfig,
 } & BooleanFilterOptions>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: BooleanFilterValue)}>();

frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue

@@ -9,12 +9,17 @@
 import {
   defineProps, defineEmits, computed, onMounted,
 } from 'vue';
-import { DateFilterValue, DateFilterOptions } from '@/shared/modules/filters/types/filterTypes/DateFilterConfig';
+import {
+  DateFilterValue,
+  DateFilterOptions,
+  DateFilterConfig,
+} from '@/shared/modules/filters/types/filterTypes/DateFilterConfig';
 import { required } from '@vuelidate/validators';
 import useVuelidate from '@vuelidate/core';
 
 const props = defineProps<{
-  modelValue: DateFilterValue
+  modelValue: DateFilterValue,
+  config: DateFilterConfig
 } & DateFilterOptions>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: DateFilterValue)}>();

frontend/src/shared/modules/filters/components/filterTypes/MultiSelectFilter.vue

@@ -11,13 +11,14 @@ import {
 } from 'vue';
 import {
   MultiSelectFilterValue,
-  MultiSelectFilterOptions,
-} from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
+  MultiSelectFilterOptions, MultiSelectFilterConfig
+} from "@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig";
 import { required } from '@vuelidate/validators';
 import useVuelidate from '@vuelidate/core';
 
 const props = defineProps<{
-  modelValue: MultiSelectFilterValue
+  modelValue: MultiSelectFilterValue,
+  config: MultiSelectFilterConfig
 } & MultiSelectFilterOptions>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: MultiSelectFilterValue)}>();

frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue

@@ -9,12 +9,17 @@
 import {
   defineProps, defineEmits, computed, onMounted,
 } from 'vue';
-import { NumberFilterOptions, NumberFilterValue } from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
+import {
+  NumberFilterConfig,
+  NumberFilterOptions,
+  NumberFilterValue
+} from "@/shared/modules/filters/types/filterTypes/NumberFilterConfig";
 import useVuelidate from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 
 const props = defineProps<{
-  modelValue: NumberFilterValue
+  modelValue: NumberFilterValue,
+  config: NumberFilterConfig
 } & NumberFilterOptions>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: NumberFilterValue)}>();

frontend/src/shared/modules/filters/components/filterTypes/SelectFilter.vue

@@ -10,14 +10,16 @@ import {
   defineProps, defineEmits, computed, onMounted,
 } from 'vue';
 import {
+  SelectFilterConfig,
   SelectFilterOptions,
-  SelectFilterValue,
-} from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+  SelectFilterValue
+} from "@/shared/modules/filters/types/filterTypes/SelectFilterConfig";
 import { required } from '@vuelidate/validators';
 import useVuelidate from '@vuelidate/core';
 
 const props = defineProps<{
   modelValue: SelectFilterValue,
+  config: SelectFilterConfig
 } & SelectFilterOptions>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: SelectFilterValue)}>();

frontend/src/shared/modules/filters/components/filterTypes/StringFilter.vue

@@ -10,10 +10,15 @@ import {
 } from 'vue';
 import useVuelidate from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { StringFilterOptions, StringFilterValue } from '@/shared/modules/filters/types/filterTypes/StringFilterConfig';
+import {
+  StringFilterConfig,
+  StringFilterOptions,
+  StringFilterValue
+} from "@/shared/modules/filters/types/filterTypes/StringFilterConfig";
 
 const props = defineProps<{
-  modelValue: StringFilterValue
+  modelValue: StringFilterValue,
+  config: StringFilterConfig
 } & StringFilterOptions>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: StringFilterValue)}>();

frontend/src/shared/modules/filters/components/partials/FilterIncludeSwitch.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex justify-start">
+    <el-switch
+      v-model="model"
+      :active-text="modelValue ? 'Include' : 'Exclude'"
+      class="w-fit flex !justify-start !m-0"
+      size="small"
+      data-qa="filter-include-switch"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const model = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(v) {
+    emit('update:modelValue', v);
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'CrFilterIncludeSwitch',
+};
+</script>

frontend/src/shared/modules/filters/components/partials/select/FilterSelectOption.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    :class="selected ? 'is-selected' : ''"
+    v-bind="$attrs"
+    class="filter-select-option"
+    @click="selectOption()"
+  >
+    <slot />
+    <i
+      v-if="selected"
+      class="ri-check-line text-brand-600 absolute right-0 mr-4"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  modelValue: boolean,
+  value: boolean,
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: boolean)}>();
+
+const selected = computed(() => props.modelValue === props.value);
+
+const selectOption = () => {
+  emit('update:modelValue', props.value);
+};
+
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CrFilterSelectOption',
+};
+</script>
+
+<style lang="scss" scoped>
+.filter-select-option{
+  @apply flex items-center text-black px-4 py-3 text-xs cursor-pointer relative transition;
+  border-radius: 4px;
+
+  &:not(:last-of-type) {
+    @apply mb-1;
+  }
+
+  i {
+    @apply mr-2;
+  }
+
+  i:not(.ri-delete-bin-line) {
+    @apply text-gray-400;
+  }
+
+  &:focus,
+  &:not(.is-disabled):hover,
+  &:not(.is-disabled):focus {
+    @apply text-black bg-gray-50;
+  }
+
+  &.is-disabled {
+    @apply cursor-not-allowed;
+  }
+
+  &.is-selected,
+  &:focus.is-selected {
+    @apply relative bg-brand-50;
+    i {
+      @apply mr-3 text-brand-600;
+    }
+
+    &:hover{
+      @apply bg-brand-50;
+    }
+  }
+}
+</style>

frontend/src/shared/modules/filters/config/apiFilterRenderer/boolean.filter.renderer.ts

@@ -1,7 +1,9 @@
 import { BooleanFilterValue } from '@/shared/modules/filters/types/filterTypes/BooleanFilterConfig';
 
-export const booleanApiFilterRenderer = (property: string, { value }: BooleanFilterValue): any[] => [
-  {
-    [property]: value,
-  },
+export const booleanApiFilterRenderer = (property: string, { value, include }: BooleanFilterValue): any[] => [
+  (include ? {
+    [property]: { eq: value },
+  } : {
+    [property]: { not: { eq: value } },
+  }),
 ];

frontend/src/shared/modules/filters/config/itemLabelRenderer/boolean.label.renderer.ts

@@ -1,6 +1,7 @@
 import { BooleanFilterValue } from '@/shared/modules/filters/types/filterTypes/BooleanFilterConfig';
 
-export const booleanItemLabelRenderer = (property: string, { value }: BooleanFilterValue): string => {
-  console.log(value);
-  return `<b>${property}:</b> ${value ? 'True' : 'False'}`;
+export const booleanItemLabelRenderer = (property: string, { value, include }: BooleanFilterValue): string => {
+  const excludeText = !include ? ' (exclude)' : '';
+  const valueText = value ? 'True' : 'False';
+  return `<b>${property}${excludeText}:</b> ${valueText}`;
 };