Fix job Search (#199)

Co-authored-by: vegetason <irakozepaulin12@example.com>
atlp-rwanda · Oct 14, 2024 · 6727540 · 6727540
1 parent 78b4b3b
commit 6727540
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 51 deletions.
diff --git a/src/components/sidebar/sidebarItems.tsx b/src/components/sidebar/sidebarItems.tsx
@@ -34,6 +34,11 @@ export const sidebarItems1 = [
     icon: <Icon icon="akar-icons:globe"></Icon>,
     title: "Applications",
   },
+  {
+    path: "Trainee-applicants",
+    icon: <Icon icon="ic:round-people"></Icon>,
+    title: "Trainees-Applicants",
+  },
   {
     path: "cohort",
     icon: <Icon icon="fa6-solid:graduation-cap"></Icon>,
@@ -44,7 +49,6 @@ export const sidebarItems1 = [
     icon: <Icon icon="game-icons:cycle"></Icon>,
     title: "Application Cycles",
   },
-
   {
     path: "grading",
     icon: <Icon icon="bxs:dashboard"></Icon>,

diff --git a/src/pages/Applications.tsx b/src/pages/Applications.tsx
@@ -15,7 +15,7 @@ import { connect, useSelector } from "react-redux";
 import { HiDotsVertical } from "react-icons/hi";
 import Box from "@mui/material/Box";
 import { useCustomPagination } from "components/Pagination/useCustomPagination";
-
+import { useTheme } from "../hooks/darkmode";
 type Props = {};
 
 interface Update {
@@ -35,7 +35,30 @@ const Applications = (props: any) => {
     pageSize: 5,
     page: 1,
   });
+  const { theme, setTheme } = useTheme();
+  const customTheme = (theme: any) => {
+    return {
+      ...theme,
+      colors: {
+        ...theme.colors,
+        text: "light-gray",
+        primary25: "#E5E7EB",
+        primary: "#d6dfdf",
+        neutral0: "white",
+      },
+    };
+  };
 
+  const darkTheme = (theme: any) => {
+    return {
+      ...theme,
+      colors: {
+        primary25: "#404657",
+        primary: "#d6dfdf",
+        neutral0: "#293647",
+      },
+    };
+  };
   const [deleteWarn, setDeleteWarn] = useState<Update>({
     id: "",
     open: false,
@@ -89,15 +112,42 @@ const Applications = (props: any) => {
             <div>
               <div className="bg-light-bg dark:bg-dark-frame-bg  min-h-screen overflow-y-hidden overflow-x-hidden">
                 <div className="flex items-left px-8 pt-1">
-                  <Link to="/filter_trainee-applicants">
-                    <button
-                      className="flex bg-primary dark:bg-[#56C870] rounded-md py-2 mt-2 px-4 text-white font-medium cursor-pointer"
-                      disabled
-                    >
-                      <icons.AiOutlineSearch className="mt-1 mr-1 font-bold" />{" "}
-                      Search
-                    </button>
-                  </Link>
+                  <div className="w-full px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
+                      <Select
+                        className="sm:text-sm w-full sm:w-40 rounded-bt-rd dark:text-ltb"
+                        options={[{ value: "", label: "Select by" }]}
+                        defaultValue={{ value: "", label: "Select by" }}
+                        theme={theme ? customTheme : darkTheme}
+                      />
+                      <div className="w-full sm:w-auto flex-grow">
+                        <div className="relative">
+                          <input
+                            className="w-full bg-row-gray dark:bg-[#293647] dark:text-ltb border border-bdr dark:border-cg dark:border-opacity-5 rounded-md py-2 pl-9 pr-4 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-[#56C870] text-sm"
+                            placeholder="Search"
+                            type="text"
+                            name="search"
+                          />
+                          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                            <svg
+                              className="h-5 w-5 text-gray-400"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
                 {/* Filter Bar */}
                 <div>

diff --git a/src/pages/Applications/AdminViewApplications.tsx b/src/pages/Applications/AdminViewApplications.tsx
@@ -4,10 +4,13 @@ import NavBar from '../../components/sidebar/navHeader';
 import { fetchApplications } from '../../redux/actions/adminListApplications';
 import { HiDotsVertical } from 'react-icons/hi';
 import { Pagination } from 'flowbite-react';
-
+import Select from "react-select";
+import { useTheme } from "../../hooks/darkmode";
+import * as icons from "react-icons/ai";
 const ListApplications = () => {
   const navigate = useNavigate();
   const [applications, setApplications]: any = useState();
+  const { theme, setTheme } = useTheme();
 
   const [activePage, setActivePage] = useState(1);
   const [itemsCountPerPage, setItemsCountPerPage] = useState(10);
@@ -47,7 +50,29 @@ const ListApplications = () => {
   ) => {
     setItemsCountPerPage(Number(event.target.value));
   };
+  const customTheme = (theme: any) => {
+    return {
+      ...theme,
+      colors: {
+        ...theme.colors,
+        text: "light-gray",
+        primary25: "#E5E7EB",
+        primary: "#d6dfdf",
+        neutral0: "white",
+      },
+    };
+  };
 
+  const darkTheme = (theme: any) => {
+    return {
+      ...theme,
+      colors: {
+        primary25: "#404657",
+        primary: "#d6dfdf",
+        neutral0: "#293647",
+      },
+    };
+  };
   const totalApplications = applications?.length;
 
   return (
@@ -57,14 +82,42 @@ const ListApplications = () => {
           <div className='w-full'>
             <div>
               <div className='bg-light-bg dark:bg-dark-frame-bg min-h-screen overflow-y-hidden overflow-x-hidden'>
-                <div className='flex items-left px-8'>
-                  <div className='flex py-2 pb-8 w-fit'>
-                    <Link to='/filter-applications'>
-                      <button className='flex bg-primary dark:bg-[#56C870] rounded-md py-2 mt-2 px-4 text-white font-medium cursor-pointer'>
-                        Search
-                      </button>
-                    </Link>
-                    <div></div>
+              <div className="w-full px-4 sm:px-6 lg:px-8 py-4">
+                  <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
+                    <Select
+                      className="sm:text-sm w-full sm:w-40 rounded-bt-rd dark:text-ltb"
+                      options={[
+                        { value: "", label: "Select by" },
+                      ]}
+                      defaultValue={{ value: "", label: "Select by" }}
+                      theme={theme ? customTheme : darkTheme}
+                    />
+                    <div className="w-full sm:w-auto flex-grow">
+                      <div className="relative">
+                        <input
+                          className="w-full bg-row-gray dark:bg-[#293647] dark:text-ltb border border-bdr dark:border-cg dark:border-opacity-5 rounded-md py-2 pl-9 pr-4 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-[#56C870] text-sm"
+                          placeholder="Search"
+                          type="text"
+                          name="search"
+                        />
+                        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                          <svg
+                            className="h-5 w-5 text-gray-400"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
                 <div className='px-8'>

diff --git a/src/pages/JobPost/job.tsx b/src/pages/JobPost/job.tsx
@@ -409,7 +409,7 @@ const Jobs = (props: any) => {
                             </tr>
                           </thead>
                           <tbody className="overflow-y-auto">
-                            {fetchJobPostStates?.data?.map((item: any) => (
+                            {allfilteredjobPosts?.data?.map((item: any) => (
                               <tr
                                 className="hover:bg-slate-700 transition-colors"
                                 key={item.id}

diff --git a/src/redux/actions/filterJobPost.ts b/src/redux/actions/filterJobPost.ts
@@ -10,36 +10,34 @@ export const getAllFilteredJobPosts =
     try {
       const response = await axios.post("/", {
         query: `
-        query FilterJobDetails($input: FilterOptions) {
-          filterJobDetails(input: $input) {
-            title
-            program {
-              _id
-              description
-              duration
-              mainObjective
-              modeOfExecution
-              requirements
+          query Query($input: FilterOptions) {
+            filterJobDetails(input: $input) {
               title
-            }
-            cohort {
-              cycle
-              end
+              program {
+                _id
+                title
+                description
+                mainObjective
+                requirements
+                modeOfExecution
+                duration
+              }
+              cycle {
+                id
+                name
+                startDate
+                endDate
+              }
+              description
               id
-              program
-              start
-              title
+              label
+              link
+              published
+              cohort {
+                title
+              }
             }
-            cycle {
-              startDate
-              name
-              endDate
-            }
-            description
-            id
-            label
-          }
-        }
+         }
       `,
         variables: {
           input: {

diff --git a/src/redux/actions/filterProgramActions.ts b/src/redux/actions/filterProgramActions.ts
@@ -8,9 +8,6 @@ export const getAllFilteredPrograms =
   ({ page, itemsPerPage, All, wordEntered, filterAttribute }: any) =>
   async (dispatch: any) => {
     try {
-      if(filterAttribute==='' || filterAttribute===null){
-        toast.error("Please insert a filter attribute")
-      }
       const datas = await axios.post("/", {
         query: `
       query Query($input: FilterOptions) {