Skip to content

Commit d208df8

Browse files
one-communityone-community
authored
Merge pull request #2816 from OneCommunityGlobal/Sai_Preetham_Team_Member_Page_Search_Functionality_Missing
Siva: Take over from Preetham - Fix TeamReport search functionality and resolve React errors
2 parents 40346f2 + 3504404 commit d208df8

2 files changed

Lines changed: 117 additions & 36 deletions

File tree

‎dummy.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// trigger reopen

‎src/components/Reports/TeamReport/TeamReport.jsx‎

Lines changed: 116 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,12 @@ export function TeamReport({ match }) {
4343

4444
const [selectedTeams] = useState([]);
4545

46+
// Get all teams from Redux state
47+
const allTeams = useSelector(state => state.allTeamsData.allTeams) || [];
48+
49+
// State to track which team's members are being shown
50+
const [showMembersForTeam, setShowMembersForTeam] = useState(null);
51+
4652
// Create a state variable to store the selected radio input
4753
// eslint-disable-next-line no-unused-vars
4854
const [selectedInput, setSelectedInput] = useState('isManager');
@@ -53,6 +59,75 @@ export function TeamReport({ match }) {
5359
setSelectedInput(event.target.value);
5460
};
5561

62+
// Helper function to format status
63+
// eslint-disable-next-line no-unused-vars
64+
const handleStatus = (isActive) => {
65+
return isActive ? 'Active' : 'Inactive';
66+
};
67+
68+
// Helper function to format dates
69+
// eslint-disable-next-line no-unused-vars
70+
const handleDate = (date) => {
71+
if (!date) return 'N/A';
72+
return moment(date).format('MMM-DD-YY');
73+
};
74+
75+
// Helper function to handle team selection
76+
// eslint-disable-next-line no-unused-vars
77+
const handleSelectTeam = (event, selectedTeam, index) => {
78+
// This function would handle team selection logic
79+
// Implementation depends on your requirements
80+
// eslint-disable-next-line no-console
81+
console.log('Team selected:', selectedTeam, 'Index:', index);
82+
};
83+
84+
// Helper function to get current team members
85+
// eslint-disable-next-line no-unused-vars
86+
const getCurrentTeamMembers = (teamId) => {
87+
// This function would fetch and display current team members
88+
// Implementation depends on your requirements
89+
// eslint-disable-next-line no-console
90+
console.log('Getting members for team:', teamId);
91+
setShowMembersForTeam(showMembersForTeam === teamId ? null : teamId);
92+
};
93+
94+
// Main search function that filters teams based on search parameters
95+
// eslint-disable-next-line no-unused-vars
96+
const handleSearch = () => {
97+
if (!allTeams || !Array.isArray(allTeams)) {
98+
return [];
99+
}
100+
101+
return allTeams.filter(teamData => {
102+
// Filter by team name
103+
if (searchParams.teamName && !teamData.teamName?.toLowerCase().includes(searchParams.teamName.toLowerCase())) {
104+
return false;
105+
}
106+
107+
// Filter by creation date
108+
if (searchParams.createdAt && new Date(teamData.createdDatetime) < searchParams.createdAt) {
109+
return false;
110+
}
111+
112+
// Filter by modification date
113+
if (searchParams.modifiedAt && new Date(teamData.modifiedDatetime) < searchParams.modifiedAt) {
114+
return false;
115+
}
116+
117+
// Filter by active status
118+
if (searchParams.isActive && !teamData.isActive) {
119+
return false;
120+
}
121+
122+
// Filter by inactive status
123+
if (searchParams.isInactive && teamData.isActive) {
124+
return false;
125+
}
126+
127+
return true;
128+
});
129+
};
130+
56131
const getTeamDetails = async teamId => {
57132
try {
58133
if (
@@ -119,6 +194,13 @@ export function TeamReport({ match }) {
119194
}
120195
}, []);
121196

197+
// Ensure teams are loaded when component mounts
198+
useEffect(() => {
199+
if (!allTeams || allTeams.length === 0) {
200+
dispatch(getAllUserTeams());
201+
}
202+
}, [dispatch, allTeams]);
203+
122204
useEffect(() => {
123205
let isMounted = true; // flag to check component mount status
124206
const fetchTeamDetails = async teamId => {
@@ -432,61 +514,59 @@ export function TeamReport({ match }) {
432514
</td>
433515
</tr>
434516
</thead>
435-
{allTeamsMembers?.length > 1 ? (
517+
{allTeamsMembers && allTeamsMembers.length > 0 ? (
436518
<tbody className="table">
437519
{/* eslint-disable-next-line no-shadow */}
438520
{/* Note: the handleSearch() function will cause the white page error */}
439-
{/* handleSearch().map((team, index) => (
440-
<tr className={`table-row ${darkMode ? 'bg-yinmn-blue text-light table-hover-dark' : ''}`} key={team._id}>
521+
{handleSearch().map((teamData, index) => (
522+
<tr className={`table-row ${darkMode ? 'bg-yinmn-blue text-light table-hover-dark' : ''}`} key={teamData._id}>
441523
<td>
442524
<input
443525
type="checkbox"
444-
onChange={event => handleSelectTeam(event, team, index)}
445-
checked={selectedTeams.some(st => st.selectedTeam._id === team._id)}
526+
onChange={event => handleSelectTeam(event, teamData, index)}
527+
checked={selectedTeams.some(st => st.selectedTeam._id === teamData._id)}
446528
disabled={
447529
selectedTeams.length === 4 &&
448-
!selectedTeams.some(st => st.selectedTeam._id === team._id)
530+
!selectedTeams.some(st => st.selectedTeam._id === teamData._id)
449531
}
450532
/>
451533
</td>
452534
<td>
453-
<strong>{team?.teamName}</strong>
535+
<strong>{teamData?.teamName}</strong>
454536
</td>
455-
<td>{handleStatus(team?.isActive)}</td>
537+
<td>{handleStatus(teamData?.isActive)}</td>
456538
<td>
457-
<Dropdown>
458-
<Dropdown.Toggle
459-
variant="success"
460-
id="dropdown-basic"
461-
style={{ backgroundColor: '#996cd3', border: 'none' }}
539+
<div>
540+
<button
541+
type="button"
542+
className="btn btn-sm"
543+
style={{ backgroundColor: '#996cd3', border: 'none', color: 'white' }}
544+
onClick={() => getCurrentTeamMembers(teamData?._id)}
462545
>
463-
<span onClick={()=>getCurrentTeamMembers(team?._id)}>
464-
See
465-
</span>
466-
</Dropdown.Toggle>
467-
<Dropdown.Menu>
468-
{allTeamsMembers[index].length > 1 ? (
469-
allTeamsMembers[index].map(member => (
470-
<div key={`${team?._id}-${member?._id}`}>
471-
<Dropdown.Item href="#/action-1">
546+
See
547+
</button>
548+
{showMembersForTeam === teamData?._id && (
549+
<div className="mt-2 p-2 border rounded" style={{ backgroundColor: '#f8f9fa' }}>
550+
{allTeamsMembers[index] && allTeamsMembers[index].length > 1 ? (
551+
allTeamsMembers[index].map(member => (
552+
<div key={`${teamData?._id}-${member?._id}`} className="mb-1">
472553
{member?.firstName} {member?.lastName}
473-
</Dropdown.Item>
474-
<Dropdown.Divider />
554+
</div>
555+
))
556+
) : (
557+
<div className="text-muted">
558+
<strong>This team has no members!</strong>
475559
</div>
476-
))
477-
) : (
478-
<Dropdown.Item href="#/action-1">
479-
<strong>This team has no members!</strong>
480-
</Dropdown.Item>
481-
)}
482-
</Dropdown.Menu>
483-
</Dropdown>
560+
)}
561+
</div>
562+
)}
563+
</div>
484564
</td>
485-
<td>{team._id}</td>
486-
<td>{handleDate(team?.createdDatetime)}</td>
487-
<td>{handleDate(team?.modifiedDatetime)}</td>
565+
<td>{teamData._id}</td>
566+
<td>{handleDate(teamData?.createdDatetime)}</td>
567+
<td>{handleDate(teamData?.modifiedDatetime)}</td>
488568
</tr>
489-
)) */}
569+
))}
490570
</tbody>
491571
) : (
492572
<tbody>

0 commit comments

Comments
 (0)