From 797a60219a0a1f81689f73e29a8121ffd6f4d7e8 Mon Sep 17 00:00:00 2001 From: Rahul Trivedi Date: Tue, 15 Oct 2024 17:19:05 -0400 Subject: [PATCH 1/3] Improve CSS layout for Reports->Teams->TeamName component and table alignment on smaller screens Adjusted CSS in the Reports component to enhance layout for the report page, specifically for better usability on smaller screens. Refined the layout of the table under "Breakdown of Weekly Hours So Far This Week" to ensure responsiveness and a more streamlined appearance. Focused on improving readability and user experience across devices with different screen sizes. --- .../Reports/TeamReport/TeamReport.css | 11 +- .../Reports/TeamReport/TeamReport.jsx | 136 ++++++++++-------- .../TeamReport/components/ReportCharts.css | 6 +- .../ReportPage/ReportPage.css | 21 ++- .../components/ReportHeader/ReportHeader.css | 3 +- 5 files changed, 103 insertions(+), 74 deletions(-) diff --git a/src/components/Reports/TeamReport/TeamReport.css b/src/components/Reports/TeamReport/TeamReport.css index 61e2c8045a..40bbc4fdc3 100644 --- a/src/components/Reports/TeamReport/TeamReport.css +++ b/src/components/Reports/TeamReport/TeamReport.css @@ -5,8 +5,9 @@ } .team-report-main-info-wrapper { - margin-top: 24px; - height: 60px; + margin-top: 10px; + height:fit-content; + width: 100%; } .team-report-main-info-id { @@ -88,4 +89,10 @@ align-items: flex-start; justify-content: center; gap: 0.5rem; +} + +.team-report-last-updated { + font-size: 1rem; + margin-top: 0; + margin-left: -80px; } \ No newline at end of file diff --git a/src/components/Reports/TeamReport/TeamReport.jsx b/src/components/Reports/TeamReport/TeamReport.jsx index 0f0e1abbbd..077001c825 100644 --- a/src/components/Reports/TeamReport/TeamReport.jsx +++ b/src/components/Reports/TeamReport/TeamReport.jsx @@ -28,11 +28,11 @@ import './TeamReport.css'; import { ReportPage } from '../sharedComponents/ReportPage'; import UserLoginPrivileges from './components/UserLoginPrivileges'; -const parser = (val) => { +const parser = val => { try { return JSON.parse(val); } catch (error) { - console.error("Failed to parse state:", error); + console.error('Failed to parse state:', error); return null; } }; @@ -40,8 +40,8 @@ const parser = (val) => { const persistConfig = { key: 'root', storage, - serialize: (outboundState) => compressToUTF16(JSON.stringify(outboundState)), - deserialize: (inboundState) => parser(decompressFromUTF16(inboundState)) + serialize: outboundState => compressToUTF16(JSON.stringify(outboundState)), + deserialize: inboundState => parser(decompressFromUTF16(inboundState)), }; const persistedReducer = persistReducer(persistConfig, rootReducers); @@ -114,29 +114,32 @@ export function TeamReport({ match }) { [], ); - const handleSelectTeam = useCallback((event, selectedTeam, index) => { - if (event.target.checked) { - if (selectedTeams.length < 4) { - setSelectedTeams([...selectedTeams, { selectedTeam, index }]); + const handleSelectTeam = useCallback( + (event, selectedTeam, index) => { + if (event.target.checked) { + if (selectedTeams.length < 4) { + setSelectedTeams([...selectedTeams, { selectedTeam, index }]); + } + } else { + setSelectedTeams(prevSelectedTeams => + prevSelectedTeams.filter(team => team.selectedTeam._id !== selectedTeam._id), + ); } - } else { - setSelectedTeams(prevSelectedTeams => - prevSelectedTeams.filter(team => team.selectedTeam._id !== selectedTeam._id), - ); - } - }, [selectedTeams]); + }, + [selectedTeams], + ); - const debounceSearchByName = debounce((value) => { + const debounceSearchByName = debounce(value => { setSearchParams(prevParams => ({ ...prevParams, teamName: value, })); - }, 300); - - function handleSearchByName(event) { - event.persist(); - debounceSearchByName(event.target.value); - } + }, 300); + + function handleSearchByName(event) { + event.persist(); + debounceSearchByName(event.target.value); + } function handleCheckboxChange(event) { const { id, checked } = event.target; @@ -165,18 +168,24 @@ export function TeamReport({ match }) { } const memoizedSearchResults = useMemo(() => { - return allTeams.filter(team => { - const isMatchedName = team.teamName.toLowerCase().includes(searchParams.teamName.toLowerCase()); - const isMatchedCreatedDate = moment(team.createdDatetime).isSameOrAfter( - moment(searchParams.createdAt).startOf('day'), - ); - const isMatchedModifiedDate = moment(team.modifiedDatetime).isSameOrAfter( - moment(searchParams.modifiedAt).startOf('day'), - ); - const isActive = team.isActive === searchParams.isActive; - const isInactive = team.isActive !== searchParams.isInactive; - return isMatchedName && isMatchedCreatedDate && isMatchedModifiedDate && (isActive || isInactive); - }).slice(0, 5); + return allTeams + .filter(team => { + const isMatchedName = team.teamName + .toLowerCase() + .includes(searchParams.teamName.toLowerCase()); + const isMatchedCreatedDate = moment(team.createdDatetime).isSameOrAfter( + moment(searchParams.createdAt).startOf('day'), + ); + const isMatchedModifiedDate = moment(team.modifiedDatetime).isSameOrAfter( + moment(searchParams.modifiedAt).startOf('day'), + ); + const isActive = team.isActive === searchParams.isActive; + const isInactive = team.isActive !== searchParams.isInactive; + return ( + isMatchedName && isMatchedCreatedDate && isMatchedModifiedDate && (isActive || isInactive) + ); + }) + .slice(0, 5); }, [allTeams, searchParams]); function handleDate(date) { @@ -194,16 +203,17 @@ export function TeamReport({ match }) { useEffect(() => { let isMounted = true; // flag to check component mount status - + if (match) { dispatch(getTeamDetail(match.params.teamId)); - + dispatch(getTeamMembers(match.params.teamId)).then(result => { - if (isMounted) { // Only update state if component is still mounted + if (isMounted) { + // Only update state if component is still mounted setTeamMembers([...result]); } }); - + dispatch(getAllUserTeams()) .then(result => { if (isMounted) { @@ -214,17 +224,18 @@ export function TeamReport({ match }) { .then(result => { const allTeamMembersPromises = result.map(team => dispatch(getTeamMembers(team._id))); Promise.all(allTeamMembersPromises).then(results => { - if (isMounted) { // Only update state if component is still mounted + if (isMounted) { + // Only update state if component is still mounted setAllTeamsMembers([...results]); } }); }); } - + return () => { isMounted = false; // Set the flag as false when the component unmounts }; - }, [dispatch, match]); // include all dependencies in the dependency array + }, [dispatch, match]); // include all dependencies in the dependency array // Get Total Tangible Hours this week [main TEAM] const [teamMembersWeeklyEffort, setTeamMembersWeeklyEffort] = useState([]); @@ -342,7 +353,12 @@ export function TeamReport({ match }) { contentClassName="team-report-blocks" darkMode={darkMode} renderProfile={() => ( - } name={team.teamName} darkMode={darkMode}> + } + name={team.teamName} + darkMode={darkMode} + >
{moment(team.createdDatetime).format('MMM-DD-YY')}

Created Date

@@ -352,18 +368,13 @@ export function TeamReport({ match }) { >
-
-
+
+
★ Team ID: {team._id}
- {/* - This LoginPrivilegesSimulation component will be removed once the backend team link the login privileges. - It is just to simulate the toggle between the login privileges. The logic is - inside the userLoginPrivileges.jsx file. - */} - {/* */} - Last updated: - {moment(team.modifiedDatetime).format('MMM-DD-YY')} +
+ Last updated: {moment(team.modifiedDatetime).format('MMM-DD-YY')} +
@@ -384,7 +395,10 @@ export function TeamReport({ match }) {
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} -