From 636ddd7ce203504da4965e2eb9e50877274e9db2 Mon Sep 17 00:00:00 2001 From: vchikalkin Date: Tue, 11 Feb 2025 17:51:08 +0300 Subject: [PATCH] add slot buttons --- .../schedule/slot/[documentId]/page.tsx | 8 ++- apps/web/components/layout/container.tsx | 5 ++ apps/web/components/layout/index.ts | 1 + .../{time-card.tsx => datetime-card.tsx} | 4 +- apps/web/components/schedule/index.ts | 3 +- apps/web/components/schedule/slot-buttons.tsx | 64 +++++++++++++++++++ packages/graphql/operations/slot.graphql | 1 + .../graphql/types/operations.generated.ts | 4 +- 8 files changed, 83 insertions(+), 7 deletions(-) create mode 100644 apps/web/components/layout/container.tsx create mode 100644 apps/web/components/layout/index.ts rename apps/web/components/schedule/{time-card.tsx => datetime-card.tsx} (85%) create mode 100644 apps/web/components/schedule/slot-buttons.tsx diff --git a/apps/web/app/(main)/profile/schedule/slot/[documentId]/page.tsx b/apps/web/app/(main)/profile/schedule/slot/[documentId]/page.tsx index 34be423..f84c073 100644 --- a/apps/web/app/(main)/profile/schedule/slot/[documentId]/page.tsx +++ b/apps/web/app/(main)/profile/schedule/slot/[documentId]/page.tsx @@ -1,6 +1,7 @@ import { getSlot } from '@/actions/slots'; +import { Container } from '@/components/layout'; import { PageHeader } from '@/components/navigation'; -import { TimeCard } from '@/components/schedule'; +import { DateTimeCard, SlotButtons } from '@/components/schedule'; import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; type Props = { params: Promise<{ documentId: string }> }; @@ -19,7 +20,10 @@ export default async function ProfilePage(props: Readonly) { return ( - + + + + ); } diff --git a/apps/web/components/layout/container.tsx b/apps/web/components/layout/container.tsx new file mode 100644 index 0000000..5617a63 --- /dev/null +++ b/apps/web/components/layout/container.tsx @@ -0,0 +1,5 @@ +import { type PropsWithChildren } from 'react'; + +export function Container({ children }: Readonly) { + return
{children}
; +} diff --git a/apps/web/components/layout/index.ts b/apps/web/components/layout/index.ts new file mode 100644 index 0000000..85ee15b --- /dev/null +++ b/apps/web/components/layout/index.ts @@ -0,0 +1 @@ +export * from './container'; diff --git a/apps/web/components/schedule/time-card.tsx b/apps/web/components/schedule/datetime-card.tsx similarity index 85% rename from apps/web/components/schedule/time-card.tsx rename to apps/web/components/schedule/datetime-card.tsx index 326699e..2b6a2f6 100644 --- a/apps/web/components/schedule/time-card.tsx +++ b/apps/web/components/schedule/datetime-card.tsx @@ -3,13 +3,13 @@ import { type SlotProps } from './types'; import { useSlotQuery } from '@/hooks/slots'; import { formatDate, formatTime } from '@/utils/date'; -export function TimeCard({ documentId }: Readonly) { +export function DateTimeCard({ documentId }: Readonly) { const { data } = useSlotQuery({ documentId }); if (!data?.slot) return null; return ( -
+
{formatDate(data?.slot?.date).user()} {formatTime(data?.slot?.time_start).user()} diff --git a/apps/web/components/schedule/index.ts b/apps/web/components/schedule/index.ts index 45948a4..ad95298 100644 --- a/apps/web/components/schedule/index.ts +++ b/apps/web/components/schedule/index.ts @@ -1,3 +1,4 @@ export * from './calendar'; -export * from './time-card'; +export * from './datetime-card'; +export * from './slot-buttons'; export * from './time-slots'; diff --git a/apps/web/components/schedule/slot-buttons.tsx b/apps/web/components/schedule/slot-buttons.tsx new file mode 100644 index 0000000..9c7146d --- /dev/null +++ b/apps/web/components/schedule/slot-buttons.tsx @@ -0,0 +1,64 @@ +/* eslint-disable react/jsx-no-bind */ +/* eslint-disable canonical/id-match */ +'use client'; +import { type SlotProps } from './types'; +import { useSlotDelete, useSlotMutation, useSlotQuery } from '@/hooks/slots'; +import { Enum_Slot_State } from '@repo/graphql/types'; +import { Button } from '@repo/ui/components/ui/button'; +import { useRouter } from 'next/navigation'; + +export function SlotButtons({ documentId }: Readonly) { + const { data } = useSlotQuery({ documentId }); + + const isOpened = data?.slot?.state === Enum_Slot_State.Open; + const isClosed = data?.slot?.state === Enum_Slot_State.Closed; + + const { mutate: mutateSlot } = useSlotMutation({ documentId }); + + function handleOpenSlot() { + return mutateSlot({ data: { state: Enum_Slot_State.Open }, documentId }); + } + + function handleCloseSlot() { + return mutateSlot({ data: { state: Enum_Slot_State.Closed }, documentId }); + } + + const { mutate: deleteSlot } = useSlotDelete({ documentId }); + const router = useRouter(); + + function handleDeleteSlot() { + router.back(); + return deleteSlot(); + } + + return ( +
+ {isOpened && ( + + )} + {isClosed && ( + + )} + +
+ ); +} diff --git a/packages/graphql/operations/slot.graphql b/packages/graphql/operations/slot.graphql index c6a033b..e1f5273 100644 --- a/packages/graphql/operations/slot.graphql +++ b/packages/graphql/operations/slot.graphql @@ -20,6 +20,7 @@ query GetSlots($filters: SlotFiltersInput) { query GetSlot($documentId: ID!) { slot(documentId: $documentId) { + state orders { documentId } diff --git a/packages/graphql/types/operations.generated.ts b/packages/graphql/types/operations.generated.ts index 7cd34cb..c3cf19a 100644 --- a/packages/graphql/types/operations.generated.ts +++ b/packages/graphql/types/operations.generated.ts @@ -687,7 +687,7 @@ export type GetSlotQueryVariables = Exact<{ }>; -export type GetSlotQuery = { __typename?: 'Query', slot?: { __typename?: 'Slot', documentId: string, date?: any | null | undefined, time_start: any, time_end: any, state?: Enum_Slot_State | null | undefined, orders: Array<{ __typename?: 'Order', documentId: string } | null | undefined> } | null | undefined }; +export type GetSlotQuery = { __typename?: 'Query', slot?: { __typename?: 'Slot', state?: Enum_Slot_State | null | undefined, documentId: string, date?: any | null | undefined, time_start: any, time_end: any, orders: Array<{ __typename?: 'Order', documentId: string } | null | undefined> } | null | undefined }; export type UpdateSlotMutationVariables = Exact<{ documentId: Scalars['ID']['input']; @@ -715,6 +715,6 @@ export const GetCustomerClientsDocument = {"kind":"Document","definitions":[{"ki export const UpdateCustomerProfileDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateCustomerProfile"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"documentId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CustomerInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateCustomer"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"documentId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"documentId"}}},{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"CustomerFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"CustomerFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Customer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"active"}},{"kind":"Field","name":{"kind":"Name","value":"documentId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"phone"}},{"kind":"Field","name":{"kind":"Name","value":"photoUrl"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"telegramId"}}]}}]} as unknown as DocumentNode; export const CreateSlotDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateSlot"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SlotInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createSlot"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SlotFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SlotFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Slot"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"documentId"}},{"kind":"Field","name":{"kind":"Name","value":"date"}},{"kind":"Field","name":{"kind":"Name","value":"time_start"}},{"kind":"Field","name":{"kind":"Name","value":"time_end"}},{"kind":"Field","name":{"kind":"Name","value":"state"}}]}}]} as unknown as DocumentNode; export const GetSlotsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSlots"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"SlotFiltersInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slots"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"StringValue","value":"time_start:asc","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"documentId"}}]}}]}}]} as unknown as DocumentNode; -export const GetSlotDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSlot"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"documentId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slot"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"documentId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"documentId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"orders"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"documentId"}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SlotFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SlotFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Slot"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"documentId"}},{"kind":"Field","name":{"kind":"Name","value":"date"}},{"kind":"Field","name":{"kind":"Name","value":"time_start"}},{"kind":"Field","name":{"kind":"Name","value":"time_end"}},{"kind":"Field","name":{"kind":"Name","value":"state"}}]}}]} as unknown as DocumentNode; +export const GetSlotDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSlot"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"documentId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slot"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"documentId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"documentId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"orders"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"documentId"}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SlotFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SlotFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Slot"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"documentId"}},{"kind":"Field","name":{"kind":"Name","value":"date"}},{"kind":"Field","name":{"kind":"Name","value":"time_start"}},{"kind":"Field","name":{"kind":"Name","value":"time_end"}},{"kind":"Field","name":{"kind":"Name","value":"state"}}]}}]} as unknown as DocumentNode; export const UpdateSlotDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateSlot"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"documentId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SlotInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateSlot"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"documentId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"documentId"}}},{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SlotFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SlotFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Slot"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"documentId"}},{"kind":"Field","name":{"kind":"Name","value":"date"}},{"kind":"Field","name":{"kind":"Name","value":"time_start"}},{"kind":"Field","name":{"kind":"Name","value":"time_end"}},{"kind":"Field","name":{"kind":"Name","value":"state"}}]}}]} as unknown as DocumentNode; export const DeleteSlotDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteSlot"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"documentId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteSlot"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"documentId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"documentId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"documentId"}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file