Skip to content

Commit ca56289

Browse files
gaspergromgaspergrom
committed
Fix unmerge identity views
1 parent f49dfbd commit ca56289

File tree

3 files changed

+160
-5
lines changed

3 files changed

+160
-5
lines changed

‎frontend/src/modules/member/components/member-unmerge-dialog.vue

+76-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
v-model="isModalOpen"
55
title="Unmerge identity"
66
size="2extra-large"
7-
custom-class="p-0"
7+
custom-class="p-0 !mt-5"
88
>
99
<template #header>
1010
<h3 class="text-lg font-semibold">
@@ -34,7 +34,6 @@
3434
<app-member-suggestions-details
3535
v-if="!preview && props.modelValue"
3636
:member="props.modelValue"
37-
:compare-member="preview"
3837
:is-primary="true"
3938
>
4039
<template #header>
@@ -46,6 +45,27 @@
4645
</div>
4746
</div>
4847
</template>
48+
<template #property>
49+
<article
50+
v-if="props.modelValue.activityCount"
51+
class="pb-4"
52+
>
53+
<p class="text-2xs font-medium text-gray-500 pb-1">
54+
Activity count
55+
</p>
56+
<p class="text-xs text-gray-900 whitespace-normal">
57+
{{ props.modelValue.activityCount || '-' }}
58+
</p>
59+
</article>
60+
</template>
61+
<template #below>
62+
<div v-if="props.modelValue?.organizations?.length" class="pt-3">
63+
<h6 class="text-sm font-semibold text-black pb-4">
64+
Organizations
65+
</h6>
66+
<app-member-organization-list :member="props.modelValue" />
67+
</div>
68+
</template>
4969
</app-member-suggestions-details>
5070
<app-member-suggestions-details
5171
v-else-if="preview"
@@ -62,6 +82,27 @@
6282
</div>
6383
</div>
6484
</template>
85+
<template #property>
86+
<article
87+
v-if="preview.primary.activityCount || preview.secondary.activityCount"
88+
class="pb-4"
89+
>
90+
<p class="text-2xs font-medium text-gray-500 pb-1">
91+
Activity count
92+
</p>
93+
<p class="text-xs text-gray-900 whitespace-normal">
94+
{{ preview.primary.activityCount || '-' }}
95+
</p>
96+
</article>
97+
</template>
98+
<template #below>
99+
<div v-if="preview.primary?.organizations?.length" class="pt-3">
100+
<h6 class="text-sm font-semibold text-black pb-4">
101+
Organizations
102+
</h6>
103+
<app-member-organization-list :member="preview.primary" />
104+
</div>
105+
</template>
65106
</app-member-suggestions-details>
66107
</div>
67108
<div class="w-1/2 px-3">
@@ -119,6 +160,37 @@
119160
</div>
120161
</div>
121162
</template>
163+
<template #engagementLevel>
164+
<div class="flex items-center">
165+
<div class="border border-gray-200 bg-gray-100 py-px px-1.5 text-gray-600 text-xs leading-5 rounded-md mr-1">
166+
Unknown
167+
</div>
168+
<el-tooltip content="Calculated after contact is unmerged" placement="top">
169+
<div class="ri-question-line text-base text-gray-400" />
170+
</el-tooltip>
171+
</div>
172+
</template>
173+
<template #property>
174+
<article
175+
v-if="preview.primary.activityCount || preview.secondary.activityCount"
176+
class="pb-4"
177+
>
178+
<p class="text-2xs font-medium text-gray-500 pb-1">
179+
Activity count
180+
</p>
181+
<p class="text-xs text-gray-900 whitespace-normal">
182+
{{ preview.primary.activityCount || '-' }}
183+
</p>
184+
</article>
185+
</template>
186+
<template #below>
187+
<div v-if="preview.secondary?.organizations?.length" class="pt-3">
188+
<h6 class="text-sm font-semibold text-black pb-4">
189+
Organizations
190+
</h6>
191+
<app-member-organization-list :member="preview.secondary" />
192+
</div>
193+
</template>
122194
</app-member-suggestions-details>
123195
</div>
124196
<!-- Identity selection -->
@@ -167,6 +239,8 @@ import Message from '@/shared/message/message';
167239
import AppDialog from '@/shared/dialog/dialog.vue';
168240
import CrSpinner from '@/ui-kit/spinner/Spinner.vue';
169241
import { CrowdIntegrations } from '@/integrations/integrations-config';
242+
import moment from 'moment/moment';
243+
import AppMemberOrganizationList from '@/modules/member/components/suggestions/member-organizations-list.vue';
170244
import AppMemberSuggestionsDetails from './suggestions/member-merge-suggestions-details.vue';
171245
172246
const props = defineProps({

‎frontend/src/modules/member/components/suggestions/member-merge-suggestions-details.vue

+7-3
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,10 @@
115115
<p class="text-2xs font-medium text-gray-500 pb-1">
116116
Engagement level
117117
</p>
118-
<app-community-engagement-level v-if="member.reach?.total >= 0" :member="member" />
119-
<span v-else class="text-2xs">-</span>
118+
<slot name="engagementLevel">
119+
<app-community-engagement-level v-if="member.reach?.total >= 0" :member="member" />
120+
<span v-else class="text-2xs">-</span>
121+
</slot>
120122
</article>
121123
<article
122124
v-if="
@@ -185,9 +187,10 @@
185187
/>
186188
<span v-else>-</span>
187189
</article>
190+
<slot name="property" />
188191
</div>
189192
<div class="pt-4">
190-
<h6 class="text-sm font-semibold pb-3">
193+
<h6 class="text-sm font-semibold text-black pb-3">
191194
Identities
192195
</h6>
193196
<app-identities-vertical-list-members
@@ -196,6 +199,7 @@
196199
:include-emails="true"
197200
/>
198201
</div>
202+
<slot name="below" />
199203
</div>
200204
</section>
201205
</template>

‎frontend/src/modules/member/components/suggestions/member-organizations-list.vue

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div
3+
v-for="{
4+
id,
5+
logo,
6+
name,
7+
displayName,
8+
memberOrganizations,
9+
} of props.member.organizations"
10+
:key="id"
11+
class="flex justify-start gap-3 mb-4"
12+
>
13+
<div
14+
class="min-w-[24px] w-6 h-6 rounded-md border border-gray-200 p-1 flex items-center justify-center overflow-hidden"
15+
:class="{
16+
'bg-white': logo,
17+
'bg-gray-50': !logo,
18+
}"
19+
>
20+
<img
21+
v-if="logo"
22+
:src="logo"
23+
:alt="`${displayName || name} logo`"
24+
/>
25+
<i
26+
v-else
27+
class="ri-community-line text-base text-gray-300"
28+
/>
29+
</div>
30+
<div class="flex flex-col gap-1">
31+
<div
32+
class="text-xs text-gray-900 group-hover:text-brand-500 transition font-medium"
33+
>
34+
{{ displayName || name }}
35+
</div>
36+
<div v-if="hasValues(memberOrganizations)" class="text-gray-600 text-2xs">
37+
<span v-if="memberOrganizations.title">{{ memberOrganizations.title }}</span>
38+
<span v-if="memberOrganizations.title" class="mx-1">•</span>
39+
<span>
40+
{{ memberOrganizations.dateStart
41+
? moment(memberOrganizations.dateStart).utc().format('MMMM YYYY')
42+
: 'Unknown' }}
43+
</span>
44+
<span class="mx-1 whitespace-nowrap">-></span>
45+
<span>
46+
{{ memberOrganizations.dateEnd
47+
? moment(memberOrganizations.dateEnd).utc().format('MMMM YYYY')
48+
: memberOrganizations.dateStart ? 'Present' : 'Unknown' }}
49+
</span>
50+
</div>
51+
</div>
52+
</div>
53+
</template>
54+
55+
<script setup lang="ts">
56+
import moment from 'moment/moment';
57+
58+
const props = defineProps({
59+
member: {
60+
type: Object,
61+
required: true,
62+
},
63+
});
64+
65+
const hasValues = (organizations: {
66+
title: string,
67+
dateEnd: string,
68+
dateStart: string
69+
}) => Object.values(organizations || {});
70+
71+
</script>
72+
73+
<script lang="ts">
74+
export default {
75+
name: 'AppMemberOrganizationList',
76+
};
77+
</script>

0 commit comments

Comments
 (0)