Ankit branch, changes to profile , jobs and key members page

components/CompanySections/Jobs.js

@@ -1,9 +1,54 @@
-import React from 'react'
+import React, { useRef, useState } from 'react'
+import AddJobModal from '../Modals/AddJobModal'
 
 function Jobs() {
+
+  const [showAddJobModal , setShowAddJobModal] = useState(false)
+  const [jobs , setJobs] = useState([]) ;
+  const [curItem , setCurItem] = useState({});
+  const [isEdit , setIsEdit] = useState(false);
+  const [index , setIndex] = useState();
+
+  const handleJobClick = (job ,index) =>{
+    setCurItem(job)
+    setIsEdit(true)
+    setIndex(index)
+    setShowAddJobModal(true)
+  }
+
+  const handleSaveJobClick = () => {
+    setCurItem({title : '' , jobType:'',
+    description:'' , responsibilities : ''})
+    setIsEdit(false)
+    setShowAddJobModal(true)
+  }
+
   return (
-    <div>Jobs</div>
-  )
+    <div className='px-20'> 
+      <button className="save-button float-right m-[20px] " onClick={handleSaveJobClick}>
+          Add Job
+      </button>
+      <AddJobModal 
+        showAddJobModal={showAddJobModal} 
+        setShowAddJobModal={setShowAddJobModal} 
+        jobs = {jobs}
+        curItem ={curItem}
+        isEdit = {isEdit}
+        index ={index}
+      />
+
+    <div className='w-[80%] flex flex-row-rev flex-wrap '>      
+        {jobs.map((job , index) => {
+          return (
+            <div key={index} className='cursor-pointer m-[15px]' onClick={() => handleJobClick(job , index)}>
+            <h1>{job.title}</h1>
+            </div>
+          )
+        })}
+    </div>
+
+    </div>
+  ) 
 }
 
 export default Jobs

components/CompanySections/KeyPeople.js

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 function KeyPeople() {
-    const [people, setPeople] = useState([""]);
+    const [people, setPeople] = useState([]);
     return (
         <div>
             <div className="flex flex-col space-y-6 flex-1 py-10 justify-end relative">
@@ -10,10 +10,9 @@ function KeyPeople() {
                 </p>
 
                 <div className="flex items-center mb-2 px-2 flex-col space-y-2">
-                    {people.map((item) => (
-                        <PeopleForm key={item.id} />
+                    {people.map((item , index) => (
+                        <PeopleForm key={item.id} setPeople ={setPeople} people={people} index={index}/>
                     ))}
-                    <PeopleForm />
                 </div>
             </div>
         </div>
@@ -22,34 +21,58 @@ function KeyPeople() {
 
 export default KeyPeople;
 
-const PeopleForm = () => {
+const PeopleForm = ({setPeople,people, index} ) => {
+
+    const handleDeleteClick =() =>{
+
+    }
+
     return (
-        <div className="grid gap-x-2 grid-cols-5">
+        <>
+        <div className="w-full flex justify-between" >
             <input
                 type="text"
                 placeholder="Name"
-                className="px-3 py-2 placeholder-[#6B7280] text-[#030303]  placeholder-opacity-90 relative bg-white rounded text-sm border-[1.5px]  focus:outline-none focus:border-[#2dc5a1] focus:border-2  w-full  transition duration-200 ease-in"
+                className=" placeholder-[#6B7280] text-[#030303]  placeholder-opacity-90 relative bg-white rounded text-sm border-[1.5px]  focus:outline-none focus:border-[#2dc5a1] focus:border-2  w-[18%]  transition duration-200 ease-in"
             />
             <input
                 type="text"
                 placeholder="Role"
-                className="px-3 py-2 placeholder-[#6B7280] text-[#030303]  placeholder-opacity-90 relative bg-white rounded text-sm border-[1.5px]  focus:outline-none focus:border-[#2dc5a1] focus:border-2  w-full  transition duration-200 ease-in"
+                className="px-3 py-2 placeholder-[#6B7280] text-[#030303]  placeholder-opacity-90 relative bg-white rounded text-sm border-[1.5px]  focus:outline-none focus:border-[#2dc5a1] focus:border-2  w-[18%]  transition duration-200 ease-in"
             />
             <input
                 type="text"
                 placeholder="Email"
-                className="px-3 py-2 placeholder-[#6B7280] text-[#030303]  placeholder-opacity-90 relative bg-white rounded text-sm border-[1.5px]  focus:outline-none focus:border-[#2dc5a1] focus:border-2  w-full  transition duration-200 ease-in"
+                className="px-3 py-2 placeholder-[#6B7280] text-[#030303]  placeholder-opacity-90 relative bg-white rounded text-sm border-[1.5px]  focus:outline-none focus:border-[#2dc5a1] focus:border-2  w-[18%]  transition duration-200 ease-in"
             />
             <input
                 type="text"
                 placeholder="Alternate Email"
-                className="px-3 py-2 placeholder-[#6B7280] text-[#030303]  placeholder-opacity-90 relative bg-white rounded text-sm border-[1.5px]  focus:outline-none focus:border-[#2dc5a1] focus:border-2  w-full  transition duration-200 ease-in"
+                className="px-3 py-2 placeholder-[#6B7280] text-[#030303]  placeholder-opacity-90 relative bg-white rounded text-sm border-[1.5px]  focus:outline-none focus:border-[#2dc5a1] focus:border-2  w-[18%]  transition duration-200 ease-in"
             />
             <input
                 type="text"
                 placeholder="LinkedIn"
-                className="px-3 py-2 placeholder-[#6B7280] text-[#030303]  placeholder-opacity-90 relative bg-white rounded text-sm border-[1.5px]  focus:outline-none focus:border-[#2dc5a1] focus:border-2  w-full  transition duration-200 ease-in"
+                className="px-3 py-2 placeholder-[#6B7280] text-[#030303]  placeholder-opacity-90 relative bg-white rounded text-sm border-[1.5px]  focus:outline-none focus:border-[#2dc5a1] focus:border-2  w-[18%]  transition duration-200 ease-in"
             />
+
+            <div className="cursor-pointer flex items-center justify-center" onClick={handleDeleteClick}>
+                <svg
+                stroke="currentColor"
+                fill="currentColor"
+                strokeWidth="0"
+                viewBox="0 0 24 24"
+                aria-label="Close modal"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+                </svg>
+            </div>
+
         </div>
+
+    </>
     );
 };

components/CompanySections/PrefferedLocation.jsx

@@ -0,0 +1,171 @@
+
+import React, { useState, useEffect } from 'react';
+
+function PrefferedLocation({ setLocation }) {
+  const [showlocation, setshowlocation] = useState(false);
+  const [preferredLocation, setPreferredLocation] = useState([
+    { name: 'Totally Open', selected: false },
+    { name: 'Remote', selected: false },
+    { name: 'Alanta, TX', selected: false },
+    { name: 'Boston, MA', selected: false },
+    { name: 'Chicago, IL', selected: false },
+    { name: 'Denver, CO', selected: false },
+    { name: 'Los Angeles, CA', selected: false },
+    { name: 'Nashville, TN', selected: false },
+    { name: 'New York, NY', selected: false },
+    { name: 'Raleigh, NC', selected: false },
+    { name: 'San Diego, CA', selected: false },
+    { name: 'San Francisco, CA', selected: false },
+    { name: 'Seattle, WA', selected: false },
+    { name: 'Wilmington, DE', selected: false },
+    { name: 'Houston, TX', selected: false },
+    { name: 'Dallas, TX', selected: false },
+    { name: 'Detroit MI', selected: false },
+  ]);
+  const [userPreferredLocation, setUserPrefferedLocation] = useState([]);
+  const [totalPreferredLocation, setTotalPreferredLocation] = useState(0);
+  const [autocomplete, setAutocomplete] = useState({
+    disabled: true,
+    data: [],
+  });
+  const [inputValue, setInputValue] = useState('');
+
+  const updatePreferredLocation = (roleName) => {
+
+      let flag = 1 ;
+      for(let i=0 ; i<preferredLocation.length ; i++)
+      {
+        const x = preferredLocation[i];
+        if(x.name == roleName)
+        {
+          flag = 0;
+          break;
+        }
+      }
+      if(flag) preferredLocation.unshift({name : roleName , selected : false})  
+
+    const newData = preferredLocation.map((role) => {
+      if (role.name === roleName)
+        if (!role.selected && totalPreferredLocation === 7);
+        else role.selected = !role.selected;
+
+      return role;  
+    })
+    setPreferredLocation(newData);
+    setLocation(newData)
+    setInputValue('');
+    setAutocomplete({
+      disabled: true,
+      data: [],
+    });
+  };
+
+  useEffect(() => {
+    let temp = 0;
+
+    preferredLocation.forEach((role) => {
+      if (role.selected) temp++;
+    });
+    setTotalPreferredLocation(temp);
+  }, [preferredLocation]);
+
+  const handleInputValueChange = (e) => {
+    setInputValue(e.target.value);
+    if (e.target.value.trim() === '')
+      setAutocomplete({ disabled: true, data: [] });
+    else {
+      const autocompleteData = [];
+      const regex = new RegExp(e.target.value, 'i');
+
+      preferredLocation.forEach((role) => {
+        if (regex.test(role.name)) autocompleteData.push(role.name);
+      });
+
+      setAutocomplete({
+        disabled: false,
+        data: [e.target.value, ...autocompleteData],
+      });
+    }
+  };
+  useEffect(() => {
+    const body = document.getElementsByTagName('body');
+    if ( showlocation) {
+      body[0].style.overflow = 'hidden';
+      body[0].style.position = 'fixed';
+      body[0].style.width = '100%';
+    } else {
+      body[0].style.overflow = 'auto';
+      body[0].style.position = 'relative';
+    }
+  }, [ showlocation]);
+
+  return (
+    <>
+
+          <div >
+                <div className="p-0 max-w-full">
+                  {/* CONTENT START */}
+
+                  <div className="w-[100%] m-auto">
+                    <div className="text-left ">
+                      <h5 className="text-[12px] font-semibold text-[#201e27]">
+                        Location
+                      </h5>
+
+                    </div>
+                    <div className="relative flex-auto">
+                      <input
+                        className="appearance-none px-3 py-2 mt-[7px] mb-[7px] placeholder-[#6B7280] text-[#030303]  placeholder-opacity-90 relative w-full bg-white rounded text-sm border-[1.5px]  focus:outline-none focus:border-[#2dc5a1] focus:border-2 transition duration-200  ease-in bg-transparent"
+
+                        type="text"
+                        value={inputValue}
+                        onChange={handleInputValueChange}
+                        placeholder="Example: Boston, Houston"
+
+                      />
+                      <div
+                        className={`${
+                          autocomplete.disabled ? 'hidden' : ''
+                        } absolute z-10 border rounded-md border-gray-300 py-1 bg-white ml-2 max-h-60 overflow-y-scroll`}
+                        style={{ width: 'calc(100% + 20px)' }}
+                      >
+                        {autocomplete.data.map((item, index) => (
+                          <div
+                            key={index}
+                            className="px-3 h-[2rem] flex items-center cursor-pointer 
+                            font-medium text-sm hover:bg-gray-100"
+                            onClick={() => updatePreferredLocation(item)}
+                          >
+                            {item}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="ml-1">
+                      {preferredLocation.map((role, index) => {
+                      if(role.name ) return(
+                        <span
+                          key={index}
+                          className="inline-block border border-gray-300
+                          rounded-full mr-2 mb-3 py-3 px-4 text-sm cursor-pointer text-gray-500 select-none"
+                          style={{
+                            background: role.selected ? '#61a0ff' : '',
+                            color: role.selected ? '#fff' : '',
+                          }}
+                          onClick={() => updatePreferredLocation(role.name)}
+                        >
+                          {role.name}
+                        </span>
+                      )
+                        } )  }
+                    </div>
+                  </div>
+                </div>
+                {/* CONTENT END */}
+              </div>
+
+    </>
+  );
+}
+
+export default PrefferedLocation;