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

Render telegram avatars in user cards

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-04 10:13:50 +07:00
parent 354e8b1e64
commit a4b3e195c7
4 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/composables/graphql/generated.ts
View File

@@ -196,6 +196,7 @@ export type ManagerUser = {
lastOrderAt?: Maybe<Scalars['DateTime']['output']>;
orderCount: Scalars['Int']['output'];
role: UserRole;
telegramConnection?: Maybe<MessengerConnection>;
};
export type ManagerWithdrawalRequest = {
@@ -849,7 +850,7 @@ export type ManagerOrdersQuery = { __typename?: 'Query', managerOrders: Array<{
export type ManagerUsersQueryVariables = Exact<{ [key: string]: never; }>;
export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, fullName: string }> };
export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, fullName: string, telegramConnection?: { __typename?: 'MessengerConnection', id: string, type: MessengerType, channelId: string, displayName?: string | null, username?: string | null, avatarAvailable: boolean } | null }> };
export type ManagerWithdrawalRequestsQueryVariables = Exact<{
status?: InputMaybe<WithdrawalStatus>;
@@ -1737,6 +1738,14 @@ export const ManagerUsersDocument = gql`
managerUsers {
id
fullName
telegramConnection {
id
type
channelId
displayName
username
avatarAvailable
}
}
}
`;

12
app/pages/clients/index.vue
View File

@@ -6,6 +6,7 @@ import {
type ManagerUsersQuery,
type RegistrationRequestsQuery,
} from '~/composables/graphql/generated';
import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
definePageMeta({
middleware: ['manager-only'],
@@ -150,7 +151,16 @@ function userInitials(fullName: string) {
class="surface-card flex min-h-[280px] flex-col rounded-[32px] p-6"
>
<div class="flex justify-center">
<div class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]">
<img
v-if="messengerConnectionAvatarSrc(user.telegramConnection)"
:src="messengerConnectionAvatarSrc(user.telegramConnection)"
:alt="user.fullName"
class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
>
<div
v-else
class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
>
{{ userInitials(user.fullName) }}
</div>
</div>