fix(dashboard): some more rending fixes due to some strange behaivers
This commit is contained in:
@@ -1,25 +1,15 @@
|
||||
import { useCardStore } from "@/lib/store/useCardStore";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { Label } from "../ui/label";
|
||||
import { Checkbox } from "../ui/checkbox";
|
||||
import { Input } from "../ui/input";
|
||||
// import {
|
||||
// Select,
|
||||
// SelectContent,
|
||||
// SelectGroup,
|
||||
// SelectItem,
|
||||
// SelectLabel,
|
||||
// SelectTrigger,
|
||||
// SelectValue,
|
||||
// } from "../ui/select";
|
||||
import { Button } from "../ui/button";
|
||||
import { useAppForm } from "@/utils/formStuff";
|
||||
|
||||
export default function Cards(card: any) {
|
||||
const { addCard, removeCard, cards } = useCardStore();
|
||||
let existing: any = cards.filter((n: any) => n.name === card.name);
|
||||
|
||||
//console.log(existing);
|
||||
const form = useForm({
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
name: existing[0]?.name || card.name,
|
||||
rowType: existing[0]?.type ?? card.rowType,
|
||||
@@ -62,7 +52,7 @@ export default function Cards(card: any) {
|
||||
}}
|
||||
className="flex flex-row"
|
||||
>
|
||||
<form.Field
|
||||
<form.AppField
|
||||
name="active"
|
||||
// validators={{
|
||||
// // We can choose between form-wide and field-specific validators
|
||||
@@ -95,83 +85,16 @@ export default function Cards(card: any) {
|
||||
/>
|
||||
{!card.inventory && (
|
||||
<>
|
||||
<form.Field
|
||||
<form.AppField
|
||||
name="age"
|
||||
// validators={{
|
||||
// // We can choose between form-wide and field-specific validators
|
||||
// onChange: ({ value }) =>
|
||||
// value.length > 3
|
||||
// ? undefined
|
||||
// : "Username must be longer than 3 letters",
|
||||
// }}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 p-2">
|
||||
<Label htmlFor="active" className="">
|
||||
Age
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
onBlur={field.handleBlur}
|
||||
value={field.state.value}
|
||||
type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Age"
|
||||
inputType="number"
|
||||
required={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* <form.Field
|
||||
name="rowType"
|
||||
//listeners={{onChange: ({value})=>{}}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label htmlFor={field.name}>
|
||||
Row Type
|
||||
</Label>
|
||||
<Select
|
||||
value={field.state.value}
|
||||
onValueChange={field.handleChange}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue
|
||||
id={field.name}
|
||||
placeholder="Select Role"
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>
|
||||
Row Type
|
||||
</SelectLabel>
|
||||
<SelectItem value="empty">
|
||||
Empty
|
||||
</SelectItem>
|
||||
<SelectItem value="fg">
|
||||
Finished Goods
|
||||
</SelectItem>
|
||||
<SelectItem value="materials">
|
||||
Materials
|
||||
</SelectItem>
|
||||
<SelectItem value="waste">
|
||||
Waste
|
||||
</SelectItem>
|
||||
<SelectItem value="packaging">
|
||||
Packaging
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/> */}
|
||||
</>
|
||||
)}
|
||||
<div className="mt-7">
|
||||
|
||||
@@ -27,9 +27,10 @@ export default function DashBoard() {
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
//console.log(name.split("-")[0], a);
|
||||
return (
|
||||
<div key={a.name} className="col-span-3">
|
||||
<Component age={a.age} type={a.rowType} />
|
||||
<Component data={a} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,8 +9,12 @@ import { useQuery } from "@tanstack/react-query";
|
||||
//import { toast } from "sonner";
|
||||
|
||||
export default function INVCheckCard(props: any) {
|
||||
//{ style = {} }
|
||||
const { data, isError, isLoading } = useQuery(getinventoryCheck(props));
|
||||
const { age, rowType } = props.data;
|
||||
|
||||
//console.log(props.data);
|
||||
const { data, isError, isLoading } = useQuery(
|
||||
getinventoryCheck({ age: age })
|
||||
);
|
||||
|
||||
if (isLoading) return <div>Loading inventory data...</div>;
|
||||
if (isError) {
|
||||
@@ -23,11 +27,11 @@ export default function INVCheckCard(props: any) {
|
||||
let laneData: any = data;
|
||||
if (props.type != "") {
|
||||
laneData = laneData.filter(
|
||||
(l: any) => l.rowType === props.type.toUpperCase()
|
||||
(l: any) => l.rowType === rowType.toUpperCase()
|
||||
);
|
||||
|
||||
// age
|
||||
laneData = laneData.filter((l: any) => l.DaysSinceLast >= props.age);
|
||||
laneData = laneData.filter((l: any) => l.DaysSinceLast >= age);
|
||||
}
|
||||
|
||||
// const handleCloseCard = () => {
|
||||
@@ -36,5 +40,5 @@ export default function INVCheckCard(props: any) {
|
||||
// toast.success("card removed");
|
||||
// };
|
||||
|
||||
return <InvTable columns={invColumns} data={laneData} info={props} />;
|
||||
return <InvTable columns={invColumns} data={laneData} info={props.data} />;
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@ function PopoverContent({
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
34
frontend/src/utils/formStuff/options/checkbox.tsx
Normal file
34
frontend/src/utils/formStuff/options/checkbox.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { Checkbox } from "@radix-ui/react-checkbox";
|
||||
import { useFieldContext } from "..";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { FieldErrors } from "./FieldErrors";
|
||||
|
||||
type CheckboxFieldProps = {
|
||||
label: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
export const CheckboxField = ({ label }: CheckboxFieldProps) => {
|
||||
const field = useFieldContext<boolean>();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="m-2 p-2 flex flex-row">
|
||||
<div>
|
||||
<Label htmlFor="active">
|
||||
<span>{label}</span>
|
||||
</Label>
|
||||
</div>
|
||||
<Checkbox
|
||||
id={field.name}
|
||||
checked={field.state.value}
|
||||
onCheckedChange={(checked) => {
|
||||
field.handleChange(checked === true);
|
||||
}}
|
||||
onBlur={field.handleBlur}
|
||||
/>
|
||||
</div>
|
||||
<FieldErrors meta={field.state.meta} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -13,7 +13,7 @@ export function getinventoryCheck(data: any) {
|
||||
}
|
||||
|
||||
const fetchStockSilo = async (info: any) => {
|
||||
console.log(info);
|
||||
//console.log("What tpye of info:", info);
|
||||
const { data } = await axios.post(`/api/logistics/cyclecountcheck`, {
|
||||
age: info.age ? parseInt(info.age) : null,
|
||||
type: "",
|
||||
|
||||
Reference in New Issue
Block a user