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

Merge branch 'media-page-update' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2024-04-11 14:51:31 +00:00
committed by Gogs
parent 688592e1a3 7ca8c23479
commit 8c475a56bb
4 changed files with 389 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyActiveJobs/ActiveJobs.jsx
+117 -124
View File
@@ -12,6 +12,7 @@ import IndexJobActions from "./JobActions/IndexJobActions";
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import { PriceFormatter } from "../Helpers/PriceFormatter"; import { PriceFormatter } from "../Helpers/PriceFormatter";
import { SocketValues } from "../Contexts/SocketIOContext"; import { SocketValues } from "../Contexts/SocketIOContext";
import TabButton from "../customTabs/TabButton";
function ActiveJobs(props) { function ActiveJobs(props) {
let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -29,7 +30,9 @@ function ActiveJobs(props) {
const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
const [tab, setTab] = useState("message"); // const [tab, setTab] = useState("message");
const tabs = ["Send Message", "Send Files",] //STATE FOR SWITCHING BETWEEN TABS
const [selectedTab, setSelectedTab] = useState(tabs[0]);
const [requestStatus, setRequestStatus] = useState({ const [requestStatus, setRequestStatus] = useState({
loading: false, loading: false,
@@ -93,9 +96,9 @@ function ActiveJobs(props) {
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
const handleClearAll = ({ target: { name } }) => { const handleClearAll = ({ target: { name } }) => {
if (tab == "message") { if (selectedTab == "Send Message") {
setMessageToSend(""); setMessageToSend("");
} else if (tab == "files") { } else if (selectedTab == "Send Files") {
setFilesToSend([]); setFilesToSend([]);
} else { } else {
return; return;
@@ -394,78 +397,119 @@ function ActiveJobs(props) {
{/* TEXTAREA SECTION */} {/* TEXTAREA SECTION */}
<div className="mt-5"> <div className="mt-5">
<div className=""> <div className="w-full">
<div {/* switch button */}
className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3" <div className="grid grid-cols-2">
// className='ml-7 flex justify-start items-center gap-3' {tabs.map((item) => (
> <TabButton
<button key={item}
name="message" item={item}
onClick={(e) => setTab(e.target.name)} selectedTab={selectedTab}
className={`px-4 py-1 rounded-t-2xl ${ setSelectedTab={setSelectedTab}
tab == "message"
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
: "bg-white text-[#000] border-t-[2px]"
}`}
>
Send Message
</button>
<button
name="files"
onClick={(e) => setTab(e.target.name)}
className={`px-4 py-1 rounded-t-2xl ${
tab == "files"
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
: "bg-white text-[#000] border-t-[2px]"
}`}
>
Send Files
</button>
</div>
{tab == "message" ? (
<textarea
className="p-4 w-full h-[200px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-slate-300 outline-none"
// rows="10"
style={{ resize: "none" }}
name="message"
onChange={handleMessageChange}
value={messageToSend}
autoFocus
/>
) : (
<div className="p-4 w-full h-[200px] text-base text-slate-600 border border-slate-300">
<div className="files">
<label
htmlFor="file"
className="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"
accept="image/*"
style={{ display: "none" }}
onChange={handleFileChange}
/> />
</div> ))}
<div className="selected_file my-2"> </div>
{filesToSend.length > 0 && {/* switch button */}
filesToSend.map((item, index) => ( <div className="w-full bg-red-50 overflow-x-auto">
<p key={index} className="flex items-center space-x-2"> {selectedTab == "Send Message" ? (
<span>{item.name}</span> <div className="p-2 w-full">
<button <textarea
name="remove" className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black outline-none"
onClick={() => handleRemoveImage(item)} // rows="10"
className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500" style={{ resize: "none" }}
> name="message"
x onChange={handleMessageChange}
</button> value={messageToSend}
</p> autoFocus
))} />
</div> </div>
) : (
<div className="p-2 w-full">
<div className="p-4 mb-2 h-[150px] text-base text-slate-600">
<div className="files flex">
<label
htmlFor="file"
className="custom-btn btn-gradient text-base text-white"
>
Select Files to Upload
</label>
<input
type="file"
id="file"
accept="image/*"
style={{ display: "none" }}
onChange={handleFileChange}
/>
</div>
<div className="selected_file my-2 overflow-y-auto">
{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>
)}
{/* Buttons Sections */}
<div className="p-2 grid grid-cols-1 xxs:grid-cols-3">
<div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
<button
type="button"
onClick={handleClearAll}
className="custom-btn border-gradient"
>
<span className="text-gradient">Clear</span>
</button>
{selectedTab == "Send Files" ? (
<button
onClick={sendFile}
type="button"
className="custom-btn btn-gradient text-white"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="20"
height="20"
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="custom-btn btn-gradient text-white"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<span className="text-white">Send</span>
)}
</button>
)}
</div>
</div>
{/* end of Buttons Sections */}
</div> </div>
)}
</div> </div>
{/* ERROR DISPLAY AND SUBMIT BUTTON */} {/* ERROR DISPLAY AND SUBMIT BUTTON */}
@@ -489,57 +533,6 @@ function ActiveJobs(props) {
))} ))}
</div> </div>
{/* End of error or success display */} {/* End of error or success display */}
{/* Buttons Sections */}
<div className="py-2 sm:flex sm:justify-end sm:items-center">
<div className="w-full sm:w-3/4 flex justify-between items-center space-x-2">
<button
type="button"
onClick={handleClearAll}
className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
>
<span className="text-gradient">Clear</span>
</button>
{tab == "files" ? (
<button
onClick={sendFile}
type="button"
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<>
<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 tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<span className="text-white">Send</span>
)}
</button>
)}
</div>
</div>
{/* end of Buttons Sections */}
</div> </div>
{/* END OF TEXTAREA */} {/* END OF TEXTAREA */}
</div> </div>
src/components/MyActiveJobs/ActiveJobsMedia.jsx
+264 -287
View File
@@ -15,6 +15,7 @@ const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import { PriceFormatter } from "../Helpers/PriceFormatter"; import { PriceFormatter } from "../Helpers/PriceFormatter";
import { SocketValues } from "../Contexts/SocketIOContext"; import { SocketValues } from "../Contexts/SocketIOContext";
import TabButton from "../customTabs/TabButton";
function ActiveJobsMedia(props) { function ActiveJobsMedia(props) {
let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -32,7 +33,9 @@ function ActiveJobsMedia(props) {
const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
const [tab, setTab] = useState("message"); // const [tab, setTab] = useState("message");
const tabs = ["Send Message", "Send Files",] //STATE FOR SWITCHING BETWEEN TABS
const [selectedTab, setSelectedTab] = useState(tabs[0]);
const [requestStatus, setRequestStatus] = useState({ const [requestStatus, setRequestStatus] = useState({
loading: false, loading: false,
@@ -96,9 +99,9 @@ function ActiveJobsMedia(props) {
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
const handleClearAll = ({ target: { name } }) => { const handleClearAll = ({ target: { name } }) => {
if (tab == "message") { if (selectedTab == "Send Message") {
setMessageToSend(""); setMessageToSend("");
} else if (tab == "files") { } else if (selectedTab == "Send Files") {
setFilesToSend([]); setFilesToSend([]);
} else { } else {
return; return;
@@ -275,314 +278,288 @@ function ActiveJobsMedia(props) {
backpath={props.details.pathname} backpath={props.details.pathname}
title={props.details?.title ? props.details.title : ''} title={props.details?.title ? props.details.title : ''}
> >
{/* job title */} <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
{/* <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16"> <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
<div className="w-full">
<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"
onClick={() => {
if (props.details.pathname == "/manage-family") {
navigate(
props.details.pathname,
{ state: { ...props.details.accountDetails } },
{ replace: true }
);
} else {
navigate(props.details.pathname, { replace: true });
}
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 24 24"
fill="skyblue"
>
<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-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
{props.details?.title && props.details.title}
</h1>
</div>
</div>
</div> */}
{/* end of job title */}
<div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
<div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
<div className="mb-4 w-full h-auto"> <div className="mb-4 w-full h-auto">
<VideoElement videoId={props?.details?.media_uid} /> <VideoElement videoId={props?.details?.media_uid} />
</div> </div>
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8"> <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md xl:flex xl:justify-between gap-4">
<div className="w-full flex flex-col justify-between"> <div className="w-full flex flex-col justify-between">
<div className="w-full"> {/* <p className="w-full text-base text-right text-sky-blue">
<p className="w-full text-base text-right text-sky-blue"> {props?.details && props.details.job_to}
{props?.details && props.details.job_to} </p> */}
</p> <div className="text-base tracking-wide">
<div className="text-base tracking-wide"> <p className="font-semibold text-black dark:text-white tracking-wider">
<p className="font-semibold text-black dark:text-white tracking-wider"> Description:{" "}
Description:{" "} </p>
</p> <p className="p-2 ml-8 border-b border-sky-blue">
<p className="p-2 ml-8 border-b border-sky-blue"> {props?.details && props.details.description}
{props?.details && props.details.description} </p>
</p> </div>
</div> <div className="mt-6 w-full">
<div className="mt-6 w-full lg:flex gap-8"> <div className="w-full text-base tracking-wide">
<div className="w-full text-base tracking-wide"> <p className="font-semibold text-black dark:text-white tracking-wider">
<p className="font-semibold text-black dark:text-white tracking-wider"> Delivery Detail:{" "}
Delivery Detail:{" "} </p>
</p> <p className="p-2 ml-8">
<p className="p-2 ml-8"> {props?.details && props.details.job_description}
{props?.details && props.details.job_description} </p>
</p> </div>
</div> {/* <div className="my-2 xl:my-0">
<div className="my-2 lg:my-0"> <IndexJobActions details={props.details} />
<IndexJobActions details={props.details} /> </div> */}
</div> </div>
</div>
</div>
</div> </div>
{/* job details */} <div className="flex justify-between items-center gap-1 xl:min-w-[350px]">
<div className="w-full md:w-[200px] flex flex-col justify-center gap-4"> <div className="h-[150px] xl:h-full w-[150px] xl:min-w-[150px]">
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */} <IndexJobActions details={props.details} />
{passDue ? ( </div>
<div className="my-1"> {/* job details */}
<p className="text-base text-slate-700"> <div className="min-w-[170px] flex flex-col justify-center gap-2">
<span className="font-semibold">Due: </span> {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
{props?.details && props.details.delivery_date.split(" ")[0]} {passDue ? (
</p> <div className="my-1">
{props?.delivery_date && ( <p className="text-base text-slate-700">
<p className="py-2 text-base text-slate-700"> <span className="font-semibold">Due: </span>
{props.details.delivery_date.split(" ")[1]} {props?.details && props.details.delivery_date.split(" ")[0]}
</p> </p>
)} {props?.delivery_date && (
</div> <p className="py-2 text-base text-slate-700">
) : ( {props.details.delivery_date.split(" ")[1]}
<div className="my-1 flex items-start gap-3"> </p>
<p className="font-semibold">Due: </p> )}
<div className="flex flex-col justify-between"> </div>
<p className="text-base text-slate-700 tracking-wide"> ) : (
<CountDown <div className="my-1 flex items-start gap-3">
lastDate={props?.details && props.details.delivery_date} <p className="font-semibold">Due: </p>
/> <div className="flex flex-col justify-between">
</p> <p className="text-base text-slate-700 tracking-wide">
<div className="text-base text-slate-700 tracking-wide flex gap-[5px]"> <CountDown
<span>Hrs</span> lastDate={props?.details && props.details.delivery_date}
<span>Min</span> />
<span>Sec</span> </p>
</div> <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
</div> <span>Hrs</span>
</div> <span>Min</span>
)} <span>Sec</span>
</div>
</div>
</div>
)}
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3"> <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
<span className="font-semibold text-black dark:text-white"> <span className="font-semibold text-black dark:text-white">
Reward:{" "} Reward:{" "}
</span> </span>
<span className="">{thePrice}</span> <span className="">{thePrice}</span>
</div> </div>
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3"> <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
<span className="font-semibold text-black dark:text-white"> <span className="font-semibold text-black dark:text-white">
Duration:{" "} Duration:{" "}
</span> </span>
<span className=""> <span className="">
{props.details?.timeline_days && props.details.timeline_days}{" "} {props.details?.timeline_days && props.details.timeline_days}{" "}
day(s) day(s)
</span> </span>
</div> </div>
{/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3"> </div>
<span className="font-semibold text-black dark:text-white"> {/* end of job details */}
No:{" "}
</span>
<span className="">
{props.details?.contract && props.details.contract}
</span>
</div> */}
</div> </div>
{/* end of job details */}
</div>
</div> </div>
</div>
<div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4"> <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
{/* TEXTAREA SECTION */} {/* TEXTAREA SECTION */}
<div className="w-full mb-3"> <div className="w-full mb-3">
<div className="w-full"> <div className="w-full">
<div className="pl-7 flex items-center gap-3"> {/* <div className="pl-7 flex items-center gap-3">
<button <button
name="message"
onClick={(e) => setTab(e.target.name)}
className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
tab == "message"
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
: "bg-white text-[#000] border-t-[2px]"
}`}
>
Send Message
</button>
<button
name="files"
onClick={(e) => setTab(e.target.name)}
className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
tab == "files"
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
: "bg-white text-[#000] border-t-[2px]"
}`}
>
Send Files
</button>
</div> */}
{/* switch button */}
<div className="grid grid-cols-2">
{tabs.map((item) => (
<TabButton
key={item}
item={item}
selectedTab={selectedTab}
setSelectedTab={setSelectedTab}
/>
))}
</div>
{/* switch button */}
<div className="w-full bg-red-50 overflow-x-auto">
{selectedTab == "Send Message" ? (
<div className="p-2 w-full">
<textarea
className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black outline-none"
// rows="10"
style={{ resize: "none" }}
name="message" name="message"
onClick={(e) => setTab(e.target.name)} onChange={handleMessageChange}
className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${ value={messageToSend}
tab == "message" autoFocus
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
: "bg-white text-[#000] border-t-[2px]"
}`}
>
Send Message
</button>
<button
name="files"
onClick={(e) => setTab(e.target.name)}
className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
tab == "files"
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
: "bg-white text-[#000] border-t-[2px]"
}`}
>
Send Files
</button>
</div>
{tab == "message" ? (
<textarea
className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border-4 border-[#4687ba] outline-none"
// rows="10"
style={{ resize: "none" }}
name="message"
onChange={handleMessageChange}
value={messageToSend}
autoFocus
/>
) : (
<div className="p-4 mb-2 h-[150px] text-base text-slate-600 border-4 border-[#4687ba]">
<div className="files flex">
<label
htmlFor="file"
className="custom-btn btn-gradient text-base text-white"
>
Select Files to Upload
</label>
<input
type="file"
id="file"
accept="image/*"
style={{ display: "none" }}
onChange={handleFileChange}
/> />
</div> </div>
<div className="selected_file my-2 overflow-y-auto"> ) : (
{filesToSend.length > 0 && <div className="p-2 w-full">
filesToSend.map((item, index) => ( <div className="p-4 mb-2 h-[150px] text-base text-slate-600">
<p key={index} className="flex items-center space-x-2"> <div className="files flex">
<span>{item.name}</span> <label
<button htmlFor="file"
name="remove" className="custom-btn btn-gradient text-base text-white"
onClick={() => handleRemoveImage(item)} >
className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500" Select Files to Upload
> </label>
x <input
</button> type="file"
</p> id="file"
))} accept="image/*"
</div> style={{ display: "none" }}
onChange={handleFileChange}
/>
</div>
<div className="selected_file my-2 overflow-y-auto">
{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> </div>
)} )}
</div> {/* Buttons Sections */}
<div className="p-2 grid grid-cols-1 xxs:grid-cols-3">
{/* ERROR DISPLAY AND SUBMIT BUTTON */} <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
<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}
</div>
) : (
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-1 grid grid-cols-1 xxs:grid-cols-3">
<div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
<button
type="button"
onClick={handleClearAll}
className="custom-btn border-gradient"
>
<span className="text-gradient">Clear</span>
</button>
{tab == "files" ? (
<button <button
onClick={sendFile} type="button"
type="button" onClick={handleClearAll}
className="custom-btn btn-gradient text-white" className="custom-btn border-gradient"
> >
{requestStatus.loading ? ( <span className="text-gradient">Clear</span>
<LoadingSpinner size="6" color="sky-blue" /> </button>
) : ( {selectedTab == "Send Files" ? (
<> <button
<svg onClick={sendFile}
xmlns="http://www.w3.org/2000/svg" type="button"
viewBox="0 0 24 24" className="custom-btn btn-gradient text-white"
width="20"
height="20"
fill="white"
> >
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" /> {requestStatus.loading ? (
</svg> <LoadingSpinner size="6" color="sky-blue" />
) : (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="20"
height="20"
fill="white"
>
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
</svg>
<span className="text-white">Upload Files</span> <span className="text-white">Upload Files</span>
</> </>
)} )}
</button> </button>
) : (
<button
onClick={sendTaskMessage}
type="button"
className="custom-btn btn-gradient text-white"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : ( ) : (
<span className="text-white">Send</span> <button
onClick={sendTaskMessage}
type="button"
className="custom-btn btn-gradient text-white"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<span className="text-white">Send</span>
)}
</button>
)} )}
</button> </div>
)}
</div> </div>
</div> {/* end of Buttons Sections */}
{/* end of Buttons Sections */} </div>
</div> </div>
{/* END OF TEXTAREA */}
{/* MESSAGE SECTION */} {/* ERROR DISPLAY AND SUBMIT BUTTON */}
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md"> <div className="w-full">
<div className="flex justify-between items-center gap-5"> {/* error or success display */}
<p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> {requestStatus.message != "" &&
<span>Message</span> (!requestStatus.status ? (
<button <div
type="button" 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]`}
onClick={popUpHandler} >
className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400" {requestStatus.message}
> </div>
View all ) : (
</button> requestStatus.status && (
</p> <div
</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]`}
{props.activeJobMesList.loading ? ( >
<LoadingSpinner size="16" color="sky-blue" /> {requestStatus.message}
) : ( </div>
<ActiveJobMessageMedia activeJobMesList={props.activeJobMesList} /> )
)} ))}
</div> </div>
{/* END OF MESSAGE */} {/* End of error or success display */}
</div> </div>
</div> {/* END OF TEXTAREA */}
{/* MESSAGE SECTION */}
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md">
<div className="flex justify-between items-center gap-5">
<p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between">
<span>Message</span>
<button
type="button"
onClick={popUpHandler}
className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400"
>
View all
</button>
</p>
</div>
{props.activeJobMesList.loading ? (
<LoadingSpinner size="16" color="sky-blue" />
) : (
<ActiveJobMessageMedia activeJobMesList={props.activeJobMesList} />
)}
</div>
{/* END OF MESSAGE */}
</div>
</div>
{/* POPOUT SECTION */} {/* POPOUT SECTION */}
{popUp && ( {popUp && (
src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
+4 -4
View File
@@ -60,12 +60,12 @@ function CurrentTaskAction({jobDetails}) {
} }
return ( return (
<div className='dark:bg-black'> <div className='h-full dark:bg-black'>
<div className="w-full text-sm text-left text-gray-500"> <div className="h-full w-full text-sm text-left text-gray-500">
{jobDetails.job_type == 'MEDIA' ? {jobDetails.job_type == 'MEDIA' ?
<div className="flex justify-center items-center"> <div className="h-full flex justify-center items-center">
<button onClick={popUpHandler} type="button" className="btn-gradient text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"> <button onClick={popUpHandler} type="button" className="btn-gradient h-full text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
I have completed this task I have completed this task
</button> </button>
</div> </div>
src/components/Partials/MediaLayout.jsx
+4 -18
View File
@@ -53,22 +53,11 @@ export default function MediaLayout({backpath, title, children }) {
return ( return (
<> <>
<div className="nft-main-wrapper-layout media container mx-auto"> <div className="relative w-full max-w-[2000px] nft-main-wrapper-layout mx-auto">
<div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}> <div className={`nft-wrapper-layout-container w-full min-h-screen flex`}>
{/* sidebar */} <div className={`w-full nft-header-container-wrapper h-full 2xl:px-10 px-8`}>
{/*<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>*/}
{/* <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />*/}
{/*</div>*/}
{/*{MobileSideBar && (*/}
{/* <div onClick={() => setMobileSidebar.toggle()} className="bg-black bg-opacity-20 fixed left-0 top-0 w-full h-full z-[50] block xl:hidden"></div>*/}
{/*)}*/}
{/*<div className={`nft-sidebar block xl:hidden section-shadow w-[280px] pl-3 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>*/}
{/* <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />*/}
{/*</div>*/}
{/* end sidebar */}
<div className={`nft-header-container-wrapper flex-1 md:ml-12 xl:ml-[110px] h-full`}>
{/* header */} {/* header */}
<div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 "> <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0">
<MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} /> <MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
</div> </div>
{/* container */} {/* container */}
@@ -76,9 +65,6 @@ export default function MediaLayout({backpath, title, children }) {
<div className="nft-main-container_media flex-[100%] w-full"> <div className="nft-main-container_media flex-[100%] w-full">
{children && children} {children && children}
</div> </div>
{/*<div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">*/}
{/* <RightSideBar myJobList={userJobList} />*/}
{/*</div>*/}
</div> </div>
</div> </div>
</div> </div>