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

created tab for message and files #126

Merged
ameye merged 1 commits from manage-active-job-tab into master 2023-05-31 19:52:46 +00:00
Conversation 0 Commits 1 Files Changed 1
+123 -38
1 changed files with 123 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyActiveJobs/ActiveJobs.jsx
+123 -38
View File
@@ -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,28 @@ function ActiveJobs(props) {
setMessageToSend(value)
}
// FUNCTION TO HANDLE FILE UplOAD CHANGE
const handleFileChange = ({target:{files}}) => {
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))
console.log(id)
}
// FUNCTION TO SEND TASK MESSAGE
const sendTaskMessage = () => {
let reqData={message: messageToSend, msg_type: 'TEXT', contract:props.details.contract}
@@ -52,7 +78,7 @@ function ActiveJobs(props) {
return (
<Layout>
<div className="py-[20px] bg-white px-4 rounded-md shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
<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">
@@ -115,7 +141,7 @@ function ActiveJobs(props) {
{/* end of job details */}
</div>
<div className="my-4 py-[20px] bg-white px-4 rounded-md shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
<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="">
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
@@ -125,17 +151,52 @@ function ActiveJobs(props) {
</div>
{/* TEXTAREA SECTION */}
<div className="mt-3">
<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>
<textarea
className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none"
rows="10"
style={{ resize: "none" }}
name='message'
onChange={handleMessageChange}
value={messageToSend}
/>
{/* <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 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 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>
}
</div>
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
@@ -161,39 +222,63 @@ function ActiveJobs(props) {
{/* End of error or success display */}
{/* Buttons Sections */}
<div className="py-2 sm:flex sm:justify-center sm:items-center">
<div className="w-full mb-3 sm:mb-0 sm:w-2/4">
<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>
<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"
onClick={handleClearAll}
className="border-gradient text-base tracking-wide px-4 py-3 rounded-full"
>
<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' />
:
<span className="text-white">Send</span>
}
<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>
)
:
(
<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>