mwitnessing/components/reports/ReportForm.js

import axiosInstance from '../../src/axiosSecure';
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useRouter } from "next/router";
import Link from "next/link";
import { useSession } from "next-auth/react"

const common = require('src/helpers/common');


// ------------------  ------------------
// This component is used to create and edit
/* location model:

model Report {
    id          Int       @id @default(autoincrement())
    date        DateTime
    publisherId String
    publisher   Publisher @relation(fields: [publisherId], references: [id], onDelete: Cascade)
    locationId  Int?
    location    Location? @relation(fields: [locationId], references: [id])
    shift       Shift?
  
    placementCount       Int?
    videoCount           Int?
    returnVisitInfoCount Int?
    conversationCount    Int?
  
    experienceInfo String? @db.LongText
  }
*/

export default function ReportForm({ shiftId, existingItem, onDone }) {

    const router = useRouter();

    const getFormattedDate = (date) => {
        let year = date.getFullYear();
        let month = (1 + date.getMonth()).toString().padStart(2, '0');
        let day = date.getDate().toString().padStart(2, '0');

        return `${year}-${month}-${day}`;
    };

    const initialDate = getFormattedDate(new Date());
    const { data: session, status } = useSession()
    const [publisherId, setPublisher] = useState(null);
    useEffect(() => {
        if (session) {
            setPublisher(session.user.id);
        }
    }, [session]);


    const [item, setItem] = useState(existingItem || {
        experienceInfo: "",
        date: existingItem?.date || initialDate,
        shiftId: shiftId,
        publisherId: publisherId,
        placementCount: 0,
        videoCount: 0,
        returnVisitInfoCount: 0,
        conversationCount: 0
    });
    const [shifts, setShifts] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const dateStr = common.getISODateOnly(new Date(item.date));
                const { data: shiftsForDate } = await axiosInstance.get(`/api/?action=getShiftsForDay&date=${dateStr}`);
                setShifts(shiftsForDate);
                if (!existingItem && shiftsForDate.length > 0) {
                    setItem((prevItem) => ({ ...prevItem, shiftId: shiftsForDate[0].id }));
                }
            } catch (error) {
                console.error(error);
            }
        };
        fetchData();
    }, [item.date, existingItem]);
    const handleChange = ({ target }) => {
        setItem({ ...item, [target.name]: target.value });
    };


    const handleSubmit = async (e) => {
        e.preventDefault();
        item.publisher = { connect: { id: publisherId } };
        item.shift = { connect: { id: parseInt(item.shiftId) } };
        item.date = new Date(item.date);
        delete item.publisherId;
        delete item.shiftId;
        item.placementCount = parseInt(item.placementCount);
        item.videoCount = parseInt(item.videoCount);
        item.returnVisitInfoCount = parseInt(item.returnVisitInfoCount);
        item.conversationCount = parseInt(item.conversationCount);
        // item.location = { connect: { id: parseInt(item.locationId) } };s
        console.log("handleSubmit");
        console.log(item);
        try {
            const response = await axiosInstance.post('/api/data/reports', item);
            console.log(response);
            toast.success("Гоово. Благодарим Ви за отчета!");
            setTimeout(() => {
                if (onDone) {
                    onDone();
                } else {
                    router.push(`/dash`);
                }
            }, 300); // Delay for 3 seconds
        } catch (error) {
            console.log(error);
            toast.error("За съжаление възникна грешка!");
        }
    }

    return (
        <div className="w-full max-w-md mx-auto">
            {/* <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdjbqgQEGY5-fA4A0B4cXjKRQVRWk5_-uoHVIAwdMcZ5bB7Zg/viewform?embedded=true" width="640" height="717" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe> */}

            <form className="bg-white dark:bg-gray-800 shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={handleSubmit} >

                <h1 className="text-2xl font-bold mb-8">Отчет от смяна</h1>
                <div className="mb-4">
                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="date">
                        Дата
                    </label>
                    <input className="textbox form-input px-4 py-2 rounded" id="date" name="date" type="date" onChange={handleChange} value={item.date} autoComplete="off" />
                </div>
                <div className="mb-4">
                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="shiftId">
                        Смяна
                    </label>
                    <select className="textbox form-select px-4 py-2 rounded"
                        id="shiftId" name="shiftId" onChange={handleChange} value={item.shiftId} autoComplete="off" >
                        {shifts.map((shift) => (
                            <option key={shift.id} value={shift.id}>
                                {shift.name}
                            </option>
                        ))}
                    </select>
                </div>

                <div className="mb-4">
                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="placementCount">
                        Издания
                    </label>
                    <input className="textbox form-input px-4 py-2 rounded" id="placementCount" name="placementCount" type="number" onChange={handleChange} value={item.placementCount} autoComplete="off" />
                </div>
                <div className="mb-4">
                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="conversationCount">
                        Разговори
                    </label>
                    <input className="textbox form-input px-4 py-2 rounded" id="conversationCount" name="conversationCount" type="number" onChange={handleChange} value={item.conversationCount} autoComplete="off" />
                </div>
                <div className="mb-4">
                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="videoCount">
                        Клипове
                    </label>
                    <input className="textbox form-input px-4 py-2 rounded" id="videoCount" name="videoCount" type="number" onChange={handleChange} value={item.videoCount} autoComplete="off" />
                </div>
                <div className="mb-4">
                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="returnVisitInfoCount">
                        Адреси / Телефони
                    </label>
                    <input className="textbox form-input px-4 py-2 rounded" id="returnVisitInfoCount" name="returnVisitInfoCount" type="number" onChange={handleChange} value={item.returnVisitInfoCount} autoComplete="off" />
                </div>
                <div className="flex items-center justify-between">
                    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit">
                        Запази
                    </button>
                    <Link href={`/dash`}>
                        Отказ
                    </Link>
                </div>
            </form>
        </div>
    );
}