admin/zapishis-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show masters avatar in orders list

Browse Source
This commit is contained in:
vchikalkin 2025-06-26 11:50:11 +03:00
parent 46f60d969d
commit 5c89d41f2f
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/components/orders/orders-list/index.tsx
View File

@ -71,7 +71,9 @@ export function OrdersList() {
return (
<div className="flex flex-col space-y-2">
<h1 className="font-bold">Ваши записи</h1>
{orders?.map((order) => order && <OrderCard key={order.documentId} {...order} />)}
{orders?.map(
(order) => order && <OrderCard avatarSource="master" key={order.documentId} {...order} />,
)}
</div>
);
}

21
apps/web/components/shared/order-card.tsx
View File

@ -6,18 +6,23 @@ import type * as GQL from '@repo/graphql/types';
import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
import Link from 'next/link';
type OrderClient = NonNullable<OrderComponentProps>['client'];
type OrderComponentProps = GQL.OrderFieldsFragment;
type OrderComponentProps = GQL.OrderFieldsFragment & {
avatarSource?: 'client' | 'master';
};
export function OrderCard({ documentId, ...order }: Readonly<OrderComponentProps>) {
type OrderCustomer = GQL.CustomerFieldsFragment;
export function OrderCard({ avatarSource, documentId, ...order }: Readonly<OrderComponentProps>) {
const services = order?.services.map((service) => service?.name).join(', ');
const customer = avatarSource === 'master' ? order?.slot?.master : order?.client;
return (
<Link href={`/orders/${documentId}`} rel="noopener noreferrer">
<div className="flex items-center justify-between rounded-2xl bg-background p-4 px-6 dark:bg-primary/5">
<div className="flex flex-col">
<div className="flex items-center gap-4">
<ClientAvatar client={order.client} />
{customer && <CustomerAvatar customer={customer} />}
<div className="flex flex-col">
<ReadonlyTimeRange timeEnd={order?.time_end} timeStart={order?.time_start} />
<span className="truncate text-xs text-muted-foreground">{services}</span>
@ -31,13 +36,13 @@ export function OrderCard({ documentId, ...order }: Readonly<OrderComponentProps
);
}
function ClientAvatar({ client }: { readonly client: OrderClient }) {
if (!client) return null;
function CustomerAvatar({ customer }: { readonly customer: OrderCustomer }) {
if (!customer) return null;
return (
<Avatar>
<AvatarImage alt={client.name} src={client.photoUrl || ''} />
<AvatarFallback>{client.name.charAt(0)}</AvatarFallback>
<AvatarImage alt={customer.name} src={customer.photoUrl || ''} />
<AvatarFallback>{customer.name.charAt(0)}</AvatarFallback>
</Avatar>
);
}