linuxfoundation · gaspergrom · May 25, 2023 · May 25, 2023 · May 25, 2023 · May 25, 2023
diff --git a/frontend/src/modules/member/config/filters/activeOn/config.ts b/frontend/src/modules/member/config/filters/activeOn/config.ts
@@ -1,5 +1,9 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
-import { MultiSelectFilterConfig, MultiSelectFilterValue } from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
+import {
+  MultiSelectFilterConfig,
+  MultiSelectFilterOptions,
+  MultiSelectFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
@@ -20,8 +24,8 @@ const activeOn: MultiSelectFilterConfig = {
       },
     ],
   },
-  itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Active on', value);
+  itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Active on', value, options);
   },
   apiFilterRenderer(value: MultiSelectFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.MULTISELECT]('activeOn', value);

diff --git a/frontend/src/modules/member/config/filters/activityType/config.ts b/frontend/src/modules/member/config/filters/activityType/config.ts
@@ -1,7 +1,7 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
 import { CustomFilterConfig } from '@/shared/modules/filters/types/filterTypes/CustomFilterConfig';
 import ActivityTypeFilter from '@/modules/activity/config/filters/activityType/ActivityTypeFilter.vue';
-import { SelectFilterValue } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import { SelectFilterOptions, SelectFilterValue } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
 import { queryUrlParserByType } from '@/shared/modules/filters/config/queryUrlParserByType';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
@@ -14,8 +14,8 @@ const activityType: CustomFilterConfig = {
   options: {
   },
   queryUrlParser: queryUrlParserByType[FilterConfigType.SELECT],
-  itemLabelRenderer(value: SelectFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.SELECT]('Activity type', value);
+  itemLabelRenderer(value: SelectFilterValue, options: SelectFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.SELECT]('Activity type', value, options);
   },
   apiFilterRenderer(value: SelectFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.SELECT]('activityTypes', value);

diff --git a/frontend/src/modules/member/config/filters/avgSentiment/config.ts b/frontend/src/modules/member/config/filters/avgSentiment/config.ts
@@ -1,5 +1,9 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
-import { MultiSelectFilterConfig, MultiSelectFilterValue } from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
+import {
+  MultiSelectFilterConfig,
+  MultiSelectFilterOptions,
+  MultiSelectFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
 import options from './options';
@@ -11,8 +15,8 @@ const avgSentiment: MultiSelectFilterConfig = {
   options: {
     options,
   },
-  itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Avg. sentiment', value);
+  itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Avg. sentiment', value, options);
   },
   apiFilterRenderer(value: MultiSelectFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.MULTISELECT]('averageSentiment', value);

diff --git a/frontend/src/modules/member/config/filters/engagementLevel/config.ts b/frontend/src/modules/member/config/filters/engagementLevel/config.ts
@@ -1,5 +1,9 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
-import { MultiSelectFilterConfig, MultiSelectFilterValue } from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
+import {
+  MultiSelectFilterConfig,
+  MultiSelectFilterOptions,
+  MultiSelectFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
 import options from './options';
@@ -11,8 +15,8 @@ const engagementLevel: MultiSelectFilterConfig = {
   options: {
     options,
   },
-  itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Engagement level', value);
+  itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Engagement level', value, options);
   },
   apiFilterRenderer(value: MultiSelectFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.MULTISELECT]('score', value);

diff --git a/frontend/src/modules/member/config/filters/enrichedMember/config.ts b/frontend/src/modules/member/config/filters/enrichedMember/config.ts
@@ -1,6 +1,6 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
 import {
-  BooleanFilterConfig,
+  BooleanFilterConfig, BooleanFilterOptions,
   BooleanFilterValue,
 } from '@/shared/modules/filters/types/filterTypes/BooleanFilterConfig';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
@@ -10,8 +10,8 @@ const enrichedMember: BooleanFilterConfig = {
   label: 'Enriched member',
   type: FilterConfigType.BOOLEAN,
   options: {},
-  itemLabelRenderer(value: BooleanFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.BOOLEAN]('Enriched member', value);
+  itemLabelRenderer(value: BooleanFilterValue, options: BooleanFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.BOOLEAN]('Enriched member', value, options);
   },
   apiFilterRenderer({ value, include }: BooleanFilterValue): any[] {
     const filter = {

diff --git a/frontend/src/modules/member/config/filters/identities/config.ts b/frontend/src/modules/member/config/filters/identities/config.ts
@@ -1,5 +1,9 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
-import { MultiSelectFilterConfig, MultiSelectFilterValue } from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
+import {
+  MultiSelectFilterConfig,
+  MultiSelectFilterOptions,
+  MultiSelectFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
@@ -20,8 +24,8 @@ const identities: MultiSelectFilterConfig = {
       },
     ],
   },
-  itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Identities', value);
+  itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Identities', value, options);
   },
   apiFilterRenderer(value: MultiSelectFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.MULTISELECT]('identities', value);

diff --git a/frontend/src/modules/member/config/filters/joinedDate/config.ts b/frontend/src/modules/member/config/filters/joinedDate/config.ts
@@ -1,5 +1,9 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
-import { DateFilterConfig, DateFilterValue } from '@/shared/modules/filters/types/filterTypes/DateFilterConfig';
+import {
+  DateFilterConfig,
+  DateFilterOptions,
+  DateFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/DateFilterConfig';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
 
@@ -8,8 +12,8 @@ const joinedDate: DateFilterConfig = {
   label: 'Joined date',
   type: FilterConfigType.DATE,
   options: {},
-  itemLabelRenderer(value: DateFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.DATE]('Joined date', value);
+  itemLabelRenderer(value: DateFilterValue, options: DateFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.DATE]('Joined date', value, options);
   },
   apiFilterRenderer(value: DateFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.DATE]('joinedAt', value);

diff --git a/frontend/src/modules/member/config/filters/lastActivityDate/config.ts b/frontend/src/modules/member/config/filters/lastActivityDate/config.ts
@@ -1,5 +1,9 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
-import { DateFilterConfig, DateFilterValue } from '@/shared/modules/filters/types/filterTypes/DateFilterConfig';
+import {
+  DateFilterConfig,
+  DateFilterOptions,
+  DateFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/DateFilterConfig';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
 
@@ -8,8 +12,8 @@ const lastActivityDate: DateFilterConfig = {
   label: 'Last activity date',
   type: FilterConfigType.DATE,
   options: {},
-  itemLabelRenderer(value: DateFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.DATE]('Last activity date', value);
+  itemLabelRenderer(value: DateFilterValue, options: DateFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.DATE]('Last activity date', value, options);
   },
   apiFilterRenderer(value: DateFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.DATE]('lastActive', value);

diff --git a/frontend/src/modules/member/config/filters/noOfActivities/config.ts b/frontend/src/modules/member/config/filters/noOfActivities/config.ts
@@ -1,4 +1,8 @@
-import { NumberFilterConfig, NumberFilterValue } from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
+import {
+  NumberFilterConfig,
+  NumberFilterOptions,
+  NumberFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
@@ -8,8 +12,8 @@ const noOfActivities: NumberFilterConfig = {
   label: '# of activities',
   type: FilterConfigType.NUMBER,
   options: {},
-  itemLabelRenderer(value: NumberFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.NUMBER]('# of activities', value);
+  itemLabelRenderer(value: NumberFilterValue, options: NumberFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.NUMBER]('# of activities', value, options);
   },
   apiFilterRenderer(value: NumberFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.NUMBER]('activityCount', value);

diff --git a/frontend/src/modules/member/config/filters/noOfOSSContributions/config.ts b/frontend/src/modules/member/config/filters/noOfOSSContributions/config.ts
@@ -1,4 +1,8 @@
-import { NumberFilterConfig, NumberFilterValue } from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
+import {
+  NumberFilterConfig,
+  NumberFilterOptions,
+  NumberFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
@@ -8,8 +12,8 @@ const noOfOSSContributions: NumberFilterConfig = {
   label: '# of open source contributions',
   type: FilterConfigType.NUMBER,
   options: {},
-  itemLabelRenderer(value: NumberFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.NUMBER]('# of OSS contributions', value);
+  itemLabelRenderer(value: NumberFilterValue, options: NumberFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.NUMBER]('# of OSS contributions', value, options);
   },
   apiFilterRenderer(value: NumberFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.NUMBER]('numberOfOpenSourceContributions', value);

diff --git a/frontend/src/modules/member/config/filters/reach/config.ts b/frontend/src/modules/member/config/filters/reach/config.ts
@@ -1,4 +1,8 @@
-import { NumberFilterConfig, NumberFilterValue } from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
+import {
+  NumberFilterConfig,
+  NumberFilterOptions,
+  NumberFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
@@ -8,8 +12,8 @@ const reach: NumberFilterConfig = {
   label: 'Reach',
   type: FilterConfigType.NUMBER,
   options: {},
-  itemLabelRenderer(value: NumberFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.NUMBER]('Reach', value);
+  itemLabelRenderer(value: NumberFilterValue, options: NumberFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.NUMBER]('Reach', value, options);
   },
   apiFilterRenderer(value: NumberFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.NUMBER]('reach', value);

diff --git a/frontend/src/modules/member/config/filters/tags/config.ts b/frontend/src/modules/member/config/filters/tags/config.ts
@@ -1,5 +1,9 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
-import { MultiSelectFilterConfig, MultiSelectFilterValue } from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
+import {
+  MultiSelectFilterConfig,
+  MultiSelectFilterOptions,
+  MultiSelectFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
 
@@ -11,8 +15,8 @@ const tags: MultiSelectFilterConfig = {
     // TODO: load this options remote
     options: [],
   },
-  itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Active on', value);
+  itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Active on', value, options);
   },
   apiFilterRenderer(value: MultiSelectFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.MULTISELECT]('tags', value);

diff --git a/frontend/src/shared/modules/filters/components/FilterItem.vue b/frontend/src/shared/modules/filters/components/FilterItem.vue
@@ -11,7 +11,12 @@
       >
         <template #reference>
           <el-button ref="chip" class="btn btn--bordered !h-8 p-2 !border !outline-none font-medium text-xs">
-            <span v-html="$sanitize((props.modelValue && config.itemLabelRenderer(props.modelValue)) || config.label)" />
+            <span
+              v-html="$sanitize(
+                (props.modelValue && config.itemLabelRenderer(props.modelValue, props.config.options))
+                  || `<b>${config.label}:</b> ...`,
+              )"
+            />
           </el-button>
         </template>
 

diff --git a/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue
@@ -1,7 +1,7 @@
 <template>
-  <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">
+  <div v-if="form" class="filter-base-boolean pb-4">
+    <cr-filter-include-switch v-if="!props.hideIncludeSwitch" v-model="form.include" class="mb-3" />
+    <p class="text-gray-500 mb-2 font-medium text-2xs pb-1">
       {{ props.config.label }}
     </p>
     <cr-filter-select-option v-model="form.value" :value="true">

diff --git a/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectFilter.vue
@@ -11,8 +11,8 @@ import {
 } from 'vue';
 import {
   MultiSelectFilterValue,
-  MultiSelectFilterOptions, MultiSelectFilterConfig
-} 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';
 

diff --git a/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
@@ -12,8 +12,8 @@ import {
 import {
   NumberFilterConfig,
   NumberFilterOptions,
-  NumberFilterValue
-} from "@/shared/modules/filters/types/filterTypes/NumberFilterConfig";
+  NumberFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
 import useVuelidate from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 

diff --git a/frontend/src/shared/modules/filters/components/filterTypes/SelectFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/SelectFilter.vue
@@ -1,7 +1,19 @@
 <template>
-  <div v-if="form">
-    Select filter
-    <!-- TODO: prepare select filter -->
+  <div v-if="form" class="filter-base-select">
+    <cr-filter-include-switch v-if="!props.hideIncludeSwitch" v-model="form.include" class="mb-2" />
+    <div class="max-h-58 overflow-auto pb-3">
+      <template v-for="(group, gi) of props.options" :key="gi">
+        <div
+          v-if="group.label"
+          class="text-2xs text-gray-400 font-semibold tracking-wide leading-6 uppercase px-3 my-1"
+        >
+          {{ group.label }}
+        </div>
+        <cr-filter-select-option v-for="(option, oi) of group.options" :key="oi" v-model="form.value" :value="option.value">
+          {{ option.label }}
+        </cr-filter-select-option>
+      </template>
+    </div>
   </div>
 </template>
 
@@ -12,10 +24,12 @@ import {
 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';
+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: SelectFilterValue,

diff --git a/frontend/src/shared/modules/filters/components/filterTypes/StringFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/StringFilter.vue
@@ -13,8 +13,8 @@ import { required } from '@vuelidate/validators';
 import {
   StringFilterConfig,
   StringFilterOptions,
-  StringFilterValue
-} from "@/shared/modules/filters/types/filterTypes/StringFilterConfig";
+  StringFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/StringFilterConfig';
 
 const props = defineProps<{
   modelValue: StringFilterValue,

diff --git a/frontend/src/shared/modules/filters/components/partials/select/FilterSelectOption.vue b/frontend/src/shared/modules/filters/components/partials/select/FilterSelectOption.vue
@@ -18,10 +18,10 @@ import { computed } from 'vue';
 
 const props = defineProps<{
   modelValue: boolean,
-  value: boolean,
+  value: boolean | string,
 }>();
 
-const emit = defineEmits<{(e: 'update:modelValue', value: boolean)}>();
+const emit = defineEmits<{(e: 'update:modelValue', value: boolean | string)}>();
 
 const selected = computed(() => props.modelValue === props.value);
 

diff --git a/frontend/src/shared/modules/filters/config/apiFilterRenderer/select.filter.renderer.ts b/frontend/src/shared/modules/filters/config/apiFilterRenderer/select.filter.renderer.ts
@@ -1,7 +1,10 @@
 import { SelectFilterValue } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
 
-export const selectApiFilterRenderer = (property: string, { value }: SelectFilterValue): any[] => [
-  {
-    [property]: value,
-  },
-];
+export const selectApiFilterRenderer = (property: string, { value, include }: SelectFilterValue): any[] => {
+  const filter = {
+    [property]: { overlap: [value] },
+  };
+  return [
+    (include ? filter : { not: filter }),
+  ];
+};
diff --git a/frontend/src/shared/modules/filters/config/itemLabelRenderer/select.label.renderer.ts b/frontend/src/shared/modules/filters/config/itemLabelRenderer/select.label.renderer.ts
@@ -1,3 +1,10 @@
-import { SelectFilterValue } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import {
+  SelectFilterOptions,
+  SelectFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
 
-export const selectItemLabelRenderer = (property: string, { value }: SelectFilterValue): string => `<b>${property}:</b> ${value}`;
+export const selectItemLabelRenderer = (property: string, { value, include }: SelectFilterValue, options: SelectFilterOptions): string => {
+  const excludeText = !include ? ' (exclude)' : '';
+  const option = options.options.map((g) => g.options).flat().find((o) => o.value === value);
+  return `<b>${property}${excludeText}:</b> ${option?.label || value || '...'}`;
+};