add slot buttons

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<Props>) {
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <PageHeader title={undefined} />
-      <TimeCard {...parameters} />
+      <Container>
+        <DateTimeCard {...parameters} />
+        <SlotButtons {...parameters} />
+      </Container>
     </HydrationBoundary>
   );
 }

apps/web/components/layout/container.tsx

@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from 'react';
+
+export function Container({ children }: Readonly<PropsWithChildren>) {
+  return <div className="space-y-4 px-4">{children}</div>;
+}

apps/web/components/layout/index.ts

@@ -0,0 +1 @@
+export * from './container';

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<SlotProps>) {
+export function DateTimeCard({ documentId }: Readonly<SlotProps>) {
   const { data } = useSlotQuery({ documentId });
 
   if (!data?.slot) return null;
 
   return (
-    <div className="flex flex-col p-4">
+    <div className="flex flex-col">
       <span className="mb-2 tracking-wide">{formatDate(data?.slot?.date).user()}</span>
       <span className="mt-2 text-3xl font-bold tracking-wide">
         {formatTime(data?.slot?.time_start).user()}

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';

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<SlotProps>) {
+  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 (
+    <div className="grid grid-cols-[2fr_1fr]">
+      {isOpened && (
+        <Button
+          className="rounded-l-2xl rounded-r-none bg-orange-100 p-8 text-orange-500 dark:bg-orange-700 dark:text-orange-100"
+          onClick={handleCloseSlot}
+          variant="ghost"
+        >
+          Закрыть
+        </Button>
+      )}
+      {isClosed && (
+        <Button
+          className="rounded-l-2xl rounded-r-none bg-green-100 p-8 text-green-500 dark:bg-green-700 dark:text-green-100"
+          onClick={handleOpenSlot}
+          variant="ghost"
+        >
+          Открыть
+        </Button>
+      )}
+      <Button
+        className="rounded-l-none rounded-r-2xl bg-red-100 p-8 text-red-500 dark:bg-red-700 dark:text-red-100"
+        disabled={Boolean(data?.slot?.orders.length)}
+        onClick={handleDeleteSlot}
+        variant="ghost"
+      >
+        Удалить
+      </Button>
+    </div>
+  );
+}

packages/graphql/operations/slot.graphql

@@ -20,6 +20,7 @@ query GetSlots($filters: SlotFiltersInput) {
 
 query GetSlot($documentId: ID!) {
   slot(documentId: $documentId) {
+    state
     orders {
       documentId
     }

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<UpdateCustomerProfileMutation, UpdateCustomerProfileMutationVariables>;
 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<CreateSlotMutation, CreateSlotMutationVariables>;
 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<GetSlotsQuery, GetSlotsQueryVariables>;
-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<GetSlotQuery, GetSlotQueryVariables>;
+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<GetSlotQuery, GetSlotQueryVariables>;
 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<UpdateSlotMutation, UpdateSlotMutationVariables>;
 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<DeleteSlotMutation, DeleteSlotMutationVariables>;