207 lines
10 KiB
JavaScript
207 lines
10 KiB
JavaScript
import React from "react";
|
|
import api from "../api.js";
|
|
import {useState, useEffect} from "react";
|
|
|
|
export default function ProjectCreateModal({loc}) {
|
|
const modalId = `modal-${loc.id.replace(/\s+/g, '-')}`;
|
|
const [notes, setNotes] = useState('');
|
|
const [showSecondVisit, setShowSecondVisit] = useState(false);
|
|
const [teamMembers, setTeamMembers] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const fetchTeamMembers = async () => {
|
|
try {
|
|
const response = await api.get('team/');
|
|
if (response.status === 200) {
|
|
setTeamMembers(response.data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching team members:', error);
|
|
}
|
|
};
|
|
fetchTeamMembers();
|
|
}, []);
|
|
|
|
const handleNotes = (e) => {
|
|
setNotes(e.target.value);
|
|
}
|
|
const [start1, setStart1] = useState('');
|
|
const handleStart1 = (e) => {
|
|
setStart1(e.target.value);
|
|
}
|
|
const [end1, setEnd1] = useState('');
|
|
const handleEnd1 = (e) => {
|
|
setEnd1(e.target.value);
|
|
}
|
|
const [serviceType, setServiceType] = useState('');
|
|
const handleServiceType = (e) => {
|
|
setServiceType(e.target.value);
|
|
}
|
|
const [secondVisit, setSecondVisit] = useState('');
|
|
const handleSecondVisit = (e) => {
|
|
setShowSecondVisit(e.target.value === 'Yes');
|
|
setSecondVisit(e.target.value);
|
|
}
|
|
const [start2, setStart2] = useState('');
|
|
const handleStart2 = (e) => {
|
|
setStart2(e.target.value);
|
|
}
|
|
const [end2, setEnd2] = useState('');
|
|
const handleEnd2 = (e) => {
|
|
setEnd2(e.target.value);
|
|
}
|
|
const [attendees, setAttendees] = useState([]);
|
|
const handleAttendees = (e) => {
|
|
const attendee = (e.target.value);
|
|
if (e.target.checked) {
|
|
setAttendees([...attendees, attendee]);
|
|
} else {
|
|
setAttendees(attendees.filter(a => a !== attendee));
|
|
}
|
|
}
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const response = await api.post('calendar/', {
|
|
id: loc.id,
|
|
store: loc.store,
|
|
summary: `#${loc.store} - ${loc.city}: ${serviceType}`,
|
|
description: `${serviceType} : ${notes}`,
|
|
location: `${loc.street_address}, ${loc.city}, ${loc.state} ${loc.zip_code}`,
|
|
start1: start1,
|
|
end1: end1,
|
|
serviceType: serviceType,
|
|
secondVisit: secondVisit,
|
|
start2: start2,
|
|
end2: end2,
|
|
attendees: attendees,
|
|
});
|
|
if (response.status === 200) {
|
|
onSuccess()
|
|
}
|
|
} catch (error) {
|
|
alert(error.detail);
|
|
}
|
|
}
|
|
const onSuccess = () => {
|
|
alert('Project created and calendar invites sent!');
|
|
window.location.reload();
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<button type="button" className="btn btn-primary m-3" data-bs-toggle="modal"
|
|
data-bs-target={`#${modalId}`}>
|
|
Schedule Service
|
|
</button>
|
|
<div className='modal fade' id={modalId} data-bs-backdrop="static"
|
|
data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div className="modal-dialog">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<h1 className="modal-title fs-5" id="staticBackdropLabel">
|
|
Create a New Service Instance
|
|
</h1>
|
|
<button type="button" className="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<p>Store ID: {loc.id}</p>
|
|
<p>Store #: {loc.store} - {loc.city}</p>
|
|
<form>
|
|
<div className="mb-3">
|
|
<label htmlFor="start-1" className="form-label">
|
|
Start Date & Time
|
|
</label>
|
|
<input onChange={handleStart1} id="start-1" type="datetime-local" className="form-control" required></input>
|
|
</div>
|
|
<div className="mb-3">
|
|
<label htmlFor="end-1" className="form-label">
|
|
End Date & Time
|
|
</label>
|
|
<input onChange={handleEnd1} id="end-1" type="datetime-local" className="form-control" required></input>
|
|
</div>
|
|
<div className="mb-3">
|
|
<label htmlFor="service-type" className="form-label">
|
|
Select a Service Type
|
|
</label>
|
|
<select onChange={handleServiceType} id="service-type" className="form-select" aria-label="Service type selection" required>
|
|
<option defaultValue>
|
|
Select service type...
|
|
</option>
|
|
<option value="Regular Service">
|
|
Regular Service
|
|
</option>
|
|
<option value="Deep Clean">
|
|
Deep Clean
|
|
</option>
|
|
<option value="Other">
|
|
Other - Please add notes
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div className="mb-3">
|
|
<label htmlFor="second-visit" className="form-label">
|
|
Second Visit Required?
|
|
</label>
|
|
<select id="second-visit" className="form-select" aria-label="Second visit selection"
|
|
onChange={handleSecondVisit} required>
|
|
<option defaultValue value="No">
|
|
No
|
|
</option>
|
|
<option value="Yes">
|
|
Yes
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div className="mb-3" id="second-start" style={{ display: showSecondVisit ? "block" : "none" }}>
|
|
<label htmlFor="start-2" className="form-label">
|
|
Second Visit Start Date & Time
|
|
</label>
|
|
<input onChange={handleStart2} id="start-2" type="datetime-local" className="form-control"></input>
|
|
</div>
|
|
<div className="mb-3" id="second-end" style={{ display: showSecondVisit ? "block" : "none" }}>
|
|
<label htmlFor="end-2" className="form-label">
|
|
Second Visit End Date & Time
|
|
</label>
|
|
<input onChange={handleEnd2} id="end-2" type="datetime-local" className="form-control"></input>
|
|
</div>
|
|
<div className="mb-3">
|
|
<label htmlFor="notes" className="form-label">
|
|
Notes
|
|
</label>
|
|
<textarea onChange={handleNotes} id="notes" className="form-control" rows="3"></textarea>
|
|
</div>
|
|
<div className="mb-3">
|
|
<label htmlFor="team-members" className="form-check-label">
|
|
Select Team Members:
|
|
</label>
|
|
<div id="team-members" className="mb-3">
|
|
{teamMembers.map((member, index) => (
|
|
<div key={index} className="form-check form-check-inline">
|
|
<input className="form-check-input" type="checkbox" id={`checkbox-${member.username}`}
|
|
onChange={handleAttendees} value={member.username}/>
|
|
<label className="form-check-label" htmlFor={`checkbox-${member.username}`}>
|
|
{member.display_name || member.username}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div className="modal-footer">
|
|
<button type="button" className="btn btn-secondary"
|
|
data-bs-dismiss="modal">Cancel
|
|
</button>
|
|
<button onClick={handleSubmit} type="button" className="btn btn-primary" data-bs-dismiss="modal">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|