Mark latest box picked up button
This commit is contained in:
@@ -37,7 +37,7 @@
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.deliveredCell {
|
||||
.pickedUpCell {
|
||||
background-color: #27db60;
|
||||
|
||||
&:hover {
|
||||
@@ -45,7 +45,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.pickedUpCell {
|
||||
.deliveredCell {
|
||||
background-color: #a7ebb0;
|
||||
|
||||
&:hover {
|
||||
@@ -61,4 +61,78 @@
|
||||
.statusText {
|
||||
font-size: 0.8rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.latestBoxDeliveredBtn {
|
||||
background-color: #a7ebb0;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
font-size: 1.3rem;
|
||||
|
||||
&:hover {
|
||||
background-color: #7dcf8c;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #ffffff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.latestBoxPickedUpBtn {
|
||||
background-color: #7dcf8c;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.latestBoxNoBoxesBtn {
|
||||
background-color: #fff;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.latestBoxModal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.latestBoxModalContent {
|
||||
background-color: #fff;
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.latestBoxConfirmButton {
|
||||
background-color: #86f56d;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.latestBoxCancelButton {
|
||||
background-color: #f56d6d;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
@@ -5,17 +5,16 @@ import { customerState } from "../store";
|
||||
import { Box } from "../types";
|
||||
import { useAtom } from "jotai";
|
||||
import { markBoxDelivered, markBoxPickedUp } from "../api";
|
||||
import { Modal } from "@mui/material";
|
||||
|
||||
export default function Calendar() {
|
||||
const latestBoxStatuses = ["no boxes", "picked up", "delivered"]; //TODO: There's logic problem between "delivered" and "picked up"
|
||||
const [customerData, setCustomerData] = useAtom(customerState);
|
||||
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
|
||||
const [calendarCells, setCalendarCells] = useState<JSX.Element[]>([]);
|
||||
const [firstWeekPadding, setFirstWeekPadding] = useState<JSX.Element[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setCalendarCells(generateCalendarCells(selectedMonth, customerData.boxes));
|
||||
setFirstWeekPadding(generateFirstWeekPadding(selectedMonth));
|
||||
}, [selectedMonth, customerData.boxes]);
|
||||
const [showLatestBoxModal, setShowLatestBoxModal] = useState(false);
|
||||
const [latestBoxStatus, setLatestBoxStatus] = useState<string>(latestBoxStatuses[0]);
|
||||
|
||||
const generateFirstWeekPadding = (month: number) => {
|
||||
const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
|
||||
@@ -78,9 +77,9 @@ export default function Calendar() {
|
||||
})}
|
||||
<br />
|
||||
{matchingBox.pickup_date ? (
|
||||
<span className={styles.statusText}>Jako</span>
|
||||
) : (
|
||||
<span className={styles.statusText}>Haettu</span>
|
||||
) : (
|
||||
<span className={styles.statusText}>Jako</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -98,6 +97,77 @@ export default function Calendar() {
|
||||
return calendarCells;
|
||||
}
|
||||
|
||||
const renderLatestBoxButton = () => {
|
||||
switch (latestBoxStatus) {
|
||||
case "no boxes":
|
||||
return <button
|
||||
className={styles.latestBoxNoBoxesBtn}
|
||||
disabled
|
||||
>
|
||||
Ei laatikoita tässä kuussa
|
||||
</button>;
|
||||
case "picked up":
|
||||
return <button
|
||||
className={styles.latestBoxPickedUpBtn}
|
||||
disabled
|
||||
>
|
||||
Uusin laatikko on jo haettu
|
||||
</button>;
|
||||
case "delivered":
|
||||
return <button
|
||||
className={styles.latestBoxDeliveredBtn}
|
||||
onClick={handleLatestBoxClick}
|
||||
>
|
||||
Kuittaa uusin laatikko haetuksi
|
||||
</button>;
|
||||
default:
|
||||
return <span className={styles.latestBoxStatus}>Virhe</span>;
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setCalendarCells(generateCalendarCells(selectedMonth, customerData.boxes));
|
||||
setFirstWeekPadding(generateFirstWeekPadding(selectedMonth));
|
||||
setLatestBoxStatus(() => {
|
||||
if (!customerData.boxes || customerData.boxes.length === 0) {
|
||||
return latestBoxStatuses[0]; // no boxes
|
||||
}
|
||||
const monthBoxes = customerData.boxes.filter(box => new Date(box.delivery_date).getMonth() === selectedMonth);
|
||||
if (!monthBoxes || monthBoxes.length === 0) {
|
||||
return latestBoxStatuses[0]; // no boxes
|
||||
}
|
||||
const latestBox = monthBoxes[monthBoxes.length - 1];
|
||||
if (latestBox.pickup_date) {
|
||||
return latestBoxStatuses[1]; // picked up
|
||||
}
|
||||
return latestBoxStatuses[2]; // delivered
|
||||
}
|
||||
);
|
||||
}, [selectedMonth, customerData.boxes]);
|
||||
|
||||
const handleLatestBoxClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
event.preventDefault();
|
||||
setShowLatestBoxModal(true);
|
||||
}
|
||||
|
||||
const markLatestBoxPickedUp = () => {
|
||||
const monthBoxes = customerData.boxes.filter(box => new Date(box.delivery_date).getMonth() === selectedMonth);
|
||||
if (monthBoxes.length === 0) return;
|
||||
console.log("Marking latest box as picked up");
|
||||
console.log("Month boxes:", monthBoxes);
|
||||
const latestBox = monthBoxes[monthBoxes.length - 1];
|
||||
markBoxPickedUp(latestBox.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 latest box as picked up:", error);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2 className={styles.monthTitle}>
|
||||
@@ -111,6 +181,9 @@ export default function Calendar() {
|
||||
Seuraava kuukausi >
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.latestBoxBtnContainer}>
|
||||
{renderLatestBoxButton()}
|
||||
</div>
|
||||
<div className={styles.calendarGrid}>
|
||||
<span>Ma</span>
|
||||
<span>Ti</span>
|
||||
@@ -122,6 +195,31 @@ export default function Calendar() {
|
||||
{firstWeekPadding}
|
||||
{calendarCells}
|
||||
</div>
|
||||
<Modal
|
||||
open={showLatestBoxModal}
|
||||
onClose={() => setShowLatestBoxModal(false)}
|
||||
className={styles.latestBoxModal}
|
||||
>
|
||||
<div className={styles.latestBoxModalContent}>
|
||||
<h2>Viimeisin laatikko</h2>
|
||||
<p>Oletko varma, että haluat kuitata viimeisimmän laatikon haetuksi?</p>
|
||||
<button
|
||||
className={styles.latestBoxConfirmButton}
|
||||
onClick={() => {
|
||||
markLatestBoxPickedUp();
|
||||
setShowLatestBoxModal(false);
|
||||
}}
|
||||
>
|
||||
Kyllä
|
||||
</button>
|
||||
<button
|
||||
className={styles.latestBoxCancelButton}
|
||||
onClick={() => setShowLatestBoxModal(false)}
|
||||
>
|
||||
Peruuta
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
810
package-lock.json
generated
810
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -9,6 +9,10 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/icons-material": "^7.1.1",
|
||||
"@mui/material": "^7.1.1",
|
||||
"jotai": "^2.12.5",
|
||||
"next": "15.3.3",
|
||||
"react": "^19.0.0",
|
||||
@@ -23,4 +27,4 @@
|
||||
"eslint-config-next": "15.3.3",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user