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

move order-card & time-range to @/components/shared

Browse Source
This commit is contained in:
vchikalkin 2025-05-23 16:48:20 +03:00
parent 5e13deecf0
commit 2510e0bcae
10 changed files with 27 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/components/orders/components/index.ts
View File

@ -2,7 +2,6 @@ export * from './back-button';
export * from './contacts-grid';
export * from './datetime-select';
export * from './next-button';
export * from './order-card';
export * from './result';
export * from './service-select';
export * from './submit-button';

1
apps/web/components/orders/components/order-card.tsx
View File

@ -1 +0,0 @@
export { OrderCard } from '@/components/schedule/components/order-card';

2
apps/web/components/orders/orders-list.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable canonical/id-match */
'use client';
import { OrderCard } from './components/order-card';
import { OrderCard } from '@/components/shared/order-card';
import { useCustomerQuery } from '@/hooks/api/customers';
import { useOrdersQuery } from '@/hooks/api/orders';
import { Enum_Customer_Role } from '@repo/graphql/types';

4
apps/web/components/schedule/components/slot-card.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable canonical/id-match */
'use client';
import { ReadonlyTimeRange } from './time-range';
import { ReadonlyTimeRange } from '@/components/shared/time-range';
import { useSlotQuery } from '@/hooks/api/slots';
import { Enum_Slot_State, type SlotFieldsFragment } from '@repo/graphql/types';
import { Badge } from '@repo/ui/components/ui/badge';
@ -31,7 +31,7 @@ export function SlotCard(props: Readonly<SlotFieldsFragment>) {
<Link href={`${pathname}/slots/${props.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">
<ReadonlyTimeRange {...props} />
<ReadonlyTimeRange timeEnd={props.time_end} timeStart={props.time_start} />
<span
className={cn(
'text-xs font-normal',

5
apps/web/components/schedule/components/slot-time.tsx
View File

@ -2,7 +2,8 @@
'use client';
import { type SlotComponentProps } from '../types';
import { EditableTimeRangeForm, ReadonlyTimeRange } from './time-range';
import { EditableTimeRangeForm } from './time-range';
import { ReadonlyTimeRange } from '@/components/shared/time-range';
import { useSlotMutation, useSlotQuery } from '@/hooks/api/slots';
import { useZustandStore } from '@/stores/schedule';
import { Button } from '@repo/ui/components/ui/button';
@ -57,7 +58,7 @@ function SlotTimeReadonly({ documentId }: Readonly<SlotComponentProps>) {
return (
<div className="flex items-center gap-2">
<ReadonlyTimeRange {...slot} className="text-3xl" />
<ReadonlyTimeRange className="text-3xl" timeEnd={slot.time_end} timeStart={slot.time_start} />
<Button
className="rounded-full text-xs"
disabled={hasOrders}

24
apps/web/components/schedule/components/time-range.tsx
View File

@ -1,10 +1,6 @@
'use client';
import { type OrderTimeRange } from '../types';
import { useScheduleStore } from '@/stores/schedule';
import { formatTime } from '@repo/graphql/utils/datetime-format';
import { Input } from '@repo/ui/components/ui/input';
import { cn } from '@repo/ui/lib/utils';
import { type FormEvent, type PropsWithChildren } from 'react';
type EditableTimeRangeProps = {
@ -12,11 +8,6 @@ type EditableTimeRangeProps = {
readonly onSubmit: (event: FormEvent) => void;
};
type TimeRangeProps = OrderTimeRange & {
readonly className?: string;
readonly delimiter?: boolean;
};
export function EditableTimeRangeForm({
children,
disabled = false,
@ -55,18 +46,3 @@ export function EditableTimeRangeForm({
</form>
);
}
export function ReadonlyTimeRange({
className,
delimiter = true,
time_end,
time_start,
}: Readonly<TimeRangeProps>) {
return (
<div className={cn('flex flex-row items-center gap-2 text-lg font-bold', className)}>
<span className="tracking-wider">{time_start ? formatTime(time_start).user() : 'xx:xx'}</span>
{delimiter && ' - '}
<span className="tracking-wider">{time_end ? formatTime(time_end).user() : 'xx:xx'}</span>
</div>
);
}

2
apps/web/components/schedule/slot-orders-list.tsx
View File

@ -1,6 +1,6 @@
'use client';
import { OrderCard } from './components/order-card';
import { OrderCard } from '../shared/order-card';
import { type SlotComponentProps } from './types';
import { useSlotQuery } from '@/hooks/api/slots';

2
apps/web/components/schedule/types/index.tsx
View File

@ -2,6 +2,4 @@ import type * as GQL from '@repo/graphql/types';
export type OrderClient = NonNullable<GQL.GetOrderQuery['order']>['client'];
export type OrderComponentProps = Pick<GQL.OrderFieldsFragment, 'documentId'>;
export type OrderTimeRange = Pick<GQL.OrderFieldsFragment, 'time_end' | 'time_start'>;
export type Slot = NonNullable<GQL.GetSlotQuery['slot']>;
export type SlotComponentProps = Pick<GQL.SlotFieldsFragment, 'documentId'>;

4
apps/web/components/schedule/components/order-card.tsx → apps/web/components/shared/order-card.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable canonical/id-match */
'use client';
import { type OrderClient, type OrderComponentProps } from '../types';
import { type OrderClient, type OrderComponentProps } from '../schedule/types';
import { ReadonlyTimeRange } from './time-range';
import { useOrderQuery } from '@/hooks/api/orders';
import { Enum_Order_State } from '@repo/graphql/types';
@ -27,7 +27,7 @@ export function OrderCard({ documentId }: Readonly<OrderComponentProps>) {
<div className="flex items-center gap-4">
<ClientAvatar client={order.client} />
<div className="flex flex-col">
<ReadonlyTimeRange time_end={order?.time_end} time_start={order?.time_start} />
<ReadonlyTimeRange timeEnd={order?.time_end} timeStart={order?.time_start} />
<span className="truncate text-xs text-muted-foreground">{services}</span>
</div>
{/* <span className="text-xs text-foreground">{clientName}</span> */}

18
apps/web/components/shared/time-range.tsx Normal file
View File

@ -0,0 +1,18 @@
import { formatTime } from '@repo/graphql/utils/datetime-format';
import { cn } from '@repo/ui/lib/utils';
type TimeRangeProps = {
readonly className?: string;
readonly timeEnd: null | string | undefined;
readonly timeStart: null | string | undefined;
};
export function ReadonlyTimeRange({ className, timeEnd, timeStart }: Readonly<TimeRangeProps>) {
return (
<div className={cn('flex flex-row items-center gap-2 text-lg font-bold', className)}>
<span className="tracking-wider">{timeStart ? formatTime(timeStart).user() : 'xx:xx'}</span>
{' - '}
<span className="tracking-wider">{timeEnd ? formatTime(timeEnd).user() : 'xx:xx'}</span>
</div>
);
}