337 lines
10 KiB
Plaintext
337 lines
10 KiB
Plaintext
import {
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
} from "@mui/material";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
TextField,
|
|
Paper,
|
|
} from "@mui/material";
|
|
import { ToastContainer, toast } from "react-toastify";
|
|
import "react-toastify/dist/ReactToastify.css";
|
|
import Box from "@mui/material/Box";
|
|
import { Typography, Button } from "@mui/material";
|
|
import { useFormik } from "formik";
|
|
|
|
import CancelRoundedIcon from "@mui/icons-material/CancelRounded";
|
|
import useAxiosPrivate from "../../utils/useAxiosPrivate";
|
|
import SingleSelectNew from "../common/SingleSelectNew";
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import { useState,useEffect } from "react";
|
|
import { memo } from "react";
|
|
|
|
const Consumables = ({ openConsumable, setOpenConsumable }) => {
|
|
|
|
|
|
const axiosClientPrivate = useAxiosPrivate();
|
|
const [itemData,setItemData] = useState([]);
|
|
|
|
const medicineData = [
|
|
{ label: "Yes", id: 1 },
|
|
{ label: "No", id: 2 },
|
|
];
|
|
|
|
const {
|
|
values,
|
|
touched,
|
|
errors,
|
|
handleBlur,
|
|
handleChange,
|
|
setFieldValue,
|
|
handleSubmit,
|
|
resetForm,
|
|
getFieldProps,
|
|
} = useFormik({
|
|
enableReinitialize: true,
|
|
initialValues: {
|
|
items: [
|
|
{
|
|
itemId: "",
|
|
batch: "",
|
|
availableQty: "",
|
|
issuedQty: "",
|
|
},
|
|
],
|
|
},
|
|
// validationSchema: IndentValidationForm,
|
|
// onSubmit: (values, action) => {
|
|
// values.indentItems = values.indentItems.filter((item) => item.indentQty);
|
|
// console.log('filter values',values);
|
|
|
|
// action.resetForm();
|
|
// },
|
|
onSubmit: async (values, { resetForm }) => {
|
|
try {
|
|
// if(values.indentItems.length > 0){
|
|
const response = await axiosClientPrivate.post("/indents", values);
|
|
console.log("response", response);
|
|
|
|
toast.success("Saved Successfully!", {
|
|
position: "top-center",
|
|
autoClose: 500,
|
|
});
|
|
console.log("save value", values);
|
|
|
|
// setFetchTrigger((prev) => prev + 1);
|
|
// setOpenPopup(false);
|
|
// console.log("Response:", response.data);
|
|
resetForm();
|
|
// }
|
|
// else {
|
|
// toast.error("Please Enter Item!", {
|
|
// position: "top-center",
|
|
// autoClose : 1000
|
|
// });
|
|
// }
|
|
} catch (error) {
|
|
console.log(values);
|
|
console.error("Error:", error);
|
|
}
|
|
},
|
|
});
|
|
|
|
console.log('consumables');
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
|
|
const Consumable = async () => {
|
|
try {
|
|
const response = await axiosClientPrivate.get(`/opd-consumables/medicines`, { signal: controller.signal });
|
|
const items = response.data;
|
|
|
|
const changeData = items.map((item,index)=>{
|
|
return {
|
|
label : item[1],
|
|
id : item[0]
|
|
}
|
|
})
|
|
// console.log("consumable",changeData);
|
|
|
|
setItemData(changeData)
|
|
} catch (err) {
|
|
console.error("Failed to fetch patient data: ", err);
|
|
// setRowData([]);
|
|
}
|
|
};
|
|
|
|
Consumable();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
|
|
}, []);
|
|
|
|
const handleAddComsumable = ()=>{
|
|
const addNew = {
|
|
itemId: "",
|
|
batch: "",
|
|
availableQty: "",
|
|
issueQty: "",
|
|
}
|
|
setFieldValue('items',[...values.items,addNew])
|
|
}
|
|
|
|
|
|
const handleRemoveConsumable = (index)=>{
|
|
const updatedItems = values.items.filter((_, i) => i !== index);
|
|
setFieldValue('items', updatedItems);
|
|
}
|
|
|
|
return (
|
|
<Dialog open={openConsumable} maxWidth={"lg"}>
|
|
<ToastContainer />
|
|
<DialogTitle>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
{"CONSUMABLES"}
|
|
</Typography>
|
|
<Button
|
|
color="error"
|
|
endIcon={<CancelRoundedIcon />}
|
|
onClick={() => {
|
|
setOpenConsumable(false);
|
|
}}
|
|
>
|
|
Close
|
|
</Button>
|
|
</Box>
|
|
</DialogTitle>
|
|
|
|
<DialogContent dividers>
|
|
<Box sx={{ width: "100%", padding: 1 }}>
|
|
<TableContainer sx={{ mt: 1 }} component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow sx={{ backgroundColor: "#46b06e" }}>
|
|
<TableCell sx={{ color: "white" }}>Item</TableCell>
|
|
<TableCell sx={{ color: "white" }}>Batch</TableCell>
|
|
<TableCell sx={{ color: "white" }}>Available qty</TableCell>
|
|
<TableCell sx={{ color: "white" }}>Issued qty</TableCell>
|
|
<TableCell sx={{ color: "white" }}>Action</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{values.items.map((row, index) => (
|
|
<TableRow key={index}>
|
|
<TableCell>
|
|
<SingleSelectNew
|
|
label=""
|
|
name={`items[${index}].itemId`}
|
|
type="text"
|
|
size="small"
|
|
// sx={{ width: "100%" }}
|
|
sx={{ width: "200px" }}
|
|
options={itemData}
|
|
getOptionLabel={(option) => option.label}
|
|
value={
|
|
itemData.find(
|
|
(option) => option.id === values.items[index].itemId
|
|
) || null
|
|
}
|
|
onChange={(event, newValue) => {
|
|
setFieldValue(
|
|
`treatmentDtos[${index}].itemId`,
|
|
newValue ? newValue.id : ""
|
|
);
|
|
}}
|
|
onBlur={handleBlur}
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<SingleSelectNew
|
|
label=""
|
|
name={`items[${index}].batch`}
|
|
type="text"
|
|
size="small"
|
|
// sx={{ width: "100%" }}
|
|
sx={{ width: "200px" }}
|
|
options={medicineData}
|
|
getOptionLabel={(option) => option.label}
|
|
value={
|
|
medicineData.find(
|
|
(option) => option.id === values.items[index].batch
|
|
) || null
|
|
}
|
|
onChange={(event, newValue) => {
|
|
setFieldValue(
|
|
`treatmentDtos[${index}].batch`,
|
|
newValue ? newValue.id : ""
|
|
);
|
|
}}
|
|
onBlur={handleBlur}
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<TextField
|
|
label=""
|
|
disabled
|
|
name={`treatmentDtos[${index}].availableQty`}
|
|
{...getFieldProps(
|
|
`treatmentDtos[${index}].availableQty`
|
|
)}
|
|
// onChange={setIndex(index)}
|
|
|
|
fullWidth={true}
|
|
type="text"
|
|
size="small"
|
|
sx={{ width: "100%" }}
|
|
|
|
// helperText={
|
|
// errors.vaccineDesc && touched.vaccineDesc ? (
|
|
// <span style={{ color: "red" }}>{errors.vaccineDesc}</span>
|
|
// ) : null
|
|
// }
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<TextField
|
|
label=""
|
|
name={`treatmentDtos[${index}].issuedQty`}
|
|
{...getFieldProps(`treatmentDtos[${index}].issuedQty`)}
|
|
// onChange={setIndex(index)}
|
|
|
|
fullWidth={true}
|
|
type="text"
|
|
size="small"
|
|
sx={{ width: "100%" }}
|
|
|
|
// helperText={
|
|
// errors.issuedQty && touched.issuedQty ? (
|
|
// <span style={{ color: "red" }}>{errors.issuedQty}</span>
|
|
// ) : null
|
|
// }
|
|
/>
|
|
|
|
</TableCell>
|
|
<TableCell>
|
|
{index > 0 && (
|
|
<DeleteIcon
|
|
color="error"
|
|
style={{ cursor: 'pointer', marginLeft: '1rem' }}
|
|
onClick={() => handleRemoveConsumable(index)}
|
|
/>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<Button
|
|
sx={{mt : 1,mb : 4,backgroundColor : '#46b06e', ':hover': {
|
|
backgroundColor: '#46b06e', // Same color to prevent hover effect
|
|
},}}
|
|
// style={{display : showupdate ? "none" : "null" }}
|
|
fullWidth
|
|
variant="contained"
|
|
type="button"
|
|
onClick={() => handleAddComsumable()}
|
|
>Add Row</Button>
|
|
</Box>
|
|
</DialogContent>
|
|
|
|
<DialogActions>
|
|
<Button
|
|
type="submit"
|
|
onClick={() => handleSubmit()}
|
|
variant="outlined"
|
|
// style={{ display: showupdate ? "none" : "null" }}
|
|
>
|
|
Save
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
resetForm();
|
|
}}
|
|
type="reset"
|
|
color="warning"
|
|
variant="outlined"
|
|
>
|
|
Reset
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
const MemoizedConsumables = memo(Consumables);
|
|
|
|
|
|
export default MemoizedConsumables;
|
|
// export default Consumables;
|