Service report - full day UI

components/reports/ReportForm.js

@@ -46,6 +46,7 @@ export default function ReportForm({ shiftId, existingItem, onDone }) {
     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);
@@ -88,7 +89,11 @@ export default function ReportForm({ shiftId, existingItem, onDone }) {
     const handleSubmit = async (e) => {
         e.preventDefault();
         item.publisher = { connect: { id: publisherId } };
-        item.shift = { connect: { id: parseInt(item.shiftId) } };
+        if (allDay) {
+            delete item.shift;
+        } else {
+            item.shift = { connect: { id: parseInt(item.shiftId) } };
+        }
         item.date = new Date(item.date);
         item.type = ReportType.Report;
         delete item.publisherId;
@@ -117,6 +122,15 @@ export default function ReportForm({ shiftId, existingItem, onDone }) {
         }
     }
 
+    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> */}
@@ -134,7 +148,8 @@ export default function ReportForm({ shiftId, existingItem, onDone }) {
                     <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"
+                    <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}>
@@ -142,6 +157,17 @@ export default function ReportForm({ shiftId, existingItem, onDone }) {
                             </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">