p00002/components/Dashboard.jsx
2024-09-07 07:52:09 -04:00

67 lines
2.0 KiB
JavaScript

import React from "react";
import { connect } from "react-redux";
import ProjectList from "./projectList";
import TaskList from "./taskList";
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
// Dashboard shows projects loaded from cloud based NoSqL which is in sync with a relational
// database which holds security and other relationship based information about the projects
// When a project is selected various artifacts in the project are shown based on template
// it was based on.
function Dashboard(props) {
if (props.selectedProjectId !== "0") {
const selectedProject = (projects, selectedProjectId) => {
return projects.filter((project) => project.id === selectedProjectId);
};
const project = props.projects.find(
(project) => project.projectId === props.selectedProjectId
);
// return TaskList as a table with two columns WBS numbers and Tasks when a project is selected
// WBS number is recalculated when change occurs
// regardless of the template used task decomposition is utilized until task can be assigned to
// one and only one resource. Resource can be a person, team, departement or company.
return (
<>
<div>
<Box
sx={{
display: 'flex',
'& > :not(style)': {
m: 1,
width: 480,
height: 1/2,
},
}}
>
<Paper elevation={2}>
<h4> {project ? project.projectName : "No Project Selected - Please select one"} </h4>
<ProjectList />
<TaskList />
</Paper>
</Box>
</div>
</>
);
} else {
return (
<div>
<h2> Please select a project </h2>
<ProjectList />
</div>
);
}
}
export default connect(mapStateToProps)(Dashboard);
function mapStateToProps(state) {
return {
projects: state.projectsReducer.projects,
selectedProjectId: state.projectsReducer.selectedProjectId,
};
}