fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(profile): show real telegram avatars in messenger chips

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-03 18:36:25 +07:00
parent f2fb64a0b7
commit f941ba7192
9 changed files with 267 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
app/pages/profile/index.vue
View File

@@ -6,10 +6,21 @@ import {
MyMessengerConnectionsDocument,
type MyDeliveryAddressesQuery,
} from '~/composables/graphql/generated';
import {
messengerConnectionAvatarSrc,
messengerConnectionHandle,
messengerConnectionInitials,
messengerConnectionName,
} from '~/composables/useMessengerConnectionPresentation';
import { isCounterpartyProfileComplete } from '~/composables/useCounterpartyProfile';
type MessengerItem = {
id: string;
type: 'TELEGRAM' | 'MAX';
channelId: string;
displayName?: string | null;
username?: string | null;
avatarAvailable?: boolean | null;
isActive: boolean;
};
@@ -22,22 +33,18 @@ const deliveryAddressesQuery = useQuery(MyDeliveryAddressesDocument);
const profileIsComplete = computed(() => isCounterpartyProfileComplete(profileQuery.result.value?.myCounterpartyProfile));
const telegramConnected = computed(() =>
Boolean(
connectionsQuery.result.value?.myMessengerConnections?.find(
(item: MessengerItem) => item.type === 'TELEGRAM' && item.isActive,
),
connectionsQuery.result.value?.myMessengerConnections?.find(
(item: MessengerItem) => item.type === 'TELEGRAM' && item.isActive,
),
);
const maxConnected = computed(() =>
Boolean(
connectionsQuery.result.value?.myMessengerConnections?.find(
(item: MessengerItem) => item.type === 'MAX' && item.isActive,
),
connectionsQuery.result.value?.myMessengerConnections?.find(
(item: MessengerItem) => item.type === 'MAX' && item.isActive,
),
);
const connectedMessengerCount = computed(() => Number(telegramConnected.value) + Number(maxConnected.value));
const connectedMessengerCount = computed(() => Number(Boolean(telegramConnected.value)) + Number(Boolean(maxConnected.value)));
const companyNamePreview = computed(() => profileQuery.result.value?.myCounterpartyProfile?.companyName?.trim() || '');
const notificationsSummary = computed(() => {
@@ -81,19 +88,43 @@ const defaultDeliveryAddress = computed(() => deliveryAddresses.value.find((item
<div class="mb-2 flex items-center justify-between gap-2">
<p class="text-lg font-bold text-[#123824]">Уведомления</p>
</div>
<div class="mb-2 flex items-center justify-end gap-2">
<span
class="inline-flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold"
:class="telegramConnected ? 'bg-[#def6ea] text-[#0d854a]' : 'bg-[#eceff3] text-[#6b7280]'"
>
TG
</span>
<span
class="inline-flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold"
:class="maxConnected ? 'bg-[#def6ea] text-[#0d854a]' : 'bg-[#eceff3] text-[#6b7280]'"
>
MX
</span>
<div class="mb-3 space-y-2">
<div v-if="telegramConnected" class="flex items-center gap-3 rounded-2xl bg-[#f8fbf9] px-3 py-2">
<div v-if="messengerConnectionAvatarSrc(telegramConnected)" class="avatar">
<div class="h-10 w-10 rounded-full">
<img :src="messengerConnectionAvatarSrc(telegramConnected)" :alt="messengerConnectionName(telegramConnected)">
</div>
</div>
<div v-else class="avatar placeholder">
<div class="h-10 w-10 rounded-full bg-[#123824] text-xs font-bold text-white">
<span>{{ messengerConnectionInitials(telegramConnected, 'TG') }}</span>
</div>
</div>
<div class="min-w-0">
<p class="truncate text-sm font-semibold text-[#123824]">
{{ messengerConnectionName(telegramConnected) }}
</p>
<p class="truncate text-xs text-[#5c7b69]">
{{ messengerConnectionHandle(telegramConnected) || 'Telegram подключен' }}
</p>
</div>
</div>
<div v-if="maxConnected" class="flex items-center gap-3 rounded-2xl bg-[#f8fbf9] px-3 py-2">
<div class="avatar placeholder">
<div class="h-10 w-10 rounded-full bg-[#2b7fff] text-xs font-bold text-white">
<span>{{ messengerConnectionInitials(maxConnected, 'MX') }}</span>
</div>
</div>
<div class="min-w-0">
<p class="truncate text-sm font-semibold text-[#123824]">
{{ messengerConnectionName(maxConnected) }}
</p>
<p class="truncate text-xs text-[#5c7b69]">
{{ messengerConnectionHandle(maxConnected) || 'Max подключен' }}
</p>
</div>
</div>
</div>
<p class="text-sm text-[#355947]">{{ notificationsSummary }}</p>
</NuxtLink>