tietokonepaja/lootakalenteri-frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modal for changing box statuses manually

Browse Source
This commit is contained in:
Veikko Lintujärvi
2025-06-29 18:18:39 +03:00
parent 729fb26069
commit 23b4a20e2b
1 changed files with 108 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
app/components/Calendar.tsx
View File

@@ -15,6 +15,17 @@ export default function Calendar() {
const [firstWeekPadding, setFirstWeekPadding] = useState<JSX.Element[]>([]);
const [showLatestBoxModal, setShowLatestBoxModal] = useState(false);
const [latestBoxStatus, setLatestBoxStatus] = useState<string>(boxStatuses[0]);
const [latestBox, setLatestBox] = useState<Box>({
id: "",
pickup_date: null,
delivery_date: new Date(),
});
const [showClickedBoxModal, setShowClickedBoxModal] = useState(false);
const [clickedBox, setClickedBox] = useState<Box>({
id: "",
pickup_date: null,
delivery_date: new Date(),
});
const generateFirstWeekPadding = (month: number) => {
const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
@@ -43,44 +54,24 @@ export default function Calendar() {
key={index}
className={`${styles.calendarCell} ${matchingBox.pickup_date ? styles.pickedUpCell : styles.deliveredCell}`}
onClick={() => {
if (matchingBox.pickup_date) {
// If the box is already picked up, mark it as delivered
markBoxDelivered(matchingBox.id).then((updatedBox) => {
setCustomerData((prev) => ({
...prev,
boxes: prev.boxes.map(box =>
box.id === updatedBox.id ? { ...box, pickup_date: null } : box
),
}));
setClickedBox(matchingBox);
setShowClickedBoxModal(true);
}
).catch((error) => {
console.error("Error marking box as delivered:", error);
});
return;
} else {
markBoxPickedUp(matchingBox.id).then((updatedBox) => {
setCustomerData((prev) => ({
...prev,
boxes: prev.boxes.map(box =>
box.id === updatedBox.id ? { ...box, pickup_date: updatedBox.pickup_date } : box
),
}));
}
).catch((error) => {
console.error("Error marking box as picked up:", error);
})
}
}}>
{date.toLocaleDateString("fi-FI", {
}>
{
date.toLocaleDateString("fi-FI", {
day: "2-digit",
month: "2-digit",
})}
})
}
< br />
{matchingBox.pickup_date ? (
{
matchingBox.pickup_date ? (
<span className={styles.statusText}>Haettu</span>
) : (
<span className={styles.statusText}>Jako</span>
)}
)
}
</div >
);
}
@@ -97,6 +88,36 @@ export default function Calendar() {
return calendarCells;
}
const changeClickedBoxStatus = () => {
if (clickedBox.pickup_date) {
// If the box is already picked up, mark it as delivered
markBoxDelivered(clickedBox.id).then((updatedBox) => {
setCustomerData((prev) => ({
...prev,
boxes: prev.boxes.map(box =>
box.id === updatedBox.id ? { ...box, pickup_date: null } : box
),
}));
}
).catch((error) => {
console.error("Error marking box as delivered:", error);
});
return;
} else {
markBoxPickedUp(clickedBox.id).then((updatedBox) => {
setCustomerData((prev) => ({
...prev,
boxes: prev.boxes.map(box =>
box.id === updatedBox.id ? { ...box, pickup_date: updatedBox.pickup_date } : box
),
}));
}
).catch((error) => {
console.error("Error marking box as picked up:", error);
})
}
}
const renderLatestBoxButton = () => {
switch (latestBoxStatus) {
case "no boxes":
@@ -151,9 +172,6 @@ export default function Calendar() {
}
const markLatestBoxPickedUp = () => {
const deliveredBoxes = customerData.boxes.filter(box => new Date(box.delivery_date).getMonth() === selectedMonth && !box.pickup_date);
if (deliveredBoxes.length === 0) return;
const latestBox = deliveredBoxes[0];
markBoxPickedUp(latestBox.id).then((updatedBox) => {
setCustomerData((prev) => ({
...prev,
@@ -166,6 +184,16 @@ export default function Calendar() {
});
}
useEffect(() => {
const deliveredBoxes = customerData.boxes.filter(box => new Date(box.delivery_date).getMonth() === selectedMonth && !box.pickup_date);
if (deliveredBoxes.length === 0) return;
const latestBox = deliveredBoxes[0];
if (latestBox) {
setLatestBox(latestBox);
}
}, [customerData.boxes, selectedMonth]);
return (
<>
<h2 className={styles.monthTitle}>
@@ -200,7 +228,10 @@ export default function Calendar() {
>
<div className={styles.latestBoxModalContent}>
<h2>Viimeisin laatikko</h2>
<p>Oletko varma, että haluat kuitata viimeisimmän laatikon haetuksi?</p>
<p>Oletko varma, että haluat kuitata viimeisimmän laatikon ({new Date(latestBox.delivery_date).toLocaleDateString("fi-FI", {
day: "2-digit",
month: "2-digit",
})}) haetuksi?</p>
<button
className={styles.latestBoxConfirmButton}
onClick={() => {
@@ -218,6 +249,40 @@ export default function Calendar() {
</button>
</div>
</Modal>
<Modal
open={showClickedBoxModal}
onClose={() => setShowClickedBoxModal(false)}
className={styles.latestBoxModal}
>
<div className={styles.latestBoxModalContent}>
<h2>Satolaatikko {" "}
{new Date(clickedBox.delivery_date).toLocaleDateString("fi-FI", {
day: "2-digit",
month: "2-digit",
})}
</h2>
<p>Oletko varma, että haluat {clickedBox.pickup_date ? "peruuttaa " : "kuitata "}
{new Date(clickedBox.delivery_date).toLocaleDateString("fi-FI", {
day: "2-digit",
month: "2-digit",
})} päivän laatikon {clickedBox.pickup_date ? "haun" : "haetuksi"}?</p>
<button
className={styles.latestBoxConfirmButton}
onClick={() => {
changeClickedBoxStatus();
setShowClickedBoxModal(false);
}}
>
Kyllä
</button>
<button
className={styles.latestBoxCancelButton}
onClick={() => setShowClickedBoxModal(false)}
>
Peruuta
</button>
</div>
</Modal >
</>
);
}