Merge branch 'manage-media-taskpage' of WrenchBoard/Users-Wrench into master

This commit is contained in:
2024-03-28 16:55:39 +00:00
committed by Gogs
8 changed files with 64 additions and 50 deletions
+1 -1
View File
@@ -117,4 +117,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
REACT_APP_SHOW_SLIDER_BANNERS=0 REACT_APP_SHOW_SLIDER_BANNERS=0
# FOR MEDIA LINK # FOR MEDIA LINK
REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com ' REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+1 -1
View File
@@ -85,4 +85,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
REACT_APP_SHOW_SLIDER_BANNERS=0 REACT_APP_SHOW_SLIDER_BANNERS=0
# FOR MEDIA LINK # FOR MEDIA LINK
REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com ' REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+1 -1
View File
@@ -91,4 +91,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
REACT_APP_SHOW_SLIDER_BANNERS=0 REACT_APP_SHOW_SLIDER_BANNERS=0
# FOR MEDIA LINK # 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 }) { export default function ActiveJobMessageMedia({ activeJobMesList }) {
return ( return (
<div className='flex flex-col justify-between'> <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"> <table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'> <thead className='border-b-2'>
<tr className='text-slate-600'> <tr className='text-slate-600'>
+31 -29
View File
@@ -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="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={''} /> <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-2"> <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"> <div className="w-full flex flex-col justify-between">
<p className="w-full text-base text-right text-sky-blue"> <div className="w-full">
{props?.details && props.details.job_to} <p className="w-full text-base text-right text-sky-blue">
</p> {props?.details && props.details.job_to}
<div className="text-base text-slate-700 dark:text-white tracking-wide"> </p>
<p className="font-semibold text-black dark:text-white"> <div className="text-base text-slate-700 dark:text-white tracking-wide">
Description:{" "} <p className="font-semibold text-black dark:text-white">
</p> Description:{" "}
<p className="p-2 border border-sky-blue"> </p>
{props?.details && props.details.description} <p className="p-2 border border-sky-blue">
</p> {props?.details && props.details.description}
</p>
</div>
</div> </div>
<div className="my-2"> <div className="my-2">
<IndexJobActions details={props.details} /> <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"> <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1">
{/* TEXTAREA SECTION */} {/* TEXTAREA SECTION */}
<div className="mb-5"> <div className="w-full mb-3">
<div className="w-full"> <div className="w-full">
<div className="pl-7 mb-2 flex items-center border-b border-slate-300 gap-3"> <div className="pl-7 mb-2 flex items-center border-b border-slate-300 gap-3">
<button <button
name="message" name="message"
onClick={(e) => setTab(e.target.name)} 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" tab == "message"
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
: "bg-white text-[#000] border-t-[2px]" : "bg-white text-[#000] border-t-[2px]"
@@ -414,7 +416,7 @@ function ActiveJobsMedia(props) {
<button <button
name="files" name="files"
onClick={(e) => setTab(e.target.name)} 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" tab == "files"
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
: "bg-white text-[#000] border-t-[2px]" : "bg-white text-[#000] border-t-[2px]"
@@ -438,7 +440,7 @@ function ActiveJobsMedia(props) {
<div className="files"> <div className="files">
<label <label
htmlFor="file" 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 Select Files to Upload
</label> </label>
@@ -450,7 +452,7 @@ function ActiveJobsMedia(props) {
onChange={handleFileChange} onChange={handleFileChange}
/> />
</div> </div>
<div className="selected_file my-2"> <div className="selected_file my-2 overflow-y-auto">
{filesToSend.length > 0 && {filesToSend.length > 0 &&
filesToSend.map((item, index) => ( filesToSend.map((item, index) => (
<p key={index} className="flex items-center space-x-2"> <p key={index} className="flex items-center space-x-2">
@@ -492,12 +494,12 @@ function ActiveJobsMedia(props) {
{/* End of error or success display */} {/* End of error or success display */}
{/* Buttons Sections */} {/* Buttons Sections */}
<div className="py-2 sm:flex sm:justify-end sm:items-center"> <div className="py-1 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="w-full flex justify-between items-center space-x-2">
<button <button
type="button" type="button"
onClick={handleClearAll} 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> <span className="text-gradient">Clear</span>
</button> </button>
@@ -505,7 +507,7 @@ function ActiveJobsMedia(props) {
<button <button
onClick={sendFile} onClick={sendFile}
type="button" 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 ? ( {requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" /> <LoadingSpinner size="6" color="sky-blue" />
@@ -514,8 +516,8 @@ function ActiveJobsMedia(props) {
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
width="24" width="20"
height="24" height="20"
fill="white" fill="white"
> >
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" /> <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
@@ -529,7 +531,7 @@ function ActiveJobsMedia(props) {
<button <button
onClick={sendTaskMessage} onClick={sendTaskMessage}
type="button" 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 ? ( {requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" /> <LoadingSpinner size="6" color="sky-blue" />
@@ -618,13 +620,13 @@ const PopModal = ({
ref={myRef} 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" 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"> <div className="modal-header-con">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide"> <h1 className="modal-title">
{details?.contract} {details?.contract}
</h1> </h1>
<button <button
type="button" type="button"
className="text-[#374557] dark:text-red-500" className="modal-close-btn"
onClick={popUpHandler} onClick={popUpHandler}
> >
<svg <svg
@@ -708,14 +710,14 @@ const PopModal = ({
<button <button
onClick={handlePrint} onClick={handlePrint}
type="button" 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> <span className="text-white">Print</span>
</button> </button>
<button <button
onClick={popUpHandler} onClick={popUpHandler}
type="button" 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> <span className="text-gradient">Cancel</span>
</button> </button>
@@ -60,20 +60,30 @@ function CurrentTaskAction({jobDetails}) {
} }
return ( return (
<div className='job-action dark:bg-black'> <div className='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="w-full text-sm text-left text-gray-500">
{jobDetails.job_type == 'MEDIA' ?
<div className="flex justify-center items-center"> <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"> <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
Send for Review I have completed this task
</button> </button>
</div> </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> </div>
{popUp && ( {popUp && (
+1 -1
View File
@@ -14,7 +14,7 @@ export default function VideoElement({videoId}) {
return ( return (
<video ref={videoRef} className='w-full h-full' controls> <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. Your browser does not support the video tag.
</video> </video>
) )
+8 -6
View File
@@ -61,22 +61,24 @@ function ManageActiveJobs() {
setDetails(state); setDetails(state);
getActiveJobMesList(); getActiveJobMesList();
}, [activeJobMesListReload, chatMessageList]); }, [activeJobMesListReload, chatMessageList]);
console.log('Opps', details)
return ( return (
<> <>
{/* {details.job_type == 'TASK' ? */} {details.job_type == 'MEDIA' ?
<ActiveJobs <ActiveJobsMedia
details={state} details={state}
activeJobMesList={activeJobMesList} activeJobMesList={activeJobMesList}
reloadActiveJobList={setActiveJobMesListReload} reloadActiveJobList={setActiveJobMesListReload}
/> />
{/* : : details.job_type == 'TASK' ?
<ActiveJobsMedia <ActiveJobs
details={state} details={state}
activeJobMesList={activeJobMesList} activeJobMesList={activeJobMesList}
reloadActiveJobList={setActiveJobMesListReload} reloadActiveJobList={setActiveJobMesListReload}
/> />
} */} :
null
}
</> </>
); );
} }