Skip to content

Commit

Permalink
Merge pull request #36 from NotMash/luke_front_end_new
Browse files Browse the repository at this point in the history 
added filtering options to line manager page consultant page for timesheets viewing
  • Loading branch information
@Nameless7s3
Nameless7s3 authored Apr 6, 2024
2 parents 8cbaa45 + 89b4a46 commit 081e4e7
Show file tree
Hide file tree
Showing 5 changed files with 225 additions and 51 deletions.
50 changes: 26 additions & 24 deletions frontend/src/Components/View_Saved_Timesheets_Page/TimesheetCard.js
View file
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
View file
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
View file
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 added frontend/src/Pages/Line_Manager/view_consultant_timesheet_page.css
View file
Empty file.
101 changes: 92 additions & 9 deletions frontend/src/Pages/Line_Manager/view_consultant_timesheet_page.js
View file
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
}

0 comments on commit 081e4e7

Please sign in to comment.