Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

latest v of main #37

Merged
merged 6 commits into from
Apr 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 26 additions & 24 deletions frontend/src/Components/View_Saved_Timesheets_Page/TimesheetCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,30 @@ export default function TimesheetCard(props) {

function resubmitTimesheet() {
if(hasResubmitted != true) {
console.log("Resubmitting timesheet " + props.id)
fetch('http://127.0.0.1:5000/update_timesheet/' + props.id, {
method: "PUT",
headers: { "Content-Type": "application/json" },
credentials: 'include',
body: JSON.stringify({
start_time: newStartTime,
end_time: newEndTime
})
}).then(response => {
if (response.ok) {
console.log("Timesheet updated successfully");
return response.json();
} else {
throw new Error('Failed to update timesheet with status: ' + response.status);
}
}).then(data => {
console.log(data); // Handle the success response
}).catch(error => {
console.error(error); // Handle any errors
});
setHasResubmitted(true)
if(/^([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.test(newStartTime) && /^([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.test(newEndTime)) {
console.log("Resubmitting timesheet " + props.id)
fetch('http://127.0.0.1:5000/update_timesheet/' + props.id, {
method: "PUT",
headers: { "Content-Type": "application/json" },
credentials: 'include',
body: JSON.stringify({
start_time: newStartTime,
end_time: newEndTime
})
}).then(response => {
if (response.ok) {
console.log("Timesheet updated successfully");
return response.json();
} else {
throw new Error('Failed to update timesheet with status: ' + response.status);
}
}).then(data => {
console.log(data); // Handle the success response
}).catch(error => {
console.error(error); // Handle any errors
});
setHasResubmitted(true)
}
}
}

Expand All @@ -46,14 +48,14 @@ export default function TimesheetCard(props) {
return(<div className={styles.timesheetCard}>
<h2 className={styles.day}>Day : {props.day}</h2>
<h2 className={styles.workEnd} >Old Work Start : {props.workStart}</h2>
<input pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]"
<input type="text" pattern="[a-z]{4,8}"
title="Please enter a valid timestamp (HH:MM:SS)"
required
value={newStartTime}
onChange={(e) => setNewStartTime(e.target.value)}
/>
<h2 className={styles.workStart} >Old Work End : {props.workEnd}</h2>
<input pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]"
<input type="text" pattern="[a-z]{4,8}"
title="Please enter a valid timestamp (HH:MM:SS)"
required
value={newEndTime}
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/Pages/Consultant/ViewSavedTimesheets.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,8 @@
body{
margin: 0;
padding: 0;
}

.filterTitle{
color: aliceblue;
}
121 changes: 103 additions & 18 deletions frontend/src/Pages/Consultant/view_saved_timesheets_page.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,51 @@ export default function ViewSavedTimesheetsPage() {
{pageName : "View Saved Timesheets", pageLink : "/view_saved_timesheet", iconPath : "./Home_Page_Icons/Consultant/view_saved_timesheets.svg"}]

const [timesheets, setTimesheets] = useState([]);
const [selectedTimeFilter, setSelectedTimeFilter] = useState('new_to_old')
const [selectedStatusFilter, setSelectedStatusFilter] = useState('all')
const [filteredTimesheets, setFilteredTimesheets] = useState([])
const [hasSelectedFiltering, setHasSelectedFiltering] = useState(false)

var timesheetsArray = []

//handle when user selects different filters
const handleTimeFilterChange = (event) => {
setSelectedTimeFilter(event.target.value)
setHasSelectedFiltering(true)
}
useEffect(() => {
console.log(selectedTimeFilter)
if(timesheetsArray.length != 0) {
//filter results by time
const filteredTimeArray = selectedTimeFilter == 'new_to_old' ? timesheetsArray.reverse() : timesheetsArray
setFilteredTimesheets(filteredTimeArray)

//filter results by status
if(selectedStatusFilter != 'all') {
setFilteredTimesheets(filteredTimeArray.filter(item => item.status === selectedStatusFilter))
}
}
}, [selectedTimeFilter]);


const handleStatusFilterChange = (event) => {
setSelectedStatusFilter(event.target.value)
setHasSelectedFiltering(true)
}
useEffect(() => {
console.log(selectedStatusFilter)
if(timesheetsArray.length != 0) {
const filteredTimeArray = selectedTimeFilter == 'new_to_old' ? timesheetsArray.reverse() : timesheetsArray
setFilteredTimesheets(filteredTimeArray)

//filter results by status
if(selectedStatusFilter != 'all') {
setFilteredTimesheets(filteredTimeArray.filter(item => item.status === selectedStatusFilter))
}
console.log(filteredTimesheets, "filtered timesheets")
}
}, [selectedStatusFilter]);

//api call
useEffect(() => {
const fetchData = async () =>{
Expand Down Expand Up @@ -54,22 +97,64 @@ export default function ViewSavedTimesheetsPage() {
timesheetsArray.push(entry[1])
})

console.log(timesheetsArray)

return(
<>
<Navbar homePageTitle="Consultant Home Page" homePageLink="/consultant_home_page" links={links}/>
<main className={styles.main}>
<h1>Saved Timesheets</h1>
{timesheetsArray.map(timesheetData => (
<TimesheetCard day={timesheetData.day}
workStart={timesheetData.start_work}
workEnd={timesheetData.end_work}
status={timesheetData.status}
id={timesheetData.timesheet_id}
hours_worked={timesheetData.hours_worked}/>
))}
</main>
</>
)
if(timesheetsArray.length != 0) {
const reversedTimesheetsArray = reverseArray(timesheetsArray)
console.log(filteredTimesheets, reversedTimesheetsArray)
return(
<>
<Navbar homePageTitle="Consultant Home Page" homePageLink="/consultant_home_page" links={links}/>
<main className={styles.main}>
<h1>Saved Timesheets</h1>

<p>{selectedTimeFilter} : {selectedStatusFilter}</p>

<label className={styles.filterTitle}>Filter Timesheets by Time</label>
<select value={selectedTimeFilter} onChange={handleTimeFilterChange}>
<option value="new_to_old">Newest to Oldest</option>
<option value="old_to_new">Oldest to Newest</option>
</select>

<label className={styles.filterTitle}>Filter Timesheets by Status</label>
<select value={selectedStatusFilter} onChange={handleStatusFilterChange}>
<option value="all">All</option>
<option value="approved">Approved</option>
<option value="disapproved">Disapproved</option>
<option value="pending">Pending</option>
</select>

{
filteredTimesheets.length == 0 && !hasSelectedFiltering?
reversedTimesheetsArray.map(timesheetData => (
<TimesheetCard day={timesheetData.day}
workStart={timesheetData.start_work}
workEnd={timesheetData.end_work}
status={timesheetData.status}
id={timesheetData.timesheet_id}
hours_worked={timesheetData.hours_worked}/>
)) :
filteredTimesheets.map(timesheetData => (
<TimesheetCard day={timesheetData.day}
workStart={timesheetData.start_work}
workEnd={timesheetData.end_work}
status={timesheetData.status}
id={timesheetData.timesheet_id}
hours_worked={timesheetData.hours_worked}/>
))}
</main>
</>
)
}
else {
return(
<p>Loading data</p>
)
}
}

function reverseArray(arrayToReverse) {
var reversedArray = []
for(let i=arrayToReverse.length-1; i>=0; i--) {
reversedArray.push(arrayToReverse[i])
}
return reversedArray
}
Empty file.
101 changes: 92 additions & 9 deletions frontend/src/Pages/Line_Manager/view_consultant_timesheet_page.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import { useState, useEffect } from "react";
import TimesheetDayCard from "../../Components/View_Consultant_Timesheet/TimesheetDayCard";
import styles from './view_consultant_timesheet_page.css'

export default function ConsultantTimesheetViewerPage() {
const [selectedConsultantName, setSelectedConsultantName] = useState('')
const [foundTimesheets, setFoundTimesheets] = useState([])

var storedConsultantName = localStorage.getItem("selectedConsultant")
const [selectedTimeFilter, setSelectedTimeFilter] = useState('new_to_old')
const [selectedStatusFilter, setSelectedStatusFilter] = useState('all')
const [filteredTimesheets, setFilteredTimesheets] = useState([])
var foundTimesheetsArray = []
const [hasSelectedFiltering, setHasSelectedFiltering] = useState(false)

if(selectedConsultantName == '') {
setSelectedConsultantName(storedConsultantName)
Expand All @@ -16,6 +21,49 @@ export default function ConsultantTimesheetViewerPage() {
document.title = "Viewing " + selectedConsultantName + "'s Timesheets"




//handle when user selects different filters
const handleTimeFilterChange = (event) => {
setSelectedTimeFilter(event.target.value)
setHasSelectedFiltering(true)
}
useEffect(() => {
console.log(selectedTimeFilter)
if(foundTimesheetsArray.length != 0) {
//filter results by time
const filteredTimeArray = selectedTimeFilter == 'new_to_old' ? foundTimesheetsArray.reverse() : foundTimesheetsArray
setFilteredTimesheets(filteredTimeArray)

//filter results by status
if(selectedStatusFilter != 'all') {
setFilteredTimesheets(filteredTimeArray.filter(item => item.status === selectedStatusFilter))
}
}
}, [selectedTimeFilter]);


const handleStatusFilterChange = (event) => {
setSelectedStatusFilter(event.target.value)
setHasSelectedFiltering(true)
}
useEffect(() => {
console.log(selectedStatusFilter)
if(foundTimesheetsArray.length != 0) {
const filteredTimeArray = selectedTimeFilter == 'new_to_old' ? foundTimesheetsArray.reverse() : foundTimesheetsArray
setFilteredTimesheets(filteredTimeArray)

//filter results by status
if(selectedStatusFilter != 'all') {
setFilteredTimesheets(filteredTimeArray.filter(item => item.status === selectedStatusFilter))
}
console.log(filteredTimesheets, "filtered timesheets")
}
}, [selectedStatusFilter]);




//api call to fetch timesheets of specific user
useEffect(() => {
const fetchData = async () =>{
Expand Down Expand Up @@ -54,14 +102,49 @@ export default function ConsultantTimesheetViewerPage() {
})

console.log(foundTimesheetsArray)
console.log(hasSelectedFiltering)

if(foundTimesheetsArray.length != 0) {
const reversedTimesheetsArray = reverseArray(foundTimesheetsArray)

return(
<>
<h1>{selectedConsultantName}</h1>

<p>{selectedTimeFilter} : {selectedStatusFilter}</p>

return(
<>
<h1>{selectedConsultantName}</h1>
<div>
{foundTimesheetsArray.map(timesheetDayData => (
<TimesheetDayCard id={timesheetDayData.timesheet_id} date={timesheetDayData.date} startTime={timesheetDayData.workStart} endTime={timesheetDayData.endWork} status={timesheetDayData.status}/>
))}
</div>
</>)
<label className={styles.filterTitle}>Filter Timesheets by Time</label>
<select value={selectedTimeFilter} onChange={handleTimeFilterChange}>
<option value="new_to_old">Newest to Oldest</option>
<option value="old_to_new">Oldest to Newest</option>
</select>

<label className={styles.filterTitle}>Filter Timesheets by Status</label>
<select value={selectedStatusFilter} onChange={handleStatusFilterChange}>
<option value="all">All</option>
<option value="approved">Approved</option>
<option value="disapproved">Disapproved</option>
<option value="pending">Pending</option>
</select>

<div>
{
filteredTimesheets.length == 0 && !hasSelectedFiltering ?
reversedTimesheetsArray.map(timesheetDayData => (
<TimesheetDayCard id={timesheetDayData.timesheet_id} date={timesheetDayData.date} startTime={timesheetDayData.workStart} endTime={timesheetDayData.endWork} status={timesheetDayData.status}/>
)) :
filteredTimesheets.map(timesheetDayData => (
<TimesheetDayCard id={timesheetDayData.timesheet_id} date={timesheetDayData.date} startTime={timesheetDayData.workStart} endTime={timesheetDayData.endWork} status={timesheetDayData.status}/>
))}
</div>
</>)
}
}

function reverseArray(arrayToReverse) {
var reversedArray = []
for(let i=arrayToReverse.length-1; i>=0; i--) {
reversedArray.push(arrayToReverse[i])
}
return reversedArray
}