feat(quality): priority ranking added
This commit is contained in:
@@ -0,0 +1,331 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useNavigate, useRouterState } from "@tanstack/react-router";
|
||||
import { createColumnHelper } from "@tanstack/react-table";
|
||||
import axios from "axios";
|
||||
import { ArrowDown, ArrowUp } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useAuth, userAccess } from "@/lib/authClient";
|
||||
import TableNoExpand from "@/lib/tableStuff/TableNoExpand";
|
||||
import { getPallets } from "../../-utils/querys/quality/getPallets";
|
||||
|
||||
type Pallets = {
|
||||
request_id: string;
|
||||
article: string;
|
||||
description: string;
|
||||
runningNr: string;
|
||||
lotNr: string;
|
||||
warehouseAtRequest: string;
|
||||
locationAtRequest: string;
|
||||
warehouseMovedTo: string;
|
||||
locationMovedTo: string;
|
||||
durationToMove: null;
|
||||
qualityDurationToInspect: number;
|
||||
returnDurationToInspect: number;
|
||||
locationDropOff: string;
|
||||
palletStatus: number;
|
||||
palletStatusText: string;
|
||||
palletRequest: number;
|
||||
priority: number;
|
||||
add_date: Date;
|
||||
add_user: string;
|
||||
upd_date: Date;
|
||||
upd_user: string;
|
||||
};
|
||||
|
||||
export default function QualityRequest() {
|
||||
const { data, isLoading, refetch } = useQuery(getPallets());
|
||||
const columnHelper = createColumnHelper<Pallets>();
|
||||
const { session } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const router = useRouterState();
|
||||
const currentPath = router.location.href;
|
||||
|
||||
const palletCompleted = async (e: any) => {
|
||||
if (!session || !session.user) {
|
||||
toast.error("You are allowed to do this unless you are logged in");
|
||||
navigate({ to: "/login", search: { redirect: currentPath } });
|
||||
return;
|
||||
}
|
||||
const data = {
|
||||
username: session?.user.username,
|
||||
runningNr: Number(e.original.runningNr),
|
||||
palletStatusText: "return",
|
||||
};
|
||||
try {
|
||||
const res = await axios.post("/lst/old/api/quality/newrequest", data);
|
||||
|
||||
//console.log(res.data);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
refetch();
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error("Encountered and error please try again");
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
columnHelper.accessor("article", {
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
<span className="flex flex-row gap-2">Article</span>
|
||||
{column.getIsSorted() === "asc" ? (
|
||||
<ArrowUp className="ml-2 h-4 w-4" />
|
||||
) : (
|
||||
<ArrowDown className="ml-2 h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("description", {
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
<span className="flex flex-row gap-2">Alias</span>
|
||||
{column.getIsSorted() === "asc" ? (
|
||||
<ArrowUp className="ml-2 h-4 w-4" />
|
||||
) : (
|
||||
<ArrowDown className="ml-2 h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("runningNr", {
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
<span className="flex flex-row gap-2">Running Number</span>
|
||||
{column.getIsSorted() === "asc" ? (
|
||||
<ArrowUp className="ml-2 h-4 w-4" />
|
||||
) : (
|
||||
<ArrowDown className="ml-2 h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("lotNr", {
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
<span className="flex flex-row gap-2">Lot Number</span>
|
||||
{column.getIsSorted() === "asc" ? (
|
||||
<ArrowUp className="ml-2 h-4 w-4" />
|
||||
) : (
|
||||
<ArrowDown className="ml-2 h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("locationAtRequest", {
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
<span className="flex flex-row gap-2">Location At Request</span>
|
||||
{column.getIsSorted() === "asc" ? (
|
||||
<ArrowUp className="ml-2 h-4 w-4" />
|
||||
) : (
|
||||
<ArrowDown className="ml-2 h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("locationDropOff", {
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
<span className="flex flex-row gap-2">Drop off Location</span>
|
||||
{column.getIsSorted() === "asc" ? (
|
||||
<ArrowUp className="ml-2 h-4 w-4" />
|
||||
) : (
|
||||
<ArrowDown className="ml-2 h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
cell: ({ getValue }) => {
|
||||
return (
|
||||
<>
|
||||
<span>{getValue() ? getValue() : "missing dropoff location"}</span>
|
||||
</>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("palletStatusText", {
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
<span className="flex flex-row gap-2">Pallet Status</span>
|
||||
{column.getIsSorted() === "asc" ? (
|
||||
<ArrowUp className="ml-2 h-4 w-4" />
|
||||
) : (
|
||||
<ArrowDown className="ml-2 h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("palletRequest", {
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
<span className="flex flex-row gap-2">Check Completed</span>
|
||||
{column.getIsSorted() === "asc" ? (
|
||||
<ArrowUp className="ml-2 h-4 w-4" />
|
||||
) : (
|
||||
<ArrowDown className="ml-2 h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
// if pending
|
||||
const okToCompleteStats = [2, 4, 5];
|
||||
return (
|
||||
<>
|
||||
{okToCompleteStats.includes(row.original.palletStatus) ? (
|
||||
<Button variant="outline" onClick={() => palletCompleted(row)}>
|
||||
Check Complete
|
||||
</Button>
|
||||
) : (
|
||||
<span>Pending to be completed</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
let adminColumns: any = [];
|
||||
if (userAccess("quality", ["systemAdmin", "admin", "supervisor"])) {
|
||||
adminColumns = [
|
||||
...columns,
|
||||
columnHelper.accessor("priority", {
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() =>
|
||||
column.toggleSorting(column.getIsSorted() === "asc")
|
||||
}
|
||||
>
|
||||
<span className="flex flex-row gap-2">Priority</span>
|
||||
{column.getIsSorted() === "asc" ? (
|
||||
<ArrowUp className="ml-2 h-4 w-4" />
|
||||
) : (
|
||||
<ArrowDown className="ml-2 h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
cell: ({ row, getValue }) => {
|
||||
// if pending
|
||||
|
||||
const [p, setP] = useState(`${getValue()}`);
|
||||
console.log(getValue());
|
||||
return (
|
||||
<>
|
||||
<Select
|
||||
value={p}
|
||||
onValueChange={async (value) => {
|
||||
setP(value);
|
||||
const data = {
|
||||
username: session?.user.username,
|
||||
runningNr: Number(row.original.runningNr),
|
||||
priority: value,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
"/lst/old/api/quality/newrequest",
|
||||
data,
|
||||
);
|
||||
|
||||
//console.log(res.data);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
refetch();
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error("Encountered and error please try again");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger
|
||||
// className={cn(
|
||||
// "w-[100px]",
|
||||
// active
|
||||
// ? "border-green-500 text-green-600"
|
||||
// : "border-gray-400 text-gray-500",
|
||||
// )}
|
||||
>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">Urgent</SelectItem>
|
||||
<SelectItem value="2">High</SelectItem>
|
||||
<SelectItem value="3">Medium</SelectItem>
|
||||
<SelectItem value="4">Low</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</>
|
||||
);
|
||||
},
|
||||
}),
|
||||
];
|
||||
}
|
||||
if (isLoading) {
|
||||
return <div className="m-auto">Loading user data</div>;
|
||||
}
|
||||
return <TableNoExpand data={data} columns={adminColumns} />;
|
||||
}
|
||||
Reference in New Issue
Block a user