Filter relation management & query and store sync

frontend/src/assets/scss/form/dropdown.scss

@@ -36,7 +36,7 @@
   // Selected state
   &.is-selected,
   &:focus.is-selected {
-    @apply relative bg-brand-50;
+    @apply relative bg-brand-50 text-gray-900 cursor-default;
     i {
       @apply mr-3 text-brand-600;
     }

frontend/src/modules/activity/config/filters/activityType/config.ts

@@ -2,6 +2,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 { queryUrlParserByType } from '@/shared/modules/filters/config/queryUrlParserByType';
 
 const activityType: CustomFilterConfig = {
   id: 'activityType',
@@ -10,12 +11,13 @@ const activityType: CustomFilterConfig = {
   component: ActivityTypeFilter,
   options: {
   },
+  queryUrlParser: queryUrlParserByType[FilterConfigType.SELECT],
   itemLabelRenderer(value: SelectFilterValue): string {
     return `<b>Activity type</b> ${value || '...'}`;
   },
-  queryRenderer(value: SelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

frontend/src/modules/activity/config/filters/channel/config.ts

@@ -2,6 +2,7 @@ import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
 import { CustomFilterConfig } from '@/shared/modules/filters/types/filterTypes/CustomFilterConfig';
 import { MultiSelectFilterValue } from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
 import ChannelFilter from '@/modules/activity/config/filters/channel/ChannelFilter.vue';
+import { queryUrlParserByType } from '@/shared/modules/filters/config/queryUrlParserByType';
 
 const channel: CustomFilterConfig = {
   id: 'channel',
@@ -10,12 +11,13 @@ const channel: CustomFilterConfig = {
   component: ChannelFilter,
   options: {
   },
+  queryUrlParser: queryUrlParserByType[FilterConfigType.MULTISELECT],
   itemLabelRenderer(value: MultiSelectFilterValue): string {
     return `<b>Channel</b> ${value || '...'}`;
   },
-  queryRenderer(value: MultiSelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

frontend/src/modules/activity/config/filters/date/config.ts

@@ -12,9 +12,9 @@ const date: SelectFilterConfig = {
   itemLabelRenderer(value: SelectFilterValue): string {
     return `<b>Date</b> ${value || '...'}`;
   },
-  queryRenderer(value: SelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

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

@@ -12,9 +12,9 @@ const member: MultiSelectFilterConfig = {
   itemLabelRenderer(value: MultiSelectFilterValue): string {
     return `<b>Member</b> ${value?.value.join(',') || '...'}`;
   },
-  queryRenderer(value: MultiSelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

frontend/src/modules/activity/config/filters/platform/config.ts

@@ -26,9 +26,9 @@ const platform: MultiSelectFilterConfig = {
   itemLabelRenderer(value: MultiSelectFilterValue): string {
     return `<b>Platform</b> ${value?.value.join(',') || '...'}`;
   },
-  queryRenderer(value: MultiSelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

frontend/src/modules/activity/config/filters/sentiment/config.ts

@@ -12,9 +12,9 @@ const sentiment: MultiSelectFilterConfig = {
   itemLabelRenderer(value: MultiSelectFilterValue): string {
     return `<b>Sentiment</b> ${value?.value.join(',') || '...'}`;
   },
-  queryRenderer(value: MultiSelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

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

@@ -20,11 +20,11 @@ const activeOn: MultiSelectFilterConfig = {
     ],
   },
   itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return `<b>Active On</b> ${value?.value.join(',') || '...'}`;
+    return `Active On ${value?.value.join(',') || '...'}`;
   },
-  queryRenderer(value: MultiSelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

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

@@ -2,6 +2,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 { queryUrlParserByType } from '@/shared/modules/filters/config/queryUrlParserByType';
 
 const activityType: CustomFilterConfig = {
   id: 'activityType',
@@ -10,12 +11,13 @@ const activityType: CustomFilterConfig = {
   component: ActivityTypeFilter,
   options: {
   },
+  queryUrlParser: queryUrlParserByType[FilterConfigType.SELECT],
   itemLabelRenderer(value: SelectFilterValue): string {
-    return `<b>Active on</b> ${value || '...'}`;
+    return `Active on ${value || '...'}`;
   },
-  queryRenderer(value: SelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

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

@@ -10,11 +10,11 @@ const avgSentiment: MultiSelectFilterConfig = {
     options,
   },
   itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return `<b>Avg. sentiment</b> ${value?.value.join(',') || '...'}`;
+    return `Avg. sentiment ${value?.value.join(',') || '...'}`;
   },
-  queryRenderer(value: MultiSelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

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

@@ -10,11 +10,11 @@ const engagementLevel: MultiSelectFilterConfig = {
     options,
   },
   itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return `<b>Engagement level</b> ${value?.value.join(',') || '...'}`;
+    return `Engagement level ${value?.value.join(',') || '...'}`;
   },
-  queryRenderer(value: MultiSelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

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

@@ -7,12 +7,11 @@ const enrichedMember: BooleanFilterConfig = {
   type: FilterConfigType.BOOLEAN,
   options: {},
   itemLabelRenderer(value): string {
-    return `<b>Enriched member</b> ${value?.value ? 'True' : 'False'}`;
+    return `Enriched member ${value?.value ? 'True' : 'False'}`;
   },
-  queryRenderer(value) {
-    return {
-      activityCount: value,
-    };
+  apiFilterRenderer(value): any[] {
+    console.log(value);
+    return [];
   },
 };
 

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

@@ -20,11 +20,11 @@ const identities: MultiSelectFilterConfig = {
     ],
   },
   itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return `<b>Identities</b> ${value?.value.join(',') || '...'}`;
+    return `Identities ${value?.value.join(',') || '...'}`;
   },
-  queryRenderer(value: MultiSelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

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

@@ -7,11 +7,11 @@ const joinedDate: DateFilterConfig = {
   type: FilterConfigType.DATE,
   options: {},
   itemLabelRenderer(value): string {
-    return `<b>Joined date</b> ${value.value || '...'}`;
+    return `Joined date ${value.value || '...'}`;
   },
-  queryRenderer(value): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

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

@@ -7,11 +7,11 @@ const lastActivityDate: DateFilterConfig = {
   type: FilterConfigType.DATE,
   options: {},
   itemLabelRenderer(value): string {
-    return `<b>Last activity date</b> ${value.value || '...'}`;
+    return `Last activity date ${value.value || '...'}`;
   },
-  queryRenderer(value): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

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

@@ -1,4 +1,5 @@
 import { FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
+import { SearchFilterConfig } from '@/shared/modules/filters/types/filterTypes/SearchFilterConfig';
 import noOfActivities from './noOfActivities/config';
 import noOfOSSContributions from './noOfOSSContributions/config';
 import activeOn from './activeOn/config';
@@ -26,3 +27,17 @@ export const memberFilters: Record<string, FilterConfig> = {
   reach,
   tags,
 };
+
+export const memberSearchFilter: SearchFilterConfig = {
+  placeholder: 'Search members',
+  apiFilterRenderer(value: string): any[] {
+    return [
+      {
+        or: [
+          { displayName: { textContains: value } },
+          { emails: { contains: [value] } },
+        ],
+      },
+    ];
+  },
+};

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

@@ -7,12 +7,12 @@ const noOfActivities: NumberFilterConfig = {
   type: FilterConfigType.NUMBER,
   options: {},
   itemLabelRenderer(value): string {
-    return `<b># of activities</b> ${value?.value || '...'}`;
+    return `# of activities ${value?.value || '...'}`;
   },
-  queryRenderer(value) {
-    return {
-      activityCount: value,
-    };
+  apiFilterRenderer({ value }): any[] {
+    return [
+      { activityCount: { eq: value } },
+    ];
   },
 };
 

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

@@ -7,12 +7,13 @@ const noOfOSSContributions: NumberFilterConfig = {
   type: FilterConfigType.NUMBER,
   options: {},
   itemLabelRenderer(value): string {
-    return `<b># of open source contributions</b> ${value?.value || '...'}`;
+    return `# of open source contributions ${value?.value || '...'}`;
   },
-  queryRenderer(value) {
-    return {
-      activityCount: value,
-    };
+  apiFilterRenderer({ value }): any[] {
+    console.log(value);
+    return [
+      { numberOfOpenSourceContributions: { eq: value } },
+    ];
   },
 };
 

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

@@ -7,12 +7,11 @@ const reach: NumberFilterConfig = {
   type: FilterConfigType.NUMBER,
   options: {},
   itemLabelRenderer(value): string {
-    return `<b>Reach</b> ${value?.value || '...'}`;
+    return `Reach ${value?.value || '...'}`;
   },
-  queryRenderer(value) {
-    return {
-      activityCount: value,
-    };
+  apiFilterRenderer(value): any[] {
+    console.log(value);
+    return [];
   },
 };
 

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

@@ -10,11 +10,11 @@ const tags: MultiSelectFilterConfig = {
     options: [],
   },
   itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return `<b>Tags</b> ${value?.value.join(',') || '...'}`;
+    return `Tags ${value?.value.join(',') || '...'}`;
   },
-  queryRenderer(value: MultiSelectFilterValue): string {
+  apiFilterRenderer(value): any[] {
     console.log(value);
-    return '';
+    return [];
   },
 };
 

frontend/src/modules/member/member-service.js

@@ -252,17 +252,16 @@ export class MemberService {
       offset,
     };
 
-    const response = await authAxios.get(
+    return authAxios.get(
       `/tenant/${tenantId}/membersToMerge`,
       {
         params,
         headers: {
           Authorization: sampleTenant?.token,
         },
       },
-    );
-
-    return response.data;
+    )
+      .then(({ data }) => Promise.resolve(data));
   }
 
   static async getCustomAttribute(id) {