schedule is now published to be visible to the public

pages/cart/calendar/index.tsx

@@ -57,7 +57,7 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
 
 
     const [allShifts, setAllShifts] = useState(initialShifts);
-    const [value, onChange] = useState<Date>(new Date());
+    const [isPublished, setIsPublished] = useState(() => initialShifts.some(shift => shift.isPublished));    const [value, onChange] = useState<Date>(new Date());
     const [shifts, setShifts] = React.useState([]);
     const [error, setError] = React.useState(null);
     const [availablePubs, setAvailablePubs] = React.useState([]);
@@ -108,6 +108,7 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
             try {
                 const { data: shiftsForDate } = await axiosInstance.get(`/api/?action=getShiftsForDay&date=${dateStr}`);
                 setShifts(shiftsForDate);
+                setIsPublished(shiftsForDate.some(shift => shift.isPublished));
                 let { data: availablePubsForDate } = await axiosInstance.get(`/api/?action=filterPublishers&assignments=true&availabilities=true&date=${dateStr}&select=id,firstName,lastName,isActive,desiredShiftsPerMonth`);
 
                 availablePubsForDate.forEach(pub => {
@@ -511,6 +512,18 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
         }
     }
 
+    const togglePublished = async () => {
+        try {
+            const publishState = !isPublished; // Toggle the state
+            const isPublishedParam = publishState ? 'true' : 'fasle';
+            await axiosInstance.get(`/api/?action=updateShifts&isPublished=${isPublishedParam}&date=${common.getISODateOnly(value)}`);
+            setIsPublished(publishState); // Update state based on the action
+
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
 
 
     const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -550,6 +563,12 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
                             }}
                             message="Това ще изпрати имейли до всички участници за смените им през избрания месец. Сигурни ли сте?"
                         />
+                        <button
+                            className={`button btn m-2 ${isPublished ? 'hover:bg-gray-100 bg-yellow-500' : 'hover:bg-red-300 bg-blue-400'}`}
+                            onClick={togglePublished}>
+                            <i className={`fas ${isPublished ? 'fa-check' : 'fa-close'} mr-2`}></i>
+                            {isPublished ? "Скрий" : "Публикувай"} графика (м.)
+                        </button>
                         <div className="relative inline-block text-left">
                             <button
                                 className={`button m-2 ${isMenuOpen ? 'bg-gray-400 border border-blue-500' : 'bg-gray-300'} hover:bg-gray-400`}