refactor(frontend): prettier change to formatting
This commit is contained in:
@@ -1,185 +1,213 @@
|
|||||||
import {toast} from "sonner";
|
import { toast } from "sonner";
|
||||||
import {LstCard} from "../extendedUI/LstCard";
|
import { LstCard } from "../extendedUI/LstCard";
|
||||||
import {Button} from "../ui/button";
|
import { Button } from "../ui/button";
|
||||||
import {Input} from "../ui/input";
|
import { Input } from "../ui/input";
|
||||||
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "../ui/table";
|
import {
|
||||||
import {Skeleton} from "../ui/skeleton";
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "../ui/table";
|
||||||
|
import { Skeleton } from "../ui/skeleton";
|
||||||
//import CycleCountLog from "./CycleCountLog";
|
//import CycleCountLog from "./CycleCountLog";
|
||||||
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "../ui/select";
|
import {
|
||||||
import {Controller, useForm} from "react-hook-form";
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "../ui/select";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import {useState} from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
export default function OcmeCycleCount() {
|
export default function OcmeCycleCount() {
|
||||||
const token = localStorage.getItem("auth_token");
|
const token = localStorage.getItem("auth_token");
|
||||||
const [data, setData] = useState([]);
|
const [data, setData] = useState([]);
|
||||||
const [counting, setCounting] = useState(false);
|
const [counting, setCounting] = useState(false);
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
//watch,
|
//watch,
|
||||||
formState: {errors},
|
formState: { errors },
|
||||||
reset,
|
reset,
|
||||||
control,
|
control,
|
||||||
} = useForm();
|
} = useForm();
|
||||||
|
|
||||||
const onSubmit = async (data: any) => {
|
const onSubmit = async (data: any) => {
|
||||||
setData([]);
|
setData([]);
|
||||||
setCounting(true);
|
setCounting(true);
|
||||||
toast.success(`Cycle count started`);
|
toast.success(`Cycle count started`);
|
||||||
try {
|
try {
|
||||||
const res = await axios.post("/ocme/api/v1/cyclecount", data, {
|
const res = await axios.post("/ocme/api/v1/cycleCount", data, {
|
||||||
headers: {Authorization: `Bearer ${token}`},
|
headers: { Authorization: `Bearer ${token}` },
|
||||||
});
|
});
|
||||||
toast.success(res.data.message);
|
console.log(data);
|
||||||
setData(res.data.data);
|
toast.success(res.data.message);
|
||||||
setCounting(false);
|
setData(res.data.data);
|
||||||
reset();
|
setCounting(false);
|
||||||
} catch (error) {
|
reset();
|
||||||
toast.error("There was an error cycle counting");
|
} catch (error) {
|
||||||
setCounting(false);
|
console.log(error);
|
||||||
reset();
|
toast.error("There was an error cycle counting");
|
||||||
}
|
setCounting(false);
|
||||||
};
|
reset();
|
||||||
return (
|
}
|
||||||
<div className="flex flex-row w-screen">
|
};
|
||||||
<div className="m-2 w-5/6">
|
|
||||||
<LstCard>
|
return (
|
||||||
<p className="ml-2">Please enter the name or laneID you want to cycle count.</p>
|
<div className="flex flex-row w-screen">
|
||||||
<div>
|
<div className="m-2 w-5/6">
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<LstCard>
|
||||||
<div className="flex justify-between">
|
<p className="ml-2">
|
||||||
<div className="m-2 flex flex-row">
|
Please enter the name or laneID you want to cycle count.
|
||||||
<Input
|
</p>
|
||||||
placeholder="enter lane: L064"
|
<div>
|
||||||
className={errors.lane ? "border-red-500" : ""}
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
aria-invalid={!!errors.lane}
|
<div className="flex justify-between">
|
||||||
{...register("lane", {
|
<div className="m-2 flex flex-row">
|
||||||
required: true,
|
<Input
|
||||||
minLength: {
|
placeholder="enter lane: L064"
|
||||||
value: 3,
|
className={errors.lane ? "border-red-500" : ""}
|
||||||
message: "The lane is too short!",
|
aria-invalid={!!errors.lane}
|
||||||
},
|
{...register("lane", {
|
||||||
})}
|
required: true,
|
||||||
/>
|
minLength: {
|
||||||
<div className="ml-2">
|
value: 3,
|
||||||
<Controller
|
message: "The lane is too short!",
|
||||||
control={control}
|
},
|
||||||
name="laneType"
|
})}
|
||||||
defaultValue={""}
|
/>
|
||||||
render={({
|
<div className="ml-2">
|
||||||
field: {onChange},
|
<Controller
|
||||||
fieldState: {},
|
control={control}
|
||||||
//formState,
|
name="laneType"
|
||||||
}) => (
|
defaultValue={""}
|
||||||
<Select onValueChange={onChange}>
|
render={({
|
||||||
<SelectTrigger className="w-[180px]">
|
field: { onChange },
|
||||||
<SelectValue placeholder="Select name or id" />
|
fieldState: {},
|
||||||
</SelectTrigger>
|
//formState,
|
||||||
<SelectContent>
|
}) => (
|
||||||
<SelectItem value="name">Name</SelectItem>
|
<Select onValueChange={onChange}>
|
||||||
<SelectItem value="laneId">Lane ID</SelectItem>
|
<SelectTrigger className="w-[180px]">
|
||||||
</SelectContent>
|
<SelectValue placeholder="Select name or id" />
|
||||||
</Select>
|
</SelectTrigger>
|
||||||
)}
|
<SelectContent>
|
||||||
/>
|
<SelectItem value="name">Name</SelectItem>
|
||||||
</div>
|
<SelectItem value="laneID">Lane ID</SelectItem>
|
||||||
</div>
|
</SelectContent>
|
||||||
<Button className="m-2" type="submit" disabled={counting}>
|
</Select>
|
||||||
{counting ? <span>Counting...</span> : <span>CycleCount</span>}
|
)}
|
||||||
</Button>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
<Button className="m-2" type="submit" disabled={counting}>
|
||||||
<div>
|
{counting ? (
|
||||||
<Table>
|
<span>Counting...</span>
|
||||||
<TableHeader>
|
) : (
|
||||||
<TableRow>
|
<span>CycleCount</span>
|
||||||
<TableHead>LaneID</TableHead>
|
)}
|
||||||
<TableHead>Lane</TableHead>
|
</Button>
|
||||||
<TableHead>AV</TableHead>
|
</div>
|
||||||
<TableHead>Description</TableHead>
|
</form>
|
||||||
<TableHead>Running Number</TableHead>
|
</div>
|
||||||
<TableHead>In Ocme</TableHead>
|
<div>
|
||||||
<TableHead>In Stock</TableHead>
|
<Table>
|
||||||
<TableHead>Result</TableHead>
|
<TableHeader>
|
||||||
</TableRow>
|
<TableRow>
|
||||||
</TableHeader>
|
<TableHead>LaneID</TableHead>
|
||||||
{data.length === 0 ? (
|
<TableHead>Lane</TableHead>
|
||||||
<TableBody>
|
<TableHead>AV</TableHead>
|
||||||
{Array(10)
|
<TableHead>Description</TableHead>
|
||||||
.fill(0)
|
<TableHead>Running Number</TableHead>
|
||||||
.map((_, i) => (
|
<TableHead>In Ocme</TableHead>
|
||||||
<TableRow key={i}>
|
<TableHead>In Stock</TableHead>
|
||||||
<TableCell className="font-medium">
|
<TableHead>Result</TableHead>
|
||||||
<Skeleton className="h-4" />
|
</TableRow>
|
||||||
</TableCell>
|
</TableHeader>
|
||||||
<TableCell>
|
{data?.length === 0 ? (
|
||||||
<Skeleton className="h-4" />
|
<TableBody>
|
||||||
</TableCell>
|
{Array(10)
|
||||||
<TableCell>
|
.fill(0)
|
||||||
<Skeleton className="h-4" />
|
.map((_, i) => (
|
||||||
</TableCell>
|
<TableRow key={i}>
|
||||||
<TableCell>
|
<TableCell className="font-medium">
|
||||||
<Skeleton className="h-4" />
|
<Skeleton className="h-4" />
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Skeleton className="h-4" />
|
<Skeleton className="h-4" />
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Skeleton className="h-4" />
|
<Skeleton className="h-4" />
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Skeleton className="h-4" />
|
<Skeleton className="h-4" />
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Skeleton className="h-4" />
|
<Skeleton className="h-4" />
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
<TableCell>
|
||||||
))}
|
<Skeleton className="h-4" />
|
||||||
</TableBody>
|
</TableCell>
|
||||||
) : (
|
<TableCell>
|
||||||
<>
|
<Skeleton className="h-4" />
|
||||||
{data.map((i: any) => {
|
</TableCell>
|
||||||
let classname = ``;
|
<TableCell>
|
||||||
if (i.info === "Quality Check Required") {
|
<Skeleton className="h-4" />
|
||||||
classname = `bg-red-500`;
|
</TableCell>
|
||||||
}
|
</TableRow>
|
||||||
if (i.info === "Sent to Inv") {
|
))}
|
||||||
classname = `bg-amber-700`;
|
</TableBody>
|
||||||
}
|
) : (
|
||||||
return (
|
<>
|
||||||
<TableRow key={i.runningNumber}>
|
{data?.map((i: any) => {
|
||||||
<TableCell className={`font-medium ${classname}`}>
|
let classname = ``;
|
||||||
{i.alpla_laneID}
|
if (i.info === "Quality Check Required") {
|
||||||
</TableCell>
|
classname = `bg-red-500`;
|
||||||
<TableCell className={`font-medium ${classname}`}>
|
}
|
||||||
{i.alpla_laneDescription}
|
if (i.info === "Sent to Inv") {
|
||||||
</TableCell>
|
classname = `bg-amber-700`;
|
||||||
<TableCell className={`font-medium ${classname}`}>
|
}
|
||||||
{i.Article}
|
return (
|
||||||
</TableCell>
|
<TableRow key={i.runningNumber}>
|
||||||
<TableCell className={`font-medium ${classname}`}>
|
<TableCell className={`font-medium ${classname}`}>
|
||||||
{i.alpla_laneDescription}
|
{i.alpla_laneID}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className={`font-medium ${classname}`}>
|
<TableCell className={`font-medium ${classname}`}>
|
||||||
{i.runningNumber}
|
{i.alpla_laneDescription}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className={`font-medium ${classname}`}>{i.ocme}</TableCell>
|
<TableCell className={`font-medium ${classname}`}>
|
||||||
<TableCell className={`font-medium ${classname}`}>{i.stock}</TableCell>
|
{i.Article}
|
||||||
<TableCell className={`font-medium ${classname}`}>{i.info}</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
<TableCell className={`font-medium ${classname}`}>
|
||||||
);
|
{i.alpla_laneDescription}
|
||||||
})}
|
</TableCell>
|
||||||
</>
|
<TableCell className={`font-medium ${classname}`}>
|
||||||
)}
|
{i.runningNumber}
|
||||||
</Table>
|
</TableCell>
|
||||||
</div>
|
<TableCell className={`font-medium ${classname}`}>
|
||||||
</LstCard>
|
{i.ocme}
|
||||||
</div>
|
</TableCell>
|
||||||
{/* <div className="m-2">
|
<TableCell className={`font-medium ${classname}`}>
|
||||||
|
{i.stock}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className={`font-medium ${classname}`}>
|
||||||
|
{i.info}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</LstCard>
|
||||||
|
</div>
|
||||||
|
{/* <div className="m-2">
|
||||||
<CycleCountLog />
|
<CycleCountLog />
|
||||||
</div> */}
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user