mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Added pachuychuy, alert og item count. s field
This commit is contained in:
Pongot, Jophiel
parent
218564987d
commit
c8199bdc47
1 changed files with 187 additions and 77 deletions
|
|
@ -21,8 +21,8 @@ import {
|
|||
OutlinedInput,
|
||||
Autocomplete,
|
||||
Alert,
|
||||
Stack
|
||||
|
||||
Stack,
|
||||
Button,
|
||||
} from "@mui/material";
|
||||
import React from "react";
|
||||
import Header from "../../Components/Header/Header";
|
||||
|
|
@ -40,7 +40,89 @@ export default function AddTransactionPage() {
|
|||
consumables: "",
|
||||
additional_members: "",
|
||||
borrower: 0,
|
||||
section: "",
|
||||
});
|
||||
|
||||
// Function to calculate total equipment count
|
||||
const calculateTotalEquipmentCount = () => {
|
||||
const selectedItems =
|
||||
equipments.data?.filter((equipment) =>
|
||||
transaction.equipments.includes(equipment.id)
|
||||
) || [];
|
||||
|
||||
// Calculate total count
|
||||
const totalCount = selectedItems.reduce((count) => count + 1, 0);
|
||||
|
||||
return totalCount;
|
||||
};
|
||||
|
||||
const handleShowSelectedItems = () => {
|
||||
const selectedItems =
|
||||
equipments.data?.filter((equipment) =>
|
||||
transaction.equipments.includes(equipment.id)
|
||||
) || [];
|
||||
|
||||
// Explicitly define the type for equipmentCounts
|
||||
const equipmentCounts: Record<string, number> = {};
|
||||
const totalEquipmentCount = calculateTotalEquipmentCount();
|
||||
|
||||
// Calculate counts based on equipment name
|
||||
selectedItems.forEach((item) => {
|
||||
equipmentCounts[item.equipment_name] =
|
||||
(equipmentCounts[item.equipment_name] || 0) + 1;
|
||||
});
|
||||
|
||||
// Show alert
|
||||
const formattedCounts = Object.entries(equipmentCounts).map(
|
||||
([name, count]) => `${count} pcs. of ${name}`
|
||||
);
|
||||
|
||||
const confirmationMessage = `So, you're trying to borrow ${totalEquipmentCount} equipment(s):\n${formattedCounts.join(
|
||||
"\n"
|
||||
)}\nIs it correct?\n\nPlease click OK to continue request\nCancel if you still want to edit`;
|
||||
|
||||
if (window.confirm(confirmationMessage)) {
|
||||
// OK Button Logic
|
||||
console.log(JSON.stringify(transaction));
|
||||
TransactionCreateAPI(transaction)
|
||||
.then(async (data) => {
|
||||
if (data[0]) {
|
||||
setError("Created successfully");
|
||||
toast(
|
||||
`New transaction created successfully, ${
|
||||
typeof data[1] == "object" ? "ID:" + data[1].id : ""
|
||||
}`,
|
||||
{
|
||||
position: "top-right",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
}
|
||||
);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["equipment_instances"],
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["transactions"],
|
||||
});
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
setError(JSON.stringify(data[1]));
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
setError(JSON.stringify(error));
|
||||
});
|
||||
} else {
|
||||
// Cancel Button Logic
|
||||
console.log("Cancel button clicked");
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
const [selecteditems, SetSelectedItems] = useState<number[]>([]);
|
||||
const [selectedteacher, SetSelectedTeacher] = useState<number>(0);
|
||||
|
|
@ -112,7 +194,7 @@ export default function AddTransactionPage() {
|
|||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
overflowY: "scroll",
|
||||
marginTop: 64
|
||||
marginTop: 64,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
|
@ -135,42 +217,79 @@ export default function AddTransactionPage() {
|
|||
marginRight: "1rem",
|
||||
}}
|
||||
>
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<FormLabel
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
gap: "8px",
|
||||
alignSelf: "stretch",
|
||||
}}
|
||||
>
|
||||
<FormControl style={{ marginTop: "8px", width: "100%" }}>
|
||||
<FormLabel
|
||||
style={{
|
||||
...{ ...styles.text_dark, ...styles.bform_label2 },
|
||||
...{
|
||||
marginLeft: "4px",
|
||||
marginBottom: "8px",
|
||||
textAlign: "left",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Items Requested
|
||||
</FormLabel>
|
||||
<Autocomplete
|
||||
multiple
|
||||
id="equipment-autocomplete"
|
||||
options={equipments.data?.sort((a, b) => a.id - b.id) || []}
|
||||
getOptionLabel={(option) =>
|
||||
`${option.equipment_name} (ID:${option.id})`
|
||||
}
|
||||
value={
|
||||
equipments.data?.filter((equipment) =>
|
||||
transaction.equipments.includes(equipment.id)
|
||||
) || []
|
||||
}
|
||||
onChange={(_event, newValue) => {
|
||||
SetTransaction({
|
||||
...transaction,
|
||||
equipments: newValue.map((item) => item.id),
|
||||
});
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
variant="outlined"
|
||||
label="Items Requested"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<div
|
||||
style={{
|
||||
...{ ...styles.text_dark, ...styles.bform_label2 },
|
||||
...{ marginLeft: "4px", marginBottom: "8px", textAlign: "left" },
|
||||
display: "flex",
|
||||
padding: "4px 15px",
|
||||
alignItems: "center",
|
||||
borderRadius: "14px",
|
||||
background: "#D1FF97",
|
||||
}}
|
||||
>
|
||||
Items Requested
|
||||
</FormLabel>
|
||||
<Autocomplete
|
||||
multiple
|
||||
id="equipment-autocomplete"
|
||||
options={equipments.data?.sort((a, b) => a.id - b.id) || []}
|
||||
getOptionLabel={(option) =>
|
||||
`${option.equipment_name} (ID:${option.id})`
|
||||
}
|
||||
value={
|
||||
equipments.data?.filter((equipment) =>
|
||||
transaction.equipments.includes(equipment.id)
|
||||
) || []
|
||||
}
|
||||
onChange={(_event, newValue) => {
|
||||
SetTransaction({
|
||||
...transaction,
|
||||
equipments: newValue.map((item) => item.id),
|
||||
});
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
variant="outlined"
|
||||
label="Items Requested"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_normal,
|
||||
textAlign: "left",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
Total equipment to borrow: {calculateTotalEquipmentCount()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<FormLabel
|
||||
style={{
|
||||
|
|
@ -197,6 +316,28 @@ export default function AddTransactionPage() {
|
|||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<FormLabel
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Section
|
||||
</FormLabel>
|
||||
<TextField
|
||||
style={styles.input_form}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
SetTransaction({ ...transaction, section: e.target.value });
|
||||
setError("");
|
||||
}}
|
||||
label={"Section"}
|
||||
value={transaction.section}
|
||||
placeholder={"Type Section Here"}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<FormLabel
|
||||
style={{
|
||||
|
|
@ -234,9 +375,7 @@ export default function AddTransactionPage() {
|
|||
setError("");
|
||||
}}
|
||||
value={transaction.consumables}
|
||||
placeholder={
|
||||
"ex. Filter Papers, Acids, Solvent, Cleaning Agents"
|
||||
}
|
||||
placeholder={"ex. Filter Papers, Acids, Solvent, Cleaning Agents"}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
|
|
@ -285,7 +424,6 @@ export default function AddTransactionPage() {
|
|||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -293,7 +431,7 @@ export default function AddTransactionPage() {
|
|||
flex: 1,
|
||||
alignContent: "center",
|
||||
width: "100%",
|
||||
marginTop: "1rem"
|
||||
marginTop: "1rem",
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
|
|
@ -316,38 +454,10 @@ export default function AddTransactionPage() {
|
|||
|
||||
<p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
|
||||
|
||||
<button
|
||||
onClick={async () => {
|
||||
console.log(JSON.stringify(transaction));
|
||||
const data = await TransactionCreateAPI(transaction);
|
||||
if (data[0]) {
|
||||
setError("Created successfully");
|
||||
toast(
|
||||
`New transaction created successfuly, ${
|
||||
typeof data[1] == "object" ? "ID:" + data[1].id : ""
|
||||
}`,
|
||||
{
|
||||
position: "top-right",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
}
|
||||
);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["equipment_instances"],
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["transactions"],
|
||||
});
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
setError(JSON.stringify(data[1]));
|
||||
}
|
||||
}}
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleShowSelectedItems}
|
||||
style={{
|
||||
display: "flex",
|
||||
padding: "25px 38px",
|
||||
|
|
@ -360,10 +470,10 @@ export default function AddTransactionPage() {
|
|||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
<p style={{ ...styles.text_light, ...styles.text_M, ...{ flex: 1 } }}>Create Transaction</p>
|
||||
|
||||
</button>
|
||||
|
||||
<p style={{ ...styles.text_light, ...styles.text_M, ...{ flex: 1 } }}>
|
||||
Create Transaction
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue