Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add distinct emails to list count and fix showmore #2397

Merged
merged 1 commit into from
May 10, 2024
Merged

Add distinct emails to list count and fix showmore #2397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
172 changes: 125 additions & 47 deletions frontend/src/modules/member/components/list/columns/member-list-emails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,54 @@
<template>
<div
v-if="emails?.length && emails?.some((e) => !!e)"
class="text-sm cursor-auto flex flex-wrap gap-1"
v-if="distinctEmails?.length && distinctEmails?.some((e) => !!e)"
class="text-sm cursor-auto flex flex-col items-start gap-1"
>
<el-tooltip
v-for="email of emails.slice(0, 3)"
<div
v-for="email of distinctEmails.slice(0, 3)"
:key="email"
:disabled="!email"
popper-class="custom-identity-tooltip"
placement="top"
class="flex items-center"
>
<template #content>
<span>Send email
<i
v-if="email"
class="ri-external-link-line text-gray-400"
/></span>
</template>
<div @click.prevent>
<a
target="_blank"
rel="noopener noreferrer"
class="badge--interactive"
:href="email.link"
@click.stop="trackEmailClick"
>{{ email.handle }}</a>
<el-tooltip
:disabled="!email"
popper-class="custom-identity-tooltip"
placement="top"
>
<template #content>
<span>Send email
<i
v-if="email"
class="ri-external-link-line text-gray-400"
/></span>
</template>
<div @click.prevent>
<a
target="_blank"
rel="noopener noreferrer"
class="badge--interactive flex items-center"
:href="email.link"
@click.stop="trackEmailClick"
>
{{ email.handle }}
<div v-if="email.verified">
<el-tooltip placement="top" content="Verified email">
<i class="ri-verified-badge-fill text-brand-500 text-base leading-4" />
</el-tooltip>
</div>
</a>
</div>
</el-tooltip>
<div v-if="getPlatformLabel(email.platforms)" class="ml-2 flex items-center">
<el-tooltip placement="top">
<template #content>
<span class="font-semibold">Source:&nbsp;</span>{{ getPlatformLabel(email.platforms) }}
</template>
<i class="ri-shining-fill text-sm" :class="isEnrichment(email.platforms) ? 'text-purple-400' : 'text-gray-300'" />
</el-tooltip>
</div>
</el-tooltip>
</div>

<el-popover
v-if="emails?.length > 3"
v-if="distinctEmails?.length > 3"
placement="top"
:width="400"
trigger="hover"
Expand All @@ -37,33 +57,53 @@
<template #reference>
<span
class="badge--interactive hover:text-gray-900"
>+{{ emails.length - 3 }}</span>
>+{{ distinctEmails.length - 3 }}</span>
</template>
<div class="flex flex-wrap gap-3 my-1">
<el-tooltip
v-for="email of emails.slice(3)"
<div class="flex flex-col items-start gap-3 my-1">
<div
v-for="email of distinctEmails.slice(3)"
:key="email.handle"
:disabled="!email.handle"
popper-class="custom-identity-tooltip flex "
placement="top"
class="flex items-center"
>
<template #content>
<span>Send email
<i
v-if="email.link"
class="ri-external-link-line text-gray-400"
/></span>
</template>
<div @click.prevent>
<a
target="_blank"
rel="noopener noreferrer"
class="badge--interactive"
:href="email.link"
@click.stop="trackEmailClick"
>{{ email.handle }}</a>
<el-tooltip

:disabled="!email.handle"
popper-class="custom-identity-tooltip flex "
placement="top"
>
<template #content>
<span>Send email
<i
v-if="email.link"
class="ri-external-link-line text-gray-400"
/></span>
</template>
<div @click.prevent>
<a
target="_blank"
rel="noopener noreferrer"
class="badge--interactive flex items-center"
:href="email.link"
@click.stop="trackEmailClick"
>
{{ email.handle }}
<div v-if="email.verified">
<el-tooltip placement="top" content="Verified email">
<i class="ri-verified-badge-fill text-brand-500 text-base leading-4" />
</el-tooltip>
</div>
</a>
</div>
</el-tooltip>
<div v-if="getPlatformLabel(email.platforms)" class="ml-2 flex items-center">
<el-tooltip placement="top">
<template #content>
<span class="font-semibold">Source:&nbsp;</span>{{ getPlatformLabel(email.platforms) }}
</template>
<i class="ri-shining-fill text-sm" :class="isEnrichment(email.platforms) ? 'text-purple-400' : 'text-gray-300'" />
</el-tooltip>
</div>
</el-tooltip>
</div>
</div>
</el-popover>
</div>
Expand All @@ -75,6 +115,7 @@ import { Member } from '@/modules/member/types/Member';
import { computed } from 'vue';
import useMemberIdentities from '@/shared/modules/identities/config/useMemberIdentities';
import memberOrder from '@/shared/modules/identities/config/identitiesOrder/member';
import { CrowdIntegrations } from '@/integrations/integrations-config';

const props = defineProps<{
member: Member
Expand All @@ -85,6 +126,43 @@ const emails = computed(() => useMemberIdentities({
order: memberOrder.list,
}).getEmails());

const distinctEmails = computed(() => {
const emailsdata = emails.value.reduce((obj: Record<string, any>, identity: any) => {
const emailObject = { ...obj };
if (!(identity.handle in emailObject)) {
emailObject[identity.handle] = {
...identity,
platforms: [],
};
}
emailObject[identity.handle].platforms.push(identity.platform);
emailObject[identity.handle].verified = emailObject[identity.handle].verified || identity.verified;

return emailObject;
}, {});
return Object.keys(emailsdata).map((email) => ({
handle: email,
...emailsdata[email],
}));
});

const isEnrichment = (platforms:string[]) => platforms.includes('enrichment');

const getPlatformLabel = (platforms: string[]) => platforms
.filter((platform) => !['integration_or_enrichment'].includes(platform))
.map((platform) => {
if (platform === 'lfid') {
return 'LFID';
}
if (platform === 'integration') {
return 'Integration';
}
if (platform === 'enrichment') {
return 'Enrichment';
}
return CrowdIntegrations.getConfig(platform)?.name || platform;
}).join(', ');

const trackEmailClick = () => {
window.analytics.track('Click Member Contact', {
channel: 'Email',
Expand Down
52 changes: 29 additions & 23 deletions frontend/src/modules/member/components/view/_aside/_aside-identities-extra.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@
</el-button>
</div>

<div v-if="emails.length" class="flex flex-col gap-2 mt-6">
<div v-if="distinctEmails.length" class="flex flex-col gap-2 mt-6">
<div
v-for="(emailIdentity, email) in distinctEmails"
:key="email"
v-for="email in distinctEmails.slice(0, displayMore ? distinctEmails.length : 5)"
:key="email.handle"
>
<div
class="flex overflow-hidden"
Expand All @@ -28,29 +28,29 @@
target="_blank"
rel="noopener noreferrer"
class="text-xs text-gray-900 hover:text-brand-500 border border-gray-200 rounded-md py-0.5 px-2 truncate flex items-center"
:href="emailIdentity.link"
:href="email.link"
>
{{ email }}
{{ email.handle }}

<div v-if="emailIdentity.verified" class="pl-1">
<div v-if="email.verified" class="pl-1">
<el-tooltip placement="top" content="Verified email">
<i class="ri-verified-badge-fill text-brand-500 text-base leading-4" />
</el-tooltip>
</div>

</a>
<div v-if="getPlatformLabel(emailIdentity.platforms)" class="ml-2 flex items-center">
<div v-if="getPlatformLabel(email.platforms)" class="ml-2 flex items-center">
<el-tooltip placement="top">
<template #content>
<span class="font-semibold">Source:&nbsp;</span>{{ getPlatformLabel(emailIdentity.platforms) }}
<span class="font-semibold">Source:&nbsp;</span>{{ getPlatformLabel(email.platforms) }}
</template>
<i class="ri-shining-fill text-sm" :class="isEnrichment(emailIdentity.platforms) ? 'text-purple-400' : 'text-gray-300'" />
<i class="ri-shining-fill text-sm" :class="isEnrichment(email.platforms) ? 'text-purple-400' : 'text-gray-300'" />
</el-tooltip>
</div>
</div>
</div>
<div
v-if="props.emails.length > 5"
v-if="distinctEmails.length > 5"
class="underline cursor-pointer text-gray-500 hover:text-brand-500 text-xs underline-offset-4 mt-5"
@click="displayMore = !displayMore"
>
Expand Down Expand Up @@ -98,19 +98,25 @@ const emails = computed(() => {
return props.emails;
});

const distinctEmails = computed(() => props.emails.reduce((obj: Record<string, any>, identity: any) => {
const emailObject = { ...obj };
if (!(identity.handle in emailObject)) {
emailObject[identity.handle] = {
...identity,
platforms: [],
};
}
emailObject[identity.handle].platforms.push(identity.platform);
emailObject[identity.handle].verified = emailObject[identity.handle].verified || identity.verified;

return emailObject;
}, {}));
const distinctEmails = computed(() => {
const emailsdata = props.emails.reduce((obj: Record<string, any>, identity: any) => {
const emailObject = { ...obj };
if (!(identity.handle in emailObject)) {
emailObject[identity.handle] = {
...identity,
platforms: [],
};
}
emailObject[identity.handle].platforms.push(identity.platform);
emailObject[identity.handle].verified = emailObject[identity.handle].verified || identity.verified;

return emailObject;
}, {});
return Object.keys(emailsdata).map((email) => ({
handle: email,
...emailsdata[email],
}));
});

const isEnrichment = (platforms:string[]) => platforms.includes('enrichment');

Expand Down