Skip to content

Commit

Permalink
Merge branch 'main' into farkhondeh-dev3
Browse files Browse the repository at this point in the history
  • Loading branch information
@F-sh2019
F-sh2019 committed Dec 16, 2024
2 parents fec87a9 + 2912d50 commit 512bfdb
Show file tree
Hide file tree
Showing 6 changed files with 533 additions and 88 deletions.
4 changes: 2 additions & 2 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,8 @@ const router = createBrowserRouter([
element: <User />,
},
{
path: 'edit',
element: <EditDrug updateDrug={EditDrug} />,
path: 'edit/:id', // Dynamic parameter for drug ID
element: <EditDrug />,
},
{
path: 'add',
Expand Down
5 changes: 3 additions & 2 deletions src/components/AddMedicineForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,17 @@ const AddMedicineForm = ({ id, value, handleMedChange, placeholder }) => {
type={
id === 'expirationDate'
? 'date'
: ['quantity', 'minAmount', 'lotNumber', 'ndcNumber'].includes(id)
: ['quantity', 'minAmount'].includes(id)
? 'number'
: 'text'
}
key={id}
//key={id}
id={id}
value={value} // Directly use value passed as a prop
onChange={handleMedChange}
placeholder={placeholder}
ref={inputRef}
required
/>
);
};
Expand Down
60 changes: 60 additions & 0 deletions src/components/EditMedicineForm.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const EditMedicineForm = ({ id, value, handleInputChange, placeholder }) => {
const inputRef = useRef();

useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);

return (
<StyleInput
type={
id === 'expirationDate'
? 'date'
: ['quantity', 'minAmount'].includes(id)
? 'number'
: 'text'
}
key={id}
id={id}
value={value || ''}
onChange={handleInputChange}
placeholder={placeholder}
ref={inputRef}
/>
);
};

EditMedicineForm.propTypes = {
id: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, // Accept string or number
handleInputChange: PropTypes.func,
placeholder: PropTypes.string.isRequired,
};

export default EditMedicineForm;

export const FormField = styled.div`
display: flex;
flex-direction: column;
`;

export const StyleInput = styled.input`
width: 100%;
padding: 0.375rem 0.75rem;
border-radius: var(--border-radius);
border: 1px solid var(--grey-300);
color: black;
height: 35px;
text-transform: uppercase;
/* Placeholder text color */
&::placeholder {
color: black; /* Set placeholder text to black */
}
`;
140 changes: 96 additions & 44 deletions src/pages/AddDrug.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import AddMedicineForm from '../components/AddMedicineForm';
import Logo from '../components/Logo';

import styled from 'styled-components';

export default function AddDrug({ addDrugs }) {
Expand All @@ -21,30 +20,38 @@ export default function AddDrug({ addDrugs }) {

// Combine all form fields into a single object
const [formData, setFormData] = useState({
nameDrug: '',
name: '',
genericName: '',
classOfDrug: '',
class: '',
quantity: '',
minAmount: '',
threshold: '',
expirationDate: '',
ndcNumber: '',
lotNumber: '',
lot: '',
store: '',
});

//const isFormComplete = Object.values(formData).every((value) => value.trim() !== '');

useEffect(() => {}, [drugs]);

const formatDate = (date) => {
if (!date) return ''; // Handle empty or undefined dates
return new Date(date).toISOString().split('T')[0];
};

const drugClasses = [
'Antibiotic',
'Analgesic',
'Antidepressant',
'Antiviral',
'Antifungal',
'Other',
];

const handleMedChange = ({ target: { id, value } }) => {
setFormData((prev) => ({
...prev,
[id]:
id === 'quantity' || id === 'minAmount' || id === 'ndcNumber' || id === 'lotNumber'
id === 'quantity' || id === 'threshold'
? Math.max(0, parseInt(value, 10)) || '' // Ensure non-negative numbers
: id === 'expirationDate'
? formatDate(value) // Format the date
Expand All @@ -56,21 +63,51 @@ export default function AddDrug({ addDrugs }) {
event.preventDefault();

addDrugs = {
id: Date.now(),
...formData,
};
console.log('AddDrugs:', addDrugs);
console.log('JSON:', JSON.stringify(addDrugs));

const token = localStorage.getItem('token');
fetch('http://localhost:8000/api/v1/inventory', {
method: 'POST', // Or other HTTP methods like POST, PUT, DELETE, etc.
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify(addDrugs),
})
.then((response) => {
// Handle the response
console.error('Response status:', response.status);

if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // Assuming the response is JSON
})
.then(() => {
// Do something with the data
console.log(addDrugs);
setModal(true);
})
.catch((error) => {
// Handle errors
console.error('Error:', error);
});

setDrugs((prev) => [...prev, addDrugs]);
//AddDrug(newDrug); // pass new drug to the parent component

setFormData({
nameDrug: '',
name: '',
genericName: '',
classOfDrug: '',
class: '',
quantity: '',
minAmount: '',
threshold: '',
expirationDate: '',
ndcNumber: '',
lotNumber: '',
lot: '',
store: '',
});
};

Expand All @@ -87,40 +124,55 @@ export default function AddDrug({ addDrugs }) {
{id.replace(/([A-Z])/g, ' $1').toLowerCase()}{' '}
{/* This will render the label text */}
</StyledLabel>
<AddMedicineForm
type={id === 'expirationDate' ? 'date' : 'text'}
id={id}
value={value}
handleMedChange={handleMedChange}
placeholder={id.replace(/([A-Z])/g, ' $1').toUpperCase()}
>
<FormSection>
<Fieldwrapper>
<StyledLabel htmlFor="quantity">Quantity</StyledLabel>
<AddMedicineForm
type="text"
id="quantity"
value={formData.quantity}
handleMedChange={handleMedChange}
placeholder="QUANTITY"
/>
</Fieldwrapper>
<Fieldwrapper>
<div className="form-row">
<StyledLabel htmlFor="minAmount">
Min Amount
{id === 'class' ? (
<select id={id} value={value} onChange={handleMedChange}>
<option value="" disabled>
Select a class
</option>
{drugClasses.map((drugClass) => (
<option key={drugClass} value={drugClass}>
{drugClass}
</option>
))}
</select>
) : (
<AddMedicineForm
type={id === 'expirationDate' ? 'date' : 'text'}
id={id}
value={value}
handleMedChange={handleMedChange}
placeholder={id.replace(/([A-Z])/g, ' $1')}
>
<FormSection>
<Fieldwrapper>
<StyledLabel htmlFor="quantity">
Quantity
</StyledLabel>
<AddMedicineForm
type="text"
id="minAmount"
value={formData.minAmount}
id="quantity"
value={formData.quantity}
handleMedChange={handleMedChange}
placeholder="MIN AMOUNT"
placeholder="QUANTITY"
/>
</div>
</Fieldwrapper>
</FormSection>
</AddMedicineForm>
</Fieldwrapper>
<Fieldwrapper>
<div className="form-row">
<StyledLabel htmlFor="threshold">
Min Amount
</StyledLabel>
<AddMedicineForm
type="text"
id="threshold"
value={formData.threshold}
handleMedChange={handleMedChange}
placeholder="MIN AMOUNT"
/>
</div>
</Fieldwrapper>
</FormSection>
</AddMedicineForm>
)}
</div>
))}
</div>
Expand All @@ -135,7 +187,7 @@ export default function AddDrug({ addDrugs }) {
<Overlay onClick={toggleModal}></Overlay>
<ModalContent>
<p>Your medicine has been successfully added to the inventory.</p>
<CloseModal onClick={toggleModal}>CLOSE</CloseModal>
<CloseModal onClick={() => setModal(false)}>CLOSE</CloseModal>
</ModalContent>
</ButtonModal>
)}
Expand Down
Loading

0 comments on commit 512bfdb

Please sign in to comment.