Skip to content

Commit

Permalink
Merge pull request #70 from buildingu/FE-feature-add-checklist-page-i…
Browse files Browse the repository at this point in the history 
…ntegration

Fe feature add checklist page integration
  • Loading branch information
@Sidragon123
Sidragon123 authored Dec 16, 2024
2 parents 15373a8 + 1d1d7d5 commit b1e161d
Show file tree
Hide file tree
Showing 2 changed files with 185 additions and 201 deletions.
319 changes: 118 additions & 201 deletions views/src/Pages/Checklist.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,218 +6,135 @@ import {
Center,
TableTr,
TableTd,
TableTh,
} from "@mantine/core";
import axios from "axios";
import Loader from "../components/Loader";
import { IconCheck, IconX } from "@tabler/icons-react";

const stylingMainTopicsHeader = { textAlign: "center", width: "10%" };
const stylingTopicStatusHeader = { width: "calc(25%/3)" };
// const nameList = () => {
// for (internName in database) {
// return (
// <Table.Tr>
// <Table.Td>{internName}</Table.Td>
// </Table.Tr>
// );
// }
// };
// const statusExercises = ()=>{
// for(status){
// if (status.submittedhtml = true){
// return("x")
// }
// }
// }
const Checklist = () => {
// States
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState([]);
const [topics, setTopics] = useState([]);
const [groupedData, setGroupedData] = useState({});

// Fetching and parsing data on page load
const getData = async () => {
try {
const response = await axios.get(
"http://localhost:5001/api/users/exerciseInfo",
{
withCredentials: true,
}
);
// Store the fetched data
const fetchedData = response.data.data;

// Set the data state
setData(fetchedData);

// Create a unique list of topics
const uniqueTopics = [...new Set(fetchedData.map((item) => item.topic))];
setTopics(uniqueTopics);

// Parse the data to create user-specific associations
const grouped = fetchedData.reduce((acc, item) => {
const { userId, internName, topic, isSubmitted, isCompleted } = item;
if (!acc[userId]) {
acc[userId] = { internName, topics: {} };
}
acc[userId].topics[topic] = { isSubmitted, isCompleted };
return acc;
}, {});

setGroupedData(grouped);

// Set loading state to false after data is fetched and processed
setIsLoading(false);
} catch (error) {
console.log(error);
setIsLoading(false);
}
};

useEffect(() => {
//calls function on page load
getData();
}, []);
//table styling
const stylingTable = {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
};
const ChecklistTable = () => (
//creates scrollarea to deal with overflow
<ScrollArea w="75vw" h="80vh">
<Table
withColumnBorders
withRowBorders
striped
withTableBorder
highlightOnHover
style={{ textAlign: "center" }}
>
<Table.Thead>
<TableTr>
<TableTh rowSpan={2}>Intern Name</TableTh>
{topics.map((topic) => (
<TableTh key={topic} colSpan={2} style={{ textAlign: "center" }}>
{topic}
</TableTh>
))}
</TableTr>
<TableTr>
{topics.map((topic) => (
<React.Fragment key={topic}>
<TableTh key={`${topic}-Submitted`}>Submitted</TableTh>
<TableTh key={`${topic}-Completed`}>Completed</TableTh>
</React.Fragment>
))}
</TableTr>
</Table.Thead>
<Table.Tbody>
{Object.values(groupedData).map((user, idx) => (
<TableTr key={`user-${idx}`}>
<TableTd>{user.internName}</TableTd>
{topics.map((topic) => {
const topicStatus = user.topics[topic] || {
isSubmitted: false,
isCompleted: false,
};
return (
<React.Fragment key={`topic-${topic}`}>
<TableTd>
{topicStatus.isSubmitted ? (
<IconCheck color="green" />
) : (
<IconX color="#bb0c0c" />
)}
</TableTd>
<TableTd>
{topicStatus.isCompleted ? (
<IconCheck color="green" />
) : (
<IconX color="#bb0c0c" />
)}
</TableTd>
</React.Fragment>
);
})}
</TableTr>
))}
</Table.Tbody>
</Table>
</ScrollArea>
);
return (
<Container style={stylingTable}>
<ScrollArea w="75vw" h="80vh">
<Container style={{ display: "flex" }}>
<Table
highlightOnHover={true}
striped={true}
stickyHeader={true}
withTableBorder={true}
withColumnBorders={true}
withRowBorders={true}
w="25%"
>
<Table.Th
style={{
textAlign: "center",
width: "25%",
height: "200%",
alignContent: "center",
}}
>
Intern Name
</Table.Th>
</Table>
<Container style={{ display: "block" }}>
<Table
highlightOnHover={true}
striped={true}
stickyHeader={true}
withTableBorder={true}
w="100%"
withColumnBorders={true}
withRowBorders={true}
>
<Table.Thead w="100%">
<Table.Tr w="100%">
<Table.Th style={stylingMainTopicsHeader}>HTML</Table.Th>
<Table.Th style={stylingMainTopicsHeader}>CSS</Table.Th>
<Table.Th style={stylingMainTopicsHeader}>MQ/RD</Table.Th>
<Table.Th style={stylingMainTopicsHeader}>Bootstrap</Table.Th>
<Table.Th style={stylingMainTopicsHeader}>
Javascript
</Table.Th>
<Table.Th style={stylingMainTopicsHeader}>
Javascript and the DOM
</Table.Th>
<Table.Th style={stylingMainTopicsHeader}>React</Table.Th>
<Table.Th style={stylingMainTopicsHeader}>SQL</Table.Th>
<Table.Th style={stylingMainTopicsHeader}>ExpressJS</Table.Th>
<Table.Th style={stylingMainTopicsHeader}>
API Integration
</Table.Th>
</Table.Tr>
</Table.Thead>
</Table>
<Table
highlightOnHover={true}
striped={true}
stickyHeader={true}
w="100%"
withTableBorder={true}
withColumnBorders={true}
withRowBorders={true}
>
<Table.Thead>
<Table.Tr>
<Table.Th id="htmlSubmitted" style={stylingTopicStatusHeader}>
Submitted
</Table.Th>
<Table.Th id="htmlCompleted" style={stylingTopicStatusHeader}>
Completed
</Table.Th>
<Table.Th id="cssSubmitted" style={stylingTopicStatusHeader}>
Submitted
</Table.Th>
<Table.Th id="cssCompleted" style={stylingTopicStatusHeader}>
Completed
</Table.Th>
<Table.Th id="mdrqSubmitted" style={stylingTopicStatusHeader}>
Submitted
</Table.Th>
<Table.Th id="mdrqCompleted" style={stylingTopicStatusHeader}>
Completed
</Table.Th>
<Table.Th
id="bootstrapSubmitted"
style={stylingTopicStatusHeader}
>
Submitted
</Table.Th>
<Table.Th
id="bootstrapCompleted"
style={stylingTopicStatusHeader}
>
Completed
</Table.Th>
<Table.Th id="jsSubmitted" style={stylingTopicStatusHeader}>
Submitted
</Table.Th>
<Table.Th id="jsCompleted" style={stylingTopicStatusHeader}>
Completed
</Table.Th>
<Table.Th
id="jsDomSubmitted"
style={stylingTopicStatusHeader}
>
Submitted
</Table.Th>
<Table.Th
id="jsDomCompleted"
style={stylingTopicStatusHeader}
>
Completed
</Table.Th>
<Table.Th
id="reactSubmitted"
style={stylingTopicStatusHeader}
>
Submitted
</Table.Th>
<Table.Th
id="reactCompleted"
style={stylingTopicStatusHeader}
>
Completed
</Table.Th>
<Table.Th id="sqlSubmitted" style={stylingTopicStatusHeader}>
Submitted
</Table.Th>
<Table.Th id="sqlCompleted" style={stylingTopicStatusHeader}>
Completed
</Table.Th>
<Table.Th
id="expressJsSubmitted"
style={stylingTopicStatusHeader}
>
Submitted
</Table.Th>
<Table.Th
id="expressJsCompleted"
style={stylingTopicStatusHeader}
>
Completed
</Table.Th>
<Table.Th
id="apiIntegrationSubmitted"
style={stylingTopicStatusHeader}
>
Submitted
</Table.Th>
<Table.Th
id="apiIntegrationCompleted"
style={stylingTopicStatusHeader}
>
Completed
</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody></Table.Tbody>
</Table>
</Container>
</Container>
<Container style={{ display: "flex" }}>
<Table
highlightOnHover={true}
striped={true}
stickyHeader={true}
withTableBorder={true}
withColumnBorders={true}
withRowBorders={true}
>
{/* {nameList()} */}
</Table>
<Table
highlightOnHover={true}
striped={true}
stickyHeader={true}
withTableBorder={true}
withColumnBorders={true}
withRowBorders={true}
>
{/* {statusExercises()} */}
</Table>
</Container>
</ScrollArea>
{isLoading ? <Loader /> : <ChecklistTable />}
</Container>
);
};
Expand Down
Loading

0 comments on commit b1e161d

Please sign in to comment.