general search updates

atlp-rwanda · Oct 7, 2024 · 41112f8 · 41112f8
1 parent 1a0a3d4
commit 41112f8
Show file tree

Hide file tree

Showing 10 changed files with 305 additions and 235 deletions.
diff --git a/src/components/search/applicationcycles.tsx b/src/components/search/applicationcycles.tsx
@@ -1,11 +1,32 @@
-import React from 'react'
+import React from 'react';
 
-const Applicationcycles = () => {
+const Applicationcycles = ({ applicationCycles }: { applicationCycles: Array<any> }) => {
   return (
-    <div>
-          Applicationcycles
+    <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
+export default Applicationcycles;
diff --git a/src/components/search/cohorts.tsx b/src/components/search/cohorts.tsx
@@ -1,11 +1,40 @@
-import React from 'react'
+import React from 'react';
 
-const Cohorts = () => {
+const Cohorts = ({ cohorts }: { cohorts: Array<any> }) => {
   return (
-    <div>
-        Cohorts
+    <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
+export default Cohorts;
diff --git a/src/components/search/jobs.tsx b/src/components/search/jobs.tsx
@@ -1,11 +1,36 @@
-import React from 'react'
+import React from 'react';
 
-const Jobs = () => {
+const Jobs = ({ jobs }: { jobs: Array<any> }) => {
   return (
-    <div>
-      jobs
+    <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
+export default Jobs;
diff --git a/src/components/search/programs.tsx b/src/components/search/programs.tsx
@@ -1,12 +1,40 @@
-import React from 'react'
+import React from 'react';
 
-
-const Programs = () => {
+const Programs = ({ programs }: { programs: Array<any> }) => {
   return (
-    <div>
-          Programs
+    <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
+export default Programs;
diff --git a/src/components/search/roles.tsx b/src/components/search/roles.tsx
@@ -1,11 +1,36 @@
-import React from 'react'
+import React from 'react';
 
-const Roles = () => {
+const Roles = ({ roles }: { roles: Array<any> }) => {
   return (
-    <div>
-      roles
+    <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
+export default Roles;
diff --git a/src/components/search/trainees.tsx b/src/components/search/trainees.tsx
@@ -1,11 +1,44 @@
-import React from 'react'
+import React from 'react';
 
-const Trainees = () => {
+const Trainees = ({ trainees }: { trainees: Array<any> }) => {
   return (
-    <div>
-          Trainees
+    <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
+export default Trainees;
diff --git a/src/components/search/users.tsx b/src/components/search/users.tsx
@@ -1,11 +1,40 @@
-import React from 'react'
+import React from 'react';
 
-const Users = () => {
+const Users = ({ users }: { users: Array<any> }) => {
   return (
-    <div>
-      users
+    <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
+export default Users;
diff --git a/src/components/sidebar/navHeader.tsx b/src/components/sidebar/navHeader.tsx
@@ -13,6 +13,7 @@ const logo: string = require("../../assets/logo.svg").default;
 const profile: string = require("../../assets/avatar.png").default;
 const LogoWhite: string = require("../../assets/logoWhite.svg").default;
 import jwtDecode from "jwt-decode";
+import { useNavigate } from "react-router-dom";
 import SearchResults from "../../components/SearchResults";
 
 const placeholderImage = profile;
@@ -39,10 +40,12 @@ function NavBar() {
 
   const [searchTerm, setSearchTerm] = useState('');
   const [filterAttribute, setFilterAttribute] = useState('');
-  const [triggerSearch, setTriggerSearch] = useState(false);
+  const navigate = useNavigate();
 
   const handleSearch = () => {
-    setTriggerSearch(true);
+    if (searchTerm.trim()) {
+      navigate(`search?q=${searchTerm}&filter=${filterAttribute}`);
+    }
   };
 
   return (
@@ -99,25 +102,29 @@ function NavBar() {
             value={filterAttribute}
             onChange={(e) => setFilterAttribute(e.target.value)}
           >
-            <option value="all">All</option>
-            <option value="category1">Cat 1</option>
-            <option value="category2">Cat 2</option>
+            <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"
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
           />
           <button className="px-4" onClick={handleSearch}>
             <icons.AiOutlineSearch className="text-gray-600 cursor-pointer hover:text-cyan-300" />
           </button>
         </div>
       </div>
 
-      {triggerSearch && <SearchResults searchTerm={searchTerm} filterAttribute={filterAttribute} />}
-
         <div className="flex items-center mr-4">
           <span className="flex items-center">
             {" "}