From 6258e184339f710b033c172cf0642b7933dc85db Mon Sep 17 00:00:00 2001 From: Gasper Grom Date: Thu, 25 May 2023 10:59:41 +0200 Subject: [PATCH 1/3] Select filter options --- .../member/config/filters/activeOn/config.ts | 10 +++-- .../config/filters/activityType/config.ts | 6 +-- .../config/filters/avgSentiment/config.ts | 10 +++-- .../config/filters/engagementLevel/config.ts | 10 +++-- .../config/filters/enrichedMember/config.ts | 6 +-- .../config/filters/identities/config.ts | 10 +++-- .../config/filters/joinedDate/config.ts | 10 +++-- .../config/filters/lastActivityDate/config.ts | 10 +++-- .../config/filters/noOfActivities/config.ts | 10 +++-- .../filters/noOfOSSContributions/config.ts | 10 +++-- .../member/config/filters/reach/config.ts | 10 +++-- .../member/config/filters/tags/config.ts | 10 +++-- .../modules/filters/components/FilterItem.vue | 7 +++- .../filterTypes/MultiSelectFilter.vue | 4 +- .../components/filterTypes/NumberFilter.vue | 4 +- .../components/filterTypes/SelectFilter.vue | 24 ++++++++--- .../components/filterTypes/StringFilter.vue | 4 +- .../partials/select/FilterSelectOption.vue | 4 +- .../select.filter.renderer.ts | 13 +++--- .../select.label.renderer.ts | 11 ++++- .../filters/config/itemLabelRendererByType.ts | 2 +- .../services/custom-attributes.service.ts | 42 ++++++++++++------- .../types/filterTypes/BooleanFilterConfig.ts | 2 +- .../types/filterTypes/CustomFilterConfig.ts | 2 +- .../types/filterTypes/DateFilterConfig.ts | 2 +- .../filterTypes/MultiSelectFilterConfig.ts | 2 +- .../types/filterTypes/NumberFilterConfig.ts | 2 +- .../types/filterTypes/SelectFilterConfig.ts | 2 +- .../types/filterTypes/StringFilterConfig.ts | 2 +- 29 files changed, 161 insertions(+), 80 deletions(-) diff --git a/frontend/src/modules/member/config/filters/activeOn/config.ts b/frontend/src/modules/member/config/filters/activeOn/config.ts index e316f1bef5..e6d0668d79 100644 --- 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 index 93832e0899..1b4e56e268 100644 --- 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 index 067cc59a2d..157a9609e0 100644 --- 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 index c8cf3eb421..a7a0783f73 100644 --- 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 index 8e11bc411a..83df542da6 100644 --- 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 index 3619fad950..439ff4706d 100644 --- 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 index 457ba6b8ff..98b65a07ae 100644 --- 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 index ec291f607f..c89c2cf79b 100644 --- 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 index f1dd90604d..8a9da230d4 100644 --- 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 index 8c4aecc322..5b957aa8d6 100644 --- 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 index 4a549ed245..3c9a8c2be3 100644 --- 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 index 57f65d3f31..187fcaa8f4 100644 --- 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 index b5d012ffc1..abf7955b2d 100644 --- a/frontend/src/shared/modules/filters/components/FilterItem.vue +++ b/frontend/src/shared/modules/filters/components/FilterItem.vue @@ -11,7 +11,12 @@ > diff --git a/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectFilter.vue index e6676d2c9e..69a03dabca 100644 --- 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 index a5d1fb5dd0..2b7969f5f3 100644 --- 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 index 7e488dc34d..a5b8d9749f 100644 --- a/frontend/src/shared/modules/filters/components/filterTypes/SelectFilter.vue +++ b/frontend/src/shared/modules/filters/components/filterTypes/SelectFilter.vue @@ -1,7 +1,19 @@ @@ -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 index 4a17b4df5a..76479b82b6 100644 --- 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 index 4b57ba9453..2c4b5174b9 100644 --- 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 index fb487b9ec1..b202ffa0fd 100644 --- 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 index 1372fbfeaf..d50e26ea60 100644 --- 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 => `${property}: ${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 `${property}${excludeText}: ${option?.label || value || '...'}`; +}; diff --git a/frontend/src/shared/modules/filters/config/itemLabelRendererByType.ts b/frontend/src/shared/modules/filters/config/itemLabelRendererByType.ts index 1172f7263c..ad70e690af 100644 --- a/frontend/src/shared/modules/filters/config/itemLabelRendererByType.ts +++ b/frontend/src/shared/modules/filters/config/itemLabelRendererByType.ts @@ -8,7 +8,7 @@ import { multiSelectItemLabelRenderer, } from './itemLabelRenderer/multiselect.label.renderer'; -export const itemLabelRendererByType: Record string> = { +export const itemLabelRendererByType: Record string> = { [FilterConfigType.BOOLEAN]: booleanItemLabelRenderer, [FilterConfigType.NUMBER]: numberItemLabelRenderer, [FilterConfigType.DATE]: dateItemLabelRenderer, diff --git a/frontend/src/shared/modules/filters/services/custom-attributes.service.ts b/frontend/src/shared/modules/filters/services/custom-attributes.service.ts index 72a7bc8e46..0bc58d7a8e 100644 --- a/frontend/src/shared/modules/filters/services/custom-attributes.service.ts +++ b/frontend/src/shared/modules/filters/services/custom-attributes.service.ts @@ -1,18 +1,30 @@ import { FilterConfig, FilterConfigType } from '@/shared/modules/filters/types/FilterConfig'; import { FilterCustomAttribute, FilterCustomAttributeType } from '@/shared/modules/filters/types/FilterCustomAttribute'; -import { NumberFilterConfig, NumberFilterValue } from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig'; +import { + NumberFilterConfig, + NumberFilterOptions, + NumberFilterValue, +} from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig'; import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType'; import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType'; import { - BooleanFilterConfig, + BooleanFilterConfig, BooleanFilterOptions, BooleanFilterValue, } from '@/shared/modules/filters/types/filterTypes/BooleanFilterConfig'; -import { DateFilterConfig, DateFilterValue } from '@/shared/modules/filters/types/filterTypes/DateFilterConfig'; import { - MultiSelectFilterConfig, + DateFilterConfig, + DateFilterOptions, + DateFilterValue, +} from '@/shared/modules/filters/types/filterTypes/DateFilterConfig'; +import { + MultiSelectFilterConfig, MultiSelectFilterOptions, MultiSelectFilterValue, } from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig'; -import { StringFilterConfig, StringFilterValue } from '@/shared/modules/filters/types/filterTypes/StringFilterConfig'; +import { + StringFilterConfig, + StringFilterOptions, + StringFilterValue, +} from '@/shared/modules/filters/types/filterTypes/StringFilterConfig'; export const customAttributesService = () => { function buildFilterFromAttributes( @@ -31,8 +43,8 @@ export const customAttributesService = () => { options: { hideIncludeSwitch: true, }, - itemLabelRenderer(value: NumberFilterValue): string { - return itemLabelRendererByType[FilterConfigType.NUMBER](attribute.label, value); + itemLabelRenderer(value: NumberFilterValue, options: NumberFilterOptions): string { + return itemLabelRendererByType[FilterConfigType.NUMBER](attribute.label, value, options); }, apiFilterRenderer(value: NumberFilterValue): any[] { return apiFilterRendererByType[FilterConfigType.NUMBER](`attributes.${attribute.name}.default`, value); @@ -49,8 +61,8 @@ export const customAttributesService = () => { options: { hideIncludeSwitch: true, }, - itemLabelRenderer(value: BooleanFilterValue): string { - return itemLabelRendererByType[FilterConfigType.BOOLEAN](attribute.label, value); + itemLabelRenderer(value: BooleanFilterValue, options: BooleanFilterOptions): string { + return itemLabelRendererByType[FilterConfigType.BOOLEAN](attribute.label, value, options); }, apiFilterRenderer(value: BooleanFilterValue): any[] { return apiFilterRendererByType[FilterConfigType.BOOLEAN](`attributes.${attribute.name}.default`, value); @@ -67,8 +79,8 @@ export const customAttributesService = () => { options: { hideIncludeSwitch: true, }, - itemLabelRenderer(value: StringFilterValue): string { - return itemLabelRendererByType[FilterConfigType.STRING](attribute.label, value); + itemLabelRenderer(value: StringFilterValue, options: StringFilterOptions): string { + return itemLabelRendererByType[FilterConfigType.STRING](attribute.label, value, options); }, apiFilterRenderer(value: StringFilterValue): any[] { return apiFilterRendererByType[FilterConfigType.STRING](`attributes.${attribute.name}.default`, value); @@ -85,8 +97,8 @@ export const customAttributesService = () => { options: { hideIncludeSwitch: true, }, - itemLabelRenderer(value: DateFilterValue): string { - return itemLabelRendererByType[FilterConfigType.DATE](attribute.label, value); + itemLabelRenderer(value: DateFilterValue, options: DateFilterOptions): string { + return itemLabelRendererByType[FilterConfigType.DATE](attribute.label, value, options); }, apiFilterRenderer(value: DateFilterValue): any[] { return apiFilterRendererByType[FilterConfigType.DATE](`attributes.${attribute.name}.default`, value); @@ -112,8 +124,8 @@ export const customAttributesService = () => { }, ], }, - itemLabelRenderer(value: MultiSelectFilterValue): string { - return itemLabelRendererByType[FilterConfigType.MULTISELECT](attribute.label, value); + itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions): string { + return itemLabelRendererByType[FilterConfigType.MULTISELECT](attribute.label, value, options); }, apiFilterRenderer(value: MultiSelectFilterValue): any[] { return apiFilterRendererByType[FilterConfigType.MULTISELECT](`attributes.${attribute.name}.default`, value); diff --git a/frontend/src/shared/modules/filters/types/filterTypes/BooleanFilterConfig.ts b/frontend/src/shared/modules/filters/types/filterTypes/BooleanFilterConfig.ts index dbe4902a00..15438fc20e 100644 --- a/frontend/src/shared/modules/filters/types/filterTypes/BooleanFilterConfig.ts +++ b/frontend/src/shared/modules/filters/types/filterTypes/BooleanFilterConfig.ts @@ -13,6 +13,6 @@ export interface BooleanFilterValue { export interface BooleanFilterConfig extends BaseFilterConfig { type: FilterConfigType.BOOLEAN; options: BooleanFilterOptions; - itemLabelRenderer: (value: BooleanFilterValue) => string; + itemLabelRenderer: (value: BooleanFilterValue, options: BooleanFilterOptions) => string; apiFilterRenderer: (value: BooleanFilterValue) => any[]; } diff --git a/frontend/src/shared/modules/filters/types/filterTypes/CustomFilterConfig.ts b/frontend/src/shared/modules/filters/types/filterTypes/CustomFilterConfig.ts index 065be188f7..5a0a3f2e3d 100644 --- a/frontend/src/shared/modules/filters/types/filterTypes/CustomFilterConfig.ts +++ b/frontend/src/shared/modules/filters/types/filterTypes/CustomFilterConfig.ts @@ -6,6 +6,6 @@ export interface CustomFilterConfig extends BaseFilterConfig { component: any; options: any; queryUrlParser: ((value: any) => Record) | null; - itemLabelRenderer: (value: any) => string; + itemLabelRenderer: (value: any, options: any) => string; apiFilterRenderer: (value: any) => any[]; } diff --git a/frontend/src/shared/modules/filters/types/filterTypes/DateFilterConfig.ts b/frontend/src/shared/modules/filters/types/filterTypes/DateFilterConfig.ts index d29d40732b..1087855fac 100644 --- a/frontend/src/shared/modules/filters/types/filterTypes/DateFilterConfig.ts +++ b/frontend/src/shared/modules/filters/types/filterTypes/DateFilterConfig.ts @@ -14,6 +14,6 @@ export interface DateFilterValue { export interface DateFilterConfig extends BaseFilterConfig { type: FilterConfigType.DATE; options: DateFilterOptions; - itemLabelRenderer: (value: DateFilterValue) => string; + itemLabelRenderer: (value: DateFilterValue, options: DateFilterOptions) => string; apiFilterRenderer: (value: DateFilterValue) => any[]; } diff --git a/frontend/src/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig.ts b/frontend/src/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig.ts index 82b58c1ccb..bb738e1d6d 100644 --- a/frontend/src/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig.ts +++ b/frontend/src/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig.ts @@ -21,6 +21,6 @@ export interface MultiSelectFilterValue { export interface MultiSelectFilterConfig extends BaseFilterConfig { type: FilterConfigType.MULTISELECT; options: MultiSelectFilterOptions; - itemLabelRenderer: (value: MultiSelectFilterValue) => string; + itemLabelRenderer: (value: MultiSelectFilterValue, options: MultiSelectFilterOptions) => string; apiFilterRenderer: (value: MultiSelectFilterValue) => any[]; } diff --git a/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts b/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts index ddee694259..ca30d3e450 100644 --- a/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts +++ b/frontend/src/shared/modules/filters/types/filterTypes/NumberFilterConfig.ts @@ -12,6 +12,6 @@ export interface NumberFilterValue { export interface NumberFilterConfig extends BaseFilterConfig { type: FilterConfigType.NUMBER; options: NumberFilterOptions; - itemLabelRenderer: (value: NumberFilterValue) => string; + itemLabelRenderer: (value: NumberFilterValue, options: NumberFilterOptions) => string; apiFilterRenderer: (value: NumberFilterValue) => any[]; } diff --git a/frontend/src/shared/modules/filters/types/filterTypes/SelectFilterConfig.ts b/frontend/src/shared/modules/filters/types/filterTypes/SelectFilterConfig.ts index 0ffe51bbf9..7bd573b0db 100644 --- a/frontend/src/shared/modules/filters/types/filterTypes/SelectFilterConfig.ts +++ b/frontend/src/shared/modules/filters/types/filterTypes/SelectFilterConfig.ts @@ -23,6 +23,6 @@ export interface SelectFilterValue { export interface SelectFilterConfig extends BaseFilterConfig { type: FilterConfigType.SELECT; options: SelectFilterOptions; - itemLabelRenderer: (value: SelectFilterValue) => string; + itemLabelRenderer: (value: SelectFilterValue, options: SelectFilterOptions) => string; apiFilterRenderer: (value: SelectFilterValue) => any[]; } diff --git a/frontend/src/shared/modules/filters/types/filterTypes/StringFilterConfig.ts b/frontend/src/shared/modules/filters/types/filterTypes/StringFilterConfig.ts index 28018b9451..afc99d2b1d 100644 --- a/frontend/src/shared/modules/filters/types/filterTypes/StringFilterConfig.ts +++ b/frontend/src/shared/modules/filters/types/filterTypes/StringFilterConfig.ts @@ -12,6 +12,6 @@ export interface StringFilterValue { export interface StringFilterConfig extends BaseFilterConfig { type: FilterConfigType.STRING; options: StringFilterOptions; - itemLabelRenderer: (value: StringFilterValue) => string; + itemLabelRenderer: (value: StringFilterValue, options: StringFilterOptions) => string; apiFilterRenderer: (value: StringFilterValue) => any[]; } From 8c504afb18acfbccb80f41aa29c7575011e38f5b Mon Sep 17 00:00:00 2001 From: Gasper Grom Date: Thu, 25 May 2023 11:18:27 +0200 Subject: [PATCH 2/3] Fix string and boolean styling --- .../modules/filters/components/filterTypes/BooleanFilter.vue | 4 ++-- .../modules/filters/components/filterTypes/SelectFilter.vue | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue index d9995880a1..7895b164fa 100644 --- a/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue +++ b/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue @@ -1,7 +1,7 @@