refactor(dockscanning): more work on the dock door scanning
All checks were successful
Build and Push LST Docker Image / docker (push) Successful in 1m47s
All checks were successful
Build and Push LST Docker Image / docker (push) Successful in 1m47s
ref #12
This commit is contained in:
118
frontend/src/routes/warehouse/dockdoorscanning/$dock.tsx
Normal file
118
frontend/src/routes/warehouse/dockdoorscanning/$dock.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { format } from "date-fns";
|
||||
import { Button } from "../../../components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
} from "../../../components/ui/card";
|
||||
import { Separator } from "../../../components/ui/separator";
|
||||
import { getActiveLoadingOrders } from "../../../lib/queries/getActiveDockScanners";
|
||||
import { getActiveDockScanners } from "../../../lib/queries/getActiveLoadingOrders";
|
||||
import { finishLoadingOrder} from './index'
|
||||
import { api } from "../../../lib/apiHelper";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export const Route = createFileRoute("/warehouse/dockdoorscanning/$dock")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
export const startOrder = async (loadingOrder: string, dockId: string, refetch:any, refetchActiveLoading:any) => {
|
||||
|
||||
try {
|
||||
const res = await api.post("/dockDoor/startLoad", {
|
||||
"loadingOrder":String(loadingOrder),
|
||||
"dockId":dockId
|
||||
},{validateStatus: (status) => status < 500,})
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message)
|
||||
refetch()
|
||||
refetchActiveLoading()
|
||||
return
|
||||
}
|
||||
toast.success(res.data.message)
|
||||
refetch()
|
||||
refetchActiveLoading()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
toast.error(`Encountered error: ${JSON.stringify(error)}`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function RouteComponent() {
|
||||
const { dock } = Route.useParams();
|
||||
const { data, refetch } = useSuspenseQuery(getActiveDockScanners());
|
||||
const { data: loadingPlanItems, refetch: refetchActiveLoading } = useSuspenseQuery(getActiveLoadingOrders());
|
||||
|
||||
const dockData = data.filter((i: any) => i.dockId === dock);
|
||||
const loadingPlans = loadingPlanItems.filter(
|
||||
(l: any) => l.dockId === Number(dock),
|
||||
);
|
||||
console.log(dockData[0].currentLoadingOrder === "");
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex justify-center">
|
||||
<p>Please select an active loading order for {dockData[0].name}</p>
|
||||
</div>
|
||||
<div className="flex justify-center mt-5 gap-2">
|
||||
{loadingPlans &&
|
||||
loadingPlans.length > 0 &&
|
||||
loadingPlans.map((i: any) => {
|
||||
return (
|
||||
<Card key={i.id} className="max-w-96">
|
||||
<CardHeader>
|
||||
Loading order ID: {i.id}{" "}
|
||||
<p>
|
||||
Loading Date: {format(i.loadingDate, "MM/dd/yyyy HH:mm")}
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardDescription className="">
|
||||
<p className="p-3">
|
||||
Below are the loading order details please validate the
|
||||
loading order you are selecting before pressing start.
|
||||
</p>
|
||||
</CardDescription>
|
||||
{/* Mapping the items out so in case we have more than 1 it will display correctly */}
|
||||
<CardContent>
|
||||
{i?.loadingPlanItems?.map((l: any) => {
|
||||
return (
|
||||
<div key={i.id}>
|
||||
<p>Loading Sequence {l.loadingSequence}</p>
|
||||
<p>
|
||||
Article: {l.articleId} - {l.articleDescription}
|
||||
</p>
|
||||
<p>
|
||||
Current loaded: {l.loadedQuantityLUs}/
|
||||
{l.plannedQuantityLUs}
|
||||
</p>
|
||||
{l.remark !== "" && <p>Remark: {l.remark}</p>}
|
||||
|
||||
{i?.loadingPlanItems.length > 1 && (
|
||||
<Separator className="m-2" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<div className="flex flex-row justify-between">
|
||||
<Button
|
||||
onClick={()=> startOrder(i.id, dock, refetch, refetchActiveLoading)}
|
||||
disabled={dockData[0].currentLoadingOrder !== "" ? true : false}>Start Loading</Button>
|
||||
<Button>Scan progress</Button>
|
||||
<Button onClick={()=> finishLoadingOrder(String(i.id), dock, refetch, refetchActiveLoading)}
|
||||
disabled={dockData[0].currentLoadingOrder === "" ? true : false}>Finish Loading</Button>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/warehouse/dockdoorscanning/$dockScans")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { dockScans } = Route.useParams();
|
||||
return <div>Hello "/warehouse/dockdoorscanning/$docScans"! {dockScans}</div>;
|
||||
}
|
||||
120
frontend/src/routes/warehouse/dockdoorscanning/index.tsx
Normal file
120
frontend/src/routes/warehouse/dockdoorscanning/index.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { Card, CardContent, CardDescription, CardHeader } from "../../../components/ui/card";
|
||||
import { getActiveLoadingOrders } from "../../../lib/queries/getActiveDockScanners";
|
||||
import { getActiveDockScanners } from "../../../lib/queries/getActiveLoadingOrders";
|
||||
import { Button } from "../../../components/ui/button";
|
||||
import { api } from "../../../lib/apiHelper";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export const Route = createFileRoute("/warehouse/dockdoorscanning/")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
export const finishLoadingOrder = async (loadingOrder: string, dockId: string, refetch:any, refetchActiveLoading:any) => {
|
||||
|
||||
try {
|
||||
const res = await api.post("/dockDoor/finishOrder", {
|
||||
"loadingOrder":loadingOrder,
|
||||
"dockId":dockId
|
||||
},{validateStatus: (status) => status < 500,})
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message)
|
||||
refetch()
|
||||
refetchActiveLoading()
|
||||
return
|
||||
}
|
||||
toast.info(res.data.message)
|
||||
refetch()
|
||||
refetchActiveLoading()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
toast.error(`Encountered error: ${JSON.stringify(error)}`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function RouteComponent() {
|
||||
const { data, isLoading, refetch } = useSuspenseQuery(getActiveDockScanners());
|
||||
const { data: loadingPlanItems, refetch : refetchActiveLoading } = useSuspenseQuery(getActiveLoadingOrders());
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center-safe">
|
||||
<p>Loading active dock scanners....</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-col ">
|
||||
<div className="flex justify-center-safe">
|
||||
<p className="text-2xl underline">
|
||||
Select a dock you would like to work with
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center gap-3 mt-5">
|
||||
{!isLoading &&
|
||||
data.length > 0 &&
|
||||
data.map((i: any) => {
|
||||
const loadingPlan =
|
||||
i.currentLoadingOrder !== ""
|
||||
? loadingPlanItems.filter(
|
||||
(x: any) => x.id === Number(i.currentLoadingOrder),
|
||||
)
|
||||
: [];
|
||||
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={i.id}
|
||||
className="max-w-96"
|
||||
onClick={() => {
|
||||
if (i.currentLoadingOrder === "") {
|
||||
navigate({
|
||||
to: "/warehouse/dockdoorscanning/$dock",
|
||||
params: { dock: i.dockId },
|
||||
search: {
|
||||
name: i.name,
|
||||
},
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<CardHeader className="text-center">{i.name}</CardHeader>
|
||||
<CardDescription>For Abbott loads reminder: 3 lots per load max.</CardDescription>
|
||||
|
||||
{i.currentLoadingOrder !== "" ? (
|
||||
<CardContent>
|
||||
<div className="flex flex-col gap-2">
|
||||
Current loading order: {i.currentLoadingOrder}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
{loadingPlan && loadingPlan.length !== 0 ? (<>
|
||||
|
||||
<p>{`${loadingPlan[0].loadingPlanItems[0].articleId} - ${loadingPlan[0].loadingPlanItems[0].articleDescription}`}</p>
|
||||
|
||||
<p>Current Loaded :{" "}
|
||||
{loadingPlan[0].loadingPlanItems[0].loadedQuantityLUs} /{" "}
|
||||
{loadingPlan[0].loadingPlanItems[0].plannedQuantityLUs}</p></>
|
||||
): <><p>The Current Loading order is invalid</p>
|
||||
<p> It appears it could have been finished via another process</p>
|
||||
<div className="m-2 flex justify-center">
|
||||
<Button onClick={()=> finishLoadingOrder(i.currentLoadingOrder, i.dockId, refetch, refetchActiveLoading)}>Clear {i.currentLoadingOrder}</Button></div></>}</div>
|
||||
</CardContent>
|
||||
) : (
|
||||
<CardContent>
|
||||
No active loading orders please click me to select an order
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user