Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into pending-jobs-pop-apis
This commit was merged in pull request #128.
This commit is contained in:
Ebube
@@ -45,6 +45,9 @@ REACT_APP_FACEBOOK_CLIENT_ID=390204307987009
|
||||
REACT_APP_FACEBOOK_CLIENT_SECRET=19f778e312f2ab96d147bacb612910c2
|
||||
REACT_APP_FACEBOOK_CLIENT_SCOPE="email, public_profile"
|
||||
|
||||
REACT_APP_MAX_FILE_SIZE=1000000
|
||||
REACT_APP_TOTAL_NUM_FILE=4
|
||||
|
||||
|
||||
#apigate.lotus.g1.wrenchboard.com:76.209.103.227
|
||||
#apigate.orion.g1.wrenchboard.com:76.209.103.227
|
||||
|
||||
+4
-1
@@ -37,4 +37,7 @@ REACT_APP_ITEM_PER_PAGE=5
|
||||
REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
|
||||
REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
|
||||
REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
|
||||
REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
|
||||
REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
|
||||
|
||||
REACT_APP_MAX_FILE_SIZE=1000000
|
||||
REACT_APP_TOTAL_NUM_FILE=4
|
||||
+7
-1
@@ -37,4 +37,10 @@ REACT_APP_ITEM_PER_PAGE=5
|
||||
REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
|
||||
REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
|
||||
REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
|
||||
REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/
|
||||
REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/
|
||||
|
||||
DISABLE_ESLINT_PLUGIN=true
|
||||
|
||||
REACT_APP_MAX_FILE_SIZE=1000000
|
||||
REACT_APP_TOTAL_NUM_FILE=4
|
||||
|
||||
|
||||
@@ -48,7 +48,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
|
||||
:
|
||||
<tbody>
|
||||
<tr className='text-slate-500'>
|
||||
<td className="p-2" colSpan={4}>No Purchase History Found!</td>
|
||||
<td className="p-2" colSpan={4}>No Message Found!</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
}
|
||||
|
||||
@@ -15,6 +15,10 @@ function ActiveJobs(props) {
|
||||
|
||||
let [messageToSend, setMessageToSend] = useState('') // State to hold the value of message to be sent
|
||||
|
||||
let [filesToSend, setFilesToSend] = useState([]) // State to hold the value of files to be sent
|
||||
|
||||
let [tab, setTab] = useState('message')
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''})
|
||||
|
||||
// FUNCTION TO HANDLE MESSAGE CHANGE
|
||||
@@ -22,6 +26,43 @@ function ActiveJobs(props) {
|
||||
setMessageToSend(value)
|
||||
}
|
||||
|
||||
// FUNCTION TO HANDLE FILE UPlOAD CHANGE
|
||||
const handleFileChange = ({target:{files}}) => {
|
||||
setRequestStatus({loading: false, status: false, message: ''}) // State to determine error state
|
||||
if(files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)){
|
||||
setRequestStatus({loading: false, status: false, message: 'File must be <= 1mb'})
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({loading: false, status: false, message: ''})
|
||||
}, 5000)
|
||||
return
|
||||
}
|
||||
if(filesToSend.length >= Number(process.env.REACT_APP_TOTAL_NUM_FILE)){
|
||||
setRequestStatus({loading: false, status: false, message: `Total number of attachment is ${Number(process.env.REACT_APP_TOTAL_NUM_FILE)}`})
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({loading: false, status: false, message: ''})
|
||||
}, 5000)
|
||||
return
|
||||
}
|
||||
// INCLUDE FILE IF NO ERROR
|
||||
setFilesToSend(prev => ([...prev, files[0]]))
|
||||
}
|
||||
|
||||
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
|
||||
const handleClearAll = ({target:{name}}) => {
|
||||
if(tab == 'message'){
|
||||
setMessageToSend('')
|
||||
}else if(tab=='files'){
|
||||
setFilesToSend([])
|
||||
}else{
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// FUNCTION TO REMOVE AND IMAGE
|
||||
const handleRemoveImage = (imageToDelete) => {
|
||||
setFilesToSend(prev => prev.filter(item => item.name != imageToDelete.name))
|
||||
}
|
||||
|
||||
// FUNCTION TO SEND TASK MESSAGE
|
||||
const sendTaskMessage = () => {
|
||||
let reqData={message: messageToSend, msg_type: 'TEXT', contract:props.details.contract}
|
||||
@@ -52,11 +93,10 @@ function ActiveJobs(props) {
|
||||
return (
|
||||
<Layout>
|
||||
|
||||
<div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<div className="py-[20px] bg-white px-4 rounded-md shadow-md">
|
||||
{/* back btn and title */}
|
||||
<div className="w-full flex justify-start space-x-3 items-center">
|
||||
<div className="py-[20px] bg-white px-4 rounded-2xl shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
|
||||
{/* job title */}
|
||||
<div className="w-full lg:w-1/2">
|
||||
<div className="w-full flex justify-start space-x-3 items-start">
|
||||
<button
|
||||
type="button"
|
||||
className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
||||
@@ -72,143 +112,206 @@ function ActiveJobs(props) {
|
||||
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
<h1 className="text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{props.details?.title && props.details.title}
|
||||
</h1>
|
||||
</div>
|
||||
{/* END of back btn and title */}
|
||||
|
||||
<div className="mt-2 w-full flex flex-col-reverse lg:flex-row lg:justify-between lg:items-start lg:space-x-2">
|
||||
<div className="w-full lg:w-2/3 my-2 lg:my-0">
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
<div className="w-full my-4">
|
||||
<div className="pb-2 w-full flex items-center">
|
||||
<p className="w-full lg:w-2/3 text-base text-slate-700 dark:text-black">
|
||||
{props.details?.contract && props.details.contract}
|
||||
</p>
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
<span className="font-semibold">Description: </span>
|
||||
{props.details?.description && props.details.description}
|
||||
</p>
|
||||
<p className="text-base text-sky-blue">Delivery Detail</p>
|
||||
<div className="">
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
<span className="font-semibold">Due: </span>
|
||||
{props.details?.delivery_date &&
|
||||
props.details.delivery_date.split(" ")[0]}
|
||||
</p>
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
{props.details?.delivery_date &&
|
||||
props.details.delivery_date.split(" ")[1]}
|
||||
</p>
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
{props.details?.timeline_days && props.details.timeline_days} day(s)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full lg:w-1/3 lg:text-center">
|
||||
<p className="text-base text-sky-blue">
|
||||
<p className="w-full lg:w-1/3 text-base text-sky-blue">
|
||||
{userDetails.firstname && userDetails.firstname}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
<span className="font-semibold">Description: </span>
|
||||
{props.details?.description && props.details.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* end of job title */}
|
||||
|
||||
<div className="mt-5 bg-white p-4 rounded-md shadow-md">
|
||||
{/* job details */}
|
||||
<div className="w-full lg:w-1/2">
|
||||
<p className="text-base text-sky-blue">Delivery Detail</p>
|
||||
<div className="mt-2">
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
<span className="font-semibold">Due: </span>
|
||||
{props.details?.delivery_date &&
|
||||
props.details.delivery_date.split(" ")[0]}
|
||||
</p>
|
||||
<p className="py-2 text-base text-slate-700 dark:text-black">
|
||||
{props.details?.delivery_date &&
|
||||
props.details.delivery_date.split(" ")[1]}
|
||||
</p>
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
{props.details?.timeline_days && props.details.timeline_days} day(s)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* end of job details */}
|
||||
</div>
|
||||
|
||||
<div className="my-4 py-[20px] bg-white px-4 rounded-2xl shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<div className="">
|
||||
<p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p>
|
||||
<textarea
|
||||
className="p-4 w-full text-base text-slate-600 border-y border-slate-300 outline-none"
|
||||
rows="10"
|
||||
style={{ resize: "none" }}
|
||||
name='message'
|
||||
onChange={handleMessageChange}
|
||||
value={messageToSend}
|
||||
/>
|
||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
|
||||
<p className="my-3 py-1 text-base">
|
||||
Waiting for the completion message from the client before you can approve.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
<div className="w-full">
|
||||
{/* error or success display */}
|
||||
{requestStatus.message != "" &&
|
||||
(!requestStatus.status ? (
|
||||
<div
|
||||
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
{/* TEXTAREA SECTION */}
|
||||
<div className="mt-5">
|
||||
<div className="">
|
||||
{/* <p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p> */}
|
||||
<div className="my-2 flex items-center border-b border-slate-300">
|
||||
<button
|
||||
name='message'
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-black border ${tab == 'message'? 'border-sky-blue':'border-slate-300'} tracking-wide transition duration-200`}>
|
||||
Send Message
|
||||
</button>
|
||||
<button
|
||||
name='files'
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-black border ${tab == 'files'? 'border-sky-blue':'border-slate-300'} tracking-wide transition duration-200`}>
|
||||
Send Files
|
||||
</button>
|
||||
</div>
|
||||
{tab == 'message' ?
|
||||
(
|
||||
<textarea
|
||||
className="p-4 w-full h-[300px] text-base text-slate-600 border border-slate-300 outline-none"
|
||||
// rows="10"
|
||||
style={{ resize: "none" }}
|
||||
name='message'
|
||||
onChange={handleMessageChange}
|
||||
value={messageToSend}
|
||||
/>
|
||||
)
|
||||
:
|
||||
<div className="p-4 w-full h-[300px] text-base text-slate-600 border border-slate-300">
|
||||
<div className="files">
|
||||
<label htmlFor="file" className="h-20 btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer">Select Files to Upload</label>
|
||||
<input type="file" id='file' style={{display: 'none'}} onChange={handleFileChange}/>
|
||||
</div>
|
||||
<div className="selected_file my-2">
|
||||
{filesToSend.length > 0 &&
|
||||
filesToSend.map((item, index)=> (
|
||||
<p key={index} className="flex items-center space-x-2">
|
||||
<span>{item.name}</span>
|
||||
<button name='remove' onClick={()=>handleRemoveImage(item)} className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500">x</button>
|
||||
</p>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
requestStatus.status && (
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
<div className="w-full">
|
||||
{/* error or success display */}
|
||||
{requestStatus.message != "" &&
|
||||
(!requestStatus.status ? (
|
||||
<div
|
||||
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
{/* End of error or success display */}
|
||||
) : (
|
||||
requestStatus.status && (
|
||||
<div
|
||||
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
{/* End of error or success display */}
|
||||
|
||||
{/* Buttons Sections */}
|
||||
<div className="py-2 mb-8 sm:flex sm:justify-center sm:items-center">
|
||||
<div className="w-full sm:w-2/4 mb-5 sm:mb-0">
|
||||
<button
|
||||
onClick={()=>{console.log('working')}}
|
||||
type="button"
|
||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
|
||||
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
|
||||
</svg>
|
||||
{/* Buttons Sections */}
|
||||
<div className="py-2 sm:flex sm:justify-end sm:items-center">
|
||||
{/* <div className="w-full mb-3 sm:mb-0 sm:w-2/4">
|
||||
{tab == 'files' &&
|
||||
(
|
||||
<button
|
||||
onClick={()=>{console.log('working')}}
|
||||
type="button"
|
||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
|
||||
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
|
||||
</svg>
|
||||
|
||||
<span className="text-white">Upload Files</span>
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-white">Upload Files</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
</div> */}
|
||||
|
||||
<div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
|
||||
>
|
||||
<span className="text-white">Clear</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={sendTaskMessage}
|
||||
type="button"
|
||||
className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
|
||||
>
|
||||
{requestStatus.loading ?
|
||||
<LoadingSpinner size='6' color='sky-blue' />
|
||||
<div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClearAll}
|
||||
className="border-gradient text-base tracking-wide px-4 py-3 rounded-full"
|
||||
>
|
||||
<span className="text-gradient">Clear</span>
|
||||
</button>
|
||||
{tab == 'files' ?
|
||||
(
|
||||
<button
|
||||
onClick={()=>{console.log('working')}}
|
||||
type="button"
|
||||
className="btn-gradient text-base tracking-wide px-4 py-3 rounded-full flex justify-center items-center"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
|
||||
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
|
||||
</svg>
|
||||
|
||||
<span className="text-white">Upload Files</span>
|
||||
</button>
|
||||
)
|
||||
:
|
||||
<span className="text-white">Send</span>
|
||||
}
|
||||
</button>
|
||||
(
|
||||
<button
|
||||
onClick={sendTaskMessage}
|
||||
type="button"
|
||||
className="btn-gradient text-base text-white tracking-wide px-4 py-3 rounded-full"
|
||||
>
|
||||
{requestStatus.loading ?
|
||||
<LoadingSpinner size='6' color='sky-blue' />
|
||||
:
|
||||
<span className="text-white">Send</span>
|
||||
}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* end of Buttons Sections */}
|
||||
</div>
|
||||
{/* end of Buttons Sections */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ACTION SECTION */}
|
||||
<div className="w-full lg:w-1/2 h-full">
|
||||
<div className="py-[20px] bg-white px-4 rounded-md shadow-md">
|
||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
|
||||
|
||||
<p className="my-3 py-1 text-base">
|
||||
Waiting for the completion message from the client before you can approve.
|
||||
</p>
|
||||
{/* END OF TEXTAREA */}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 bg-white p-4 rounded-md shadow-md">
|
||||
<div className="">
|
||||
<p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
|
||||
{props.activeJobMesList.loading ?
|
||||
<LoadingSpinner size='16' color='sky-blue' />
|
||||
:
|
||||
<ActiveJobMessage activeJobMesList={props.activeJobMesList} />
|
||||
}
|
||||
</div>
|
||||
{/* MESSAGE SECTION */}
|
||||
<div className="w-full lg:w-1/2">
|
||||
<p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
|
||||
{props.activeJobMesList.loading ?
|
||||
<LoadingSpinner size='16' color='sky-blue' />
|
||||
:
|
||||
<ActiveJobMessage activeJobMesList={props.activeJobMesList} />
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* END OF MESSAGE */}
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user