Add multi-select organization filter in members, organizations and activities lists

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

@@ -6,12 +6,14 @@ import date from './date/config';
 import member from './member/config';
 import platform from './platform/config';
 import sentiment from './sentiment/config';
+import organizations from './organizations/config';
 
 export const activityFilters: Record<string, FilterConfig> = {
   activityType,
   channel,
   date,
   member,
+  organizations,
   platform,
   sentiment,
 };

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

@@ -0,0 +1,54 @@
+import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
+import {
+  MultiSelectAsyncFilterConfig,
+  MultiSelectAsyncFilterOptions, MultiSelectAsyncFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/MultiSelectAsyncFilterConfig';
+import { OrganizationService } from '@/modules/organization/organization-service';
+import { DEFAULT_ORGANIZATION_FILTERS } from '@/modules/organization/store/constants';
+
+const organizations: MultiSelectAsyncFilterConfig = {
+  id: 'organizations',
+  label: 'Organization',
+  iconClass: 'ri-community-line',
+  type: FilterConfigType.MULTISELECT_ASYNC,
+  options: {
+    remoteMethod: (query) => OrganizationService.listAutocomplete(query, 10)
+      .then((data: any[]) => data.map((organization) => ({
+        label: organization.label,
+        value: organization.id,
+        logo: organization.logo,
+      }))),
+    remotePopulateItems: (ids: string[]) => OrganizationService.listAutocomplete({
+      filter: {
+        and: [
+          ...DEFAULT_ORGANIZATION_FILTERS,
+          {
+            id: { in: ids },
+          },
+        ],
+      },
+      orderBy: null,
+      limit: ids.length,
+      offset: 0,
+    })
+      .then(({ rows }: any) => rows.map((organization: any) => ({
+        label: organization.displayName,
+        value: organization.id,
+        logo: organization.logo,
+      }))),
+  },
+  itemLabelRenderer(value: MultiSelectAsyncFilterValue, options: MultiSelectAsyncFilterOptions, data: any): string {
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT_ASYNC]('Organization', value, options, data);
+  },
+  apiFilterRenderer({ value, include }: MultiSelectAsyncFilterValue): any[] {
+    const filter = {
+      organizationId: value,
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
+  },
+};
+
+export default organizations;

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

@@ -14,9 +14,11 @@ import reach from './reach/config';
 import tags from './tags/config';
 import memberName from './memberName/config';
 import jobTitle from './jobTitle/config';
+import organizations from './organizations/config';
 
 export const memberFilters: Record<string, FilterConfig> = {
   memberName,
+  organizations,
   noOfActivities,
   noOfOSSContributions,
   jobTitle,

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

@@ -0,0 +1,54 @@
+import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
+import {
+  MultiSelectAsyncFilterConfig,
+  MultiSelectAsyncFilterOptions, MultiSelectAsyncFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/MultiSelectAsyncFilterConfig';
+import { OrganizationService } from '@/modules/organization/organization-service';
+import { DEFAULT_ORGANIZATION_FILTERS } from '@/modules/organization/store/constants';
+
+const organizations: MultiSelectAsyncFilterConfig = {
+  id: 'organizations',
+  label: 'Organization',
+  iconClass: 'ri-community-line',
+  type: FilterConfigType.MULTISELECT_ASYNC,
+  options: {
+    remoteMethod: (query) => OrganizationService.listAutocomplete(query, 10)
+      .then((data: any[]) => data.map((organization) => ({
+        label: organization.label,
+        value: organization.id,
+        logo: organization.logo,
+      }))),
+    remotePopulateItems: (ids: string[]) => OrganizationService.listAutocomplete({
+      filter: {
+        and: [
+          ...DEFAULT_ORGANIZATION_FILTERS,
+          {
+            id: { in: ids },
+          },
+        ],
+      },
+      orderBy: null,
+      limit: ids.length,
+      offset: 0,
+    })
+      .then(({ rows }: any) => rows.map((organization: any) => ({
+        label: organization.displayName,
+        value: organization.id,
+        logo: organization.logo,
+      }))),
+  },
+  itemLabelRenderer(value: MultiSelectAsyncFilterValue, options: MultiSelectAsyncFilterOptions, data: any): string {
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT_ASYNC]('Organization', value, options, data);
+  },
+  apiFilterRenderer({ value, include }: MultiSelectAsyncFilterValue): any[] {
+    const filter = {
+      or: value.map((id) => ({ organizations: { eq: id } })),
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
+  },
+};
+
+export default organizations;

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

@@ -17,8 +17,10 @@ import annualEmployeeGrowthRate from './annualEmployeeGrowthRate/config';
 import employeeCount from './employeeCount/config';
 import tags from './tags/config';
 import type from './type/config';
+import organizations from './organizations/config';
 
 export const organizationFilters: Record<string, FilterConfig> = {
+  organizations,
   noOfActivities,
   noOfMembers,
   activeOn,

frontend/src/modules/organization/config/filters/organizations/config.ts

@@ -0,0 +1,54 @@
+import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
+import {
+  MultiSelectAsyncFilterConfig,
+  MultiSelectAsyncFilterOptions, MultiSelectAsyncFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/MultiSelectAsyncFilterConfig';
+import { OrganizationService } from '@/modules/organization/organization-service';
+import { DEFAULT_ORGANIZATION_FILTERS } from '@/modules/organization/store/constants';
+
+const organizations: MultiSelectAsyncFilterConfig = {
+  id: 'organizations',
+  label: 'Organization',
+  iconClass: 'ri-community-line',
+  type: FilterConfigType.MULTISELECT_ASYNC,
+  options: {
+    remoteMethod: (query) => OrganizationService.listAutocomplete(query, 10)
+      .then((data: any[]) => data.map((organization) => ({
+        label: organization.label,
+        value: organization.id,
+        logo: organization.logo,
+      }))),
+    remotePopulateItems: (ids: string[]) => OrganizationService.listAutocomplete({
+      filter: {
+        and: [
+          ...DEFAULT_ORGANIZATION_FILTERS,
+          {
+            id: { in: ids },
+          },
+        ],
+      },
+      orderBy: null,
+      limit: ids.length,
+      offset: 0,
+    })
+      .then(({ rows }: any) => rows.map((organization: any) => ({
+        label: organization.displayName,
+        value: organization.id,
+        logo: organization.logo,
+      }))),
+  },
+  itemLabelRenderer(value: MultiSelectAsyncFilterValue, options: MultiSelectAsyncFilterOptions, data: any): string {
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT_ASYNC]('Organization', value, options, data);
+  },
+  apiFilterRenderer({ value, include }: MultiSelectAsyncFilterValue): any[] {
+    const filter = {
+      or: value.map((id) => ({ id: { eq: id } })),
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
+  },
+};
+
+export default organizations;

frontend/src/shared/modules/filters/components/filterTypes/MultiSelectAsyncFilter.vue

@@ -26,13 +26,19 @@
           :value="option"
         >
           <div
-            class="el-checkbox filter-checkbox h-4"
+            class="h-4 el-checkbox filter-checkbox"
             :class="{ 'is-checked': props.modelValue.value.includes(option.value) }"
           >
             <span class="el-checkbox__input" :class="{ 'is-checked': form.value.includes(option.value) }">
               <span class="el-checkbox__inner" />
             </span>
           </div>
+          <template v-if="config.id === 'organizations'">
+            <span class="flex items-center justify-center w-6 h-6 p-1 mr-3 border rounded-md ">
+              <img v-if="option.logo" :src="option.logo" class="w-4 h-4 min-w-[16px]" :alt="option.label" />
+              <i v-else class="flex items-center justify-center w-4 h-4 text-gray-300 ri-community-line" />
+            </span>
+          </template>
           {{ option.label }}
         </el-option>
       </el-select>

frontend/src/shared/modules/filters/types/filterTypes/MultiSelectAsyncFilterConfig.ts

@@ -4,6 +4,7 @@ import { BaseFilterConfig, FilterConfigType } from '@/shared/modules/filters/typ
 export interface MultiSelectAsyncFilterOption {
   label: string;
   value: string;
+  logo?: string;
 }
 export interface MultiSelectAsyncFilterOptions {
   hideIncludeSwitch?: boolean;