diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx index 9f4426e..38df6f6 100644 --- a/client/src/components/Schedule.tsx +++ b/client/src/components/Schedule.tsx @@ -1,14 +1,8 @@ /* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { useEffect, useState } from "react"; +import { ChangeEvent, useEffect, useState } from "react"; import Timeline from "./Timeline"; -import { - format, - getDate, - setDate, - setHours, - startOfDay, -} from "date-fns"; +import { format, getDate, setDate, setHours, startOfDay } from "date-fns"; // import useEventStore from "../stores/useEventStore"; import Button from "./Button"; import CloseIcon from "./icons/CloseIcon"; @@ -16,15 +10,17 @@ import Input from "./Input"; import Label from "./Label"; import api from "../utils/api"; import useStore from "../stores/useStore"; +import Select2 from "./Select2"; +import IScheduledSession from "../types/IScheduledSession"; interface Props { selectedDay: Date; slots: number; - events: any[]; + events: IScheduledSession[]; } function Schedule({ selectedDay, slots, events }: Props) { - const { selectedBuild } = useStore(); + const { company, builds, selectedBuild, setSelectedBuild } = useStore(); const [draftMode, setDraftMode] = useState(false); const [slot, setSlot] = useState(); const [startAt, setStartAt] = useState(); @@ -77,6 +73,7 @@ function Schedule({ selectedDay, slots, events }: Props) { await api .post(`scheduled_sessions`, { json: { + companyId: company!.id, buildId: selectedBuild?.id, slot, startAt, @@ -97,9 +94,17 @@ function Schedule({ selectedDay, slots, events }: Props) { // setModal(null); } + useEffect(() => { + if (!builds) return; + + setSelectedBuild(builds[0]); + + console.log(builds); + }, [builds]); + useEffect(() => { console.log("events", events); - }, []); + }, [events]); return (
@@ -114,7 +119,7 @@ function Schedule({ selectedDay, slots, events }: Props) { key={index} className="border-r border-b border-[#DAE0E5] w-[264px] h-10 flex items-center pl-3 bg-[#F0F1F2]" > -

Слот {index + 1}

+

Сервер {index + 1}

))} @@ -166,6 +171,24 @@ function Schedule({ selectedDay, slots, events }: Props) {

Демонстрация

+
+

Выберите ЖК

+ ({ + value: build.build, + text: build.name, + }))} + onChange={(e: ChangeEvent) => + setSelectedBuild( + builds.find( + (build) => + build.build === e.target.selectedOptions[0].value + )! + ) + } + /> +

Дата и время

{format(startAt, "dd.MM.yyyy HH:mm")}

diff --git a/client/src/components/Select2.tsx b/client/src/components/Select2.tsx new file mode 100644 index 0000000..40e4e51 --- /dev/null +++ b/client/src/components/Select2.tsx @@ -0,0 +1,34 @@ +import { ChangeEvent } from "react"; + +interface IOption { + value: string; + text: string; +} + +interface Props { + defaultValue?: string; + options: IOption[]; + onChange: (e: ChangeEvent) => void; +} + +function Select2({ defaultValue, options, onChange }: Props) { + function handleChange(e: ChangeEvent) { + onChange(e); + } + + return ( + + ); +} + +export default Select2; diff --git a/client/src/components/Timeline.tsx b/client/src/components/Timeline.tsx index 649c0fc..7f82078 100644 --- a/client/src/components/Timeline.tsx +++ b/client/src/components/Timeline.tsx @@ -4,9 +4,11 @@ import { useState, MouseEvent, useEffect, useRef } from "react"; import TimelineSlot from "./TimelineSlot"; import { addMinutes, differenceInMinutes, format, startOfDay } from "date-fns"; import Button from "./Button"; +import IScheduledSession from "../types/IScheduledSession"; +import useStore from "../stores/useStore"; interface Props { - timelineEvents: any[]; + timelineEvents: IScheduledSession[]; slot: number; draftMode: boolean; onChangeDraftMode: (draftMode: boolean) => void; @@ -33,6 +35,7 @@ function Timeline({ const ref = useRef(null); const [startAt, setStartAt] = useState(); const [duration, setDuration] = useState(30); // min + const { builds } = useStore(); function handleMouseDown(e: MouseEvent) { if (draftMode) return; @@ -168,10 +171,13 @@ function Timeline({ }} >
-

- {format(new Date(event.startAt), "HH:mm")} -{" "} - {format(new Date(event.endAt), "HH:mm")} -

+
+

+ {format(new Date(event.startAt), "HH:mm")} -{" "} + {format(new Date(event.endAt), "HH:mm")} +

+

{builds.find((build) => build.id === event.buildId)?.name}

+
-

Запланировать демонстрацию

+

Запланировать демонстрацию