Prepare inbody rendering for segments

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 projects from './projects/config';
 import tags from './tags/config';
 
 export const memberFilters: Record<string, FilterConfig> = {
@@ -25,6 +26,7 @@ export const memberFilters: Record<string, FilterConfig> = {
   joinedDate,
   lastActivityDate,
   reach,
+  projects,
   tags,
 };
 

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<string, any> {
+    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;

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

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<string, FilterConfig>,
@@ -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,

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,
     };
   }
 

frontend/src/shared/modules/filters/types/FilterConfig.ts

@@ -20,6 +20,8 @@ export interface BaseFilterConfig {
   id: string;
   label: string;
   iconClass: string;
+  inBody?: boolean;
+  featureFlag?: string;
 }
 
 export type FilterConfig = NumberFilterConfig

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,