Skip to content

Commit 7a8d881

Browse files
codermehrajcodermehraj
committed
Create new vehicle completed
1 parent 1f6bcad commit 7a8d881

File tree

2 files changed

+189
-39
lines changed

2 files changed

+189
-39
lines changed

‎client/components/modals/VehicleModal.tsx‎

Lines changed: 139 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
DialogHeader,
88
DialogTitle,
99
DialogTrigger,
10-
DialogClose
10+
DialogClose,
1111
} from "@/components/ui/dialog";
1212
import {
1313
DropdownMenu,
@@ -20,7 +20,18 @@ import {
2020

2121
import { Input } from "@/components/ui/input";
2222
import { Label } from "@/components/ui/label";
23-
import React , {useState} from "react";
23+
import React, { useEffect, useState } from "react";
24+
import {
25+
Select,
26+
SelectContent,
27+
SelectGroup,
28+
SelectItem,
29+
SelectLabel,
30+
SelectTrigger,
31+
SelectValue,
32+
} from "../ui/select";
33+
import useGetAllLandfill from "@/hooks/dataQuery/useGetAllLandfill";
34+
import useCreateVehicle from "@/hooks/entityCreation/useCreateVehicle";
2435

2536
interface DialogWrapperProps {
2637
children: React.ReactNode;
@@ -29,24 +40,39 @@ interface DialogWrapperProps {
2940
export const VehicleCreateModal: React.FC<DialogWrapperProps> = ({
3041
children,
3142
}) => {
32-
const [vehicleNumber, setVehicleNumber] = useState("");
33-
const [vehicleType, setVehicleType] = useState("Select Type");
34-
const [capacity, setCapacity] = useState("");
35-
36-
const handleItemClick = (text: string) => {
37-
setVehicleType(text);
38-
};
43+
const [vehicleNumber, setVehicleNumber] = useState("");
44+
const [vehicleType, setVehicleType] = useState("Dump Truck");
45+
const [capacity, setCapacity] = useState<number>();
46+
const [loadedFuelCostPerKm, setLoadedFuelCostPerKm] = useState<number>();
47+
const [unloadedFuelCostPerKm, setUnloadedFuelCostPerKm] = useState<number>();
48+
const [assignedLandfill, setAssignedLandfill] = useState<string>("");
49+
const {createVehicle} = useCreateVehicle();
50+
const vehicleTypeList = [
51+
"Dump Truck",
52+
"Compactor Truck",
53+
"Open Truck",
54+
"Container Carrier",
55+
];
56+
const { landFillData, fetchAllLandfills } = useGetAllLandfill();
3957

40-
58+
useEffect(() => {}, [landFillData]);
4159

42-
43-
const handleSaveChanges = () => {
60+
const handleSaveChanges = async () => {
4461
console.log("Vehicle Number:", vehicleNumber);
4562
console.log("Vehicle Type:", vehicleType);
4663
console.log("Capacity:", capacity);
64+
//alert(assignedLandfill);
65+
const res = await createVehicle({
66+
vehicleNumber,
67+
vehicleType,
68+
capacity: capacity || 0,
69+
loadedFuelCostPerKm: loadedFuelCostPerKm || 0,
70+
unloadedFuelCostPerKm: unloadedFuelCostPerKm || 0,
71+
landFillId: assignedLandfill,
72+
})
73+
if(res) return alert(res);
4774
};
4875

49-
5076
return (
5177
<Dialog>
5278
<DialogTrigger asChild>
@@ -61,53 +87,127 @@ export const VehicleCreateModal: React.FC<DialogWrapperProps> = ({
6187
</DialogDescription>
6288
</DialogHeader>
6389
<div className="grid gap-4 py-4">
64-
<div className="grid grid-cols-4 items-center gap-4">
65-
<Label htmlFor="name" className="text-right">
90+
<div className="grid grid-cols-6 items-center gap-4">
91+
<Label htmlFor="name" className="text-right col-span-2">
6692
Vehicle Number
6793
</Label>
6894
<Input
6995
id="vehicleNumber"
70-
placeholder="X-Metro-Ka-123456"
71-
className="col-span-3"
96+
placeholder="Dhaka-Metro-Ka-123456"
97+
className="col-span-4"
7298
value={vehicleNumber}
7399
onChange={(e) => setVehicleNumber(e.target.value)}
74100
/>
75101
</div>
76-
<div className="grid grid-cols-4 items-center gap-4">
77-
<Label htmlFor="vehicleType" className="text-right">
78-
Vehicle type
102+
<div className="grid grid-cols-6 items-center gap-4">
103+
<Label htmlFor="Manager" className="text-right col-span-2">
104+
Vehicle Type
79105
</Label>
80-
<DropdownMenu>
81-
<DropdownMenuTrigger className="w-[200px]">{vehicleType}</DropdownMenuTrigger>
82-
<DropdownMenuContent>
83-
<DropdownMenuLabel>Car Types</DropdownMenuLabel>
84-
<DropdownMenuSeparator />
85-
<DropdownMenuItem onClick={() => handleItemClick('Dump Truck')}>Dump Truck</DropdownMenuItem>
86-
<DropdownMenuItem onClick={() => handleItemClick('Compactor Truck')}>Compactor Truck</DropdownMenuItem>
87-
<DropdownMenuItem onClick={() => handleItemClick('Open Truck')}>Open Truck</DropdownMenuItem>
88-
<DropdownMenuItem onClick={() => handleItemClick('Container Carrier')}>Container Carrier</DropdownMenuItem>
89-
</DropdownMenuContent>
90-
</DropdownMenu>
106+
<Select
107+
value={vehicleType}
108+
onValueChange={(e) => setVehicleType(e)}
109+
>
110+
<SelectTrigger className="col-span-4">
111+
<SelectValue
112+
id="role"
113+
placeholder="Select manager from the list"
114+
/>
115+
</SelectTrigger>
116+
<SelectContent>
117+
<SelectGroup>
118+
<SelectLabel>Roles</SelectLabel>
119+
{vehicleTypeList.map((type: string, index: number) => (
120+
<SelectItem key={index} value={type}>
121+
{type}
122+
</SelectItem>
123+
))}
124+
</SelectGroup>
125+
</SelectContent>
126+
</Select>
91127
</div>
92-
<div className="grid grid-cols-4 items-center gap-4">
93-
<Label htmlFor="capacity" className="text-right">
128+
<div className="grid grid-cols-6 items-center gap-4">
129+
<Label htmlFor="capacity" className="text-right col-span-2">
94130
Capacity (in Tons)
95131
</Label>
96132
<Input
97133
id="capacity"
98134
placeholder="1-100"
99-
className="col-span-3"
135+
className="col-span-4"
136+
type="number"
100137
value={capacity}
101-
onChange={(e) => setCapacity(e.target.value)}
138+
onChange={(e) => setCapacity(parseInt(e.target.value))}
139+
/>
140+
</div>
141+
<div className="grid grid-cols-6 items-center gap-4">
142+
<Label
143+
htmlFor="loadedFuelCostPerKm"
144+
className="text-right col-span-2"
145+
>
146+
Loaded fuel cost <br /> per km (in BDT)
147+
</Label>
148+
<Input
149+
id="loadedFuelCostPerKm"
150+
placeholder="5000"
151+
type="number"
152+
className="col-span-4"
153+
value={loadedFuelCostPerKm}
154+
onChange={(e) =>
155+
setLoadedFuelCostPerKm(parseFloat(e.target.value) || undefined)
156+
}
102157
/>
103158
</div>
159+
<div className="grid grid-cols-6 items-center gap-4">
160+
<Label
161+
htmlFor="unloadedFuelCostPerKm"
162+
className="text-right col-span-2"
163+
>
164+
Loaded fuel cost <br /> per km (in BDT)
165+
</Label>
166+
<Input
167+
id="unloadedFuelCostPerKm"
168+
type="number"
169+
placeholder="2000"
170+
className="col-span-4"
171+
value={unloadedFuelCostPerKm}
172+
onChange={(e) =>
173+
setUnloadedFuelCostPerKm(parseFloat(e.target.value) || undefined)
174+
}
175+
/>
176+
</div>
177+
<div className="grid grid-cols-6 items-center gap-4">
178+
<Label htmlFor="assignedLandfill" className="text-right col-span-2">
179+
Assigned Landfill
180+
</Label>
181+
<Select
182+
value={assignedLandfill}
183+
onValueChange={(e) => setAssignedLandfill(e)}
184+
>
185+
<SelectTrigger className="col-span-4">
186+
<SelectValue
187+
id="assignedLandfill"
188+
placeholder="Select assigned landfill from the list"
189+
/>
190+
</SelectTrigger>
191+
<SelectContent>
192+
<SelectGroup>
193+
<SelectLabel>Landfills</SelectLabel>
194+
{landFillData.map((landfill, index: number) => (
195+
<SelectItem key={index} value={landfill.id}>
196+
{landfill.name}
197+
</SelectItem>
198+
))}
199+
</SelectGroup>
200+
</SelectContent>
201+
</Select>
202+
</div>
104203
</div>
105204
<DialogFooter>
106-
<DialogClose asChild>
107-
<Button type="button" onClick={handleSaveChanges}>Save changes</Button>
108-
</DialogClose>
205+
<DialogClose asChild>
206+
<Button type="button" onClick={handleSaveChanges}>
207+
Save changes
208+
</Button>
209+
</DialogClose>
109210
</DialogFooter>
110-
111211
</DialogContent>
112212
</Dialog>
113213
);

‎client/hooks/entityCreation/useCreateVehicle.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
"use client";
2+
import { apiRoutes } from "@/data/apiRoutes";
3+
import { jwtToken } from "@/data/cookieNames";
4+
import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
5+
import { getCookie } from "@/lib/cookieFunctions";
6+
import axios from "axios";
7+
export type Vehicle = {
8+
vehicleNumber: string;
9+
vehicleType: string;
10+
capacity: number;
11+
loadedFuelCostPerKm: number;
12+
unloadedFuelCostPerKm: number;
13+
landFillId: string;
14+
};
15+
16+
export default function useCreateVehicle() {
17+
// const [stsData, setStsData] = useState<STS>();
18+
19+
function isValid(vehicleData: Vehicle) {
20+
21+
return (
22+
vehicleData.vehicleNumber.length > 0 &&
23+
vehicleData.vehicleType.length > 0 &&
24+
vehicleData.capacity > 0 &&
25+
vehicleData.loadedFuelCostPerKm !== null &&
26+
vehicleData.unloadedFuelCostPerKm !== null &&
27+
vehicleData.landFillId.length > 0
28+
);
29+
}
30+
31+
async function createVehicle(vehicleData: Vehicle) {
32+
if (vehicleData && isValid(vehicleData)) {
33+
try {
34+
const res = await axios.post(apiRoutes.vehicle.create, vehicleData, {
35+
headers: {
36+
Authorization: `Bearer ${await getCookie(jwtToken)}`,
37+
},
38+
});
39+
window.location.reload();
40+
return "Vehicle Aadded successfully";
41+
} catch (error: any) {
42+
return error.message?.toString() || "Error creating Vehicle. Do you have permisson?.";
43+
}
44+
}
45+
46+
return null;
47+
}
48+
49+
return { createVehicle };
50+
}

0 commit comments

Comments
 (0)