258 lines
11 KiB
JavaScript
258 lines
11 KiB
JavaScript
import React, {useState, useEffect} from "react";
|
|
// import { useDispatch } from "react-redux";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
// import { customerSlice } from "./../../store";
|
|
import { AuthService, CustomerService, EventRequestsService, EventsService, ResourceService } from "../../services";
|
|
import Select from 'react-select';
|
|
import { Button, Modal } from "react-bootstrap";
|
|
|
|
const CreateEvent = () => {
|
|
const navigate = useNavigate();
|
|
const [resources, setResources] = useState([]);
|
|
const [customers, setCustomers] = useState([]);
|
|
const [currentCustomer, setCurrentCustomer] = useState(undefined);
|
|
const [customerDisplay, setCustomerDisplay] = useState('');
|
|
const [medicalResource, setMedicalResource] = useState(undefined)
|
|
const [currentResource, setCurrentResource] = useState(undefined);
|
|
const [resourceType, setResourceType] = useState('');
|
|
const [source, setSource] = useState('');
|
|
const [np, setNp] = useState('');
|
|
const [symptom, setSymptom] = useState('');
|
|
const [transportation, setTransportation] = useState('');
|
|
const [showResourceModal, setShowResourceModal] = useState(false);
|
|
const [keyword, setKeyword] = useState('');
|
|
const [filteredResources, setFilteredResources] = useState([]);
|
|
// const [upload, setUpload] = useState('');
|
|
// const [uploadOther, setUploadOther] = useState('');
|
|
const [type, setType] = useState('');
|
|
|
|
|
|
// const params = new URLSearchParams(window.location.search);
|
|
const goToRequestList = () => {
|
|
navigate(`/medical/event-request/list`);
|
|
}
|
|
|
|
const redirectTo = () => {
|
|
navigate(`/medical/index`);
|
|
}
|
|
|
|
|
|
const saveEventRequest = () => {
|
|
const newEventRequest = {
|
|
customer_id: currentCustomer?.id,
|
|
customer_display: `${currentCustomer?.name} - ${currentCustomer?.name_cn} - ${currentCustomer?.birth_date}`,
|
|
source,
|
|
symptom,
|
|
resource: currentResource?.id,
|
|
resource_display: currentResource?.name,
|
|
transportation,
|
|
np,
|
|
upload: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name,
|
|
type,
|
|
status: 'active',
|
|
create_by: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name,
|
|
create_date: new Date(),
|
|
edit_history:[{ employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }]
|
|
}
|
|
|
|
console.log('new Event Request', newEventRequest);
|
|
EventRequestsService.createNewEventRequest(newEventRequest).then(data => goToRequestList());
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
if (!AuthService.canAccessLegacySystem()) {
|
|
window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
|
|
AuthService.logout();
|
|
navigate(`/login`);
|
|
}
|
|
Promise.all([ResourceService.getAll(), CustomerService.getAllCustomers()]).then(([resourcesData, customersData]) => {
|
|
setResources(resourcesData.data);
|
|
setFilteredResources(resourcesData.data);
|
|
setCustomers(customersData.data);
|
|
})
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const newResources = [...resources];
|
|
|
|
if (resourceType && resourceType !== '') {
|
|
setFilteredResources(newResources?.filter(item => item.type === resourceType));
|
|
}
|
|
}, [resourceType])
|
|
|
|
const onCustomerChange = (selectedCustomer) => {
|
|
setCustomerDisplay(selectedCustomer);
|
|
setCurrentCustomer(customers.find(customer => customer.id === selectedCustomer.value))
|
|
}
|
|
|
|
const filterResourceListByKeyword = (item) => {
|
|
if (keyword.length > 0) {
|
|
const newKeyword = keyword.toLowerCase();
|
|
return item?.name.toLowerCase()?.includes(newKeyword) || item?.address?.toLowerCase()?.includes(newKeyword) || item?.specialty?.toLowerCase()?.includes(newKeyword);
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
const filterResourcesListBySpecialty = (item) => {
|
|
if (resourceType.length > 0) {
|
|
return item?.type === resourceType;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
// const onResourceChange = (selectedResource) => {
|
|
// setMedicalResource(selectedResource);
|
|
// setCurrentResource(resources.find(resource => resource.id === selectedResource.value));
|
|
// }
|
|
|
|
return (
|
|
<>
|
|
<div className="list row">
|
|
<div className="col-md-8 col-xs-12">
|
|
<div className="list row mb-4">
|
|
<div className="col-md-12 text-primary">
|
|
<h5>Create Event Request<button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h5>
|
|
</div>
|
|
</div>
|
|
<div className="list row mb-4">
|
|
<div className="col-md-6 mb-4">
|
|
<div>Source*:</div>
|
|
<select value={source} onChange={e => setSource(e.target.value)}>
|
|
<option value=""></option>
|
|
{EventRequestsService.sourceList.map((item) => <option value={item.value}>{item.label}</option>)}
|
|
</select>
|
|
</div>
|
|
<div className="col-md-6 mb-4">
|
|
<div>Type*:</div>
|
|
<select value={type} onChange={e => setType(e.target.value)}>
|
|
<option value=""></option>
|
|
<option value="New">New</option>
|
|
<option value="Reschedule">Reschedule</option>
|
|
<option value="Cancel">Cancel</option>
|
|
<option value="Transportation Change">Transportation Change</option>
|
|
<option value="Emergency">Emergency</option>
|
|
<option value="Option 6">Option 6</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-md-6 mb-4">
|
|
<div>Patient*:</div>
|
|
|
|
<Select value={customerDisplay || ''} onChange={selectedCustomer => onCustomerChange(selectedCustomer)} options={[{value: '', label: ''}, ...customers.map(customer => ({
|
|
value: customer?.id || '',
|
|
label: `${customer?.name} - ${customer?.name_cn} - ${customer?.birth_date}` || ''
|
|
}))]}></Select>
|
|
</div>
|
|
<div className="col-md-6 mb-4">
|
|
<div>Doctor:</div>
|
|
{currentResource ? (<><span>{currentResource?.name}</span> <span><button className="btn btn-link btn-sm me-2 mb-2" onClick={()=> setShowResourceModal(true)}>Update</button></span></>) : (<button className="btn btn-link btn-sm me-2 mb-2" onClick={()=> setShowResourceModal(true)}>Please click here to add resources</button>)}
|
|
{/* <Select value={medicalResource || ''} onChange={selectedResource => onResourceChange(selectedResource)} options={[{value: '', label: ''}, ...resources.map(resource => ({
|
|
value: resource.id || '',
|
|
label: resource?.name || ''
|
|
}))]}></Select> */}
|
|
</div>
|
|
<div className="col-md-12 mb-4">
|
|
<div>Symptom 和特殊要求:</div> <textarea value={symptom || ''} onChange={e => setSymptom(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-6 mb-4">
|
|
<div>Transportation:</div>
|
|
<select value={transportation} onChange={e => setTransportation(e.target.value)}>
|
|
<option value=""></option>
|
|
<option value="by own">By Own</option>
|
|
<option value="televisit">Televisit</option>
|
|
<option value="pickup only">Pickup Only</option>
|
|
<option value="dropoff only">Dropoff Only</option>
|
|
<option value="Center Transportation">By Center Transportation</option>
|
|
<option value="client does not need to go">Client Does Not Need To Go</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-md-6 mb-4">
|
|
<div>NP:</div>
|
|
<select value={np} onChange={e => setNp(e.target.value)}>
|
|
<option value=""></option>
|
|
<option value="Yes">Yes</option>
|
|
<option value="No">No</option>
|
|
</select>
|
|
</div>
|
|
{/* <div className="col-md-6 mb-4">
|
|
<div>Upload*:</div>
|
|
<select value={upload} onChange={e => setUpload(e.target.value)}>
|
|
<option value=""></option>
|
|
<option value="Jiying Zhu">Jiying Zhu</option>
|
|
<option value="Daiyuan Luo">Daiyuan Luo</option>
|
|
<option value="Shu Zhang">Shu Zhang</option>
|
|
<option value="Jing Lu">Jing Lu</option>
|
|
<option value="Li Sun">Li Sun</option>
|
|
<option value="Yu Wang">Yu Wang</option>
|
|
<option value="Xu,Weiqin">Xu,Weiqin</option>
|
|
<option value="Ma,Junpei">Ma,Junpei</option>
|
|
<option value="Joyce Zhang">Joyce Zhang</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
</div>
|
|
{upload === 'Other' && <div className="col-md-6 mb-4">
|
|
Upload By if Other:
|
|
<input type="text" value={uploadOther || ''} onChange={e => setUploadOther(e.target.value)}/>
|
|
</div>} */}
|
|
</div>
|
|
<div className="list row mb-5">
|
|
<div className="col-md-6 col-sm-6 col-xs-12">
|
|
<button className="btn btn-primary btn-sm me-2 mb-2" onClick={() => saveEventRequest()}> Submit </button>
|
|
<button className="btn btn-default btn-sm" onClick={() => redirectTo()}> Cancel </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Modal show={showResourceModal} fullscreen={'xxl-down'} onHide={() => setShowResourceModal(false)}>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>Select the Resource</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<div className="mb-4">Type in Keyword to Filter: <input type="text" value={keyword} onChange={e => setKeyword(e.target.value)}/></div>
|
|
<div className="mb-4">Filter By Resource Type:
|
|
<select value={resourceType} onChange={e => setResourceType(e.target.value)}>
|
|
<option value=""></option>
|
|
<option value="doctor">Doctor</option>
|
|
<option value="pharmacy">Pharmacy</option>
|
|
<option value="hospital">Hospital</option>
|
|
<option value="surgical center">Surgical Center</option>
|
|
<option value="government agency">Government Agency</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<table className="personnel-info-table mb-4 medical">
|
|
<thead>
|
|
<tr className="sortable-header">
|
|
<th>Name</th>
|
|
<th>Specialty</th>
|
|
<th>Address</th>
|
|
<th></th>
|
|
</tr>
|
|
|
|
</thead>
|
|
<tbody>
|
|
{
|
|
resources?.filter(r=> r.status === 'active')?.filter((item => filterResourceListByKeyword(item)))?.filter(item => filterResourcesListBySpecialty(item)).map(resource => <tr key={resource.id}>
|
|
<td>{`${resource?.name || ''}${resource?.name ? '-': ''}${resource?.name_original || ''}${resource?.name_original ? '-': ''}${resource?.name_branch || ''}`}</td>
|
|
<td>{resource?.specialty}</td>
|
|
<td>{resource?.address}</td>
|
|
<td style={{'min-width': '220px'}}>{ resource?.id === currentResource?.id ? 'Selected' : (<Button variant="primary" className="me-2" size="sm" onClick={() => {setCurrentResource(resource); setShowResourceModal(false)}}>Select</Button>)}</td>
|
|
</tr>)
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<Button variant="primary" onClick={() => setShowResourceModal(false)}>
|
|
Complete And Close
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CreateEvent; |