Compare commits

...

3 Commits

Author SHA1 Message Date
victorAnumudu 0045a791fe added dummy env details 2024-04-12 19:20:24 +01:00
victorAnumudu b48cb48213 added file upload component 2024-04-12 17:41:58 +01:00
ameye 856c70628a Merge branch 'edit-popout-adjust' of WrenchBoard/Users-Wrench into master 2024-04-12 14:29:41 +00:00
7 changed files with 121 additions and 39 deletions
+4 -1
View File
@@ -124,4 +124,7 @@ REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
# REACT APP CUSTOMTIMER
REACT_APP_CUSTOMTIMER=90
REACT_APP_CUSTOMTIMER=90
# MEDIA_SERVER_URL
MEDIA_SERVER_URL=''
+4 -1
View File
@@ -92,4 +92,7 @@ REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
# REACT APP CUSTOMTIMER
REACT_APP_CUSTOMTIMER=90
REACT_APP_CUSTOMTIMER=90
# MEDIA_SERVER_URL
MEDIA_SERVER_URL=''
+4 -1
View File
@@ -98,4 +98,7 @@ REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
# REACT APP CUSTOMTIMER
REACT_APP_CUSTOMTIMER=90
REACT_APP_CUSTOMTIMER=90
# MEDIA_SERVER_URL
MEDIA_SERVER_URL=''
@@ -88,10 +88,10 @@ export default function AssignMediaTask({
<Form>
<>
<div
className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid md:grid-cols-2`}
className={`job-action-modal-body w-full h-[500px] overflow-y-auto md:grid md:grid-cols-2`}
>
<div className="p-4 pt-0">
<div className="p-4 w-full min-h-[410px] max-h-[410px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
<div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
{commonMedia?.data?.length ? (
commonMedia?.data?.map((item, index) => (
<div
@@ -3,6 +3,7 @@ import LoadingSpinner from '../../Spinners/LoadingSpinner'
import { NewTasks } from './forms'
import { PriceFormatter } from '../../Helpers/PriceFormatter'
import { useSelector } from 'react-redux';
import AttachFile from '../../attachmentCom/AttachFile';
export default function AssignPrevNewTask({
jobList,
@@ -32,7 +33,7 @@ export default function AssignPrevNewTask({
) : (
<>
<div
className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
className={`job-action-modal-body w-full h-[500px] overflow-y-auto md:grid ${
taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
}`}
>
@@ -63,7 +64,7 @@ export default function AssignPrevNewTask({
</div>
{/* Task Type === select */}
{taskType == "select" && (
<div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
<div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
{jobList?.data?.length ? (
jobList?.data?.map((item, index) => (
<div
@@ -151,7 +152,7 @@ export default function AssignPrevNewTask({
</div>
</div>
<div className="w-full flex items-center justify-center">
<div className="w-28 h-28 rounded-2xl flex items-center justify-center">
<div className="mb-1 w-28 h-28 rounded-2xl flex items-center justify-center">
<img
className="w-full h-auto"
loading="lazy"
@@ -162,13 +163,10 @@ export default function AssignPrevNewTask({
</div>
</div>
{/* Dummy, no value found for created! thus commented*/}
{/* <div className="my-3 sm:flex items-center">
<Detail
label="Created"
value={`Dummy, no value found for created!`}
/>
</div> */}
{/* ATTACHMENT SECTION*/}
<div className="w-full max-h-32">
<AttachFile data={activeTask.data} />
</div>
<div className="my-3">
<label className="w-full job-label">
@@ -0,0 +1,88 @@
import React, { useRef, useState } from 'react'
import LoadingSpinner from '../Spinners/LoadingSpinner'
import axios from 'axios'
export default function AttachFile({data}) {
const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message:''})
const inputFile = useRef()
const upload = (event) => {
let inputs = {
file: event.target.files[0],
job_uid: data?.job_uid,
uid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
};
setRequestStatus({loading: true, status:false, message:''})
if(!inputs.file){
setRequestStatus({loading: false, status:false, message:'Please select a file'})
setTimeout(()=>{
setRequestStatus({loading: false, status:false, message:''})
}, 3000)
return
}
const formData = new FormData()
for (let input in inputs) {
formData.append(input, inputs[input]);
}
console.log('data', formData, inputs)
// axios.post(`${process.env.MEDIA_SERVER_URL}/upload/task`,formData).then(res => {
// if(res.data.status < 1){
// inputFile.current.value = null
// setRequestStatus({loading: false, status:false, message:'upload failed'})
// setTimeout(()=>{
// setRequestStatus({loading: false, status:false, message:''})
// }, 3000)
// return
// }
// setRequestStatus({loading: false, status:true, message:'uploaded'})
// inputFile.current.value = null
// setTimeout(()=>{
// setRequestStatus({loading: false, status:false, message:''})
// }, 3000)
// }).catch(err => {
// inputFile.current.value = null
// setRequestStatus({loading: false, status:false, message:'upload failed'})
// setTimeout(()=>{
// setRequestStatus({loading: false, status:false, message:''})
// }, 3000)
// return
// })
setTimeout(()=>{
setRequestStatus({loading: false, status:false, message:''})
}, 3000)
}
return (
<div className='w-full h-full flex flex-col justify-center items-center rounded-md border'>
<div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
<div className='p-2 w-full flex justify-between items-center gap-1 border-b shadow-sm'>
<p className='job-label job-label-flex'>
Files {
requestStatus.loading ?
<LoadingSpinner size='6' />
:
<p className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</p>
}
</p>
<label htmlFor='file' className={`cursor-pointer job-label py-1 px-2 rounded-full border ${ requestStatus.loading && 'pointer-events-none'}`}>+ Add</label>
</div>
<div className='job-label w-full px-2 py-1 h-20 overflow-y-auto flex justify-center items-center'>
list shows here
</div>
<input
type="file"
id='file'
ref={inputFile}
className='hidden file:rounded-full job-label p-1'
onChange={upload}
/>
</div>
</div>
)
}
+11 -24
View File
@@ -9,6 +9,7 @@ import InputCom from "../Helpers/Inputs/InputCom";
import ModalCom from "../Helpers/ModalCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import { apiConst } from "../../lib/apiConst";
import AttachFile from "../attachmentCom/AttachFile";
const validationSchema = Yup.object().shape({
country: Yup.string()
@@ -301,7 +302,7 @@ const EditJobPopoutNew = ({
<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 ${
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none ${
props.errors.timeline_days &&
props.touched.timeline_days
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
@@ -419,14 +420,19 @@ const EditJobPopoutNew = ({
</div>
</div>
</div>
<div className="w-full flex items-center gap-2 mb-2">
<div className="w-full flex items-center justify-center gap-2 mb-2">
{/* FOR TASK IMAGE */}
<div className="w-1/3 relative flex flex-col max-h-[130px] min-h-[130px]">
<label
className="w-full job-label"
htmlFor="timeline_days"
className={`w-full job-label job-label-flex cursor-pointer ${uploadStatus.loading && 'pointer-events-none'}`}
htmlFor="task_image"
>
Banner
{uploadStatus.loading ?
<LoadingSpinner size='6' />
:
<p className={`text-[10px] ${uploadStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{uploadStatus.message}</p>
}
</label>
<input
id="task_image"
@@ -465,7 +471,7 @@ const EditJobPopoutNew = ({
{/* END OF TASK IMAGE */}
<div className="field w-2/3">
{/* PUT SPACE HERE */}
<AttachFile data={details} />
</div>
</div>
@@ -492,25 +498,6 @@ const EditJobPopoutNew = ({
)
))}
{/* End of error or success display */}
{/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
<div className="w-full">
{uploadStatus.message && !uploadStatus.loading && (
<p
className={`text-center ${
uploadStatus.status
? "text-green-500"
: "text-red-500"
}`}
>
{uploadStatus.message}
</p>
)}
{uploadStatus.loading && (
<p className="text-center">{uploadStatus.message}</p>
)}
</div>
</div>
</div>
<div className="modal-footer-wrapper justify-end">