Compare commits

...

5 Commits

Author SHA1 Message Date
victorAnumudu 1d673487af sidemenu abnormal gap closed 2023-06-08 18:00:26 +01:00
CHIEFSOFT\ameye 313c47f430 action contents 2023-06-07 21:42:49 -04:00
ameye 67aaf62f7b Merge branch 'job-actions' of WrenchBoard/Users-Wrench into master 2023-06-07 21:14:55 +00:00
victorAnumudu 0526fdb572 renders job action based on owner status and status description 2023-06-07 22:08:26 +01:00
ameye 7352c30969 Merge branch 'job-actions-components' of WrenchBoard/Users-Wrench into master 2023-06-07 13:54:35 +00:00
12 changed files with 247 additions and 132 deletions
+4 -2
View File
@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
import ActiveJobMessage from "./ActiveJobMessage";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import CountDown from "../Helpers/CountDown";
import IndexJobActions from "./JobActions/IndexJobActions";
import usersService from "../../services/UsersService";
@@ -261,9 +262,10 @@ function ActiveJobs(props) {
<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>
<p className="my-3 py-1 text-base">
{/* <p className="my-3 py-1 text-base">
Waiting for the completion message from the client before you can approve.
</p>
</p> */}
<IndexJobActions details={props.details} />
</div>
{/* TEXTAREA SECTION */}
@@ -2,7 +2,31 @@ import React from 'react'
function CurrentJobAction() {
return (
<div>CurrentJobAction</div>
<div className=''>
<p className="my-3 py-1 text-base">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center w-full">
<div className="flex flex-col flex-[0.9]">
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
Waiting for the completion message from the client before you can approve.
</h1>
</div>
</div>
</td>
<td className="text-right py-4 px-2">
<div className="flex justify-center items-center">
.
</div>
</td>
</tr>
</tbody>
</table>
</p>
</div>
)
}
@@ -2,7 +2,34 @@ import React from 'react'
function CurrentTaskAction() {
return (
<div>CurrentTaskAction</div>
<div className=''>
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center w-full">
<div className="flex flex-col flex-[0.9]">
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
If you have completed this task and ready for review and acceptance, click "Set Status" button.
</h1>
</div>
</div>
</td>
<td className="text-right py-4 px-2">
<div className="flex justify-center items-center">
<button type="button" className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
Set Status
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
)
}
@@ -0,0 +1,45 @@
import React from 'react'
import CurrentJobAction from './CurrentJobAction'
import CurrentTaskAction from './CurrentTaskAction'
import PastDueJobAction from './PastDueJobAction'
import PastDueTaskAction from './PastDueTaskAction'
import ReviewJobAction from './ReviewJobAction'
import ReviewTaskAction from './ReviewTaskAction'
function IndexJobActions({details}) { // FUNCTION TO RENDER SPECIFIC JOB ACTION DEPENDING ON OWNER STATUS & STATUS DESCRIPTION
let owner = details.owner_status
let description = details.status_description
switch(owner) {
case 'OWNER':
return (()=>{
if(description == 'ACTIVE'){
return <CurrentJobAction />
}else if(description == 'PASTDUE'){
return <PastDueJobAction />
}else if(description == 'REVIEW'){
return <ReviewJobAction />
} else {
return null
}
})()
case 'WORKER':
return (()=>{
if(description == 'ACTIVE'){
return <CurrentTaskAction />
}else if(description == 'PASTDUE'){
return <PastDueTaskAction />
}else if(description == 'REVIEW'){
return <ReviewTaskAction />
} else {
return null
}
})()
default:
return null
}
}
export default IndexJobActions
@@ -1,9 +0,0 @@
import React from 'react'
function PassDueJobAction() {
return (
<div>PassDueJobAction</div>
)
}
export default PassDueJobAction
@@ -1,9 +0,0 @@
import React from 'react'
function PassDueTaskAction() {
return (
<div>PassDueTaskAction</div>
)
}
export default PassDueTaskAction
@@ -0,0 +1,13 @@
import React from 'react'
function PastDueJobAction() {
return (
<div className=''>
<p className="my-3 py-1 text-base">
Waiting for the completion message from the client before you can approve. Owner True & PastDue
</p>
</div>
)
}
export default PastDueJobAction
@@ -0,0 +1,13 @@
import React from 'react'
function PastDueTaskAction() {
return (
<div className=''>
<p className="my-3 py-1 text-base">
Waiting for the completion message from the client before you can approve. Worker True & PastDue
</p>
</div>
)
}
export default PastDueTaskAction
@@ -2,7 +2,11 @@ import React from 'react'
function ReviewJobAction() {
return (
<div>ReviewJobAction</div>
<div className=''>
<p className="my-3 py-1 text-base">
Waiting for the completion message from the client before you can approve. Owner True & Review Job
</p>
</div>
)
}
@@ -2,7 +2,11 @@ import React from 'react'
function ReviewTaskAction() {
return (
<div>ReviewTaskAction</div>
<div className=''>
<p className="my-3 py-1 text-base">
Waiting for the completion message from the client before you can approve. Worker True & Review Job
</p>
</div>
)
}
+24 -23
View File
@@ -76,7 +76,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
{/* menu and settings item */}
<div className="menu-setting-items mb-11">
{/* menus item */}
<div className="menu-item transition-all duration-300 ease-in-out mb-14">
<div className="menu-item transition-all duration-300 ease-in-out mb-5">
<div className="heading mb-5 active">
<h1 className="title text-xl font-bold text-purple">Menu</h1>
</div>
@@ -110,20 +110,17 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
{/* menu and settings item */}
{userDetails?.account_type !== "FAMILY" && (
<div className="menu-setting-items mb-11">
{/* menus item */}
<div
className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-14" : ""
sidebar ? "mb-5" : "mb-2"
}`}
>
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Family
</h1>
</div>
<div className="items">
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Family
</h1>
</div>
<ul className="flex flex-col space-y-6">
<ListItem
title="Family Corner"
@@ -134,25 +131,22 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
</ul>
</div>
</div>
</div>
)}
{userDetails?.account_type !== "FAMILY" && (
<>
{!userDetails?.post_jobs ? (
<div className="menu-setting-items mb-11">
{/* menus item */}
<div
className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
sidebar ? "mb-14" : "rounded-none p-0"
sidebar ? "mb-5" : "mb-2 rounded-none p-0"
}`}
>
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Job Post
</h1>
</div>
<div className="items">
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Job Post
</h1>
</div>
<ul className="flex flex-col space-y-6">
<li className="item group">
<NavLink
@@ -179,9 +173,12 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
</ul>
</div>
</div>
</div>
) : myJobList?.data?.result_list?.length ? (
<div className="setting-item">
<div
className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-5" : "mb-2"
}`}
>
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
My Jobs
@@ -213,8 +210,12 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
</ul>
</div>
</div>
) : !myJobList?.loading && (
<div className="setting-item">
) : (
<div
className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-5" : "mb-2"
}`}
>
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
My Jobs
+85 -85
View File
@@ -95,7 +95,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
{/* menus item */}
<div
className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-14" : ""
sidebar ? "mb-5" : "mb-2"
}`}
>
<div className="heading mb-5">
@@ -131,19 +131,17 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
{/* menu and settings item */}
{userDetails?.account_type !== "FAMILY" && (
<div className="menu-setting-items mb-11">
{/* menus item */}
<div
className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-14" : ""
sidebar ? "my-5" : ""
}`}
>
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Family
</h1>
</div>
<div className="items">
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Family
</h1>
</div>
<ul className="flex flex-col space-y-6">
<ListItem
title="Family Corner"
@@ -154,92 +152,94 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
</ul>
</div>
</div>
</div>
)}
{userDetails?.account_type !== "FAMILY" && (
<>
{!userDetails?.post_jobs ? (
<div className="menu-setting-items mb-11">
{/* menus item */}
<div
className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
sidebar ? "mb-14" : "rounded-none p-0"
}`}
>
<div className="items">
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Job Post
</h1>
</div>
<ul className="flex flex-col space-y-6">
<li className="item group">
<NavLink
to="/start-job"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar
? "justify-start space-x-3.5"
: "justify-center")
<div
className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
sidebar ? "mb-5" : "mb-2 rounded-none p-0"
}`}
>
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Job Post
</h1>
</div>
<div className="items">
<ul className="flex flex-col space-y-6">
<li className="item group">
<NavLink
to="/start-job"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar
? "justify-start space-x-3.5"
: "justify-center")
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="people-two" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="people-two" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
Enable Job Post
</span>
</NavLink>
</li>
</ul>
</div>
Enable Job Post
</span>
</NavLink>
</li>
</ul>
</div>
</div>
) : myJobList?.data?.result_list?.length ? (
<>
<div className="setting-item">
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
My Jobs
</h1>
</div>
<div className="items">
<ul className="flex flex-col space-y-6">
{[
{
name: "List",
path: "/myjobs",
iconName: "people-two",
},
{
name: "Pending",
path: "/my-pending-jobs",
iconName: "people-two",
},
{
name: "Active",
path: "/my-active-jobs",
iconName: "people-two",
},
].map(({ name, path, iconName }, idx) => (
<ListItem
key={idx}
title={name}
route={path}
sidebar={sidebar}
iconName={iconName}
/>
))}
</ul>
</div>
<div
className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-5" : "mb-2"
}`}
>
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
My Jobs
</h1>
</div>
</>
) : !myJobList?.loading && (
<div className="setting-item">
<div className="items">
<ul className="flex flex-col space-y-6">
{[
{
name: "List",
path: "/myjobs",
iconName: "people-two",
},
{
name: "Pending",
path: "/my-pending-jobs",
iconName: "people-two",
},
{
name: "Active",
path: "/my-active-jobs",
iconName: "people-two",
},
].map(({ name, path, iconName }, idx) => (
<ListItem
key={idx}
title={name}
route={path}
sidebar={sidebar}
iconName={iconName}
/>
))}
</ul>
</div>
</div>
) : (
<div
className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-5" : "mb-2"
}`}
>
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
My Jobs