From d35a212fa2c18c76da1dcbb399ead5f49297eea4 Mon Sep 17 00:00:00 2001 From: ValeriGuerrero Date: Fri, 13 Dec 2024 16:24:54 -0600 Subject: [PATCH 1/7] Edit form changes --- src/App.jsx | 4 +- src/components/AddMedicineForm.jsx | 11 +++--- src/components/EditMedicineForm.jsx | 60 +++++++++++++++++++++++++++++ 3 files changed, 68 insertions(+), 7 deletions(-) create mode 100644 src/components/EditMedicineForm.jsx diff --git a/src/App.jsx b/src/App.jsx index 152c8f3..0b4cbb2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -78,8 +78,8 @@ const router = createBrowserRouter([ element: , }, { - path: 'edit', - element: , + path: 'edit/:id', // Dynamic parameter for drug ID + element: , }, { path: 'add', diff --git a/src/components/AddMedicineForm.jsx b/src/components/AddMedicineForm.jsx index a1b1482..754cf5e 100644 --- a/src/components/AddMedicineForm.jsx +++ b/src/components/AddMedicineForm.jsx @@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -const AddMedicineForm = ({ id, value, handleMedChange, placeholder }) => { +const AddMedicineForm = ({ type, id, value, handleMedChange, placeholder }) => { const inputRef = useRef(); useEffect(() => { @@ -14,16 +14,17 @@ const AddMedicineForm = ({ id, value, handleMedChange, placeholder }) => { type={ id === 'expirationDate' ? 'date' - : ['quantity', 'minAmount', 'lotNumber', 'ndcNumber'].includes(id) - ? 'number' - : 'text' + : ['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 /> ); }; diff --git a/src/components/EditMedicineForm.jsx b/src/components/EditMedicineForm.jsx new file mode 100644 index 0000000..349ab83 --- /dev/null +++ b/src/components/EditMedicineForm.jsx @@ -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 ( + + ); +}; + +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 */ + } +`; \ No newline at end of file From ae7ef232b9fda1e3d5a9d430b6276466634aa00a Mon Sep 17 00:00:00 2001 From: ValeriGuerrero Date: Fri, 13 Dec 2024 16:32:33 -0600 Subject: [PATCH 2/7] Edit form changes --- src/pages/EditDrug.jsx | 306 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 302 insertions(+), 4 deletions(-) diff --git a/src/pages/EditDrug.jsx b/src/pages/EditDrug.jsx index 72713f6..7e5fbb7 100644 --- a/src/pages/EditDrug.jsx +++ b/src/pages/EditDrug.jsx @@ -1,7 +1,305 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import { useParams, useNavigate } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; +import EditMedicineForm from '../components/EditMedicineForm'; -const EditDrug = () => { - return
; +import styled from 'styled-components'; + + +export default function EditDrug({ editDrugs }) { + const location = useLocation(); + const { id } = useParams(); // Get drug ID from URL + const editNavigate = useNavigate(); + const [editData, setEditData] = useState({ + name: '', + genericName: '', + class: '', + quantity: '', + threshold: '', + expirationDate: '', + ndcNumber: '', + lot: '', + store: '' + }); + const drugClasses = [ + 'Antibiotic', + 'Analgesic', + 'Antihistamine', + 'Antidepressant', + 'Antiviral', + 'Antifungal', + 'Other', + ]; + + useEffect(() => { + // Fetch existing drug data to populate form + fetch(`http://localhost:8000/api/v1/inventory/${id}`, { + headers: { + 'Authorization': `Bearer YOUR_API_TOKEN`, + }, + }) + .then((response) => { + if (!response.ok) throw new Error('Failed to fetch drug data'); + return response.json(); + }) + .then((data) => setEditData(data)) + .catch((error) => console.error('Error:', error)); + }, [id]); + + + const handleInputChange = (event) => { + const { id, value } = event.target; + + setEditData((prev) => ({ + ...prev, + [id]: id === 'quantity' || id === 'threshold' ? parseInt(value, 10) || '' : value, + })); + }; + + const handleSaveChanges = (event) => { + event.preventDefault(); + + fetch(`http://localhost:8000/api/v1/inventory/${id}`, { + method: 'GET', // Or other HTTP methods like POST, PUT, DELETE, etc. + headers: { + 'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY3NThkMjVlMGQyNzdiZjBkNTkxOWE1YiIsInJvbGUiOiJpbnZlbnRvcnlNYW5hZ2VyIiwiaWF0IjoxNzM0MTI2MTY3LCJleHAiOjE3MzQxMjk3Njd9.6mD0Wdu8P0s7-baBBFH1Fne72z9kshr0Lp8T5usSrn0`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify(editData) + }) + .then(response => { + // Handle the response + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); // Assuming the response is JSON + }) + .then(data => { + // Do something with the data + console.log(data); + }) + .catch(error => { + // Handle errors + console.error('Error:', error); + }); + + setEditData({ + name: '', + genericName: '', + class: '', + quantity: '', + threshold: '', + expirationDate: '', + ndcNumber: '', + lot: '', + store: '', + }); + }; + + + return ( + +
+ < form onSubmit={handleSaveChanges} > + { + Object.entries(editData).map(([id, value]) => ( +
+ + {id.replace(/([A-Z])/g, ' $1').toLowerCase()}{' '} + {/* This will render the label text */} + + {id === 'class' ? ( + + ) : ( + + + + Quantity + + + +
+ + Min Amount + + +
+ + + + )} +
+ )) + } + + {/* Add other form fields as needed */} + + +
+ + ); }; -export default EditDrug; +export const Wrapper = styled.section` + min-height: 100vh; + display: grid; + align-items: center; + h4 { + text-align: center; + margin-bottom: 1.38rem; + } + .logo { + display: block; + margin: 0 auto; + margin-bottom: 1.38rem; + } +`; + +export const FormField = styled.div``; + +export const AddForm = styled.form` + width: 90vw; + max-width: 400px; + border-top: 5px solid var(--color-blue-dark); + border-radius: var(--border-radius); + box-shadow: var(--shadow-2); + padding: 2rem 2.5rem; + margin: 3rem auto; +`; + +export const StyledLabel = styled.label` + text-transform: lowercase; + display: block; + font-size: var(--small-text); + margin-bottom: 0.75rem; + text-transform: capitalize; + letter-spacing: var(--letter-spacing); + line-height: 1.5; +`; + +export const FormSection = styled.div` + width: 90vw; + max-width: var(--fixed-width); + border-radius: var(--border-radius); + box-shadow: var(--shadow-2); + padding: 2rem 2.5rem; + margin: 3rem auto; +`; + +export const Fieldwrapper = styled.div` + .form-row { + margin-bottom: 0.5rem; + } + input { + text-transform: uppercase; + width: 100%; + padding: 0.375rem 0.75rem; + border-radius: var(--border-radius); + border: 1px solid var(--grey-300); + color: var(--text-color); + height: 35px; + background-color: white; + } + label { + font-size: 0.9rem; + text-transform: lowercase; + } +`; + +export const AddButton = styled.button` + margin-top: 1rem; + background-color: var(--color-blue-dark); + width: 100%; + cursor: pointer; + color: var(--white); + border: transparent; + border-radius: var(--border-radius); + letter-spacing: var(--letter-spacing); + padding: 1rem 4rem; + box-shadow: var(--shadow-1); + transition: var(--transition); + text-transform: capitalize; + display: inline-block; +`; + +export const ButtonModal = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; +`; + +export const Overlay = styled.div` + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; +`; + +export const ModalContent = styled.div` + background: white; + padding: 2rem; + border-radius: 8px; + max-width: 500px; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); +`; + +export const CloseModal = styled.button` + background-color: rgb(34, 63, 75); + color: white; + border: none; + border-radius: 4px; + padding: 0.5rem 1rem; + cursor: pointer; + float: right; +`; + +export const DeleteButton = styled.button` + background-color: rgb(34, 63, 75); + color: white; + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + padding: 0.2em 3em; /* Smaller padding */ + font-size: 0.8em; /* Smaller font size */ + font-family: inherit; + cursor: pointer; + transition: border-color 0.25s; +`; From 743ecc55be4e4d8bd50b213e8415bc1710d7a998 Mon Sep 17 00:00:00 2001 From: ValeriGuerrero Date: Fri, 13 Dec 2024 16:36:58 -0600 Subject: [PATCH 3/7] Edit form changes --- src/App.jsx | 4 +- src/pages/AddDrug.jsx | 380 +++++++++++++++++++++++++---------------- src/pages/AllDrugs.jsx | 21 ++- 3 files changed, 252 insertions(+), 153 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 0b4cbb2..152c8f3 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -78,8 +78,8 @@ const router = createBrowserRouter([ element: , }, { - path: 'edit/:id', // Dynamic parameter for drug ID - element: , + path: 'edit', + element: , }, { path: 'add', diff --git a/src/pages/AddDrug.jsx b/src/pages/AddDrug.jsx index 31dd070..84937f6 100644 --- a/src/pages/AddDrug.jsx +++ b/src/pages/AddDrug.jsx @@ -2,78 +2,132 @@ 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 }) { const [modal, setModal] = useState(false); const [drugs, setDrugs] = useState([]); + const toggleModal = () => { setModal(!modal); }; + if (modal) { document.body.classList.add('active-modal'); } else { document.body.classList.remove('active-modal'); } + // 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]); + + + 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', + 'Antihistamine', + '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 - : value, // For other fields, take the value as-is + ? formatDate(value) // Format the date + : value, // For other fields, take the value as-is })); }; + const handleAddMed = (event) => { event.preventDefault(); + addDrugs = { - id: Date.now(), ...formData, }; console.log('AddDrugs:', addDrugs); + console.log('JSON:', JSON.stringify(addDrugs)); + + + fetch('http://localhost:8000/api/v1/inventory', { + method: 'POST', // Or other HTTP methods like POST, PUT, DELETE, etc. + headers: { + 'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY3NThkMjVlMGQyNzdiZjBkNTkxOWE1YiIsInJvbGUiOiJpbnZlbnRvcnlNYW5hZ2VyIiwiaWF0IjoxNzM0MDk1NDg1LCJleHAiOjE3MzQwOTkwODV9.RU-oQun8HufESwnH-4uiWyJBGAHXubhfO3pB8BoYzKQ`, + '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(data => { + // 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: '', }); }; + return (
@@ -87,55 +141,72 @@ export default function AddDrug({ addDrugs }) { {id.replace(/([A-Z])/g, ' $1').toLowerCase()}{' '} {/* This will render the label text */} - - - - Quantity - - - -
- - Min Amount - + {id === 'class' ? ( + + ) : ( + + + + Quantity -
- - - + + +
+ + Min Amount + + +
+ + + + )}
))} + SAVE DRUG{' '} + {modal && (

Your medicine has been successfully added to the inventory.

- CLOSE + setModal(false)}>CLOSE )} @@ -144,142 +215,155 @@ export default function AddDrug({ addDrugs }) { ); } + AddDrug.propTypes = { addDrugs: PropTypes.func.isRequired, // Required function prop drugs: PropTypes.arrayOf(PropTypes.object), // Optional array prop }; + export const Wrapper = styled.section` - min-height: 100vh; - display: grid; - align-items: center; - h4 { - text-align: center; - margin-bottom: 1.38rem; - } - .logo { - display: block; - margin: 0 auto; - margin-bottom: 1.38rem; - } + min-height: 100vh; + display: grid; + align-items: center; + h4 { + text-align: center; + margin-bottom: 1.38rem; + } + .logo { + display: block; + margin: 0 auto; + margin-bottom: 1.38rem; + } `; + export const FormField = styled.div``; + export const AddForm = styled.form` - width: 90vw; - max-width: 400px; - border-top: 5px solid var(--color-blue-dark); - border-radius: var(--border-radius); - box-shadow: var(--shadow-2); - padding: 2rem 2.5rem; - margin: 3rem auto; + width: 90vw; + max-width: 400px; + border-top: 5px solid var(--color-blue-dark); + border-radius: var(--border-radius); + box-shadow: var(--shadow-2); + padding: 2rem 2.5rem; + margin: 3rem auto; `; + export const StyledLabel = styled.label` - text-transform: lowercase; - display: block; - font-size: var(--small-text); - margin-bottom: 0.75rem; - text-transform: capitalize; - letter-spacing: var(--letter-spacing); - line-height: 1.5; + text-transform: lowercase; + display: block; + font-size: var(--small-text); + margin-bottom: 0.75rem; + text-transform: capitalize; + letter-spacing: var(--letter-spacing); + line-height: 1.5; `; + export const FormSection = styled.div` - width: 90vw; - max-width: var(--fixed-width); - border-radius: var(--border-radius); - box-shadow: var(--shadow-2); - padding: 2rem 2.5rem; - margin: 3rem auto; + width: 90vw; + max-width: var(--fixed-width); + border-radius: var(--border-radius); + box-shadow: var(--shadow-2); + padding: 2rem 2.5rem; + margin: 3rem auto; `; + export const Fieldwrapper = styled.div` - .form-row { - margin-bottom: 0.5rem; - } - input { - text-transform: uppercase; - width: 100%; - padding: 0.375rem 0.75rem; - border-radius: var(--border-radius); - border: 1px solid var(--grey-300); - color: var(--text-color); - height: 35px; - background-color: white; - } - label { - font-size: 0.9rem; - text-transform: lowercase; - } + .form-row { + margin-bottom: 0.5rem; + } + input { + text-transform: uppercase; + width: 100%; + padding: 0.375rem 0.75rem; + border-radius: var(--border-radius); + border: 1px solid var(--grey-300); + color: var(--text-color); + height: 35px; + background-color: white; + } + label { + font-size: 0.9rem; + text-transform: lowercase; + } `; + export const AddButton = styled.button` - margin-top: 1rem; - background-color: var(--color-blue-dark); - width: 100%; - cursor: pointer; - color: var(--white); - border: transparent; - border-radius: var(--border-radius); - letter-spacing: var(--letter-spacing); - padding: 1rem 4rem; - box-shadow: var(--shadow-1); - transition: var(--transition); - text-transform: capitalize; - display: inline-block; + margin-top: 1rem; + background-color: var(--color-blue-dark); + width: 100%; + cursor: pointer; + color: var(--white); + border: transparent; + border-radius: var(--border-radius); + letter-spacing: var(--letter-spacing); + padding: 1rem 4rem; + box-shadow: var(--shadow-1); + transition: var(--transition); + text-transform: capitalize; + display: inline-block; `; + export const ButtonModal = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; `; + export const Overlay = styled.div` - width: 100vw; - height: 100vh; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; `; + export const ModalContent = styled.div` - background: white; - padding: 2rem; - border-radius: 8px; - max-width: 500px; - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + background: white; + padding: 2rem; + border-radius: 8px; + max-width: 500px; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); `; + export const CloseModal = styled.button` - background-color: rgb(34, 63, 75); - color: white; - border: none; - border-radius: 4px; - padding: 0.5rem 1rem; - cursor: pointer; - float: right; + background-color: rgb(34, 63, 75); + color: white; + border: none; + border-radius: 4px; + padding: 0.5rem 1rem; + cursor: pointer; + float: right; `; + export const DeleteButton = styled.button` - background-color: rgb(34, 63, 75); - color: white; - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - padding: 0.2em 3em; /* Smaller padding */ - font-size: 0.8em; /* Smaller font size */ - font-family: inherit; - cursor: pointer; - transition: border-color 0.25s; -`; + background-color: rgb(34, 63, 75); + color: white; + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + padding: 0.2em 3em; /* Smaller padding */ + font-size: 0.8em; /* Smaller font size */ + font-family: inherit; + cursor: pointer; + transition: border-color 0.25s; +`; \ No newline at end of file diff --git a/src/pages/AllDrugs.jsx b/src/pages/AllDrugs.jsx index a539526..0f7431a 100644 --- a/src/pages/AllDrugs.jsx +++ b/src/pages/AllDrugs.jsx @@ -7,6 +7,7 @@ import { useEffect, useState } from 'react'; import FilterSearch from './FilterSearch'; import Alarms from './Alarms'; import { useLocation } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; const AllDrugs = () => { const columnLabels = [ @@ -20,6 +21,14 @@ const AllDrugs = () => { 'view/edit/delete', ]; + const editNavigate = useNavigate(); + + const handleEdit = (drugId) => { + console.log('Navigate to edit', drugId) + editNavigate(`/dashboard/edit/${drugId}`); // Navigate to the Edit Page with the drug ID + }; + + const [data, setData] = useState([]); const [filterData, setFilterData] = useState([]); const [loading, setLoading] = useState(true); @@ -117,12 +126,18 @@ const AllDrugs = () => { {filterData.map((drug, rowIndex) => columnLabels.map((label, colIndex) => (
- {drug[label] || ''} + {label === 'view/edit/delete' ? ( + + ) : ( + drug[label] || '' + )}
)) )} - )} + ) + }
{alarmSection && (
@@ -131,7 +146,7 @@ const AllDrugs = () => {
)}
- + ); }; From ac051bb64c2a349d608db71760e95831f82fb77b Mon Sep 17 00:00:00 2001 From: ValeriGuerrero Date: Fri, 13 Dec 2024 21:03:13 -0600 Subject: [PATCH 4/7] Apply stash changes and update files --- package-lock.json | 21 ++++++++----- src/App.jsx | 4 +-- src/components/EditMedicineForm.jsx | 2 +- src/pages/AddDrug.jsx | 17 ++--------- src/pages/AllDrugs.jsx | 10 +++++- src/pages/EditDrug.jsx | 47 +++++++++++++++++++++-------- 6 files changed, 64 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index c65930b..400b44f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7943,7 +7943,8 @@ "@emotion/use-insertion-effect-with-fallbacks": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz", - "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==" + "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==", + "requires": {} }, "@emotion/utils": { "version": "1.4.1", @@ -8786,7 +8787,8 @@ "@zag-js/date-utils": { "version": "0.77.1", "resolved": "https://registry.npmjs.org/@zag-js/date-utils/-/date-utils-0.77.1.tgz", - "integrity": "sha512-lPYI76n/PO2LZ+PVqgKqLZfYvpNTwOdGdbBFSkwBS7eUvleEd2/oi7AE1jJaKMZ3+Bf/zy1lM5e4dlY09xRFQw==" + "integrity": "sha512-lPYI76n/PO2LZ+PVqgKqLZfYvpNTwOdGdbBFSkwBS7eUvleEd2/oi7AE1jJaKMZ3+Bf/zy1lM5e4dlY09xRFQw==", + "requires": {} }, "@zag-js/dialog": { "version": "0.77.1", @@ -9356,7 +9358,8 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "ajv": { "version": "6.12.6", @@ -10115,7 +10118,8 @@ "version": "9.1.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", - "dev": true + "dev": true, + "requires": {} }, "eslint-import-resolver-node": { "version": "0.3.9", @@ -10268,13 +10272,15 @@ "version": "4.6.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", - "dev": true + "dev": true, + "requires": {} }, "eslint-plugin-react-refresh": { "version": "0.4.5", "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.5.tgz", "integrity": "sha512-D53FYKJa+fDmZMtriODxvhwrO+IOqrxoEo21gMA0sjHdU6dPVH4OhyFip9ypl8HOF5RV5KdTo+rBQLvnY2cO8w==", - "dev": true + "dev": true, + "requires": {} }, "eslint-scope": { "version": "7.2.2", @@ -11645,7 +11651,8 @@ "react-icons": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", - "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==" + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "requires": {} }, "react-is": { "version": "16.13.1", diff --git a/src/App.jsx b/src/App.jsx index 152c8f3..0b4cbb2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -78,8 +78,8 @@ const router = createBrowserRouter([ element: , }, { - path: 'edit', - element: , + path: 'edit/:id', // Dynamic parameter for drug ID + element: , }, { path: 'add', diff --git a/src/components/EditMedicineForm.jsx b/src/components/EditMedicineForm.jsx index 349ab83..abaeceb 100644 --- a/src/components/EditMedicineForm.jsx +++ b/src/components/EditMedicineForm.jsx @@ -22,7 +22,7 @@ const EditMedicineForm = ({ id, value, handleInputChange, placeholder }) => { } key={id} id={id} - value={value || ''}// Directly use value passed as a prop + value={value || ''} onChange={handleInputChange} placeholder={placeholder} ref={inputRef} diff --git a/src/pages/AddDrug.jsx b/src/pages/AddDrug.jsx index 84937f6..70dbb33 100644 --- a/src/pages/AddDrug.jsx +++ b/src/pages/AddDrug.jsx @@ -9,7 +9,6 @@ export default function AddDrug({ addDrugs }) { const [modal, setModal] = useState(false); const [drugs, setDrugs] = useState([]); - const toggleModal = () => { setModal(!modal); }; @@ -21,7 +20,6 @@ export default function AddDrug({ addDrugs }) { document.body.classList.remove('active-modal'); } - // Combine all form fields into a single object const [formData, setFormData] = useState({ name: '', @@ -35,18 +33,13 @@ export default function AddDrug({ addDrugs }) { store: '' }); - - - 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', @@ -70,22 +63,20 @@ export default function AddDrug({ addDrugs }) { })); }; - const handleAddMed = (event) => { event.preventDefault(); - addDrugs = { ...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 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY3NThkMjVlMGQyNzdiZjBkNTkxOWE1YiIsInJvbGUiOiJpbnZlbnRvcnlNYW5hZ2VyIiwiaWF0IjoxNzM0MDk1NDg1LCJleHAiOjE3MzQwOTkwODV9.RU-oQun8HufESwnH-4uiWyJBGAHXubhfO3pB8BoYzKQ`, + 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, body: JSON.stringify(addDrugs) @@ -100,7 +91,7 @@ export default function AddDrug({ addDrugs }) { } return response.json(); // Assuming the response is JSON }) - .then(data => { + .then(() => { // Do something with the data console.log(addDrugs); setModal(true); @@ -127,7 +118,6 @@ export default function AddDrug({ addDrugs }) { }); }; - return (
@@ -215,7 +205,6 @@ export default function AddDrug({ addDrugs }) { ); } - AddDrug.propTypes = { addDrugs: PropTypes.func.isRequired, // Required function prop drugs: PropTypes.arrayOf(PropTypes.object), // Optional array prop diff --git a/src/pages/AllDrugs.jsx b/src/pages/AllDrugs.jsx index 0f7431a..cb6d075 100644 --- a/src/pages/AllDrugs.jsx +++ b/src/pages/AllDrugs.jsx @@ -40,7 +40,15 @@ const AllDrugs = () => { const { alarmFilterData: alarmFilterData } = location.state || {}; useEffect(() => { - fetch('http://localhost:8000/api/v1/inventory') + const token = localStorage.getItem("token") + + fetch('http://localhost:8000/api/v1/inventory', { + method: 'GET', // Or other HTTP methods like POST, PUT, DELETE, etc. + headers: { + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json' + } + }) .then((response) => { if (!response) { throw new error('Network response was not ok'); diff --git a/src/pages/EditDrug.jsx b/src/pages/EditDrug.jsx index 7e5fbb7..97ebd60 100644 --- a/src/pages/EditDrug.jsx +++ b/src/pages/EditDrug.jsx @@ -1,15 +1,11 @@ import React, { useState, useEffect } from 'react'; -import { useParams, useNavigate } from 'react-router-dom'; -import { useLocation } from 'react-router-dom'; +import { useParams } from 'react-router-dom'; import EditMedicineForm from '../components/EditMedicineForm'; - import styled from 'styled-components'; - -export default function EditDrug({ editDrugs }) { - const location = useLocation(); +export default function EditDrug({ }) { + const [modal, setModal] = useState(false); const { id } = useParams(); // Get drug ID from URL - const editNavigate = useNavigate(); const [editData, setEditData] = useState({ name: '', genericName: '', @@ -31,18 +27,34 @@ export default function EditDrug({ editDrugs }) { 'Other', ]; + const toggleModal = () => { + setModal(!modal); + }; + useEffect(() => { // Fetch existing drug data to populate form + const token = localStorage.getItem("token") fetch(`http://localhost:8000/api/v1/inventory/${id}`, { + method: 'GET', headers: { - 'Authorization': `Bearer YOUR_API_TOKEN`, + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json' }, }) .then((response) => { if (!response.ok) throw new Error('Failed to fetch drug data'); return response.json(); }) - .then((data) => setEditData(data)) + .then((data) => { + console.log("This is data", data) + delete data.data.createdBy + delete data.data._id + delete data.data.createdAt + delete data.data.__v + delete data.data.updatedAt + + setEditData(data.data) + }) .catch((error) => console.error('Error:', error)); }, [id]); @@ -59,10 +71,11 @@ export default function EditDrug({ editDrugs }) { const handleSaveChanges = (event) => { event.preventDefault(); + const token = localStorage.getItem("token") fetch(`http://localhost:8000/api/v1/inventory/${id}`, { - method: 'GET', // Or other HTTP methods like POST, PUT, DELETE, etc. + method: 'PATCH', // Or other HTTP methods like POST, PUT, DELETE, etc. headers: { - 'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY3NThkMjVlMGQyNzdiZjBkNTkxOWE1YiIsInJvbGUiOiJpbnZlbnRvcnlNYW5hZ2VyIiwiaWF0IjoxNzM0MTI2MTY3LCJleHAiOjE3MzQxMjk3Njd9.6mD0Wdu8P0s7-baBBFH1Fne72z9kshr0Lp8T5usSrn0`, + 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, body: JSON.stringify(editData) @@ -96,6 +109,7 @@ export default function EditDrug({ editDrugs }) { }); }; + console.log("data", editData) return ( @@ -162,8 +176,17 @@ export default function EditDrug({ editDrugs }) { } {/* Add other form fields as needed */} - + + {modal && ( + + + +

Your medicine has been successfully updated to the inventory.

+ setModal(false)}>CLOSE + + + )}
); From ebb37690231e84d4d46d4515ec91bc49215bb4c3 Mon Sep 17 00:00:00 2001 From: ValeriGuerrero Date: Fri, 13 Dec 2024 21:58:31 -0600 Subject: [PATCH 5/7] small change --- src/pages/EditDrug.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/EditDrug.jsx b/src/pages/EditDrug.jsx index 97ebd60..8e7686a 100644 --- a/src/pages/EditDrug.jsx +++ b/src/pages/EditDrug.jsx @@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'; import EditMedicineForm from '../components/EditMedicineForm'; import styled from 'styled-components'; -export default function EditDrug({ }) { +export default function EditDrug() { const [modal, setModal] = useState(false); const { id } = useParams(); // Get drug ID from URL const [editData, setEditData] = useState({ From 3a53511d4fb720a326f29366d1cf31281ee6a2f0 Mon Sep 17 00:00:00 2001 From: ValeriGuerrero Date: Fri, 13 Dec 2024 22:08:04 -0600 Subject: [PATCH 6/7] small change --- src/components/AddMedicineForm.jsx | 6 +- src/components/EditMedicineForm.jsx | 6 +- src/pages/AddDrug.jsx | 258 +++++++++++++--------------- src/pages/AllDrugs.jsx | 19 +- src/pages/EditDrug.jsx | 157 +++++++++-------- 5 files changed, 210 insertions(+), 236 deletions(-) diff --git a/src/components/AddMedicineForm.jsx b/src/components/AddMedicineForm.jsx index 754cf5e..ccabd66 100644 --- a/src/components/AddMedicineForm.jsx +++ b/src/components/AddMedicineForm.jsx @@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -const AddMedicineForm = ({ type, id, value, handleMedChange, placeholder }) => { +const AddMedicineForm = ({ id, value, handleMedChange, placeholder }) => { const inputRef = useRef(); useEffect(() => { @@ -15,8 +15,8 @@ const AddMedicineForm = ({ type, id, value, handleMedChange, placeholder }) => { id === 'expirationDate' ? 'date' : ['quantity', 'minAmount'].includes(id) - ? 'number' - : 'text' + ? 'number' + : 'text' } //key={id} id={id} diff --git a/src/components/EditMedicineForm.jsx b/src/components/EditMedicineForm.jsx index abaeceb..cb354c5 100644 --- a/src/components/EditMedicineForm.jsx +++ b/src/components/EditMedicineForm.jsx @@ -17,8 +17,8 @@ const EditMedicineForm = ({ id, value, handleInputChange, placeholder }) => { id === 'expirationDate' ? 'date' : ['quantity', 'minAmount'].includes(id) - ? 'number' - : 'text' + ? 'number' + : 'text' } key={id} id={id} @@ -57,4 +57,4 @@ export const StyleInput = styled.input` &::placeholder { color: black; /* Set placeholder text to black */ } -`; \ No newline at end of file +`; diff --git a/src/pages/AddDrug.jsx b/src/pages/AddDrug.jsx index 70dbb33..3eb9771 100644 --- a/src/pages/AddDrug.jsx +++ b/src/pages/AddDrug.jsx @@ -4,7 +4,6 @@ import AddMedicineForm from '../components/AddMedicineForm'; import Logo from '../components/Logo'; import styled from 'styled-components'; - export default function AddDrug({ addDrugs }) { const [modal, setModal] = useState(false); const [drugs, setDrugs] = useState([]); @@ -13,7 +12,6 @@ export default function AddDrug({ addDrugs }) { setModal(!modal); }; - if (modal) { document.body.classList.add('active-modal'); } else { @@ -30,10 +28,10 @@ export default function AddDrug({ addDrugs }) { expirationDate: '', ndcNumber: '', lot: '', - store: '' + store: '', }); - useEffect(() => { }, [drugs]); + useEffect(() => {}, [drugs]); const formatDate = (date) => { if (!date) return ''; // Handle empty or undefined dates @@ -47,10 +45,9 @@ export default function AddDrug({ addDrugs }) { 'Antidepressant', 'Antiviral', 'Antifungal', - 'Other' + 'Other', ]; - const handleMedChange = ({ target: { id, value } }) => { setFormData((prev) => ({ ...prev, @@ -58,8 +55,8 @@ export default function AddDrug({ addDrugs }) { id === 'quantity' || id === 'threshold' ? Math.max(0, parseInt(value, 10)) || '' // Ensure non-negative numbers : id === 'expirationDate' - ? formatDate(value) // Format the date - : value, // For other fields, take the value as-is + ? formatDate(value) // Format the date + : value, // For other fields, take the value as-is })); }; @@ -72,20 +69,19 @@ export default function AddDrug({ addDrugs }) { console.log('AddDrugs:', addDrugs); console.log('JSON:', JSON.stringify(addDrugs)); - const token = localStorage.getItem("token") + 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' + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json', }, - body: JSON.stringify(addDrugs) + body: JSON.stringify(addDrugs), }) - .then(response => { + .then((response) => { // Handle the response console.error('Response status:', response.status); - if (!response.ok) { throw new Error('Network response was not ok'); } @@ -96,15 +92,13 @@ export default function AddDrug({ addDrugs }) { console.log(addDrugs); setModal(true); }) - .catch(error => { + .catch((error) => { // Handle errors console.error('Error:', error); }); - setDrugs((prev) => [...prev, addDrugs]); - setFormData({ name: '', genericName: '', @@ -132,12 +126,10 @@ export default function AddDrug({ addDrugs }) { {/* This will render the label text */} {id === 'class' ? ( - + {drugClasses.map((drugClass) => (