102 lines
5.2 KiB
JavaScript
102 lines
5.2 KiB
JavaScript
import React from "react";
|
|
import {useEffect, useState} from "react";
|
|
import api from "../api.js";
|
|
import ProjectCreateModal from "../components/ProjectCreateModal.jsx";
|
|
import ProjectPunchlistModal from "../components/ProjectPunchlistModal.jsx";
|
|
import ProjectCloseModal from "../components/ProjectCloseModal.jsx";
|
|
|
|
export default function ProjectsModule() {
|
|
const [stores, setStores] = useState([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [loadingProjects, setLoadingProjects] = useState(false)
|
|
const [projects, setProjects] = useState([])
|
|
useEffect(() => {
|
|
const fetchProjects = async () => {
|
|
setLoadingProjects(true);
|
|
try {
|
|
const response = await api.get('projects/');
|
|
if (response.status === 200) {
|
|
setProjects(response.data);
|
|
}
|
|
} catch (error) {
|
|
alert(error);
|
|
} finally {
|
|
setLoadingProjects(false);
|
|
}
|
|
};
|
|
const fetchStores = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await api.get('/stores/');
|
|
if (response.status === 200) {
|
|
const sortedStores = [...response.data].sort((a, b) => a.store - b.store);
|
|
setStores(sortedStores);
|
|
}
|
|
} catch (error) {
|
|
alert(error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
fetchStores();
|
|
fetchProjects();
|
|
}, []);
|
|
return (
|
|
<div>
|
|
<div className="d-flex flex-row align-items-center justify-content-center p-2">
|
|
<h4>Upcoming</h4>
|
|
</div>
|
|
{loadingProjects ? <div className="d-flex align-items-center"><h4 className="m-2 p-2">Loading Projects...</h4><div className="m-2 spinner-border"></div></div> :
|
|
<div className="accordion p-2" id="projectsAccordion">
|
|
{projects.filter(proj => proj.status === 'Open').map(proj => (
|
|
<div key={proj.id} className="accordion-item">
|
|
<h2 className="accordion-header">
|
|
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target={`#collapse${proj.id}`} aria-expanded="false" aria-controls={`collapse${proj.id}`}>
|
|
{proj.date} - #{proj.store} - {proj.city}
|
|
</button>
|
|
</h2>
|
|
<div id={`collapse${proj.id}`} className="accordion-collapse collapse" data-bs-parent="#projectsAccordion">
|
|
<div className="accordion-body">
|
|
<div className="d-flex flex-row align-items-center">
|
|
{proj.punchlist === null ? <ProjectPunchlistModal proj={proj}/> : null}
|
|
{proj.status === 'Open' ? <ProjectCloseModal proj={proj}/> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>}
|
|
<div className="d-flex align-items-center justify-content-center p-2">
|
|
<h4>Stores</h4>
|
|
</div>
|
|
{loading ? <div className="d-flex align-items-center"><h4 className="m-2 p-2">Loading Stores...</h4><div className="m-2 spinner-border"></div></div> :
|
|
<div className="accordion p-2" id="storesAccordion">
|
|
{stores.map(loc => (
|
|
<div key={loc.id} className="accordion-item">
|
|
<h2 className="accordion-header">
|
|
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target={`#collapse${loc.id}`} aria-expanded="false" aria-controls={`collapse${loc.id}`}>
|
|
#{loc.store} - {loc.city}
|
|
</button>
|
|
</h2>
|
|
<div id={`collapse${loc.id}`} className="accordion-collapse collapse" data-bs-parent="#storesAccordion">
|
|
<div className="accordion-body">
|
|
<p>{loc.street_address}, {loc.city}, {loc.state} {loc.zip_code}</p>
|
|
<p>Entity: {loc.entity}</p>
|
|
<p>Phone: {loc.phone}</p>
|
|
<p>Store Contact: {loc.store_contact}</p>
|
|
<p>Store Email: {loc.store_contact_email}</p>
|
|
<p>Supervisor Contact: {loc.super_contact}</p>
|
|
<p>Supervisor Email: {loc.super_contact_email}</p>
|
|
<ProjectCreateModal loc={loc}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
}
|