209 lines
8.7 KiB
JavaScript
209 lines
8.7 KiB
JavaScript
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"
|
||
import { ReportType } from "@prisma/client";
|
||
|
||
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);
|
||
const [allDay, setAllDay] = useState(false);
|
||
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 } };
|
||
delete item.publisherId;
|
||
if (allDay) {
|
||
delete item.shift;
|
||
} else {
|
||
item.shift = { connect: { id: parseInt(item.shiftId) } };
|
||
}
|
||
delete item.shiftId;
|
||
item.date = new Date(item.date);
|
||
item.type = ReportType.Report;
|
||
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("За съжаление възникна грешка!");
|
||
}
|
||
}
|
||
|
||
const handleCheckboxChange = (event) => {
|
||
setAllDay(event.target.checked);
|
||
|
||
// Set shiftId to null if the checkbox is checked
|
||
if (event.target.checked) {
|
||
handleChange({ target: { name: 'shiftId', value: null } });
|
||
}
|
||
};
|
||
|
||
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 ${allDay ? 'bg-gray-200' : 'bg-white'}`}
|
||
disabled={allDay}
|
||
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 className="mb-4">
|
||
<label className="block text-gray-700 text-sm font-bold mb-2">
|
||
<input
|
||
type="checkbox"
|
||
checked={allDay}
|
||
onChange={handleCheckboxChange}
|
||
className="mr-2 leading-tight"
|
||
/>
|
||
за целия ден
|
||
</label>
|
||
</div>
|
||
</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>
|
||
);
|
||
} |