added job applications page and connected to db

ChandelAnish · Sep 10, 2024 · d5954f7 · d5954f7
1 parent 7067c71
commit d5954f7
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 2 deletions.
diff --git a/client/main-page/recruiter/index.html b/client/main-page/recruiter/index.html
@@ -364,9 +364,21 @@ <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 up
 
                         <i class="fa-solid fa-paper-plane" style="color: rgb(107 114 128); font-size: 20px;"></i>
 
-                        <span class="flex-1 ms-3 whitespace-nowrap">Job Requests</span>
+                        <span class="flex-1 ms-3 whitespace-nowrap">Requests Sent</span>
                     </a>
                 </li>
+
+                <li>
+                    <a href="./job-applications/index.html"
+                        class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+
+                        <i class="fa-brands fa-wpforms"
+                            style="color: rgb(107 114 128); font-size: 20px; font-weight: bolder;"></i>
+
+                        <span class="flex-1 ms-3 whitespace-nowrap">Job Applications</span>
+                    </a>
+                </li>
+
                 <li>
                     <a href="./work-progress/index.html"
                         class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">

diff --git a/client/main-page/recruiter/job-applications/index.html b/client/main-page/recruiter/job-applications/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../../../assets/favicon.png">
+    <title>Job Applications</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container mt-5">
+        <div class="card friend-request-card mx-auto p-3 shadow-sm">
+            <div class="d-flex justify-content-between">
+                <h5>Applicants</h5>
+            </div>
+            <div class="friend-request-list mt-3" id="applicantsList">
+
+                <!-- Applicants  will be added here-->
+
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/client/main-page/recruiter/job-applications/script.js b/client/main-page/recruiter/job-applications/script.js
@@ -0,0 +1,69 @@
+const BASE_URL = "http://localhost:5000";
+const userdetails = JSON.parse(sessionStorage.getItem("userdetails"));
+
+// Handle Confirm button clicks
+document.querySelectorAll(".confirm-btn").forEach((button) => {
+  button.addEventListener("click", () => {
+    // Remove the parent element of the clicked button (the request item)
+    const requestItem = button.closest(".d-flex");
+    requestItem.remove();
+  });
+});
+
+// Handle Cancel button clicks
+document.querySelectorAll(".cancel-btn").forEach((button) => {
+  button.addEventListener("click", () => {
+    // Remove the parent element of the clicked button (the request item)
+    const requestItem = button.closest(".d-flex");
+    requestItem.remove();
+  });
+});
+
+//get the details of the applicants
+const getLabourInfo = async (username) => {
+  const response = await fetch(`${BASE_URL}/labour-info/${username}`);
+  const data = await response.json();
+//   console.log(data);
+  return await data;
+};
+
+//get all the applications sent to this recruiter
+const getApplications = async (username) => {
+  const response = await fetch(
+    `${BASE_URL}/job-application-recruiter/${username}`
+  );
+  const data = await response.json();
+  //   console.log(data);
+  return await data;
+};
+
+addEventListener("load", async () => {
+  const applications = await getApplications(userdetails.userdetails);
+  displayApplicants(applications);
+});
+
+function getStars(rating) {
+    return '★'.repeat(rating) + '☆'.repeat(5 - rating);
+}
+
+const displayApplicants = async(applications) => {
+  applications.forEach(async(item) => {
+    console.log(item);
+    const applicantDetails = await getLabourInfo(item.applicant);
+    console.log(applicantDetails);
+    document.getElementById(
+      "applicantsList"
+    ).innerHTML += `<div class="d-flex justify-content-between align-items-center mb-3">
+                    <div class="d-flex align-items-center">
+                        <div>
+                            <strong>${item.applicant} &nbsp;<span class="rating" style="color: gold;">${getStars(2)}</span> </strong><br>
+                            <small>${applicantDetails.completions} Jobs Completed</small>
+                        </div>
+                    </div>
+                    <div>
+                        <button class="btn btn-outline-success me-2 confirm-btn">Hire</button>
+                        <button class="btn btn-outline-danger cancel-btn">Reject</button>
+                    </div>
+                </div>`;
+  });
+};
diff --git a/client/main-page/recruiter/job-applications/style.css b/client/main-page/recruiter/job-applications/style.css
@@ -0,0 +1,26 @@
+.friend-request-card {
+    max-width: 80rem;
+    border-radius: 10px;
+}
+
+.view-all-link {
+    font-size: 0.9rem;
+    color: #007bff;
+}
+
+.friend-request-list .d-flex {
+    transition: all 0.2s ease;
+}
+
+.friend-request-list .d-flex:hover {
+    background-color: #f9f9f9;
+    border-radius: 10px;
+    padding: 10px;
+    cursor: pointer;
+}
+
+@media (max-width: 576px) {
+    .friend-request-card {
+        max-width: 100%;
+    }
+}
diff --git a/server/controllers/controllers.js b/server/controllers/controllers.js
@@ -254,12 +254,13 @@ const getSingleJobApplication = async (req, res) => {
         console.log(error)
     }
 }
+
 //get all Job Applications sent to recruiter
 const getAllJobApplication = async (req, res) => {
     try {
         const allApplications = await prisma.applications.findMany({
             where: {appliedToUser:req.body.username},
-            include: { appliedby: true }
+            include: { appliedby: true ,job:true}
         });
         return res.status(200).json(allApplications)
     } catch (error) {