Added style for manage media task page #684
@@ -117,4 +117,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
|
||||
REACT_APP_SHOW_SLIDER_BANNERS=0
|
||||
|
||||
# FOR MEDIA LINK
|
||||
REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com '
|
||||
REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
|
||||
+1
-1
@@ -85,4 +85,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
|
||||
REACT_APP_SHOW_SLIDER_BANNERS=0
|
||||
|
||||
# FOR MEDIA LINK
|
||||
REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com '
|
||||
REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
|
||||
+1
-1
@@ -91,4 +91,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
|
||||
REACT_APP_SHOW_SLIDER_BANNERS=0
|
||||
|
||||
# FOR MEDIA LINK
|
||||
REACT_APP_MEDIA_LINK='https://media.wrenchboard.com '
|
||||
REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
|
||||
@@ -8,7 +8,7 @@ import SelectBox from "../Helpers/SelectBox";
|
||||
export default function ActiveJobMessageMedia({ activeJobMesList }) {
|
||||
return (
|
||||
<div className='flex flex-col justify-between'>
|
||||
<div className="w-full h-full min-h-[200px] max-h-[200px] overflow-y-auto">
|
||||
<div className="w-full h-full min-h-[250px] max-h-[250px] overflow-y-auto">
|
||||
<table className="wallet-activity w-full table-auto border-collapse text-left">
|
||||
<thead className='border-b-2'>
|
||||
<tr className='text-slate-600'>
|
||||
|
||||
@@ -312,21 +312,23 @@ function ActiveJobsMedia(props) {
|
||||
<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">
|
||||
<VideoElement videoId={''} />
|
||||
<VideoElement videoId={props?.details?.media_uid} />
|
||||
</div>
|
||||
|
||||
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-2">
|
||||
<div className="w-full">
|
||||
<p className="w-full text-base text-right text-sky-blue">
|
||||
{props?.details && props.details.job_to}
|
||||
</p>
|
||||
<div className="text-base text-slate-700 dark:text-white tracking-wide">
|
||||
<p className="font-semibold text-black dark:text-white">
|
||||
Description:{" "}
|
||||
</p>
|
||||
<p className="p-2 border border-sky-blue">
|
||||
{props?.details && props.details.description}
|
||||
</p>
|
||||
<div className="w-full flex flex-col justify-between">
|
||||
<div className="w-full">
|
||||
<p className="w-full text-base text-right text-sky-blue">
|
||||
{props?.details && props.details.job_to}
|
||||
</p>
|
||||
<div className="text-base text-slate-700 dark:text-white tracking-wide">
|
||||
<p className="font-semibold text-black dark:text-white">
|
||||
Description:{" "}
|
||||
</p>
|
||||
<p className="p-2 border border-sky-blue">
|
||||
{props?.details && props.details.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-2">
|
||||
<IndexJobActions details={props.details} />
|
||||
@@ -397,13 +399,13 @@ function ActiveJobsMedia(props) {
|
||||
|
||||
<div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1">
|
||||
{/* TEXTAREA SECTION */}
|
||||
<div className="mb-5">
|
||||
<div className="w-full mb-3">
|
||||
<div className="w-full">
|
||||
<div className="pl-7 mb-2 flex items-center border-b border-slate-300 gap-3">
|
||||
<button
|
||||
name="message"
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`px-4 py-1 rounded-t-2xl ${
|
||||
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]"
|
||||
@@ -414,7 +416,7 @@ function ActiveJobsMedia(props) {
|
||||
<button
|
||||
name="files"
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`px-4 py-1 rounded-t-2xl ${
|
||||
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]"
|
||||
@@ -438,7 +440,7 @@ function ActiveJobsMedia(props) {
|
||||
<div className="files">
|
||||
<label
|
||||
htmlFor="file"
|
||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
|
||||
className="custom-btn btn-gradient text-base text-white"
|
||||
>
|
||||
Select Files to Upload
|
||||
</label>
|
||||
@@ -450,7 +452,7 @@ function ActiveJobsMedia(props) {
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="selected_file my-2">
|
||||
<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">
|
||||
@@ -492,12 +494,12 @@ function ActiveJobsMedia(props) {
|
||||
{/* 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">
|
||||
<div className="py-1 sm:flex sm:justify-end sm:items-center">
|
||||
<div className="w-full 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"
|
||||
className="custom-btn border-gradient"
|
||||
>
|
||||
<span className="text-gradient">Clear</span>
|
||||
</button>
|
||||
@@ -505,7 +507,7 @@ function ActiveJobsMedia(props) {
|
||||
<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"
|
||||
className="custom-btn btn-gradient text-white"
|
||||
>
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
@@ -514,8 +516,8 @@ function ActiveJobsMedia(props) {
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="white"
|
||||
>
|
||||
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
|
||||
@@ -529,7 +531,7 @@ function ActiveJobsMedia(props) {
|
||||
<button
|
||||
onClick={sendTaskMessage}
|
||||
type="button"
|
||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
|
||||
className="custom-btn btn-gradient text-white"
|
||||
>
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
@@ -618,13 +620,13 @@ const PopModal = ({
|
||||
ref={myRef}
|
||||
className="message-modal-wrapper w-11/12 min-w-[350px] max-w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto"
|
||||
>
|
||||
<div className="message-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
<div className="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
{details?.contract}
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={popUpHandler}
|
||||
>
|
||||
<svg
|
||||
@@ -708,14 +710,14 @@ const PopModal = ({
|
||||
<button
|
||||
onClick={handlePrint}
|
||||
type="button"
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
className="custom-btn btn-gradient text-white"
|
||||
>
|
||||
<span className="text-white">Print</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={popUpHandler}
|
||||
type="button"
|
||||
className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
|
||||
className="custom-btn border-gradient text-white"
|
||||
>
|
||||
<span className="text-gradient">Cancel</span>
|
||||
</button>
|
||||
|
||||
@@ -60,20 +60,30 @@ function CurrentTaskAction({jobDetails}) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='job-action dark:bg-black'>
|
||||
|
||||
<div className="w-full text-sm text-left text-gray-500 active-worker ">
|
||||
<div className="flex space-x-2 items-center w-full task_action_panel">
|
||||
<div>
|
||||
I completed this task and ready for review and acceptance.
|
||||
</div>
|
||||
</div>
|
||||
<div className='dark:bg-black'>
|
||||
|
||||
<div className="w-full text-sm text-left text-gray-500">
|
||||
{jobDetails.job_type == 'MEDIA' ?
|
||||
<div className="flex justify-center items-center">
|
||||
<button onClick={popUpHandler} type="button" className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
|
||||
Send for Review
|
||||
<button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
|
||||
I have completed this task
|
||||
</button>
|
||||
</div>
|
||||
:
|
||||
<div className='job-action active-worker'>
|
||||
<div className="flex space-x-2 items-center w-full task_action_panel">
|
||||
<div>
|
||||
I completed this task and ready for review and acceptance.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center items-center">
|
||||
<button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
|
||||
Send for Review
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
{popUp && (
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function VideoElement({videoId}) {
|
||||
|
||||
return (
|
||||
<video ref={videoRef} className='w-full h-full' controls>
|
||||
<source src={`https://dev-media.wrenchboard.com/videos/${videoId}`} type='video/mp4'></source>
|
||||
<source src={`${process.env.REACT_APP_MEDIA_LINK}/videos/${videoId}`} type='video/mp4'></source>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
)
|
||||
|
||||
@@ -61,22 +61,24 @@ function ManageActiveJobs() {
|
||||
setDetails(state);
|
||||
getActiveJobMesList();
|
||||
}, [activeJobMesListReload, chatMessageList]);
|
||||
console.log('Opps', details)
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* {details.job_type == 'TASK' ? */}
|
||||
<ActiveJobs
|
||||
{details.job_type == 'MEDIA' ?
|
||||
<ActiveJobsMedia
|
||||
details={state}
|
||||
activeJobMesList={activeJobMesList}
|
||||
reloadActiveJobList={setActiveJobMesListReload}
|
||||
/>
|
||||
{/* :
|
||||
<ActiveJobsMedia
|
||||
: details.job_type == 'TASK' ?
|
||||
<ActiveJobs
|
||||
details={state}
|
||||
activeJobMesList={activeJobMesList}
|
||||
reloadActiveJobList={setActiveJobMesListReload}
|
||||
/>
|
||||
} */}
|
||||
:
|
||||
null
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user