-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
General search and filtration admin (#184)
* general-search-admin * Will add results tab general search updates resolved conflicts admin general search updates fixing code climate issues * resolving conflicts --------- Co-authored-by: MUGISHA Joseph <143373965+mugishaj092@users.noreply.github.com>
- Loading branch information
Showing
16 changed files
with
556 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import React, { useState } from "react"; | ||
import * as icons from "react-icons/ai"; | ||
import { useNavigate } from "react-router-dom"; | ||
|
||
const SearchBar = () => { | ||
const [searchTerm, setSearchTerm] = useState(''); | ||
const [filterAttribute, setFilterAttribute] = useState(''); | ||
const navigate = useNavigate(); | ||
|
||
const handleSearch = () => { | ||
if (searchTerm.trim()) { | ||
navigate(`search?q=${searchTerm}&filter=${filterAttribute}`); | ||
} | ||
}; | ||
|
||
return ( | ||
<div className="flex items-center"> | ||
<div className="flex bg-gray-100 dark:bg-dark-tertiary rounded-xl h-10 items-center border-2"> | ||
<select | ||
className="bg-gray-800 text-white border-none text-sm dark:text-gray-300 outline-none pl-2 py-2 rounded-l-xl cursor-pointer" | ||
value={filterAttribute} | ||
onChange={(e) => setFilterAttribute(e.target.value)} | ||
> | ||
<option value="">All</option> | ||
<option value="firstname">First Name</option> | ||
<option value="lastname">Last Name</option> | ||
<option value="email">Email</option> | ||
<option value="roleName">Role Name</option> | ||
<option value="title">Title</option> | ||
<option value="phase">Phase</option> | ||
<option value="name">Name</option> | ||
</select> | ||
<input | ||
type="text" | ||
placeholder="Search devpulse" | ||
className="bg-transparent outline-none px-2 text-gray-700 dark:text-gray-300 w-96" | ||
value={searchTerm} | ||
onChange={(e) => setSearchTerm(e.target.value)} | ||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()} | ||
/> | ||
<button className="px-4" onClick={handleSearch}> | ||
<icons.AiOutlineSearch className="cursor-pointer text-cyan-300" /> | ||
</button> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default SearchBar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import React from 'react'; | ||
|
||
const SearchResultItem= ({ | ||
activeItem, | ||
name, | ||
length, | ||
results, | ||
Component, | ||
noResultsMessage | ||
}) => { | ||
if (activeItem !== name) return null; | ||
|
||
return length > 0 ? ( | ||
<Component {...{ [name.toLowerCase()]: results }} /> | ||
) : ( | ||
<p className="text-center py-6 text-white">{noResultsMessage}</p> | ||
); | ||
}; | ||
|
||
export default SearchResultItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react'; | ||
|
||
const Applicationcycles = ({ applicationCycles }: { applicationCycles: Array<any> }) => { | ||
return ( | ||
<div className="w-full"> | ||
{applicationCycles.length > 0 ? ( | ||
<table className="min-w-full bg-dark-900 border-separate border-spacing-0"> | ||
<thead> | ||
<tr className="bg-dark-800 text-white"> | ||
<th className="py-3 px-6 border">Name</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{applicationCycles.map((applicationCycle, index) => ( | ||
<tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center"> | ||
<td className="py-4 px-6 border"> | ||
{applicationCycle.name} | ||
</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
</table> | ||
) : ( | ||
<div className="text-center py-6 text-white"> | ||
<p>No application cycles found.</p> | ||
</div> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default Applicationcycles; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import React from 'react'; | ||
|
||
const Cohorts = ({ cohorts }: { cohorts: Array<any> }) => { | ||
return ( | ||
<div className="w-full"> | ||
{cohorts.length > 0 ? ( | ||
<table className="min-w-full bg-dark-900 border-separate border-spacing-0"> | ||
<thead> | ||
<tr className="bg-dark-800 text-white"> | ||
<th className="py-3 px-6 border">Title</th> | ||
<th className="py-3 px-6 border">Program</th> | ||
<th className="py-3 px-6 border">Cycle</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{cohorts.map((cohort, index) => ( | ||
<tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center"> | ||
<td className="py-4 px-6 border"> | ||
{cohort.title} | ||
</td> | ||
<td className="py-4 px-6 border"> | ||
{cohort.program.title} | ||
</td> | ||
<td className="py-4 px-6 border"> | ||
{cohort.cycle.name} | ||
</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
</table> | ||
) : ( | ||
<div className="text-center py-6 text-white"> | ||
<p>No cohorts found.</p> | ||
</div> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default Cohorts; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from 'react'; | ||
|
||
const Jobs = ({ jobs }: { jobs: Array<any> }) => { | ||
return ( | ||
<div className="w-full"> | ||
{jobs.length > 0 ? ( | ||
<table className="min-w-full bg-dark-900 border-separate border-spacing-0"> | ||
<thead> | ||
<tr className="bg-dark-800 text-white"> | ||
<th className="py-3 px-6 border">Job Name</th> | ||
<th className="py-3 px-6 border">Job Description</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{jobs.map((job, index) => ( | ||
<tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center"> | ||
<td className="py-4 px-6 border"> | ||
{job.title} | ||
</td> | ||
<td className="py-4 px-6 border"> | ||
{job.description} | ||
</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
</table> | ||
) : ( | ||
<div className="text-center py-6 text-white"> | ||
<p>No jobs found.</p> | ||
</div> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default Jobs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import React from 'react'; | ||
|
||
const Programs = ({ programs }: { programs: Array<any> }) => { | ||
return ( | ||
<div className="w-full"> | ||
{programs.length > 0 ? ( | ||
<table className="min-w-full bg-dark-900 border-separate border-spacing-0"> | ||
<thead> | ||
<tr className="bg-dark-800 text-white"> | ||
<th className="py-3 px-6 border">Title</th> | ||
<th className="py-3 px-6 border">Description</th> | ||
<th className="py-3 px-6 border">Main Objective</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{programs.map((program, index) => ( | ||
<tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center"> | ||
<td className="py-4 px-6 border"> | ||
{program.title} | ||
</td> | ||
<td className="py-4 px-6 border"> | ||
{program.description} | ||
</td> | ||
<td className="py-4 px-6 border"> | ||
{program.mainObjective} | ||
</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
</table> | ||
) : ( | ||
<div className="text-center py-6 text-white"> | ||
<p>No programs found.</p> | ||
</div> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default Programs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from 'react'; | ||
|
||
const Roles = ({ roles }: { roles: Array<any> }) => { | ||
return ( | ||
<div className="w-full"> | ||
{roles.length > 0 ? ( | ||
<table className="min-w-full bg-dark-900 border-separate border-spacing-0"> | ||
<thead> | ||
<tr className="bg-dark-800 text-white"> | ||
<th className="py-3 px-6 border">Role Name</th> | ||
<th className="py-3 px-6 border">Role Description</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{roles.map((role, index) => ( | ||
<tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center"> | ||
<td className="py-4 px-6 border"> | ||
{role.roleName} | ||
</td> | ||
<td className="py-4 px-6 border"> | ||
{role.description} | ||
</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
</table> | ||
) : ( | ||
<div className="text-center py-6 text-white"> | ||
<p>No roles found.</p> | ||
</div> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default Roles; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import React from 'react'; | ||
|
||
const Trainees = ({ trainees }: { trainees: Array<any> }) => { | ||
return ( | ||
<div className="w-full"> | ||
{trainees.length > 0 ? ( | ||
<table className="min-w-full bg-dark-900 border-separate border-spacing-0"> | ||
<thead> | ||
<tr className="bg-dark-800 text-white"> | ||
<th className="py-3 px-6 border">First Name</th> | ||
<th className="py-3 px-6 border">Last Name</th> | ||
<th className="py-3 px-6 border">Email</th> | ||
<th className="py-3 px-6 border">Cycle</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{trainees.map((trainee, index) => ( | ||
<tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center"> | ||
<td className="py-4 px-6 border"> | ||
{trainee.firstName} | ||
</td> | ||
<td className="py-4 px-6 border"> | ||
{trainee.lastName} | ||
</td> | ||
<td className="py-4 px-6 border"> | ||
{trainee.email} | ||
</td> | ||
<td className="py-4 px-6 border"> | ||
{trainee.cycle_id.name} | ||
</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
</table> | ||
) : ( | ||
<div className="text-center py-6 text-white"> | ||
<p>No trainees found.</p> | ||
</div> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default Trainees; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import React from 'react'; | ||
|
||
const Users = ({ users }: { users: Array<any> }) => { | ||
return ( | ||
<div className="w-full"> | ||
{users.length > 0 ? ( | ||
<table className="min-w-full bg-dark-900 border-separate border-spacing-0"> | ||
<thead> | ||
<tr className="bg-dark-800 text-white"> | ||
<th className="py-3 px-6 border">First Name</th> | ||
<th className="py-3 px-6 border">Last Name</th> | ||
<th className="py-3 px-6 border">Email</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{users.map((user, index) => ( | ||
<tr key={index} className="odd:bg-dark-700 even:bg-dark-800 text-white text-center"> | ||
<td className="py-4 px-6 border"> | ||
{user.firstname} | ||
</td> | ||
<td className="py-4 px-6 border"> | ||
{user.lastname} | ||
</td> | ||
<td className="py-4 px-6 border"> | ||
{user.email} | ||
</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
</table> | ||
) : ( | ||
<div className="text-center py-6 text-white"> | ||
<p>No users found.</p> | ||
</div> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default Users; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.