108 lines
4.8 KiB
JavaScript
108 lines
4.8 KiB
JavaScript
import React from "react";
|
|
import {useEffect, useState} from "react";
|
|
import CloseVisitModal from "../components/CloseVisitModal.jsx";
|
|
import api from "../api.js";
|
|
import {DATE_TOGGLE} from "../constants.js";
|
|
import SuppliesModal from "../components/SuppliesModal.jsx";
|
|
|
|
export default function VisitsModule() {
|
|
const username = localStorage.getItem('username');
|
|
const [currentDate, setCurrentDate] = useState(new Date(localStorage.getItem(DATE_TOGGLE)));
|
|
const [serviceVisits, setServiceVisits] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handlePrevious = () => {
|
|
setCurrentDate(prevDate => {
|
|
const newDate = new Date(prevDate)
|
|
newDate.setDate(prevDate.getDate() - 1)
|
|
localStorage.setItem(DATE_TOGGLE, newDate.toLocaleDateString())
|
|
return newDate
|
|
})
|
|
}
|
|
const handleNext = () => {
|
|
setCurrentDate(prevDate => {
|
|
const newDate = new Date(prevDate)
|
|
newDate.setDate(prevDate.getDate() + 1)
|
|
localStorage.setItem(DATE_TOGGLE, newDate.toLocaleDateString())
|
|
return newDate
|
|
})
|
|
}
|
|
const fetchServiceVisits = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const date = currentDate.toLocaleDateString('en-CA', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
}).replace(/\//g, '-');
|
|
const response = await api.post(`visits/`, {date, username});
|
|
if (response.status === 200) {
|
|
setServiceVisits(response.data);
|
|
}
|
|
} catch (error) {
|
|
alert(error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
const formattedDate = currentDate.toLocaleDateString(
|
|
'en-US', {
|
|
year: 'numeric', month: 'long', day: 'numeric'
|
|
})
|
|
useEffect(() => {
|
|
fetchServiceVisits();
|
|
}, [currentDate]);
|
|
|
|
return (
|
|
<div className="d-flex flex-column">
|
|
<div className="d-flex align-items-center justify-content-center p-2">
|
|
<h4>Service Visits Module</h4>
|
|
</div>
|
|
<div className="d-flex align-items-center justify-content-evenly p-2">
|
|
<button onClick={handlePrevious} className="btn btn-secondary" type="button"
|
|
data-bs-target="#serviceVisitsCarousel">Prev
|
|
</button>
|
|
<h5>{formattedDate}</h5>
|
|
<button onClick={handleNext} className='btn btn-secondary'
|
|
data-bs-target="#serviceVisitsCarousel">Next
|
|
</button>
|
|
</div>
|
|
<div id="serviceVisitsCarousel" className="carousel slide d-flex align-items-center">
|
|
<div className="carousel-inner flex-grow-1">
|
|
<div className="carousel-item active">
|
|
<div className='d-flex p-2 flex-column align-items-center justify-content-center'>
|
|
{loading ? <div className="d-flex align-items-center"><h4 className="m-2 p-2">Loading Visits...</h4><div className="m-2 spinner-border"></div></div> : (
|
|
<table className="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" className="w-50">Account</th>
|
|
<th scope="col" className="w-20">Status</th>
|
|
<th scope="col" className="w-20">Notes</th>
|
|
<th scope="col" className="w-10">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{serviceVisits.map(visit => (
|
|
<tr key={visit.id}>
|
|
<th scope="row">{visit.full_name}</th>
|
|
<td>{visit.status}</td>
|
|
<td>{visit.notes ? visit.notes : null}</td>
|
|
<td>
|
|
<div className="d-flex">
|
|
<CloseVisitModal visit={visit}/>
|
|
<SuppliesModal visit={visit}/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|