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

edit job upload image added

Browse Source
This commit is contained in:
victorAnumudu
2023-11-04 17:35:18 +01:00
parent f4e261eb6c
commit a759daaf90
1 changed files with 70 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/jobPopout/EditJobPopout.jsx
+70 -34
View File
@@ -52,6 +52,18 @@ const EditJobPopOut = ({
}) => {
const dispatch = useDispatch();
const [taskImage, setTaskImage] = useState('')
const changeTaskImage = (e) => {
if (e.target.value !== "") {
const imgReader = new FileReader();
imgReader.onload = (event) => {
setTaskImage(event.target.result);
};
imgReader.readAsDataURL(e.target.files[0]);
}
}
let [requestStatus, setRequestStatus] = useState({
loading: false,
status: false,
@@ -138,7 +150,7 @@ const EditJobPopOut = ({
</svg>
</button>
</div>
<div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
<div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
@@ -279,43 +291,67 @@ const EditJobPopOut = ({
</div>
</div>
</div>
<div className="field w-full mb-6">
<div
className={`flex items-center justify-between mb-2.5`}
>
<label
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
htmlFor="timeline_days"
>
Timeline
<span className="text-green-700 text-sm tracking-wide">
- Expected duration of this task
</span>
<div className="w-full flex items-center gap-2 mb-2">
{/* FOR TASK IMAGE */}
<div className="w-1/2 relative max-h-[130px] min-h-[130px]">
<input
id="task_image"
className="hidden"
type="file"
accept="image/*"
onChange={changeTaskImage}
/>
{taskImage ?
<div className="w-full absolute -top-5">
<img src={taskImage} className="max-h-[150px] min-h-[150px] w-full object-cover" alt="uplaoded task image" />
<span onClick={()=>setTaskImage('')} className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/70 hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800">Remove Image</span>
</div>
:
<label
className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold" htmlFor='task_image'>
Select Task Image
</label>
}
</div>
{/* END OF TASK IMAGE */}
<Field
component="select"
name="timeline_days"
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
props.errors.timeline_days &&
props.touched.timeline_days
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
: "border border-[#f5f8fa] dark:border-[#5e6278]"
}`}
value={props.values.timeline_days}
>
<option value="">Select Duration</option>
{publicArray.map(({ name, duration }, idx) => (
<option
className="text-slate-500 text-lg"
value={duration}
<div className="field w-1/2">
<div
className={`flex items-center justify-between`}
>
<label
className="w-full input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex flex-col"
htmlFor="timeline_days"
>
{name}
</option>
))}
</Field>
Timeline -
<span className="w-full text-center text-green-700 text-sm tracking-wide">
Expected duration of this task
</span>
</label>
</div>
<Field
component="select"
name="timeline_days"
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
props.errors.timeline_days &&
props.touched.timeline_days
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
: "border border-[#f5f8fa] dark:border-[#5e6278]"
}`}
value={props.values.timeline_days}
>
<option value="">Select Duration</option>
{publicArray.map(({ name, duration }, idx) => (
<option
className="text-slate-500 text-lg"
value={duration}
>
{name}
</option>
))}
</Field>
</div>
</div>
{/* inputs ends here */}
</div>