Add Event module
This commit is contained in:
Yang Li
parent
176af8407b
commit
f7c351b161
@ -1,16 +1,16 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.38d76725.css",
|
||||
"main.js": "/static/js/main.6292bf56.js",
|
||||
"main.css": "/static/css/main.184a423c.css",
|
||||
"main.js": "/static/js/main.6094576b.js",
|
||||
"static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js",
|
||||
"static/media/landing.png": "/static/media/landing.d4c6072db7a67dff6a78.png",
|
||||
"index.html": "/index.html",
|
||||
"main.38d76725.css.map": "/static/css/main.38d76725.css.map",
|
||||
"main.6292bf56.js.map": "/static/js/main.6292bf56.js.map",
|
||||
"main.184a423c.css.map": "/static/css/main.184a423c.css.map",
|
||||
"main.6094576b.js.map": "/static/js/main.6094576b.js.map",
|
||||
"787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.38d76725.css",
|
||||
"static/js/main.6292bf56.js"
|
||||
"static/css/main.184a423c.css",
|
||||
"static/js/main.6094576b.js"
|
||||
]
|
||||
}
|
||||
@ -1 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.6292bf56.js"></script><link href="/static/css/main.38d76725.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.6094576b.js"></script><link href="/static/css/main.184a423c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
@ -1,16 +1,16 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.38d76725.css",
|
||||
"main.js": "/static/js/main.6292bf56.js",
|
||||
"main.css": "/static/css/main.184a423c.css",
|
||||
"main.js": "/static/js/main.6094576b.js",
|
||||
"static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js",
|
||||
"static/media/landing.png": "/static/media/landing.d4c6072db7a67dff6a78.png",
|
||||
"index.html": "/index.html",
|
||||
"main.38d76725.css.map": "/static/css/main.38d76725.css.map",
|
||||
"main.6292bf56.js.map": "/static/js/main.6292bf56.js.map",
|
||||
"main.184a423c.css.map": "/static/css/main.184a423c.css.map",
|
||||
"main.6094576b.js.map": "/static/js/main.6094576b.js.map",
|
||||
"787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.38d76725.css",
|
||||
"static/js/main.6292bf56.js"
|
||||
"static/css/main.184a423c.css",
|
||||
"static/js/main.6094576b.js"
|
||||
]
|
||||
}
|
||||
@ -1 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.6292bf56.js"></script><link href="/static/css/main.38d76725.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.6094576b.js"></script><link href="/static/css/main.184a423c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
@ -228,6 +228,7 @@ input {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
@ -394,6 +395,12 @@ table .group td {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.list-func-panel .dropdown-menu {
|
||||
padding: 20px;
|
||||
width: 250px;
|
||||
transform: translate(0px, 37px)!important;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
@ -401,10 +408,27 @@ table .group td {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section.flex-end {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.no-margin-v {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.margin-sm {
|
||||
margin-top: 20px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section li {
|
||||
list-style: decimal;
|
||||
margin-top: 4px;
|
||||
@ -431,11 +455,20 @@ table .group td {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section .react-datepicker-wrapper {
|
||||
width: 120px !important;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section input[type=text] {
|
||||
width: 350px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section.with-function .react-datepicker-wrapper input[type=text] {
|
||||
height: 35px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.app-main-content-fields-section input[type=text].shorter {
|
||||
width: 50px;
|
||||
height: 45px;
|
||||
|
||||
@ -4,7 +4,7 @@ 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";
|
||||
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Button, Modal } from "react-bootstrap";
|
||||
|
||||
const CreateEvent = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -110,117 +110,161 @@ const CreateEvent = () => {
|
||||
|
||||
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 className="list row mb-4">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Medical</Breadcrumb.Item>
|
||||
<Breadcrumb.Item active>
|
||||
Appointment Request Information
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item active>
|
||||
Create New Appointment Request
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="col-md-12 text-primary">
|
||||
<h4>Create New Appointment Request <button className="btn btn-link btn-sm" onClick={() => {goToRequestList()}}>Back</button></h4>
|
||||
</div>
|
||||
</div>
|
||||
<Modal show={showResourceModal} fullscreen={'xxl-down'} onHide={() => setShowResourceModal(false)}>
|
||||
</div>
|
||||
<div className="app-main-content-list-container">
|
||||
<div className="app-main-content-list-func-container">
|
||||
<Tabs defaultActiveKey="requestInfo" id="request-tab">
|
||||
<Tab eventKey="requestInfo" title="Appointment Request Information">
|
||||
<h6 className="text-primary">Patient And Doctor Info</h6>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Patient
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<Select styles={{
|
||||
control: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: '350px',
|
||||
height: '45px',
|
||||
'padding-top': 0,
|
||||
'padding-bottom': 0,
|
||||
'margin-top': 0,
|
||||
'margin-bottom': 0
|
||||
}),
|
||||
indicatorSeparator: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: 0
|
||||
}),
|
||||
indicatorsContainer: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px'
|
||||
}),
|
||||
placeholder: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px',
|
||||
'font-size': '13px'
|
||||
}),
|
||||
singleValue: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px',
|
||||
'font-size': '13px'
|
||||
})
|
||||
}} 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="me-4">
|
||||
<div className="field-label">Doctor
|
||||
<span className="required">*</span>
|
||||
</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>)}
|
||||
</div>
|
||||
</div>
|
||||
<h6 className="text-primary">Appointment Request Information</h6>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Source
|
||||
<span className="required">*</span>
|
||||
</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="me-4">
|
||||
<div className="field-label">Type
|
||||
<span className="required">*</span>
|
||||
</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>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Symptom 和特殊要求
|
||||
</div>
|
||||
<textarea value={symptom || ''} onChange={e => setSymptom(e.target.value)}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">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="me-4">
|
||||
<div className="field-label">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>
|
||||
<div className="list row mb-5">
|
||||
<div className="col-md-12 col-sm-12 col-xs-12">
|
||||
<button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
|
||||
<button className="btn btn-primary btn-sm float-right" onClick={() => saveEventRequest()}> Submit </button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</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 className="app-main-content-fields-section">
|
||||
|
||||
<div className="mb-4 me-4">
|
||||
<div className="field-label">Type in Keyword to Filter</div>
|
||||
<input type="text" value={keyword} onChange={e => setKeyword(e.target.value)}/>
|
||||
</div>
|
||||
<div className="mb-4 me-4">
|
||||
<div className="field-label">Filter By Resource Type</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<table className="personnel-info-table mb-4 medical">
|
||||
@ -239,7 +283,7 @@ const CreateEvent = () => {
|
||||
<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>
|
||||
<td style={{'min-width': '220px'}}>{ resource?.id === currentResource?.id ? 'Selected' : (<Button variant="link" className="me-2" size="sm" onClick={() => {setCurrentResource(resource); setShowResourceModal(false)}}>Select</Button>)}</td>
|
||||
</tr>)
|
||||
}
|
||||
</tbody>
|
||||
@ -250,7 +294,8 @@ const CreateEvent = () => {
|
||||
Complete And Close
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
</Modal>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,69 +1,65 @@
|
||||
import React, {useState, useEffect} from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { AuthService, EventsService, CustomerService, ResourceService, EventRequestsService } from "../../services";
|
||||
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
|
||||
import { Columns, Download, Filter, PencilSquare, PersonSquare, Plus } from "react-bootstrap-icons";
|
||||
|
||||
const EventRequestList = () => {
|
||||
const navigate = useNavigate();
|
||||
const [eventRequests, setEventRequests] = useState([]);
|
||||
const [customers, setCustomers] = useState([]);
|
||||
const [resources, setResources] = useState([]);
|
||||
// const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
const [sorting, setSorting] = useState({key: '', order: ''});
|
||||
const [showDone, setShowDone] = useState(false);
|
||||
const [comments, setComments] = useState({});
|
||||
// const [selectedItems, setSelectedItems] = useState([]);
|
||||
// const [showTransportationModal, setShowTransportationModal] = useState(false);
|
||||
// const [driver, setDriver] = useState(null);
|
||||
// const [driverOptions, setDriverOptions] = useState([]);
|
||||
// const [transportStartTime, setTransportStartTime] = useState(null);
|
||||
// const [transportOptionsList, setTransportationOptionsList] = useState([]);
|
||||
// const [transportSelected, setTransportSelected] = useState(null);
|
||||
// const [showDeletedItems, setShowDeletedItems] = useState(false);
|
||||
const columns = [
|
||||
{
|
||||
key: 'customer_display',
|
||||
label:'Patient'
|
||||
const [keyword, setKeyword] = useState('');
|
||||
const [selectedItems, setSelectedItems] = useState([]);
|
||||
|
||||
},
|
||||
{
|
||||
key: 'resource_display',
|
||||
label: 'Doctor'
|
||||
const columns = [
|
||||
{
|
||||
key: 'customer_display',
|
||||
label:'Patient'
|
||||
|
||||
},
|
||||
{
|
||||
key: 'source',
|
||||
label: 'Source'
|
||||
},
|
||||
{
|
||||
key: 'resource_display',
|
||||
label: 'Doctor'
|
||||
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: 'Type'
|
||||
},
|
||||
{
|
||||
key: 'source',
|
||||
label: 'Source'
|
||||
|
||||
},
|
||||
{
|
||||
key: 'symptom',
|
||||
label: 'Symptom Or Special Need',
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: 'Type'
|
||||
|
||||
},
|
||||
{
|
||||
key: 'np',
|
||||
label: 'NP'
|
||||
},
|
||||
{
|
||||
key: 'symptom',
|
||||
label: 'Symptom Or Special Need',
|
||||
|
||||
},
|
||||
{
|
||||
key: 'upload',
|
||||
label: 'Upload By'
|
||||
},
|
||||
{
|
||||
key: 'np',
|
||||
label: 'NP'
|
||||
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: 'Status'
|
||||
},
|
||||
{
|
||||
key: 'create_date',
|
||||
label: 'Create Date'
|
||||
}
|
||||
];
|
||||
},
|
||||
{
|
||||
key: 'upload',
|
||||
label: 'Upload By'
|
||||
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: 'Status'
|
||||
},
|
||||
{
|
||||
key: 'create_date',
|
||||
label: 'Create Date'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
@ -83,14 +79,12 @@ const columns = [
|
||||
|
||||
useEffect(() => {
|
||||
if (customers?.length > 0 && resources?.length>0) {
|
||||
EventRequestsService.getAllEventRequests({status: 'active'}).then((data) => {
|
||||
EventRequestsService.getAllEventRequests().then((data) => {
|
||||
setEventRequests(data.data);
|
||||
})
|
||||
}
|
||||
}, [resources, customers]);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const newEventRequests = [...eventRequests];
|
||||
const sortedEventRequests = sorting.key === '' ? newEventRequests : newEventRequests.sort((a, b) => {
|
||||
@ -101,7 +95,13 @@ const columns = [
|
||||
)
|
||||
}, [sorting]);
|
||||
|
||||
|
||||
const filterRequestsFun = (item, statusParam, keywordParam) => {
|
||||
|
||||
return (item?.customer_display?.toLowerCase()?.includes(keywordParam?.toLowerCase()) || item?.source?.toLowerCase()?.includes(keywordParam?.toLowerCase()) ||
|
||||
item?.resource_display?.toLowerCase()?.includes(keywordParam?.toLowerCase())) && item?.status === statusParam
|
||||
|
||||
}
|
||||
|
||||
const redirectToAdmin = () => {
|
||||
navigate(`/medical`)
|
||||
}
|
||||
@ -111,6 +111,37 @@ const columns = [
|
||||
navigate(`/medical/event-request`)
|
||||
}
|
||||
|
||||
const toggleSelectedAllItems = () => {
|
||||
if (selectedItems.length !== eventRequests?.filter((item) => filterRequestsFun(item, showDone ? 'done': 'active', keyword))?.length || selectedItems.length === 0) {
|
||||
const newSelectedItems = [...eventRequests?.filter((item) => filterRequestsFun(item, showDone ? 'done': 'active', keyword))].map((customer) => customer.id);
|
||||
setSelectedItems(newSelectedItems);
|
||||
} else {
|
||||
setSelectedItems([]);
|
||||
}
|
||||
}
|
||||
|
||||
const toggleItem = (id) => {
|
||||
if (selectedItems.includes(id)) {
|
||||
const newSelectedItems = [...selectedItems].filter((item) => item !== id);
|
||||
setSelectedItems(newSelectedItems);
|
||||
} else {
|
||||
const newSelectedItems = [...selectedItems, id];
|
||||
setSelectedItems(newSelectedItems);
|
||||
}
|
||||
}
|
||||
|
||||
const showDoneItems = (value) => {
|
||||
setShowDone(value === 'completedRequests');
|
||||
// Recover all filters
|
||||
setKeyword('');
|
||||
setSorting({key: '', order: ''});
|
||||
setSelectedItems([]);
|
||||
}
|
||||
|
||||
const checkSelectAll = () => {
|
||||
return selectedItems.length === eventRequests?.filter((item) => filterRequestsFun(item, showDone ? 'done': 'active', keyword))?.length && selectedItems.length > 0;
|
||||
}
|
||||
|
||||
const deleteItem = (id) => {
|
||||
EventRequestsService.updateEventRequest(id, {status: 'inactive'}).then(() => {
|
||||
EventRequestsService.getAllEventRequests().then((data) => {
|
||||
@ -119,18 +150,6 @@ const columns = [
|
||||
})
|
||||
}
|
||||
|
||||
const goToNext = (id) => {
|
||||
navigate(`/medical/events/edit/${id}`)
|
||||
}
|
||||
|
||||
const filterRequests = (request) => {
|
||||
if (showDone) {
|
||||
return request.status === 'done' || request.status === 'active'
|
||||
} else {
|
||||
return request.status === 'active'
|
||||
}
|
||||
}
|
||||
|
||||
const confirmEventRequest = (eventRequest) => {
|
||||
EventRequestsService.updateEventRequest(eventRequest.id, {status: 'done', edit_history:[{ employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }]}).then(() => {
|
||||
EventRequestsService.getAllEventRequests().then((data) => {
|
||||
@ -140,7 +159,6 @@ const columns = [
|
||||
}
|
||||
|
||||
const createNewEvent = (eventRequest) => {
|
||||
console.log('event', eventRequest);
|
||||
const customer = customers.find(c => c.id === eventRequest?.customer_id);
|
||||
const resource = resources.find(r => r.id === eventRequest?.resource);
|
||||
const newEventData = {
|
||||
@ -169,12 +187,9 @@ const columns = [
|
||||
|
||||
const newEvent = {
|
||||
data: newEventData,
|
||||
// title: title,
|
||||
// descrption: description,
|
||||
notes: eventRequest?.symptom,
|
||||
start_time: new Date(),
|
||||
type: 'medical',
|
||||
// stop_time: new Date(startTime),
|
||||
source_type: resource?.type,
|
||||
source_uuid: resource?.id,
|
||||
source_name: resource?.name,
|
||||
@ -190,9 +205,6 @@ const columns = [
|
||||
|
||||
console.log('new Event', newEvent);
|
||||
navigate(`/medical/events/create-from-request?event=${encodeURIComponent(JSON.stringify(newEvent))}`)
|
||||
// EventsService.createNewEvent(newEvent).then(data => {
|
||||
// EventRequestsService.updateEventRequest(eventRequest.id, {status: 'done'}).then(() => goToNext(data.data?.id))
|
||||
// });
|
||||
}
|
||||
|
||||
const setCommentsValue = (e) => {
|
||||
@ -201,7 +213,6 @@ const columns = [
|
||||
}
|
||||
|
||||
const saveComments = (id) => {
|
||||
console.log('here it is', comments);
|
||||
const currentComment = comments[id];
|
||||
if (currentComment) {
|
||||
const existingComments = eventRequests?.find((request) => request.id === id)?.notes || [];
|
||||
@ -239,63 +250,92 @@ const columns = [
|
||||
|
||||
const getStatusLabel = (status) => status === 'active' ? 'In Progress' : (status==='done' ? 'Done' : 'Deleted')
|
||||
|
||||
const table = (statusParam, keywordParam) => <div className="list row mb-4">
|
||||
<div className="col-md-12">
|
||||
<table className="personnel-info-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="th-checkbox"><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th>
|
||||
<th className="th-index">No.</th>
|
||||
{
|
||||
columns.map((column, index) => <th className="sortable-header" key={index}>
|
||||
{column.label} <span className="float-right" onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span>
|
||||
</th>)
|
||||
}
|
||||
<th>Completed By</th>
|
||||
<th>Comments</th>
|
||||
<th>Comment on the record</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
eventRequests.filter((item) => filterRequestsFun(item, statusParam, keywordParam) )?.map((eventRequest, index) => <tr key={eventRequest?.id}>
|
||||
<td className="td-checkbox"><input type="checkbox" checked={selectedItems.includes(eventRequest?.id)} onClick={()=>toggleItem(eventRequest?.id)}/></td>
|
||||
<td className="td-index">{index + 1}</td>
|
||||
<td>{eventRequest?.customer_display}</td>
|
||||
<td>{eventRequest?.resource_display}</td>
|
||||
<td>{EventRequestsService.sourceList.find((item) => item?.value === eventRequest?.source)?.label || eventRequest?.source}</td>
|
||||
<td>{eventRequest?.type}</td>
|
||||
<td>{eventRequest?.symptom}</td>
|
||||
<td>{eventRequest?.np}</td>
|
||||
<td>{eventRequest?.upload}</td>
|
||||
<td>{getStatusLabel(eventRequest?.status)}</td>
|
||||
<td>{new Date(eventRequest?.create_date).toLocaleDateString()}</td>
|
||||
<td>{ eventRequest.status === 'done' && eventRequest?.edit_history && eventRequest?.edit_history[eventRequest?.edit_history?.length - 1]?.employee || ''}</td>
|
||||
<td>{eventRequest?.notes?.map((note) => {
|
||||
return <p>{`${note?.author}: ${note?.content}`}</p>
|
||||
})}</td>
|
||||
<td align="center"><textarea id={eventRequest?.id} name={eventRequest?.id} onChange={setCommentsValue} className="comments-text"/> <button className="btn btn-primary btn-sm me-2 mt-2" onClick={() => saveComments(eventRequest?.id)}>Submit</button></td>
|
||||
<td className={eventRequest.status === 'active' ? 'table-button-container': ''}>
|
||||
{eventRequest.status !== 'done' && <button className="btn btn-primary btn-sm me-2" onClick={() => createNewEvent(eventRequest)}> New Appointment </button>}
|
||||
{eventRequest.status !== 'done' && <button className="btn btn-secondary btn-sm me-2" onClick={() => confirmEventRequest(eventRequest)}> Completed</button>}
|
||||
{/* <button className="btn btn-danger btn-sm" onClick={() => deleteItem(eventRequest?.id)}> Delete </button> */}
|
||||
</td>
|
||||
</tr>)
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="list row mb-4">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Medical</Breadcrumb.Item>
|
||||
<Breadcrumb.Item active>
|
||||
Appointment Requests Information
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="col-md-12 text-primary">
|
||||
<h5>Medical Appointment Requests List <button className="btn btn-primary btn-sm" onClick={() => {goToCreateNew()}}>Create New Appointment Request</button> <button className="btn btn-link btn-sm" onClick={() => {redirectToAdmin()}}>Back</button></h5>
|
||||
<h4>
|
||||
All Medical Appointment Requests
|
||||
{/* <button className="btn btn-primary btn-sm" onClick={() => {goToCreateNew()}}>Create New Customer</button>
|
||||
<button className="btn btn-link btn-sm" onClick={() => {redirectToAdmin()}}>Back</button> */}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list row mb-4">
|
||||
<div className="col-md-12 col-sm-12 mb-4">
|
||||
Show Completed Requests: <input type="checkbox" value={showDone} checked={showDone === true} onClick={() => setShowDone(!showDone)} />
|
||||
|
||||
<div className="app-main-content-list-container">
|
||||
<div className="app-main-content-list-func-container">
|
||||
<Tabs defaultActiveKey="activeRequests" id="requests-tab" onSelect={(k) => showDoneItems(k)}>
|
||||
<Tab eventKey="activeRequests" title="Active Requests">
|
||||
{table('active', keyword)}
|
||||
</Tab>
|
||||
<Tab eventKey="completedRequest" title="Completed Requests">
|
||||
{table('done', keyword)}
|
||||
</Tab>
|
||||
</Tabs>
|
||||
<div className="list-func-panel">
|
||||
<input className="me-2 with-search-icon" type="text" placeholder="Search" value={keyword} onChange={(e) => setKeyword(e.currentTarget.value)} />
|
||||
<button className="btn btn-primary me-2"><Filter size={16} className="me-2"></Filter>Filter</button>
|
||||
<button className="btn btn-primary me-2"><Columns size={16} className="me-2"></Columns>Manage Table</button>
|
||||
<button className="btn btn-primary me-2" onClick={() => goToCreateNew()}><Plus size={16}></Plus>Add New Appointment Request</button>
|
||||
<button className="btn btn-primary"><Download size={16} className="me-2"></Download>Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12">
|
||||
<table className="personnel-info-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{
|
||||
columns.map((column, index) => <th className="sortable-header" key={index}>
|
||||
{column.label} <span onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span>
|
||||
</th>)
|
||||
}
|
||||
<th>Completed By</th>
|
||||
<th>Comments</th>
|
||||
<th>Comment on the record</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
eventRequests && (eventRequests.filter((request) => filterRequests(request) ).map(eventRequest => <tr key={eventRequest.id}>
|
||||
<td>{eventRequest?.customer_display}</td>
|
||||
<td>{eventRequest?.resource_display}</td>
|
||||
<td>{EventRequestsService.sourceList.find((item) => item?.value === eventRequest?.source)?.label || eventRequest?.source}</td>
|
||||
<td>{eventRequest?.type}</td>
|
||||
<td>{eventRequest?.symptom}</td>
|
||||
<td>{eventRequest?.np}</td>
|
||||
<td>{eventRequest?.upload}</td>
|
||||
<td>{getStatusLabel(eventRequest?.status)}</td>
|
||||
<td>{new Date(eventRequest?.create_date).toLocaleDateString()}</td>
|
||||
<td>{ eventRequest.status === 'done' && eventRequest?.edit_history && eventRequest?.edit_history[eventRequest?.edit_history?.length - 1]?.employee || ''}</td>
|
||||
<td>{eventRequest?.notes?.map((note) => {
|
||||
return <p>{`${note?.author}: ${note?.content}`}</p>
|
||||
})}</td>
|
||||
<td align="center"><textarea id={eventRequest?.id} name={eventRequest?.id} onChange={setCommentsValue} className="comments-text"/> <button className="btn btn-primary btn-sm me-2" onClick={() => saveComments(eventRequest?.id)}>Submit</button></td>
|
||||
<td className={eventRequest.status === 'active' ? 'table-button-container': ''}>
|
||||
{eventRequest.status !== 'done' && <button className="btn btn-primary btn-sm me-2" onClick={() => createNewEvent(eventRequest)}> New Appointment </button>}
|
||||
{eventRequest.status !== 'done' && <button className="btn btn-secondary btn-sm me-2" onClick={() => confirmEventRequest(eventRequest)}> Completed</button>}
|
||||
{/* <button className="btn btn-danger btn-sm" onClick={() => deleteItem(eventRequest?.id)}> Delete </button> */}
|
||||
</td>
|
||||
</tr>))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -4,9 +4,8 @@ import { useNavigate, useParams } from "react-router-dom";
|
||||
// import { customerSlice } from "./../../store";
|
||||
import { AuthService, CustomerService, EventsService, ResourceService } from "../../services";
|
||||
import Select from 'react-select';
|
||||
import { Button } from "react-bootstrap";
|
||||
import DateTimePicker from "react-datetime-picker";
|
||||
import DatePicker from "react-datepicker";
|
||||
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
|
||||
|
||||
const CreateEvent = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -107,8 +106,6 @@ const CreateEvent = () => {
|
||||
edit_date: new Date(),
|
||||
edit_history:[{ employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }]
|
||||
}
|
||||
|
||||
console.log('new Event', newEvent);
|
||||
navigate(`/medical/events/create-from-request?event=${encodeURIComponent(JSON.stringify(newEvent))}`)
|
||||
// EventsService.createNewEvent(newEvent).then(data => goToNext(data.data?.id));
|
||||
};
|
||||
@ -138,177 +135,115 @@ const CreateEvent = () => {
|
||||
|
||||
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 Medical Event <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>Resource:</div>
|
||||
<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-6 mb-4">
|
||||
<div>Client:</div>
|
||||
<Select value={customerName || ''} onChange={selectedCustomer => onCustomerChange(selectedCustomer)} options={[{value: '', label: ''}, ...customers.map(customer => ({
|
||||
value: customer?.id || '',
|
||||
label: customer?.name || ''
|
||||
}))]}></Select>
|
||||
</div>
|
||||
{/* <div className="col-md-6 mb-4">
|
||||
<div>Title:</div> <input type="text" value={title || ''} onChange={e => setTitle(e.target.value)}/>
|
||||
</div> */}
|
||||
<div className="col-md-6 mb-4">
|
||||
<div>Start Time:</div> <DatePicker
|
||||
selected={startTime}
|
||||
onChange={setStartTime}
|
||||
showTimeInput
|
||||
timeInputLabel="Time:"
|
||||
dateFormat="MM/dd/yyyy, HH:mm"
|
||||
></DatePicker>
|
||||
{/* <div>Start Time</div> <DateTimePicker format={'MM/dd/y H:m'} disableClock={true} value={startTime} onChange={setStartTime} /> */}
|
||||
</div>
|
||||
{/* <div className="col-md-12 mb-4">
|
||||
<div>Description:</div> <textarea value={description || ''} onChange={e => setDescription(e.target.value)}/>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>New Patient:</div>
|
||||
<select value={newPatient} onChange={e => setNewPatient(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Confirmed:</div>
|
||||
<select value={confirmed} onChange={e => setConfirmed(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div> */}
|
||||
{/* <div className="col-md-4 mb-4">
|
||||
<div>Fasting:</div>
|
||||
<select value={fasting} onChange={e => setFasting(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="empty_stomach">Empty Stomach</option>
|
||||
<option value="clear_liquid">Clear Liquid</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Interpreter Level:</div>
|
||||
<select value={interpreter} onChange={e => setInterpreter(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="1(译)">1(译)</option>
|
||||
<option value="2(译)">2(译)</option>
|
||||
<option value="家(译)">家(译)</option>
|
||||
<option value="越南语翻译">越南语翻译</option>
|
||||
<option value="Office">Office</option>
|
||||
<option value="Office(Phone)">Office(Phone)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Doctor Order:</div>
|
||||
<select value={docOrder} onChange={e => setDocOrder(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div> */}
|
||||
{/* <div className="col-md-4 mb-4">
|
||||
<div>Disability: </div>
|
||||
<select value={disability} onChange={e => setDisability(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Need Id: </div>
|
||||
<select value={needId} onChange={e => setNeedId(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Need Medication List</div>
|
||||
<select value={needMedicationList} onChange={e => setNeedMedicationList(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div> */}
|
||||
{/* <div className="col-md-4 mb-4">
|
||||
<div>Disability Support:</div>
|
||||
<select value={disabilitySupport} onChange={e => setDisabilitySupport(e.target.value)}>
|
||||
<option value=""></option>
|
||||
<option value="center worker">center worker</option>
|
||||
<option value="family member">family member</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Notes:</div><textarea value={notes || ''} onChange={e => setNotes(e.target.value)}/>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Reason:</div>
|
||||
<textarea value={reason || ''} onChange={e => setReason(e.target.value)}/>
|
||||
</div>
|
||||
<div className="col-md-4 mb-4">
|
||||
<div>Other Requirements:</div>
|
||||
<textarea value={otherRequirement || ''} onChange={e => setOtherRequirement(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={() => saveEvent()}> Next </button>
|
||||
<button className="btn btn-default btn-sm" onClick={() => redirectTo()}> Cancel </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4 col-xs-12">
|
||||
{/* {currentResource && <fieldset>
|
||||
<legend>Resource Info</legend>
|
||||
<p>{currentResource?.name || ''}</p>
|
||||
<p>{currentResource?.specialty || ''}</p>
|
||||
<p>{currentResource?.phone || ''}</p>
|
||||
<p>{currentResource?.contact || ''}</p>
|
||||
<p>{currentResource?.address || ''}</p>
|
||||
</fieldset> }
|
||||
<p></p> */}
|
||||
|
||||
{currentCustomer && <fieldset>
|
||||
<legend>Client Info</legend>
|
||||
<p>{currentCustomer?.name || ''}</p>
|
||||
<p>{currentCustomer?.name_cn || ''}</p>
|
||||
<p>{currentCustomer?.pharmacy || ''}</p>
|
||||
<p>{currentCustomer?.care_provider || ''}</p>
|
||||
<p>{currentCustomer?.birth_date || ''}</p>
|
||||
</fieldset> }
|
||||
|
||||
<p></p>
|
||||
|
||||
{/* {transportationInfo?.isFutureEvent && <fieldset>
|
||||
<legend>Transportation Info</legend>
|
||||
<p>translate1: {transportationInfo?.maxTranslate1 || 0}</p>
|
||||
<p>translate2: {transportationInfo?.maxTranslate1 || 0}</p>
|
||||
<p>max resource: {transportationInfo?.maxResource || 0}</p>
|
||||
<p></p>
|
||||
|
||||
<h4 style={{'color': 'red'}}>Remain:</h4>
|
||||
<p>(when edit, the numbers below are for reference only)</p>
|
||||
<p>translate1: { transportationInfo?.maxTranslate1 - transportationInfo?.totalTranslate1 - (currentEvent?.data?.interpreter === '1(译)' ? 0 : (interpreter==='1(译)' ? 1 : 0)) }</p>
|
||||
<p>translate2: { transportationInfo?.maxTranslate2 - transportationInfo?.totalTranslate2 - (currentEvent?.data?.interpreter === '2(译)' ? 0 : (interpreter==='2(译)' ? 1 : 0)) }</p>
|
||||
<p>resources: {transportationInfo?.maxResource - transportationInfo?.totalResource || 0 }</p>
|
||||
</fieldset> } */}
|
||||
<div className="list row mb-4">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Medical</Breadcrumb.Item>
|
||||
<Breadcrumb.Item active>
|
||||
Medical Appointment Information
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item active>
|
||||
Create New Medical Appointment
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="col-md-12 text-primary">
|
||||
<h4>Create New Medical Appointment <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="app-main-content-list-container">
|
||||
<div className="app-main-content-list-func-container">
|
||||
<Tabs defaultActiveKey="eventClientInfo" id="event-tab">
|
||||
<Tab eventKey="eventClientInfo" title="Appointment Client And Time Information">
|
||||
<h6 className="text-primary">Client And Start Time</h6>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Client
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<Select styles={{
|
||||
control: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: '350px',
|
||||
height: '45px',
|
||||
'padding-top': 0,
|
||||
'padding-bottom': 0,
|
||||
'margin-top': 0,
|
||||
'margin-bottom': 0
|
||||
}),
|
||||
indicatorSeparator: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: 0
|
||||
}),
|
||||
indicatorsContainer: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px'
|
||||
}),
|
||||
placeholder: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px',
|
||||
'font-size': '13px'
|
||||
}),
|
||||
singleValue: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-10px',
|
||||
'font-size': '13px'
|
||||
})
|
||||
}} value={customerName || ''} onChange={selectedCustomer => onCustomerChange(selectedCustomer)} options={[{value: '', label: ''}, ...customers.map(customer => ({
|
||||
value: customer?.id || '',
|
||||
label: customer?.name || ''
|
||||
}))]}></Select>
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">Start Time
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<DatePicker
|
||||
selected={startTime}
|
||||
onChange={setStartTime}
|
||||
showTimeInput
|
||||
timeInputLabel="Time:"
|
||||
dateFormat="MM/dd/yyyy, HH:mm"
|
||||
></DatePicker>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
currentCustomer && <>
|
||||
<h6 className="text-primary">Client Information</h6>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="field-body">
|
||||
<div className="field-label">Client Name</div>
|
||||
<div className="field-value">{currentCustomer?.name || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Preferred Name</div>
|
||||
<div className="field-value">{currentCustomer?.name_cn || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Pharmacy</div>
|
||||
<div className="field-value">{currentCustomer?.pharmacy || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Care Provider</div>
|
||||
<div className="field-value">{currentCustomer?.care_provider || ''}</div>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field-label">Birthday</div>
|
||||
<div className="field-value">{currentCustomer?.birth_date || ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
<div className="list row mb-5">
|
||||
<div className="col-md-12 col-sm-12 col-xs-12">
|
||||
<button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
|
||||
<button className="btn btn-primary btn-sm float-right" onClick={() => saveEvent()}> Next </button>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,7 +2,8 @@ import React, {useState, useEffect} from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { AuthService, EventsService, CustomerService, DriverService, ResourceService } from "../../services";
|
||||
import DatePicker from "react-datepicker";
|
||||
import { Button, Modal } from "react-bootstrap";
|
||||
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Button, Modal } from "react-bootstrap";
|
||||
import { Columns, Download, Filter, PencilSquare, PersonSquare, Plus } from "react-bootstrap-icons";
|
||||
import TimePicker from 'react-time-picker';
|
||||
|
||||
const EventsList = () => {
|
||||
@ -190,6 +191,14 @@ const EventsList = () => {
|
||||
setSelectedDate(new Date(selectedDate.setDate(selectedDate.getDate() - 1)));
|
||||
}
|
||||
|
||||
const showDeleted = (value) => {
|
||||
setShowDeletedItems(value === 'archivedEvents');
|
||||
// Recover all filters
|
||||
// setKeyword('');
|
||||
setSorting({key: '', order: ''});
|
||||
setSelectedItems([]);
|
||||
}
|
||||
|
||||
const getSortingImg = (key) => {
|
||||
return sorting.key === key ? (sorting.order === 'asc' ? 'up_arrow' : 'down_arrow') : 'default';
|
||||
}
|
||||
@ -314,7 +323,6 @@ const EventsList = () => {
|
||||
transportationName: transportOptionsList.find((item) => item.id === transportSelected)?.title,
|
||||
eventIds: selectedItems
|
||||
}).then(() => {
|
||||
console.log(123123);
|
||||
setSelectedItems([]);
|
||||
EventsService.getAllEvents({ date: EventsService.formatDate(selectedDate) }).then((data) => {
|
||||
const results = [...data.data];
|
||||
@ -351,65 +359,98 @@ const EventsList = () => {
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const table = (statusParam) => <div className="list row mb-4">
|
||||
<div className="col-md-12">
|
||||
<table className="personnel-info-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="th-checkbox"><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th>
|
||||
<th className="th-index">No.</th>
|
||||
{
|
||||
columns.map((column, index) => <th className="sortable-header" key={index}>
|
||||
{column.label} <span className="float-right" onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span>
|
||||
</th>)
|
||||
}
|
||||
<th>Customer Date of Birth</th>
|
||||
<th>Transportation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
events && events.filter(event => event.status === statusParam).map((medicalEvent, index) => <tr key={medicalEvent.id}>
|
||||
<td className="td-checkbox"><input type="checkbox" checked={selectedItems.includes(medicalEvent.id)} onClick={()=>toggleItem(medicalEvent?.id)}/></td>
|
||||
<td className="td-index">{index + 1}</td>
|
||||
<td>{medicalEvent?.customer}</td>
|
||||
<td>{medicalEvent?.chinese_name}</td>
|
||||
<td>{medicalEvent?.member_type}</td>
|
||||
<td>{medicalEvent?.eyes_on}</td>
|
||||
<td>{medicalEvent?.doctor}</td>
|
||||
<td>{medicalEvent?.phone}</td>
|
||||
<td>{medicalEvent?.address}</td>
|
||||
<td>{medicalEvent?.translation}</td>
|
||||
<td>{medicalEvent?.newPatient}</td>
|
||||
<td>{medicalEvent?.needId}</td>
|
||||
<td>{medicalEvent?.disability}</td>
|
||||
<td>{medicalEvent?.startTime}</td>
|
||||
<td>{medicalEvent?.fasting}</td>
|
||||
<td>{medicalEvent?.transportation}</td>
|
||||
<td>{medicalEvent?.dob}</td>
|
||||
<td>{medicalEvent?.transMethod}</td>
|
||||
</tr>)
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="list row mb-4">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Medical</Breadcrumb.Item>
|
||||
<Breadcrumb.Item active>
|
||||
Appointment Information
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="col-md-12 text-primary">
|
||||
<h5>Medical Event One-Day List (With Driver Assignment) <button className="btn btn-primary btn-sm" onClick={() => {goToCreateNew()}}>Create New Medical Event</button> <button className="btn btn-link btn-sm" onClick={() => {redirectToAdmin()}}>Back</button></h5>
|
||||
<h4>
|
||||
Medical Event One-Day List (With Driver Assignment)
|
||||
{/* <button className="btn btn-primary btn-sm" onClick={() => {goToCreateNew()}}>Create New Customer</button>
|
||||
<button className="btn btn-link btn-sm" onClick={() => {redirectToAdmin()}}>Back</button> */}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list row mb-4">
|
||||
<div className="col-md-6 col-sm-12 mb-4">
|
||||
Pick A Date: <DatePicker selected={selectedDate} onChange={(v) => setSelectedDate(v)} />
|
||||
</div>
|
||||
<div className="col-md-12 col-sm-12 mb-4">
|
||||
<Button className="me-4" variant="outline-primary" onClick={() => goToPreviousDay()} > {'<'} </Button>
|
||||
<Button className="me-4" variant="outline-primary" onClick={() => goToNextDay()}> {'>'} </Button>
|
||||
<Button className="me-4" variant="primary" disabled={selectedItems.length === 0} onClick={() => setShowTransportationModal(true)}>Show Assign Transportation Panel</Button>
|
||||
Show Deleted Events: <input type="checkbox" value={showDeletedItems} checked={showDeletedItems === true} onClick={() => setShowDeletedItems(!showDeletedItems)} />
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<table className="personnel-info-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th>
|
||||
{
|
||||
columns.map((column, index) => <th className="sortable-header" key={index}>
|
||||
{column.label} <span onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span>
|
||||
</th>)
|
||||
}
|
||||
<th>Customer Date of Birth</th>
|
||||
<th>Transportation</th>
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
events && (showDeletedItems ? events : events.filter(event => event.status === 'active')).map(medicalEvent => <tr key={medicalEvent.id}>
|
||||
<td><input type="checkbox" checked={selectedItems.includes(medicalEvent.id)} onClick={()=>toggleItem(medicalEvent?.id)}/></td>
|
||||
<td>{medicalEvent?.customer}</td>
|
||||
<td>{medicalEvent?.chinese_name}</td>
|
||||
<td>{medicalEvent?.member_type}</td>
|
||||
<td>{medicalEvent?.eyes_on}</td>
|
||||
<td>{medicalEvent?.doctor}</td>
|
||||
<td>{medicalEvent?.phone}</td>
|
||||
<td>{medicalEvent?.address}</td>
|
||||
<td>{medicalEvent?.translation}</td>
|
||||
<td>{medicalEvent?.newPatient}</td>
|
||||
<td>{medicalEvent?.needId}</td>
|
||||
<td>{medicalEvent?.disability}</td>
|
||||
<td>{medicalEvent?.startTime}</td>
|
||||
<td>{medicalEvent?.fasting}</td>
|
||||
<td>{medicalEvent?.transportation}</td>
|
||||
<td>{medicalEvent?.dob}</td>
|
||||
<td>{medicalEvent?.transMethod}</td>
|
||||
</tr>)
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div className="app-main-content-list-container">
|
||||
<div className="app-main-content-list-func-container">
|
||||
<Tabs defaultActiveKey="activeEvents" id="requests-tab" onSelect={(k) => showDeleted(k)}>
|
||||
<Tab eventKey="activeEvents" title="Active Appointments">
|
||||
<div className="app-main-content-fields-section with-function">
|
||||
<Button className="me-2" variant="outline-primary" size="sm" onClick={() => goToPreviousDay()} > {'<'} </Button>
|
||||
<DatePicker className="me-2" selected={selectedDate} onChange={(v) => setSelectedDate(v)} />
|
||||
<Button className="me-2 ms-2" variant="outline-primary" size="sm" onClick={() => goToNextDay()}> {'>'} </Button>
|
||||
<Button className="me-2" variant="primary" size="sm" disabled={selectedItems.length === 0} onClick={() => setShowTransportationModal(true)}> + Show Assign Transportation Panel</Button>
|
||||
</div>
|
||||
{table('active')}
|
||||
</Tab>
|
||||
<Tab eventKey="archivedEvents" title="Archived Appointments">
|
||||
<div className="app-main-content-fields-section with-function">
|
||||
<Button className="me-2" variant="outline-primary" size="sm" onClick={() => goToPreviousDay()} > {'<'} </Button>
|
||||
<DatePicker className="me-2" selected={selectedDate} onChange={(v) => setSelectedDate(v)} />
|
||||
<Button className="me-2 ms-2" variant="outline-primary" size="sm" onClick={() => goToNextDay()}> {'>'} </Button>
|
||||
</div>
|
||||
{table('inactive')}
|
||||
</Tab>
|
||||
</Tabs>
|
||||
<div className="list-func-panel">
|
||||
{/* <input className="me-2 with-search-icon" type="text" placeholder="Search" value={keyword} onChange={(e) => setKeyword(e.currentTarget.value)} /> */}
|
||||
<button className="btn btn-primary me-2"><Filter size={16} className="me-2"></Filter>Filter</button>
|
||||
<button className="btn btn-primary me-2"><Columns size={16} className="me-2"></Columns>Manage Table</button>
|
||||
<button className="btn btn-primary me-2" onClick={() => goToCreateNew()}><Plus size={16}></Plus>Add New Medical Appointment</button>
|
||||
<button className="btn btn-primary"><Download size={16} className="me-2"></Download>Export</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal show={showTransportationModal} onHide={() => closePanel()}>
|
||||
<Modal.Header closeButton>
|
||||
@ -417,16 +458,14 @@ const EventsList = () => {
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<>
|
||||
<div>
|
||||
Select Transportation:
|
||||
<div>
|
||||
<div className="app-main-content-fields-section">
|
||||
<div className="mb-4 me-4"></div>
|
||||
<div className="field-label">Select Transportation</div>
|
||||
<select value={transportSelected} onChange={(e)=>{setTransportSelected(e.currentTarget.value)}}>
|
||||
<option value=""></option>
|
||||
<option value="create_new">Create A New Transportation</option>
|
||||
{transportOptionsList.map((item) => <option key={item.id} value={item.id}>{item.title}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{transportSelected === 'create_new' && (
|
||||
<>
|
||||
|
||||
@ -3,7 +3,8 @@ import { useNavigate } from "react-router-dom";
|
||||
import { AuthService, EventsService, CustomerService, ResourceService } from "../../services";
|
||||
import DatePicker from "react-datepicker";
|
||||
import Select from 'react-select';
|
||||
import moment from 'moment-timezone';
|
||||
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Button, Modal, DropdownButton, Dropdown } from "react-bootstrap";
|
||||
import { Columns, Download, Filter, PencilSquare, PersonSquare, Plus } from "react-bootstrap-icons";
|
||||
|
||||
|
||||
const EventsMultipleList = () => {
|
||||
@ -19,6 +20,7 @@ const EventsMultipleList = () => {
|
||||
const [selectedCustomer, setSelectedCustomer] = useState(null);
|
||||
const [filteredEvents, setFilteredEvents] = useState(events);
|
||||
const [showDeletedItems, setShowDeletedItems] = useState(false);
|
||||
const [showFilterDropdown, setShowFilterDropdown] = useState(false);
|
||||
|
||||
|
||||
const columns = [
|
||||
@ -248,37 +250,6 @@ const EventsMultipleList = () => {
|
||||
}
|
||||
|
||||
const generateMedicalNotificationPdf = () => {
|
||||
// const inputData = {
|
||||
// events: []
|
||||
// };
|
||||
// selectedItems?.forEach((id) => {
|
||||
// const event = events.find(item => item.id === id);
|
||||
// inputData.events.push({
|
||||
// event_time: moment(event.start_time).format('hh:mm A MM/DD/YYYY dddd'),
|
||||
// client_name: event.data.client_name,
|
||||
// client_status: '会员',
|
||||
// client_dob: event.data.client_birth_date,
|
||||
// client_pcp: event.data.client_pcp,
|
||||
// client_pharmacy: event.data.client_pharmacy,
|
||||
// client_seating: event.data.client_seating,
|
||||
// doctor_name: event.data.resource_name,
|
||||
// doctor_phone: event.data.resource_phone,
|
||||
// doctor_contact: event.data.resource_contact,
|
||||
// doctor_address: event.data.resource_address,
|
||||
// title: event.title,
|
||||
// description: event.description,
|
||||
// interpreter: event.data.interpreter,
|
||||
// fasting: event.data.fasting,
|
||||
// confirmed: event.data.confirmed,
|
||||
// new_patient: event.data.new_patient,
|
||||
// doc_order: event.data.doc_order,
|
||||
// need_id: event.data.need_id,
|
||||
// need_med_list: event.data.need_med_list,
|
||||
// reason: event.data.reason,
|
||||
// notes: event.data.notes,
|
||||
// other: event.data.other
|
||||
// });
|
||||
// });
|
||||
if (selectedItems?.length <= 0) {
|
||||
window.alert("Please select at least one event record")
|
||||
} else {
|
||||
@ -291,60 +262,6 @@ const EventsMultipleList = () => {
|
||||
if (selectedItems?.length <= 0) {
|
||||
window.alert("Please select at least one event record")
|
||||
} else {
|
||||
// let customer = {};
|
||||
// const inputData = {
|
||||
// events: []
|
||||
// };
|
||||
// for (const id of selectedItems) {
|
||||
// const event = events.find(item => item.id === id);
|
||||
// if (!event?.data?.customer) {
|
||||
// const legacyClient = (await CustomerService.getClient(event.target_uuid))?.data;
|
||||
// const mappingCustomer = customers.find((item) => item.email === legacyClient.email && item.username === legacyClient.username);
|
||||
// customer = mappingCustomer;
|
||||
// } else {
|
||||
// customer = customers.find(c => c.id === event?.data?.customer);
|
||||
// }
|
||||
// let pharmacyInfo = 'This patient has no contracted pharmacy.\n' +
|
||||
// 'Please give the prescription directly to the patient';
|
||||
|
||||
// const pharmacy = resources.find(r => (r.id === customer?.pharmacy_id)) || resources.find(r => (r.name?.toLowerCase() === event.data.client_pharmacy?.toLowerCase()));
|
||||
// if (pharmacy) {
|
||||
// pharmacyInfo = `${pharmacy?.name} @ ${pharmacy?.address} \n` +
|
||||
// `phone:${pharmacy?.phone} fax:${pharmacy?.fax}`;
|
||||
// } else {
|
||||
// if (event.data.client_pharmacy) {
|
||||
// pharmacyInfo = 'Pharmacy: ' + event.data?.client_pharmacy;
|
||||
// }
|
||||
// }
|
||||
|
||||
// const clientName = (customer?.name_cn && event?.data?.client_name && `${event?.data?.client_name} ${customer?.name_cn}`) || customer?.name_cn || `${customer?.lastname}, ${customer?.firstname}`;
|
||||
// inputData.events.push({
|
||||
// event_time: moment(event.start_time).format('MM/DD/YYYY hh:mm A'),
|
||||
// client_name: clientName, // event.data.client_name,
|
||||
// client_status: '会员',
|
||||
// client_dob: event.data.client_birth_date,
|
||||
// client_pcp: event.data.client_pcp,
|
||||
// client_pharmacy: event.data.client_pharmacy,
|
||||
// client_seating: event.data.client_seating,
|
||||
// doctor_name: event.data.resource_name,
|
||||
// doctor_phone: event.data.resource_phone,
|
||||
// doctor_contact: event.data.resource_contact,
|
||||
// doctor_address: event.data.resource_address,
|
||||
// title: event.title,
|
||||
// description: event.description,
|
||||
// interpreter: event.data.interpreter,
|
||||
// fasting: event.data.fasting,
|
||||
// confirmed: event.data.confirmed,
|
||||
// new_patient: event.data.new_patient,
|
||||
// doc_order: event.data.doc_order,
|
||||
// need_id: event.data.need_id,
|
||||
// need_med_list: event.data.need_med_list,
|
||||
// reason: event.data.reason,
|
||||
// notes: event.data.notes,
|
||||
// other: event.data.other,
|
||||
// pharmacy_info: pharmacyInfo
|
||||
// })
|
||||
// }
|
||||
const inputData = { eventIds: selectedItems };
|
||||
EventsService.generateSheet(inputData);
|
||||
}
|
||||
@ -355,58 +272,6 @@ const EventsMultipleList = () => {
|
||||
if (selectedItems?.length <= 0) {
|
||||
window.alert("Please select at least one event record")
|
||||
} else {
|
||||
// let customer = {};
|
||||
// const inputData = {
|
||||
// events: []
|
||||
// };
|
||||
// for (const id of selectedItems) {
|
||||
// const event = events.find(item => item.id === id);
|
||||
// if (!event?.data?.customer) {
|
||||
// const legacyClient = (await CustomerService.getClient(event.target_uuid))?.data;
|
||||
// const mappingCustomer = customers.find((item) => item.email === legacyClient.email && item.username === legacyClient.username);
|
||||
// customer = mappingCustomer;
|
||||
// } else {
|
||||
// customer = customers.find(c => c.id === event?.data?.customer);
|
||||
// }
|
||||
// let pharmacyInfo = 'This patient has no contracted pharmacy.\n' +
|
||||
// 'Please give the prescription directly to the patient';
|
||||
// const pharmacy = resources.find(r => (r.id === customer?.pharmacy_id)) || resources.find(r => (r.name?.toLowerCase() === event.data.client_pharmacy?.toLowerCase()));
|
||||
// if (pharmacy) {
|
||||
// pharmacyInfo = `${pharmacy?.name} @ ${pharmacy?.address} \n` +
|
||||
// `phone:${pharmacy?.phone} fax:${pharmacy?.fax}`;
|
||||
// } else {
|
||||
// if (event.data.client_pharmacy) {
|
||||
// pharmacyInfo = 'Pharmacy: ' + event.data?.client_pharmacy;
|
||||
// }
|
||||
// }
|
||||
// const clientName = (customer?.name_cn && event?.data?.client_name && `${event?.data?.client_name} ${customer?.name_cn}`) || customer?.name_cn || `${customer?.lastname}, ${customer?.firstname}`;
|
||||
// inputData.events.push({
|
||||
// event_time: moment(event.start_time).format('MM/DD/YYYY hh:mm A'),
|
||||
// client_name: clientName, // event.data.client_name,
|
||||
// client_status: '会员',
|
||||
// client_dob: event.data.client_birth_date,
|
||||
// client_pcp: event.data.client_pcp,
|
||||
// client_pharmacy: event.data.client_pharmacy,
|
||||
// client_seating: event.data.client_seating,
|
||||
// doctor_name: event.data.resource_name,
|
||||
// doctor_phone: event.data.resource_phone,
|
||||
// doctor_contact: event.data.resource_contact,
|
||||
// doctor_address: event.data.resource_address,
|
||||
// title: event.title,
|
||||
// description: event.description,
|
||||
// interpreter: event.data.interpreter,
|
||||
// fasting: event.data.fasting,
|
||||
// confirmed: event.data.confirmed,
|
||||
// new_patient: event.data.new_patient,
|
||||
// doc_order: event.data.doc_order,
|
||||
// need_id: event.data.need_id,
|
||||
// need_med_list: event.data.need_med_list,
|
||||
// reason: event.data.reason,
|
||||
// notes: event.data.notes,
|
||||
// other: event.data.other,
|
||||
// pharmacy_info: pharmacyInfo
|
||||
// })
|
||||
// }
|
||||
const inputData = { eventIds: selectedItems };
|
||||
EventsService.generateSheetPDF(inputData);
|
||||
}
|
||||
@ -417,130 +282,249 @@ const EventsMultipleList = () => {
|
||||
if (selectedItems?.length <= 0) {
|
||||
window.alert("Please select at least one event record");
|
||||
} else {
|
||||
// const inputData = {
|
||||
// events: [],
|
||||
// docTemplateName: "med_notification"
|
||||
// };
|
||||
// selectedItems?.forEach((id) => {
|
||||
// const event = events.find(item => item.id === id);
|
||||
// inputData.events.push({
|
||||
// event_time: moment(event.start_time).format('hh:mm A MM/DD/YYYY dddd'),
|
||||
// client_name: event.data.client_name,
|
||||
// client_status: '会员',
|
||||
// client_dob: event.data.client_birth_date,
|
||||
// client_pcp: event.data.client_pcp,
|
||||
// client_pharmacy: event.data.client_pharmacy,
|
||||
// client_seating: event.data.client_seating,
|
||||
// doctor_name: event.data.resource_name,
|
||||
// doctor_phone: event.data.resource_phone,
|
||||
// doctor_contact: event.data.resource_contact,
|
||||
// doctor_address: event.data.resource_address,
|
||||
// title: event.title,
|
||||
// description: event.description,
|
||||
// interpreter: event.data.interpreter,
|
||||
// fasting: event.data.fasting,
|
||||
// confirmed: event.data.confirmed,
|
||||
// new_patient: event.data.new_patient,
|
||||
// doc_order: event.data.doc_order,
|
||||
// need_id: event.data.need_id,
|
||||
// need_med_list: event.data.need_med_list,
|
||||
// reason: event.data.reason,
|
||||
// notes: event.data.notes,
|
||||
// other: event.data.other
|
||||
// });
|
||||
// });
|
||||
const inputData = { eventIds: selectedItems };
|
||||
EventsService.generateDoc(inputData);
|
||||
}
|
||||
};
|
||||
|
||||
const showDeleted = (value) => {
|
||||
setShowDeletedItems(value === 'archivedEvents');
|
||||
// Recover all filters
|
||||
// setKeyword('');
|
||||
setSorting({key: '', order: ''});
|
||||
setSelectedItems([]);
|
||||
};
|
||||
|
||||
const table = (statusParam) => <div className="list row mb-4">
|
||||
<div className="col-md-12">
|
||||
<table className="personnel-info-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="th-checkbox" ><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th>
|
||||
<th className="th-index">No.</th>
|
||||
{
|
||||
columns.map((column, index) => <th className="sortable-header" key={index}>
|
||||
{column.label} <span className="float-right" onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span>
|
||||
</th>)
|
||||
}
|
||||
<th>Customer Date of Birth</th>
|
||||
<th>Transportation</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
filteredEvents && filteredEvents.filter(event => event.status === statusParam).map((medicalEvent, index) => <tr key={medicalEvent.id}>
|
||||
<td className="td-checkbox"><input type="checkbox" checked={selectedItems.includes(medicalEvent.id)} onClick={()=>toggleItem(medicalEvent?.id)}/></td>
|
||||
<td className="td-index">{index + 1}</td>
|
||||
<td>{medicalEvent?.customer}</td>
|
||||
<td>{medicalEvent?.chinese_name}</td>
|
||||
<td>{medicalEvent?.member_type}</td>
|
||||
<td>{medicalEvent?.eyes_on}</td>
|
||||
<td>{medicalEvent?.doctor}</td>
|
||||
<td>{medicalEvent?.phone}</td>
|
||||
<td>{medicalEvent?.address}</td>
|
||||
<td>{medicalEvent?.translation}</td>
|
||||
<td>{medicalEvent?.newPatient}</td>
|
||||
<td>{medicalEvent?.needId}</td>
|
||||
<td>{medicalEvent?.startTime}</td>
|
||||
<td>{medicalEvent?.transportation}</td>
|
||||
<td>{medicalEvent?.fasting}</td>
|
||||
<td>{medicalEvent?.dob}</td>
|
||||
<td>{medicalEvent?.transMethod}</td>
|
||||
<td>{medicalEvent?.confirmed ? 'Confirmed' : <button className="btn btn-primary btn-sm me-2 ms-2" onClick={() => confirmEvent(medicalEvent?.id)}>Confirm</button>}</td>
|
||||
</tr>)
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
const cleanFilterAndClose = () => {
|
||||
setSelectedCustomer(null);
|
||||
setSelectedResource(null);
|
||||
setShowFilterDropdown(false);
|
||||
}
|
||||
|
||||
const FilterAndClose = () => {
|
||||
setShowFilterDropdown(false);
|
||||
}
|
||||
|
||||
|
||||
const customMenu = React.forwardRef(
|
||||
({ children, style, className, 'aria-labelledby': labeledBy }, ref) => {
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
style={style}
|
||||
className={className}
|
||||
aria-labelledby={labeledBy}
|
||||
>
|
||||
<h6>Filter By</h6>
|
||||
<div className="app-main-content-fields-section margin-sm">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Customer</div>
|
||||
<Select styles={{
|
||||
control: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: '210px',
|
||||
height: '35px',
|
||||
'padding-top': 0,
|
||||
'padding-bottom': 0,
|
||||
'margin-top': 0,
|
||||
'margin-bottom': 0
|
||||
}),
|
||||
indicatorSeparator: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: 0
|
||||
}),
|
||||
indicatorsContainer: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-20px'
|
||||
}),
|
||||
placeholder: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-20px',
|
||||
'font-size': '13px'
|
||||
}),
|
||||
singleValue: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-20px',
|
||||
'font-size': '13px'
|
||||
})
|
||||
}} value={selectedCustomer || ''} onChange={selectedData => {setSelectedCustomer(selectedData); setSelectedItems([]);}} options={[{value: '', label: ''}, ...customers.map(resource => ({
|
||||
value: resource?.id || '',
|
||||
label: resource?.name || '',
|
||||
}))]}></Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="app-main-content-fields-section margin-sm">
|
||||
<div className="me-4">
|
||||
<div className="field-label">Resource</div>
|
||||
<Select styles={{
|
||||
control: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: '210px',
|
||||
height: '25px',
|
||||
'padding-top': 0,
|
||||
'padding-bottom': 0,
|
||||
'margin-top': 0,
|
||||
'margin-bottom': 0
|
||||
}),
|
||||
indicatorSeparator: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
width: 0
|
||||
}),
|
||||
indicatorsContainer: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-20px'
|
||||
}),
|
||||
placeholder: (baseStyles) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-20px',
|
||||
'font-size': '13px'
|
||||
}),
|
||||
singleValue: (baseStyles, state) => ({
|
||||
...baseStyles,
|
||||
'margin-top': '-20px',
|
||||
'font-size': '13px'
|
||||
})
|
||||
}} value={selectedResource || ''} onChange={selectedData => {setSelectedResource(selectedData); setSelectedItems([]);}} options={[{value: '', label: ''}, ...resources?.filter(r => r.status === 'active').map(resource => ({
|
||||
value: resource?.id || '',
|
||||
label: resource?.name || '',
|
||||
}))]}></Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list row">
|
||||
<div className="col-md-12">
|
||||
<button className="btn btn-default btn-sm float-right" onClick={() => cleanFilterAndClose()}> Cancel </button>
|
||||
<button className="btn btn-primary btn-sm float-right" onClick={() => FilterAndClose()}> Filter </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="list row mb-4 noprint">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Medical</Breadcrumb.Item>
|
||||
<Breadcrumb.Item active>
|
||||
Appointment Information (Multi Days)
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="col-md-12 text-primary">
|
||||
<h5>Medical Event Multiple Days List
|
||||
<button className="btn btn-primary btn-sm me-2 ms-2" onClick={() => {goToCreateNew()}}>Create New Medical Event</button>
|
||||
<button className="btn btn-link btn-sm me-2" onClick={() => {redirectToAdmin()}}>Back</button>
|
||||
</h5>
|
||||
</div>
|
||||
<div className="col-md-12 text-primary">
|
||||
<button className="btn btn-secondary btn-sm me-2" onClick={() => {generateMedicalNotificationDocs()}}>Medical Notifications Doc</button>
|
||||
<button className="btn btn-secondary btn-sm me-2" onClick={() => {generateMedicalNotificationPdf()}}>Medical Notifications Pdf</button>
|
||||
<button className="btn btn-secondary btn-sm me-2" onClick={() => {generateVisitRecordSheet()}}>Visit Record Sheet</button>
|
||||
<button className="btn btn-secondary btn-sm me-2" onClick={() => {generateVisitRecordPDF()}}>Visit Record PDF</button>
|
||||
<h4>
|
||||
Medical Event Multiple Days List
|
||||
{/* <button className="btn btn-primary btn-sm" onClick={() => {goToCreateNew()}}>Create New Customer</button>
|
||||
<button className="btn btn-link btn-sm" onClick={() => {redirectToAdmin()}}>Back</button> */}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list row mb-4">
|
||||
<div className="col-md-12 noprint">
|
||||
Pick a Date Range
|
||||
</div>
|
||||
<div className="col-md-4 col-sm-12 mb-4 noprint">
|
||||
From: <DatePicker selected={fromDate} onChange={(v) => {setFromDate(v); setSelectedItems([]);}} />
|
||||
</div>
|
||||
<div className="col-md-4 col-sm-12 mb-4 noprint">
|
||||
To: <DatePicker selected={toDate} onChange={(v) => {setToDate(v); setSelectedItems([]);}} />
|
||||
</div>
|
||||
<div className="col-md-12 noprint">
|
||||
You can Filter By:
|
||||
</div>
|
||||
<div className="col-md-4 col-sm-12 mb-4 noprint">
|
||||
Customer: <Select value={selectedCustomer || ''} onChange={selectedData => {setSelectedCustomer(selectedData); setSelectedItems([]);}} options={[{value: '', label: ''}, ...customers.map(resource => ({
|
||||
value: resource?.id || '',
|
||||
label: resource?.name || '',
|
||||
}))]}></Select>
|
||||
</div>
|
||||
<div className="col-md-4 col-sm-12 mb-4 noprint">
|
||||
Resource: <Select value={selectedResource || ''} onChange={selectedData => {setSelectedResource(selectedData); setSelectedItems([]);}} options={[{value: '', label: ''}, ...resources?.filter(r => r.status === 'active').map(resource => ({
|
||||
value: resource?.id || '',
|
||||
label: resource?.name || '',
|
||||
}))]}></Select>
|
||||
</div>
|
||||
<div className="col-md-4 col-sm-12 mb-4 noprint">
|
||||
Show Deleted Events: <input type="checkbox" value={showDeletedItems} checked={showDeletedItems === true} onClick={() => {setShowDeletedItems(!showDeletedItems); setSelectedItems([]);}} />
|
||||
</div>
|
||||
|
||||
<div className="col-md-12">
|
||||
<table className="personnel-info-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th>
|
||||
{
|
||||
columns.map((column, index) => <th className="sortable-header" key={index}>
|
||||
{column.label} <span onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span>
|
||||
</th>)
|
||||
}
|
||||
<th>Customer Date of Birth</th>
|
||||
<th>Transportation</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
filteredEvents && (showDeletedItems ? filteredEvents: filteredEvents.filter(event => event.status === 'active')).map(medicalEvent => <tr key={medicalEvent.id}>
|
||||
<td><input type="checkbox" checked={selectedItems.includes(medicalEvent.id)} onClick={()=>toggleItem(medicalEvent?.id)}/></td>
|
||||
<td>{medicalEvent?.customer}</td>
|
||||
<td>{medicalEvent?.chinese_name}</td>
|
||||
<td>{medicalEvent?.member_type}</td>
|
||||
<td>{medicalEvent?.eyes_on}</td>
|
||||
<td>{medicalEvent?.doctor}</td>
|
||||
<td>{medicalEvent?.phone}</td>
|
||||
<td>{medicalEvent?.address}</td>
|
||||
<td>{medicalEvent?.translation}</td>
|
||||
<td>{medicalEvent?.newPatient}</td>
|
||||
<td>{medicalEvent?.needId}</td>
|
||||
<td>{medicalEvent?.startTime}</td>
|
||||
<td>{medicalEvent?.transportation}</td>
|
||||
<td>{medicalEvent?.fasting}</td>
|
||||
<td>{medicalEvent?.dob}</td>
|
||||
<td>{medicalEvent?.transMethod}</td>
|
||||
<td>{medicalEvent?.confirmed ? 'Confirmed' : <button className="btn btn-primary btn-sm me-2 ms-2" onClick={() => confirmEvent(medicalEvent?.id)}>Confirm</button>}</td>
|
||||
</tr>)
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<div className="app-main-content-list-container">
|
||||
<div className="app-main-content-list-func-container">
|
||||
<Tabs defaultActiveKey="activeEvents" id="requests-tab" onSelect={(k) => showDeleted(k)}>
|
||||
<Tab eventKey="activeEvents" title="Active Appointments">
|
||||
<div className="app-main-content-fields-section with-function flex-end">
|
||||
<div className="me-4">
|
||||
<div className="field-label">From</div>
|
||||
<DatePicker selected={fromDate} onChange={(v) => {setFromDate(v); setSelectedItems([]);}} />
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">To</div>
|
||||
<DatePicker selected={toDate} onChange={(v) => {setToDate(v); setSelectedItems([]);}} />
|
||||
</div>
|
||||
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateMedicalNotificationDocs()}}>Medical Notifications Doc</button>
|
||||
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateMedicalNotificationPdf()}}>Medical Notifications Pdf</button>
|
||||
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateVisitRecordSheet()}}>Visit Record Sheet</button>
|
||||
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateVisitRecordPDF()}}>Visit Record PDF</button>
|
||||
</div>
|
||||
{table('active')}
|
||||
</Tab>
|
||||
<Tab eventKey="archivedEvents" title="Archived Appointments">
|
||||
<div className="app-main-content-fields-section-flex-end with-function flex-end">
|
||||
<div className="me-4">
|
||||
<div className="field-label">From</div>
|
||||
<DatePicker selected={fromDate} onChange={(v) => {setFromDate(v); setSelectedItems([]);}} />
|
||||
</div>
|
||||
<div className="me-4">
|
||||
<div className="field-label">To</div>
|
||||
<DatePicker selected={toDate} onChange={(v) => {setToDate(v); setSelectedItems([]);}} />
|
||||
</div>
|
||||
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateMedicalNotificationDocs()}}>Medical Notifications Doc</button>
|
||||
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateMedicalNotificationPdf()}}>Medical Notifications Pdf</button>
|
||||
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateVisitRecordSheet()}}>Visit Record Sheet</button>
|
||||
<button className="btn btn-primary btn-sm me-2" onClick={() => {generateVisitRecordPDF()}}>Visit Record PDF</button>
|
||||
</div>
|
||||
{table('inactive')}
|
||||
</Tab>
|
||||
</Tabs>
|
||||
<div className="list-func-panel">
|
||||
{/* <input className="me-2 with-search-icon" type="text" placeholder="Search" value={keyword} onChange={(e) => setKeyword(e.currentTarget.value)} /> */}
|
||||
{/* <button className="btn btn-primary me-2"><Filter size={16} className="me-2"></Filter>Filter</button> */}
|
||||
<Dropdown
|
||||
key={'filter-event-multi-list'}
|
||||
id="filter-event-multi-list"
|
||||
className="me-2"
|
||||
show={showFilterDropdown}
|
||||
onToggle={() => setShowFilterDropdown(!showFilterDropdown)}
|
||||
>
|
||||
<Dropdown.Toggle variant="primary">
|
||||
<Filter size={16} className="me-2"></Filter>Filter
|
||||
</Dropdown.Toggle>
|
||||
<Dropdown.Menu as={customMenu}/>
|
||||
</Dropdown>
|
||||
<button className="btn btn-primary me-2"><Columns size={16} className="me-2"></Columns>Manage Table</button>
|
||||
<button className="btn btn-primary me-2" onClick={() => goToCreateNew()}><Plus size={16}></Plus>Add New Medical Appointment</button>
|
||||
<button className="btn btn-primary"><Download size={16} className="me-2"></Download>Export</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -147,7 +147,19 @@ const SideMenu = () => {
|
||||
{
|
||||
name: 'Appointment Calendar',
|
||||
link: '/medical/events/calendar',
|
||||
category: '/events',
|
||||
category: '/events/calendar',
|
||||
roleFunc: AuthService.canAccessLegacySystem
|
||||
},
|
||||
{
|
||||
name: 'Appointment One-Day List',
|
||||
link: '/medical/events/list',
|
||||
category: '/events/list',
|
||||
roleFunc: AuthService.canAccessLegacySystem
|
||||
},
|
||||
{
|
||||
name: 'Appointment Multi-Days List',
|
||||
link: '/medical/events/multiple-list',
|
||||
category: '/events/multiple-list',
|
||||
roleFunc: AuthService.canAccessLegacySystem
|
||||
}
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user