Merge pull request #111 from is212g7t5/ailys/G7T5-197

deadline2359 · web-flow · commit f387392989f5 · 2022-11-06T13:32:53.000+08:00
[G7T5-9 &amp; G7T5-197] HR Add and Remove Skills from Job Role
diff --git a/app/src/api/jobSkill.js b/app/src/api/jobSkill.js
@@ -54,3 +54,34 @@ function extractSkillIdsFromJobSkills(jobSkills) {
   });
   return skillIdArray;
 }
+
+export const createJobSkill = async (jobId, skillId) => {
+  try {
+    const res = await axiosJobSkillInstance.post("/", {
+      job_id: jobId,
+      skill_id: skillId
+    });
+    if (res) {
+      console.log(res.data);
+      return res.data;
+    }
+    throw new Error("No data returned from backend");
+  } catch (error) {
+    console.log(error);
+    return [];
+  }
+}
+
+export const deleteAllSkillsUnderJob = async (jobId) => {
+  try {
+    const res = await axiosJobSkillInstance.delete(`/${jobId}`);
+    if (res) {
+      console.log(res.data);
+      return res.data;
+    }
+    throw new Error("No data returned from backend");
+  } catch (error) {
+    console.log(error);
+    return [];
+  }
+}
diff --git a/app/src/components/course/CourseDescription.jsx b/app/src/components/course/CourseDescription.jsx
@@ -13,7 +13,7 @@ export default function CourseDescription({ courseDesc, skills }) {
     <div className='m-auto flex flex-col w-full p-5 px-10 bg-gray-100 rounded-lg'>
       <p className='text-ellipsis overflow-hidden font-medium text-justify'>{courseDesc}</p>
       {skills.length ? (
-        <div className='flex-grid mt-5'>{renderActiveSkills}</div>
+        <div className='flex flex-wrap mt-5'>{renderActiveSkills}</div>
       ) : (
         "No skills attached to this course"
       )}
diff --git a/app/src/components/course/SkillBadge.jsx b/app/src/components/course/SkillBadge.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 export default function SkillBadge({ skillName }) {
   return (
-    <span className='bg-accent4 text-accent1 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded'>
+    <span className='bg-accent4 text-accent1 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded m-1'>
       {skillName}
     </span>
   );
diff --git a/app/src/components/job/JobTile.jsx b/app/src/components/job/JobTile.jsx
@@ -104,7 +104,7 @@ function CreateEditJobButton({ handleEditJobButtonClick }) {
   );
 }
 
-function CreateDeleteJobButton({showPopUp}){
+function CreateDeleteJobButton({ showPopUp }) {
   return (
     <button
     type='button'
@@ -119,9 +119,7 @@ function CreateDeleteJobButton({showPopUp}){
 
 function CreateInactiveBadge() {
   return (
-    <span className='w-fit bg-gray-100 text-gray-400 mr-2 px-2.5 py-0.5 rounded'>
-      Inactive
-    </span>
+    <span className='w-fit bg-gray-100 text-gray-400 mr-2 px-2.5 py-0.5 rounded'>Inactive</span>
   );
 }
 
@@ -150,14 +148,22 @@ function JobTileButton({ isDetailsOpen, setIsDetailsOpen }) {
 }
 
 function JobTileDescription({ jobDesc, skills }) {
-  const renderSkillsForJobRole = skills.map(({ skillId, skillName, skillDesc }, index) => (
-    <SkillBadge key={`skill-${skillId}`} skillName={skillName} />
-  ));
+  let numberOfInactiveSkills = 0;
+
+  const renderSkillsForJobRole = skills.map(
+    ({ skillId, skillName, skillDesc, isActive }, index) => {
+      if (isActive) {
+        return <SkillBadge key={`skill-${skillId}`} skillName={skillName} />;
+      }
+      numberOfInactiveSkills += 1;
+      return null;
+    },
+  );
 
   return (
     <div className='m-auto flex flex-col w-full p-5 px-10 bg-gray-100 rounded-lg'>
       <p className='text-ellipsis overflow-hidden font-medium text-justify'>{jobDesc}</p>
-      {skills.length ? (
+      {skills.length && numberOfInactiveSkills !== skills.length ? (
         <div className='flex flex-wrap mt-5'>{renderSkillsForJobRole}</div>
       ) : (
         "No current skills"
diff --git a/app/src/components/job/hr/CreateJob.jsx b/app/src/components/job/hr/CreateJob.jsx
@@ -1,16 +1,19 @@
 import { useState } from "react";
 import { createJob } from "src/api/jobs";
+import { createJobSkill } from "src/api/jobSkill";
 import { useUserContext } from "src/contexts/UserContext";
 import CreateJobSuccess from "./CreateJobSuccess";
 import JobNameInput from "./form/JobNameInput";
 import JobDescTextArea from "./form/JobDescTextArea";
+import JobSkillSelection from "./form/JobSkillSelection";
 
 export default function HRCreateJob() {
   const { currentUserType } = useUserContext();
   const [jobName, setJobName] = useState("");
   const [jobDesc, setJobDesc] = useState("");
   const [errors, setErrors] = useState([]);
   const [displayPopup, setDisplayPopup] = useState(false);
+  const [selectedSkills, setSelectedSkills] = useState([]);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -26,6 +29,9 @@ export default function HRCreateJob() {
       setErrors(errorList);
     } else {
       setErrors([]);
+      selectedSkills.forEach(async (skillId) => {
+        await createJobSkill(res.job_id, skillId);
+      });
       setDisplayPopup(true);
     }
   };
@@ -36,6 +42,7 @@ export default function HRCreateJob() {
     setJobName("");
     setJobDesc("");
     setErrors([]);
+    setSelectedSkills([]);
     setDisplayPopup(false);
   };
 
@@ -46,11 +53,18 @@ export default function HRCreateJob() {
           <h1 className='text-3xl text-left font-bold'>Create New Job</h1>
           <form onSubmit={handleSubmit} className='pt-10'>
             <div className='mb-6'>
-              <JobNameInput jobName={jobName} setJobName={setJobName} />
+              <JobNameInput jobName={jobName} setJobName={setJobName} jobIsActive />
             </div>
             <div className='mb-6'>
-              <JobDescTextArea jobDesc={jobDesc} setJobDesc={setJobDesc} />
+              <JobDescTextArea jobDesc={jobDesc} setJobDesc={setJobDesc} jobIsActive />
             </div>
+
+            <JobSkillSelection
+              selectedSkills={selectedSkills}
+              setSelectedSkills={setSelectedSkills}
+              jobIsActive
+            />
+
             <button
               type='submit'
               className='text-white bg-accent2 hover:bg-accent3 focus:ring-2 focus:ring-gray-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center'
diff --git a/app/src/components/job/hr/CreateJobSuccess.jsx b/app/src/components/job/hr/CreateJobSuccess.jsx
@@ -1,5 +1,4 @@
 import { useHistory } from "react-router-dom";
-import { CheckCircleIcon } from "@heroicons/react/20/solid";
 
 export default function CreateJobSuccess({ jobName, resetFields }) {
   const redirectToCreateJobPage = () => {
@@ -14,28 +13,35 @@ export default function CreateJobSuccess({ jobName, resetFields }) {
 
   return (
     <div
-      className='absolute flex flex-col justify-center space-y-5 mx-auto my-auto w-1/2 h-1/2 bg-gray-100 z-10 inset-0 shadow-lg rounded-lg items-center text-center'
+      className='flex justify-center fixed inset-0 h-screen items-center z-10 backdrop-grayscale backdrop-blur-xl p-5'
       aria-labelledby='modal-title'
       role='dialog'
       aria-modal='true'
     >
-      <CheckCircleIcon className='mx-auto h-20 w-20 text-green-500' aria-hidden='true' />
-      <p className=''>Job {jobName} has been successfully created!</p>
-      <div className='flex space-x-5'>
-        <button
-          type='button'
-          className='relative inline-flex items-center rounded-md border border-accent2 bg-transparent px-4 py-2 text-sm font-medium text-accent2 shadow-sm hover:text-white hover:bg-accent3 hover:border-accent3 focus:outline-none focus:ring-2 focus:ring-gray-300'
-          onClick={redirectToCreateJobPage}
-        >
-          <span>Create Another Job</span>
-        </button>
-        <button
-          type='button'
-          className='relative inline-flex items-center rounded-md border border-transparent bg-accent2 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-accent3 focus:outline-none focus:ring-2 focus:ring-gray-300'
-          onClick={redirectToJobPage}
-        >
-          <span>Return to Jobs</span>
-        </button>
+      <div className='flex-initial'>
+        <div className='container shadow-lg px-7 py-5 grid rounded-lg bg-white'>
+          <div className='grid-row py-3 text-3xl font-bold'>Note</div>
+
+          <div className='grid-row py-3 text-lg'>{jobName} has been successfully created!</div>
+
+          <div className='grid-row py-3 flex justify-end'>
+            <button
+              type='button'
+              className='text-white bg-accent2 hover:bg-accent3 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2'
+              onClick={redirectToCreateJobPage}
+            >
+              Create Another Job
+            </button>
+
+            <button
+              type='button'
+              className='text-white bg-secondary hover:bg-primary font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2'
+              onClick={redirectToJobPage}
+            >
+              Return to Jobs
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/app/src/components/job/hr/UpdateJob.jsx b/app/src/components/job/hr/UpdateJob.jsx
@@ -1,11 +1,13 @@
 import { useState } from "react";
 import { updateJob } from "src/api/jobs";
+import { createJobSkill, deleteAllSkillsUnderJob } from "src/api/jobSkill";
 import { useUpdateJobContext } from "src/contexts/UpdateJobContext";
 import { useUserContext } from "src/contexts/UserContext";
 import UpdateJobSuccess from "./UpdateJobSuccess";
 import JobNameInput from "./form/JobNameInput";
 import JobDescTextArea from "./form/JobDescTextArea";
 import JobIsActiveToggle from "./form/JobIsActiveToggle";
+import JobSkillSelection from "./form/JobSkillSelection";
 
 export default function HRUpdateJob() {
   const { currentUserType } = useUserContext();
@@ -16,25 +18,33 @@ export default function HRUpdateJob() {
   const [jobIsActive, setJobIsActive] = useState(updateJobRole.isActive);
   const [errors, setErrors] = useState([]);
   const [displayPopup, setDisplayPopup] = useState(false);
+  const [selectedSkills, setSelectedSkills] = useState([]);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     const res = await updateJob(updateJobRole.jobId, jobName, jobDesc, jobIsActive);
     if (res.detail) {
       const errorList = [];
-      if (res.detail.map) {
+      if (Array.isArray(res.detail)) {
         res.detail.map((errorMsg) => errorList.push(errorMsg.msg));
       } else {
         errorList.push(res.detail);
       }
       setErrors(errorList);
+    } else if (jobIsActive === false || jobIsActive === 0) {
+      setDisplayPopup(true);
     } else {
       setErrors([]);
+      await deleteAllSkillsUnderJob(updateJobRole.jobId);
+      selectedSkills.map(async (skillId) => {
+        await createJobSkill(res.job_id, skillId);
+      });
       setDisplayPopup(true);
     }
   };
 
-  const renderErrors = errors && errors.map && errors.map((error) => <p>{error}</p>);
+  const renderErrors =
+    errors && errors.map && errors.map((error, index) => <p key={index}>{error}</p>);
 
   switch (currentUserType) {
     case "HR":
@@ -43,11 +53,23 @@ export default function HRUpdateJob() {
           <h1 className='text-3xl text-left font-bold'>Update Job</h1>
           <form onSubmit={handleSubmit} className='pt-10'>
             <div className='mb-6'>
-              <JobNameInput jobName={jobName} setJobName={setJobName} />
+              <JobNameInput jobName={jobName} setJobName={setJobName} jobIsActive={jobIsActive} />
             </div>
             <div className='mb-6'>
-              <JobDescTextArea jobDesc={jobDesc} setJobDesc={setJobDesc} />
+              <JobDescTextArea
+                jobDesc={jobDesc}
+                setJobDesc={setJobDesc}
+                jobIsActive={jobIsActive}
+              />
             </div>
+
+            <JobSkillSelection
+              selectedSkills={selectedSkills}
+              setSelectedSkills={setSelectedSkills}
+              jobIsActive={jobIsActive}
+              jobId={updateJobRole.jobId}
+            />
+
             <div className='mb-6'>
               <p className='block mb-2 text-md font-medium text-black'>Job Status</p>
               <JobIsActiveToggle jobIsActive={jobIsActive} setJobIsActive={setJobIsActive} />
@@ -60,7 +82,7 @@ export default function HRUpdateJob() {
             </button>
           </form>
           <div className='pt-5 text-red-500'>{renderErrors}</div>
-          {displayPopup ? <UpdateJobSuccess jobName={jobName} /> : null}
+          {displayPopup ? <UpdateJobSuccess jobName={jobName} jobIsActive={jobIsActive} /> : null}
         </div>
       );
     default:
diff --git a/app/src/components/job/hr/UpdateJobSuccess.jsx b/app/src/components/job/hr/UpdateJobSuccess.jsx
@@ -1,7 +1,6 @@
 import { useHistory } from "react-router-dom";
-import { CheckCircleIcon } from "@heroicons/react/20/solid";
 
-export default function UpdateJobSuccess({ jobName }) {
+export default function UpdateJobSuccess({ jobName, jobIsActive }) {
   const history = useHistory();
 
   const redirectToJobPage = () => {
@@ -10,20 +9,34 @@ export default function UpdateJobSuccess({ jobName }) {
 
   return (
     <div
-      className='absolute flex flex-col justify-center space-y-5 mx-auto my-auto w-1/2 h-1/2 bg-gray-100 z-10 inset-0 shadow-lg rounded-lg items-center text-center'
+      className='flex justify-center fixed inset-0 h-screen items-center z-10 backdrop-grayscale backdrop-blur-xl p-5'
       aria-labelledby='modal-title'
       role='dialog'
       aria-modal='true'
     >
-      <CheckCircleIcon className='mx-auto h-20 w-20 text-green-500' aria-hidden='true' />
-      <p className=''>Job {jobName} has been successfully updated!</p>
-      <button
-        type='button'
-        className='relative inline-flex items-center rounded-md border border-transparent bg-accent2 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-accent3 focus:outline-none focus:ring-2 focus:ring-gray-300'
-        onClick={redirectToJobPage}
-      >
-        <span>Return to Jobs</span>
-      </button>
+      <div className='flex-initial'>
+        <div className='container shadow-lg px-7 py-5 grid rounded-lg bg-white'>
+          <div className='grid-row py-3 text-3xl font-bold'>Note</div>
+
+          {jobIsActive === false || jobIsActive === 0 ? (
+            <div className='grid-row py-3 text-lg'>
+              {jobName} is toggled to inactive. No other changes will be saved.
+            </div>
+          ) : (
+            <div className='grid-row py-3 text-lg'>{jobName} has been successfully updated!</div>
+          )}
+
+          <div className='grid-row py-3 flex justify-end'>
+            <button
+              type='button'
+              className='text-white bg-secondary hover:bg-primary font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2'
+              onClick={redirectToJobPage}
+            >
+              Return to Jobs
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/src/components/job/hr/form/JobDescTextArea.jsx b/app/src/components/job/hr/form/JobDescTextArea.jsx
@@ -1,4 +1,4 @@
-export default function JobDescTextArea({ jobDesc, setJobDesc }) {
+export default function JobDescTextArea({ jobDesc, setJobDesc, jobIsActive }) {
   const handleJobDescChange = (e) => {
     e.preventDefault();
     if (e.target.value.length <= 255) {
@@ -20,9 +20,12 @@ export default function JobDescTextArea({ jobDesc, setJobDesc }) {
         rows={5}
         value={jobDesc}
         onChange={handleJobDescChange}
-        className='bg-gray-100 border border-gray-300 text-black text-sm rounded-lg focus:ring-gray-400 focus:border-gray-500 block w-full p-2.5'
+        className={`bg-gray-100 border border-gray-300 ${
+          jobIsActive === false || jobIsActive === 0 ? "text-gray-500" : "text-black"
+        }  text-sm rounded-lg focus:ring-gray-400 focus:border-gray-500 block w-full p-2.5`}
+        disabled={jobIsActive === false || jobIsActive === 0}
       />
       <p className='text-right text-sm'>{jobDesc.length}/255</p>
     </label>
-  )
+  );
 }
diff --git a/app/src/components/job/hr/form/JobIsActiveToggle.jsx b/app/src/components/job/hr/form/JobIsActiveToggle.jsx
@@ -15,6 +15,7 @@ export default function JobIsActiveToggle({ jobIsActive, setJobIsActive }) {
         id='checked-toggle'
         className='sr-only peer'
         checked={jobIsActive}
+        readOnly
       />
       <div className="w-11 h-6 bg-gray-100 rounded-full peer peer-focus:ring-2 peer-focus:ring-gray-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent3" />
       <span className='ml-3 text-sm font-medium text-black'>
diff --git a/app/src/components/job/hr/form/JobNameInput.jsx b/app/src/components/job/hr/form/JobNameInput.jsx
diff --git a/app/src/components/job/hr/form/JobSkillSelection.jsx b/app/src/components/job/hr/form/JobSkillSelection.jsx
diff --git a/app/src/components/skill/CourseBadge.jsx b/app/src/components/skill/CourseBadge.jsx
diff --git a/app/src/components/skill/SkillTile.jsx b/app/src/components/skill/SkillTile.jsx
