Merge branch 'market-list-reload' of WrenchBoard/Users-Wrench into master

This commit is contained in:
2024-07-19 17:46:47 +00:00
committed by Gogs
4 changed files with 68 additions and 18 deletions
+56 -11
View File
@@ -1,6 +1,8 @@
import { useState } from "react";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
import { useSelector } from "react-redux";
import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
export default function AvailableJobsCard({
className,
@@ -11,8 +13,15 @@ export default function AvailableJobsCard({
}) {
//debugger;
const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
const [jobPopout, setJobPopout] = useState({ show: false, data: {} });
const [imageUrl, setImageUrl] = useState("");
const {
userDetails: { uid },
} = useSelector((state) => state?.userDetails); // GETS USER DETAILS
let thePrice = PriceFormatter(
datas?.price * 0.01,
datas?.currency_code,
@@ -40,7 +49,7 @@ export default function AvailableJobsCard({
>
<div
onClick={() => {
setMarketPopUp({ show: true, data: datas });
datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas });
}}
className="flex flex-col gap-2 justify-between w-full h-full"
>
@@ -80,7 +89,7 @@ export default function AvailableJobsCard({
</div>
<div className="thumbnail-area w-full">
<div
className="w-full h-[236px] rounded-xl overflow-y-auto bg-center bg-cover bg-no-repeat"
className="w-full p-1 h-[150px] rounded-xl overflow-y-auto bg-center bg-cover bg-no-repeat"
// style={{
// backgroundImage: `url('${image}')`,
// }}
@@ -108,15 +117,27 @@ export default function AvailableJobsCard({
</div>
</div>
<div>
<button
{datas.market_uid != uid ?
<button
type="button"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
onClick={() => {
setMarketPopUp({ show: true, data: datas });
}}
>
View
</button>
:
<button
type="button"
className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
onClick={() => {
setMarketPopUp({ show: true, data: datas });
setJobPopout({ show: true, data: datas });
}}
>
View
</button>
>
Manage
</button>
}
</div>
</div>
</div>
@@ -131,7 +152,7 @@ export default function AvailableJobsCard({
<div className="flex flex-col flex-[0.9]">
<h1
onClick={() => {
setMarketPopUp({ show: true, data: datas });
datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
}}
className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
>
@@ -140,7 +161,7 @@ export default function AvailableJobsCard({
<div
onClick={() => {
setMarketPopUp({ show: true, data: datas });
datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
}}
className="my-2"
>
@@ -168,8 +189,9 @@ export default function AvailableJobsCard({
</div>
</div>
<div className="">
{datas.market_uid != uid ?
<button
type="button"
type="button"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
onClick={() => {
setMarketPopUp({ show: true, data: datas });
@@ -177,6 +199,17 @@ export default function AvailableJobsCard({
>
View
</button>
:
<button
type="button"
className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
onClick={() => {
setJobPopout({ show: true, data: datas });
}}
>
Manage
</button>
}
</div>
</div>
)}
@@ -189,6 +222,18 @@ export default function AvailableJobsCard({
situation={marketPopUp.show}
/>
)}
{/* Active Job Popout */}
{jobPopout.show && (
<PendingJobsPopout
details={datas}
onClose={() => {
setJobPopout({ show: false, data: {} });
}}
situation={jobPopout.show}
/>
)}
{/* End of Active Job Popout */}
</>
);
}
@@ -173,11 +173,12 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
{name}
</label>
<div
className={`w-full md:w-3/4 text-slate-900 dark:text-white market-pop ${
name !== "Delivery Detail"
? " h-full flex items-center"
: " overflow-y-auto max-h-[80px]"
} ${name === "Description" && "max-h-14 h-full overflow-auto"}`}
className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop ${
name == "Description"
? "max-h-28 h-full overflow-y-auto break-words"
: name == "Delivery Detail" ? " overflow-y-auto h-full max-h-28"
: "h-full flex items-center"
}`}
>
{danger ? (
<p
@@ -193,12 +194,14 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
{typeof content !== "object" ? content : null}
{typeof content === "object" && (
<>
<hr className="mb-1" />
{/* <hr className="mb-1" /> */}
<span className='flex w-full mb-1 h-[1px] bg-slate-500'></span>
<span className="flex items-center gap-2 dark:text-white">
{content?.text}
<strong>{thePrice}</strong>
</span>
<hr className="mt-1" />
<span className='flex w-full mt-1 h-[1px] bg-slate-500'></span>
{/* <hr className="mt-1" /> */}
</>
)}
</>
@@ -99,6 +99,7 @@ function PendingJobsPopout({ details, onClose, situation }) {
onClose();
dispatch(tableReload({ type: "PENDINGTABLE" }));
dispatch(tableReload({ type: "JOBTABLE" }));
dispatch(tableReload({ type: "MARKETTABLELIST" }));
}, 4000);
})
.catch((error) => {
+1
View File
@@ -217,6 +217,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
}
// Getting market data
const getMarketActiveJobList = async () => {
dispatch(updateJobs({loading: true}));
try {
const res = await apiCall.getActiveJobList();
dispatch(updateJobs({loading: false, ...res.data}));