Member filters connect

backend/src/database/repositories/tagRepository.ts

@@ -198,6 +198,13 @@ class TagRepository {
           id: filter.id,
         })
       }
+      if (filter.ids) {
+        advancedFilter.and.push({
+          or: filter.ids.map((id) => ({
+            id,
+          })),
+        })
+      }
 
       if (filter.name) {
         advancedFilter.and.push({

backend/src/services/premium/enrichment/organizationEnrichmentService.ts

@@ -148,7 +148,7 @@ export default class OrganizationEnrichmentService extends LoggingBase {
       ) {
         acc[platform] = {
           handle,
-          [platform === PlatformType.TWITTER? "site": "url"]: social,
+          [platform === PlatformType.TWITTER ? 'site' : 'url']: social,
         }
       }
       return acc

frontend/src/modules/auth/auth-socket.js

@@ -8,6 +8,7 @@ import {
   showEnrichmentSuccessMessage,
   getEnrichmentMax,
 } from '@/modules/member/member-enrichment';
+import { useMemberStore } from '@/modules/member/store/pinia';
 
 let socketIoClient;
 
@@ -110,9 +111,8 @@ export const connectSocket = (token) => {
       // Update members list if tenant hasn't changed
       if (currentTenant.value.id === parsed.tenantId) {
         // Refresh list page
-        await store.dispatch('member/doFetch', {
-          keepPagination: true,
-        });
+        const { fetchMembers } = useMemberStore();
+        await fetchMembers({ reload: true });
       }
     }
   });

frontend/src/modules/member/components/list/member-list-table.vue

@@ -27,7 +27,7 @@
       />
 
       <app-empty-state-cta
-        v-else-if="hasMembers && !count"
+        v-else-if="hasMembers && !totalMembers"
         icon="ri-contacts-line"
         title="No members found"
         description="We couldn't find any results that match your search criteria, please try a different query"
@@ -37,10 +37,11 @@
         <!-- Sorter -->
         <div class="mb-2">
           <app-pagination-sorter
-            :page-size="Number(pagination.pageSize)"
-            :total="count"
-            :current-page="pagination.currentPage"
+            :page-size="Number(pagination.perPage)"
+            :total="totalMembers"
+            :current-page="pagination.page"
             :has-page-counter="false"
+            :export="doExport"
             module="member"
             position="top"
             @change-sorter="doChangePaginationPageSize"
@@ -66,7 +67,6 @@
               >
                 <div
                   :style="{
-                    width: tableWidth,
                     height: '10px',
                   }"
                 />
@@ -86,12 +86,13 @@
               id="members-table"
               ref="table"
               v-loading="loading"
-              :data="rows"
+              :data="members"
               :default-sort="defaultSort"
               row-key="id"
               border
               :row-class-name="rowClass"
               @sort-change="doChangeSort"
+              @selection-change="selectedMembers = $event"
             >
               <el-table-column type="selection" width="75" fixed />
 
@@ -375,11 +376,11 @@
               </el-table-column>
             </el-table>
 
-            <div v-if="!!count" class="mt-8 px-6">
+            <div v-if="!!totalMembers" class="mt-8 px-6">
               <app-pagination
-                :total="count"
-                :page-size="Number(pagination.pageSize)"
-                :current-page="pagination.currentPage || 1"
+                :total="totalMembers"
+                :page-size="Number(pagination.perPage)"
+                :current-page="pagination.page || 1"
                 module="member"
                 @change-current-page="doChangePaginationCurrentPage"
                 @change-page-size="doChangePaginationPageSize"
@@ -404,6 +405,9 @@ import AppMemberOrganizations from '@/modules/member/components/member-organizat
 import AppTagList from '@/modules/tag/components/tag-list.vue';
 import { formatDateToTimeAgo } from '@/utils/date';
 import { formatNumberToCompact, formatNumber } from '@/utils/number';
+import { useMemberStore } from '@/modules/member/store/pinia';
+import { storeToRefs } from 'pinia';
+import { MemberService } from '@/modules/member/member-service';
 import AppMemberBadge from '../member-badge.vue';
 import AppMemberDropdown from '../member-dropdown.vue';
 import AppMemberIdentities from '../member-identities.vue';
@@ -437,18 +441,15 @@ const props = defineProps({
   },
 });
 
-const activeView = computed(() => store.getters['member/activeView']);
+const memberStore = useMemberStore();
+const {
+  members, totalMembers, filters, selectedMembers, savedFilterBody,
+} = storeToRefs(memberStore);
 
-const defaultSort = computed(() => {
-  if (activeView.value?.sorter) {
-    return activeView.value.sorter;
-  }
-
-  return {
-    field: 'lastActive',
-    order: 'descending',
-  };
-});
+const defaultSort = computed(() => ({
+  field: 'lastActive',
+  order: 'descending',
+}));
 
 const integrations = computed(
   () => store.getters['integration/activeList'] || {},
@@ -459,17 +460,13 @@ const showReach = computed(
     || integrations.value.github?.status === 'done',
 );
 
-const rows = computed(() => store.getters['member/rows']);
-const count = computed(() => store.state.member.count);
-const tableWidth = computed(() => store.state.member.list.table?.bodyWidth);
 const loading = computed(
-  () => store.state.member.list.loading || props.isPageLoading,
+  () => props.isPageLoading,
 );
 
 const tagsColumnWidth = computed(() => {
   let maxTabWidth = 0;
-
-  rows.value.forEach((row) => {
+  members.value.forEach((row) => {
     if (row.tags) {
       const tabWidth = row.tags
         .map((tag) => tag.name.length * 20)
@@ -487,7 +484,7 @@ const tagsColumnWidth = computed(() => {
 const emailsColumnWidth = computed(() => {
   let maxTabWidth = 0;
 
-  rows.value.forEach((row) => {
+  members.value.forEach((row) => {
     const tabWidth = row.emails
       .map((email) => (email ? email.length * 12 : 0))
       .reduce((a, b) => a + b, 0);
@@ -500,8 +497,10 @@ const emailsColumnWidth = computed(() => {
   return maxTabWidth;
 });
 
-const selectedRows = computed(() => store.getters['member/selectedRows']);
-const pagination = computed(() => store.getters['member/pagination']);
+const selectedRows = computed(() => selectedMembers.value);
+const pagination = computed(() => filters.value.pagination);
+
+const tableWidth = ref(0);
 
 document.onmouseup = () => {
   // As soon as mouse is released, set scrollbar visibility
@@ -511,15 +510,18 @@ document.onmouseup = () => {
 };
 
 function doChangeSort(sorter) {
-  store.dispatch('member/doChangeSort', sorter);
+  filters.value.order = {
+    prop: sorter.prop,
+    order: sorter.order,
+  };
 }
 
 function doChangePaginationCurrentPage(currentPage) {
-  store.dispatch('member/doChangePaginationCurrentPage', currentPage);
+  filters.value.pagination.page = currentPage;
 }
 
 function doChangePaginationPageSize(pageSize) {
-  store.dispatch('member/doChangePaginationPageSize', pageSize);
+  filters.value.pagination.perPage = pageSize;
 }
 
 function translate(key) {
@@ -582,7 +584,7 @@ const trackEmailClick = () => {
 
 watch(table, (newValue) => {
   if (newValue) {
-    store.dispatch('member/doMountTable', table.value);
+    tableWidth.value = table.value;
   }
 
   // Add scroll events to table, it's not possible to access it from 'el-table'
@@ -606,6 +608,14 @@ watch(table, (newValue) => {
   }
 });
 
+const doExport = () => MemberService.export(
+  savedFilterBody.value.filter,
+  savedFilterBody.value.orderBy,
+  0,
+  null,
+  false,
+);
+
 onMounted(async () => {
   if (store.state.integration.count === 0) {
     await store.dispatch('integration/doFetch');