From 09dc38a71b0a8716cbfdd8a25f62166cee2d6e69 Mon Sep 17 00:00:00 2001 From: Gasper Grom Date: Mon, 29 May 2023 11:32:58 +0200 Subject: [PATCH 1/2] Prepare inbody rendering for segments --- .../src/modules/member/config/filters/main.ts | 2 + .../member/config/filters/segment/config.ts | 39 +++++++++++++++++++ .../modules/member/pages/member-list-page.vue | 4 +- .../filters/services/filter-api.service.ts | 23 ++++++++++- .../modules/filters/types/FilterConfig.ts | 1 + .../modules/filters/types/FilterQuery.ts | 1 + 6 files changed, 67 insertions(+), 3 deletions(-) create mode 100644 frontend/src/modules/member/config/filters/segment/config.ts diff --git a/frontend/src/modules/member/config/filters/main.ts b/frontend/src/modules/member/config/filters/main.ts index 4c1d249051..60174252d1 100644 --- a/frontend/src/modules/member/config/filters/main.ts +++ b/frontend/src/modules/member/config/filters/main.ts @@ -11,6 +11,7 @@ import identities from './identities/config'; import joinedDate from './joinedDate/config'; import lastActivityDate from './lastActivityDate/config'; import reach from './reach/config'; +import segment from './segment/config'; import tags from './tags/config'; export const memberFilters: Record = { @@ -25,6 +26,7 @@ export const memberFilters: Record = { joinedDate, lastActivityDate, reach, + segment, tags, }; diff --git a/frontend/src/modules/member/config/filters/segment/config.ts b/frontend/src/modules/member/config/filters/segment/config.ts new file mode 100644 index 0000000000..60d7cb2b95 --- /dev/null +++ b/frontend/src/modules/member/config/filters/segment/config.ts @@ -0,0 +1,39 @@ +import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig'; +import { + MultiSelectFilterConfig, + MultiSelectFilterOptions, + MultiSelectFilterValue, +} from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig'; +import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType'; + +const segment: MultiSelectFilterConfig = { + id: 'segment', + label: 'Segments', + iconClass: 'ri-apps-2-line', + inBody: true, + type: FilterConfigType.MULTISELECT, + options: { + hideIncludeSwitch: true, + // TODO: set segments options + options: [ + { + options: [ + { + label: 'Segment 1', + value: 'segment1', + }, + ], + }, + ], + }, + itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions): string { + return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Segments', value, options); + }, + apiFilterRenderer({ value }: MultiSelectFilterValue): any[] { + return [ + { segments: value }, + ]; + }, +}; + +export default segment; diff --git a/frontend/src/modules/member/pages/member-list-page.vue b/frontend/src/modules/member/pages/member-list-page.vue index 84dc7a606c..93e0e4cfa8 100644 --- a/frontend/src/modules/member/pages/member-list-page.vue +++ b/frontend/src/modules/member/pages/member-list-page.vue @@ -136,9 +136,9 @@ const doGetMembersCount = () => { }; const fetch = ({ - filter, offset, limit, orderBy, + filter, offset, limit, orderBy, body, }: FilterQuery) => { - console.log(filter, offset, limit, orderBy); + console.log(filter, offset, limit, orderBy, body); // TODO: fetch members }; 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..68ecf04616 100644 --- a/frontend/src/shared/modules/filters/services/filter-api.service.ts +++ b/frontend/src/shared/modules/filters/services/filter-api.service.ts @@ -21,6 +21,7 @@ export const filterApiService = () => { let baseFilters: any[] = []; let filters: any[] = []; + let body: any = {}; // Search if (search.length > 0) { @@ -45,7 +46,11 @@ export const filterApiService = () => { // Filter values Object.entries(filterValues).forEach(([key, values]) => { - const filter = configuration[key]?.apiFilterRenderer(values); + const config: FilterConfig = configuration[key]; + if (!config || config.inBody) { + return; + } + const filter = config?.apiFilterRenderer(values); if (filter && filter.length > 0) { filters = [ ...filters, @@ -54,6 +59,21 @@ export const filterApiService = () => { } }); + // In body filters + Object.entries(filterValues).forEach(([key, values]) => { + const config: FilterConfig = configuration[key]; + if (!config || !config.inBody) { + return; + } + const filter: any[] = configuration[key]?.apiFilterRenderer(values) || []; + filter.forEach((obj) => { + body = { + ...body, + ...obj, + }; + }); + }); + // build object const filter = { and: [ @@ -74,6 +94,7 @@ export const filterApiService = () => { limit, offset, orderBy, + body, }; } diff --git a/frontend/src/shared/modules/filters/types/FilterConfig.ts b/frontend/src/shared/modules/filters/types/FilterConfig.ts index e112e22739..7f7c39c00d 100644 --- a/frontend/src/shared/modules/filters/types/FilterConfig.ts +++ b/frontend/src/shared/modules/filters/types/FilterConfig.ts @@ -20,6 +20,7 @@ export interface BaseFilterConfig { id: string; label: string; iconClass: string; + inBody?: boolean; } export type FilterConfig = NumberFilterConfig diff --git a/frontend/src/shared/modules/filters/types/FilterQuery.ts b/frontend/src/shared/modules/filters/types/FilterQuery.ts index 7b9449d1dc..9f61ea7008 100644 --- a/frontend/src/shared/modules/filters/types/FilterQuery.ts +++ b/frontend/src/shared/modules/filters/types/FilterQuery.ts @@ -1,5 +1,6 @@ export interface FilterQuery { filter: any, + body: any, orderBy: string, limit: number, offset: number, From 9b3a743da262a454bb66a2ed3e34cdd721aa5e97 Mon Sep 17 00:00:00 2001 From: Gasper Grom Date: Tue, 30 May 2023 09:02:20 +0200 Subject: [PATCH 2/2] Fix segment config & add featureFlag handling --- .../src/modules/member/config/filters/main.ts | 4 +- .../member/config/filters/projects/config.ts | 31 +++++++++++++++ .../member/config/filters/segment/config.ts | 39 ------------------- .../filters/components/FilterDropdown.vue | 13 +++++-- .../modules/filters/types/FilterConfig.ts | 1 + 5 files changed, 43 insertions(+), 45 deletions(-) create mode 100644 frontend/src/modules/member/config/filters/projects/config.ts delete mode 100644 frontend/src/modules/member/config/filters/segment/config.ts diff --git a/frontend/src/modules/member/config/filters/main.ts b/frontend/src/modules/member/config/filters/main.ts index 60174252d1..9e133dc3ce 100644 --- a/frontend/src/modules/member/config/filters/main.ts +++ b/frontend/src/modules/member/config/filters/main.ts @@ -11,7 +11,7 @@ import identities from './identities/config'; import joinedDate from './joinedDate/config'; import lastActivityDate from './lastActivityDate/config'; import reach from './reach/config'; -import segment from './segment/config'; +import projects from './projects/config'; import tags from './tags/config'; export const memberFilters: Record = { @@ -26,7 +26,7 @@ export const memberFilters: Record = { joinedDate, lastActivityDate, reach, - segment, + projects, tags, }; diff --git a/frontend/src/modules/member/config/filters/projects/config.ts b/frontend/src/modules/member/config/filters/projects/config.ts new file mode 100644 index 0000000000..88f83586d1 --- /dev/null +++ b/frontend/src/modules/member/config/filters/projects/config.ts @@ -0,0 +1,31 @@ +import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig'; +import { CustomFilterConfig } from '@/shared/modules/filters/types/filterTypes/CustomFilterConfig'; + +const projects: CustomFilterConfig = { + id: 'projects', + label: 'Projects', + iconClass: 'ri-stack-line', + featureFlag: 'projects-filter', + inBody: true, + type: FilterConfigType.CUSTOM, + component: null, + options: { + }, + queryUrlParser({ value, include }: any): Record { + return { + include: include === 'true', + value: value.split(','), + }; + }, + itemLabelRenderer(value: any, options: any): string { + console.log(value, options); + return 'Projects...'; + }, + apiFilterRenderer({ value }: any): any[] { + return [ + { segments: value }, + ]; + }, +}; + +export default projects; diff --git a/frontend/src/modules/member/config/filters/segment/config.ts b/frontend/src/modules/member/config/filters/segment/config.ts deleted file mode 100644 index 60d7cb2b95..0000000000 --- a/frontend/src/modules/member/config/filters/segment/config.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig'; -import { - MultiSelectFilterConfig, - MultiSelectFilterOptions, - MultiSelectFilterValue, -} from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig'; -import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType'; - -const segment: MultiSelectFilterConfig = { - id: 'segment', - label: 'Segments', - iconClass: 'ri-apps-2-line', - inBody: true, - type: FilterConfigType.MULTISELECT, - options: { - hideIncludeSwitch: true, - // TODO: set segments options - options: [ - { - options: [ - { - label: 'Segment 1', - value: 'segment1', - }, - ], - }, - ], - }, - itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions): string { - return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Segments', value, options); - }, - apiFilterRenderer({ value }: MultiSelectFilterValue): any[] { - return [ - { segments: value }, - ]; - }, -}; - -export default segment; diff --git a/frontend/src/shared/modules/filters/components/FilterDropdown.vue b/frontend/src/shared/modules/filters/components/FilterDropdown.vue index ae409b280f..88023a8713 100644 --- a/frontend/src/shared/modules/filters/components/FilterDropdown.vue +++ b/frontend/src/shared/modules/filters/components/FilterDropdown.vue @@ -67,6 +67,7 @@ import { defineProps, ref, } from 'vue'; import { FilterConfig } from '@/shared/modules/filters/types/FilterConfig'; +import { FeatureFlag } from '@/featureFlag'; const props = defineProps<{ config: Record, @@ -81,10 +82,14 @@ const search = ref(''); const matchesSearch = (label: string, query: string): boolean => label.toLowerCase().includes(query.toLowerCase()); const isSelected = (key: string): boolean => props.modelValue.includes(key); -const options = computed(() => Object.entries(props.config).map(([key, configuration]: [string, FilterConfig]) => ({ - ...configuration, - key, -}))); +const options = computed(() => Object.entries(props.config) + .map(([key, configuration]: [string, FilterConfig]) => ({ + ...configuration, + key, + })) + .filter((config) => (config.featureFlag ? FeatureFlag.isFlagEnabled( + config.featureFlag, + ) : true))); const customOptions = computed(() => Object.entries(props.customConfig).map(([key, configuration]: [string, FilterConfig]) => ({ ...configuration, diff --git a/frontend/src/shared/modules/filters/types/FilterConfig.ts b/frontend/src/shared/modules/filters/types/FilterConfig.ts index 7f7c39c00d..03a189f83f 100644 --- a/frontend/src/shared/modules/filters/types/FilterConfig.ts +++ b/frontend/src/shared/modules/filters/types/FilterConfig.ts @@ -21,6 +21,7 @@ export interface BaseFilterConfig { label: string; iconClass: string; inBody?: boolean; + featureFlag?: string; } export type FilterConfig = NumberFilterConfig