WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Clean up...added feature to edit popup

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-11-28 09:11:52 -08:00
parent 492bda021f
commit 775bcd5005
3 changed files with 190 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/jobPopout/EditJobPopout.jsx
+54 -31
View File
@@ -52,6 +52,8 @@ const EditJobPopOut = ({
}) => {
const dispatch = useDispatch();
const { userDetails } = useSelector((state) => state.userDetails);
const { walletDetails } = useSelector((state) => state.walletDetails);
const uploadedImage = `${userDetails.session_image_server}${localStorage.getItem('session_token')}/job/${details?.job_uid}`
@@ -172,6 +174,12 @@ const EditJobPopOut = ({
}
};
// Check if the user is using iOS
const isIOS = /MacIntel|MacPPC/.test(navigator.platform) && !window.MSStream;
// Check if the user is using Windows
const isWindows = /Windows/.test(navigator.userAgent);
return (
<ModalCom action={onClose} situation={situation} className="edit-popup">
<div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
@@ -313,38 +321,53 @@ const EditJobPopOut = ({
</div>
<div className="sm:w-[35%] w-full">
<div
htmlFor="Job Categories"
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
id="checked-group"
>
Categories
</div>
<div
className="sm:flex-col flex flex-wrap px-3 mt-3"
role="group"
aria-labelledby="checked-group"
>
{categories && Object.entries(categories)?.map(([key, value]) => (
<label
key={key}
className="flex gap-1 w-full items-center"
>
<Field
type="checkbox"
name="category"
value={key}
/>
<span className="text-[13.975px]">{value}</span>
</label>
))}
<span className="h-5 text-sm italic text-[#cf3917]">
{props.errors.category &&
props.touched.category &&
"please select a category"}
<label
htmlFor="Job Categories"
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
>
Categories ({`multiple categories - ${isIOS ? "⌘" : isWindows ? "Ctrl+" : ""}`})
{props.errors.category && props.touched.category && (
<span className="text-[12px] text-red-500">
{props.errors.category}
</span>
</div>
</div>
)}
</label>
<select
id="category"
name="category"
value={props.values.category}
className={`input-field p-2 mt-1 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-[4.7rem] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
onChange={props.handleChange}
onBlur={props.handleBlur}
multiple
>
{walletDetails?.loading ? (
<option className="text-slate-500 text-lg" value="">
Loading...
</option>
) : walletDetails.data.length ? (
<>
{/* <option className="text-slate-500 text-lg" value="">
Select a Category
</option> */}
{Object?.entries(categories).map(([key, value]) => (
<option
key={key}
className="text-slate-500 "
value={key}
>
{value}
</option>
))}
</>
) : (
<option className="text-slate-500 text-lg" value="">
No Options Found! Try Again
</option>
)}
</select>
</div>
</div>
<div className="w-full flex items-center gap-2 mb-2">
{/* FOR TASK IMAGE */}