Skip to content

Commit 3e58cd6

Browse files
codermehrajcodermehraj
committed
LANDFILL & STS MANAGEMENT FINISHED
1 parent 510b89b commit 3e58cd6

File tree

9 files changed

+433
-4
lines changed

9 files changed

+433
-4
lines changed

‎client/components/dataTables/LandFillList.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ import { DeleteSTSModal } from "../modals/stsControl/DeleteSTSModal";
5252
import { ViewSTSInfoModal } from "../modals/stsControl/ViewSTSInfoModal";
5353
import { StsCreateModal } from "../modals/stsControl/StsModal";
5454
import useGetAllLandfill from "@/hooks/dataQuery/useGetAllLandfill";
55+
import { ViewLandFIllInfoModal } from "../modals/landfillControl/ViewLandfillInfoModal";
56+
import { EditLandfillInfoModal } from "../modals/landfillControl/EditLandfillInfoModal";
57+
import { DeleteLandfillModal } from "../modals/landfillControl/DeleteLandfillModal";
5558

5659
export type LandFill = {
5760
id: string;
@@ -107,13 +110,13 @@ export const columns: ColumnDef<LandFill>[] = [
107110
id: "actions",
108111
enableHiding: false,
109112
cell: ({ row }) => {
110-
const sts: LandFill = row.original;
113+
const landfill: LandFill = row.original;
111114

112115
return (
113116
<div>
114-
{/* <ViewSTSInfoModal stsInfo={sts} />
115-
<EditSTSInfoModal stsInfo={sts} />
116-
<DeleteSTSModal stsInfo={sts} /> */}
117+
<ViewLandFIllInfoModal landfillInfo={landfill} />
118+
<EditLandfillInfoModal landfillInfo={landfill} />
119+
<DeleteLandfillModal landfillInfo={landfill} />
117120
</div>
118121
);
119122
},

‎client/components/modals/landfillControl/DeleteLandfillModal.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { Button } from "@/components/ui/button";
2+
import {
3+
Dialog,
4+
DialogContent,
5+
DialogDescription,
6+
DialogFooter,
7+
DialogHeader,
8+
DialogTitle,
9+
DialogTrigger,
10+
} from "@/components/ui/dialog";
11+
12+
import { Input } from "@/components/ui/input";
13+
import { Label } from "@/components/ui/label";
14+
import React, { useState } from "react";
15+
import { Trash } from "lucide-react";
16+
import deleteUser from "@/hooks/user_data/deleteUser";
17+
import deleteSTS from "@/hooks/entityCreation/deleteSTS";
18+
import { LandFill } from "@/components/dataTables/LandFillList";
19+
import deleteLandFill from "@/hooks/entityCreation/deleteLandfill";
20+
21+
export const DeleteLandfillModal = ({ landfillInfo }: { landfillInfo: LandFill }) => {
22+
const [confirmText, setConfirmText] = useState("");
23+
return (
24+
<Dialog>
25+
<DialogTrigger asChild>
26+
<Button variant="ghost" title={"Remove " + landfillInfo.name} className="h-8 w-8 p-0">
27+
<span className="sr-only">Open menu</span>
28+
<Trash className="h-4 w-4" />
29+
</Button>
30+
</DialogTrigger>
31+
<DialogContent className="max-w-[425px]">
32+
<DialogHeader>
33+
<DialogTitle className="mt-4 text-xl sm:text-2xl">
34+
Confirm Delete STS?
35+
</DialogTitle>
36+
<DialogDescription>
37+
<div className="mt-4 flex flex-col justify-center items-start text-left p-4 rounded-lg border shadow-xl text-md">
38+
<h1>
39+
<span className="font-bold">ID: </span>
40+
{landfillInfo.id}
41+
</h1>
42+
<p>
43+
<span className="font-bold">Name: </span>
44+
{landfillInfo.name}
45+
</p>
46+
<p>
47+
<span className="font-bold">Capacity: </span>
48+
{landfillInfo.capacity}
49+
</p>
50+
<p className="font-bold">Managers:</p>
51+
{landfillInfo.manager.length === 0 ? <p className="font-bold text-red-600">&nbsp;&nbsp;&nbsp; NO MANAGER ASSGINED FOR THIS LandFill </p> : landfillInfo.manager.map((manager, index) => (
52+
<p key={manager}>
53+
&nbsp;&nbsp;&nbsp;&nbsp;{index + 1 + "."}&nbsp;{manager}
54+
</p>
55+
))}
56+
</div>
57+
</DialogDescription>
58+
</DialogHeader>
59+
<form>
60+
<div className="grid gap-4 py-4">
61+
<div className="flex flex-col justify-center items-start text-left gap-4 p-8">
62+
<Label htmlFor="username" className="text-right">
63+
Type "CONFIRM" to remove {landfillInfo.name}
64+
</Label>
65+
<Input
66+
id="confirmation"
67+
type="text"
68+
placeholder="CONFIRM"
69+
value={confirmText}
70+
onChange={(e) => setConfirmText(e.target.value)}
71+
required
72+
/>
73+
</div>
74+
</div>
75+
<DialogFooter>
76+
<Button
77+
type="submit"
78+
onClick={async () => {
79+
if (confirmText !== "CONFIRM")
80+
return alert("Please type 'CONFIRM' to confirm");
81+
const result = await deleteLandFill(landfillInfo.id);
82+
if (result) return alert(result);
83+
}}
84+
>
85+
Confirm
86+
</Button>
87+
</DialogFooter>
88+
</form>
89+
</DialogContent>
90+
</Dialog>
91+
);
92+
};

‎client/components/modals/landfillControl/EditLandfillInfoModal.tsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import { Button } from "@/components/ui/button";
2+
import {
3+
Dialog,
4+
DialogContent,
5+
DialogDescription,
6+
DialogFooter,
7+
DialogHeader,
8+
DialogTitle,
9+
DialogTrigger,
10+
} from "@/components/ui/dialog";
11+
12+
import { Input } from "@/components/ui/input";
13+
import { Label } from "@/components/ui/label";
14+
import React, { use, useEffect, useState } from "react";
15+
import { EditIcon, Trash } from "lucide-react";
16+
import deleteUser from "@/hooks/user_data/deleteUser";
17+
import {
18+
Select,
19+
SelectTrigger,
20+
SelectValue,
21+
SelectContent,
22+
SelectGroup,
23+
SelectLabel,
24+
SelectItem,
25+
} from "../../ui/select";
26+
import editUser from "@/hooks/user_data/editUser";
27+
import gettAllRoles from "@/hooks/user_data/useGetAllRole";
28+
import { number } from "prop-types";
29+
import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
30+
import editSTS from "@/hooks/entityCreation/editSTS";
31+
import getUserByRole from "@/hooks/user_data/getUserByRole";
32+
import editLandfill from "@/hooks/entityCreation/editLandfill";
33+
34+
type LandFill = {
35+
id: string;
36+
name: string;
37+
capacity: string;
38+
latitude: string;
39+
longitude: string;
40+
manager: string[];
41+
};
42+
43+
type LandFillManager = {
44+
id: string;
45+
username: string;
46+
};
47+
48+
export const EditLandfillInfoModal = ({ landfillInfo }: { landfillInfo: LandFill }) => {
49+
const [landfillData, setLandfillData] = useState(landfillInfo);
50+
const [landfillManagerData, setLandfillManagerData] = useState<LandFillManager>();
51+
const [landfillManagerList, setLandfillManagerList] = useState<LandFillManager[]>([]);
52+
53+
const getManagerList = async () => {
54+
const result = await getUserByRole(landfillManager);
55+
if (result) await setLandfillManagerList(result);
56+
};
57+
58+
useEffect(() => {
59+
getManagerList();
60+
}, []);
61+
62+
return (
63+
<Dialog>
64+
<DialogTrigger asChild>
65+
<Button variant="ghost" title="Edit Landfill Info" className="h-8 w-8 p-0">
66+
<EditIcon className="h-4 w-4" />
67+
</Button>
68+
</DialogTrigger>
69+
<DialogContent className="max-w-[425px]">
70+
<DialogHeader>
71+
<DialogTitle className="mt-4 text-xl sm:text-2xl">
72+
Edit Landfill Details
73+
</DialogTitle>
74+
<DialogDescription>
75+
Update Landfill information by filling out the form below.
76+
</DialogDescription>
77+
</DialogHeader>
78+
<form>
79+
<div className="grid gap-4 py-4">
80+
<div className="grid grid-cols-4 items-center gap-4">
81+
<Label htmlFor="stsName" className="text-right">
82+
Landfill Name
83+
</Label>
84+
<Input
85+
id="stsName"
86+
type="text"
87+
value={landfillData.name}
88+
onChange={(e) =>
89+
setLandfillData({ ...landfillData, name: e.target.value })
90+
}
91+
className="col-span-3"
92+
required
93+
/>
94+
</div>
95+
<div className="grid grid-cols-4 items-center gap-4">
96+
<Label htmlFor="capacity" className="text-right">
97+
Capacity
98+
</Label>
99+
<Input
100+
id="capacity"
101+
type="number"
102+
value={landfillData.capacity}
103+
onChange={(e) =>
104+
setLandfillData({ ...landfillData, capacity: e.target.value })
105+
}
106+
className="col-span-3"
107+
required
108+
/>
109+
</div>
110+
<div className="grid grid-cols-4 items-center gap-4">
111+
<Label htmlFor="Manager" className="text-right">
112+
Add Manager
113+
</Label>
114+
<Select
115+
value={landfillManagerData?.id || ""}
116+
onValueChange={(e) => setLandfillManagerData(landfillManagerList.filter((user) => user.id === e)[0])}
117+
>
118+
<SelectTrigger className="col-span-3">
119+
<SelectValue id="role" placeholder="Select manager from the list" />
120+
</SelectTrigger>
121+
<SelectContent>
122+
<SelectGroup>
123+
<SelectLabel>Roles</SelectLabel>
124+
{landfillManagerList.map((user) => (
125+
<SelectItem key={user.id} value={user.id}>
126+
{user.username}
127+
</SelectItem>
128+
))}
129+
</SelectGroup>
130+
</SelectContent>
131+
</Select>
132+
</div>
133+
</div>
134+
<DialogFooter>
135+
<Button
136+
type="submit"
137+
onClick={async () => {
138+
const result = await editLandfill(landfillData, landfillManagerData?.id || "");
139+
if (result) return alert(result);
140+
}}
141+
>
142+
Update STS
143+
</Button>
144+
</DialogFooter>
145+
</form>
146+
</DialogContent>
147+
</Dialog>
148+
);
149+
};

‎client/components/modals/landfillControl/ViewLandfillInfoModal.tsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { Button } from "@/components/ui/button";
2+
import {
3+
Dialog,
4+
DialogContent,
5+
DialogDescription,
6+
DialogFooter,
7+
DialogHeader,
8+
DialogTitle,
9+
DialogTrigger,
10+
} from "@/components/ui/dialog";
11+
12+
import { Input } from "@/components/ui/input";
13+
import { Label } from "@/components/ui/label";
14+
import React, { use, useEffect, useState } from "react";
15+
import { EditIcon, Eye, Trash } from "lucide-react";
16+
import deleteUser from "@/hooks/user_data/deleteUser";
17+
import {
18+
Select,
19+
SelectTrigger,
20+
SelectValue,
21+
SelectContent,
22+
SelectGroup,
23+
SelectLabel,
24+
SelectItem,
25+
} from "../../ui/select";
26+
import editUser from "@/hooks/user_data/editUser";
27+
import gettAllRoles from "@/hooks/user_data/useGetAllRole";
28+
import { number } from "prop-types";
29+
import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
30+
import editSTS from "@/hooks/entityCreation/editSTS";
31+
import getUserByRole from "@/hooks/user_data/getUserByRole";
32+
33+
type LandFill = {
34+
id: string;
35+
name: string;
36+
capacity: string;
37+
latitude: string;
38+
longitude: string;
39+
manager: string[];
40+
};
41+
42+
type LandFillManager = {
43+
id: string;
44+
username: string;
45+
};
46+
47+
export const ViewLandFIllInfoModal = ({ landfillInfo }: { landfillInfo: LandFill }) => {
48+
const [landFillData, setLanfillData] = useState(landfillInfo);
49+
const [landfillManagerData, setLandfillManagerData] = useState<LandFillManager>();
50+
const [landfillManagerList, setLandfillManagerList] = useState<LandFillManager[]>([]);
51+
52+
const getManagerList = async () => {
53+
const result = await getUserByRole(landfillManager);
54+
if (result) await setLandfillManagerList(result);
55+
};
56+
57+
useEffect(() => {
58+
getManagerList();
59+
}, []);
60+
61+
return (
62+
<Dialog>
63+
<DialogTrigger asChild>
64+
<Button variant="ghost" title="View STS Info" className="h-8 w-8 p-0">
65+
<Eye className="h-4 w-4" />
66+
</Button>
67+
</DialogTrigger>
68+
<DialogContent className="max-w-[425px]">
69+
<DialogHeader>
70+
<DialogTitle className="mt-4 text-xl sm:text-2xl">
71+
View STS Details
72+
</DialogTitle>
73+
<DialogDescription>
74+
<h1>Here are the description of the STS</h1>
75+
<div className="mt-4 flex flex-col justify-center items-start text-left p-6 rounded-lg border shadow-xl text-md gap-2">
76+
<h1>
77+
<span className="font-bold">ID: </span>
78+
{landFillData.id}
79+
</h1>
80+
<p>
81+
<span className="font-bold">Name: </span>
82+
{landFillData.name}
83+
</p>
84+
<p>
85+
<span className="font-bold">Capacity: </span>
86+
{landFillData.capacity}
87+
</p>
88+
<p>
89+
<span className="font-bold">Latitude: </span>
90+
{landFillData.latitude}
91+
</p>
92+
<p>
93+
<span className="font-bold">Longitude: </span>
94+
{landFillData.longitude}
95+
</p>
96+
<p className="font-bold">Managers:</p>
97+
{landFillData.manager.length === 0 ? <p className="font-bold text-red-600">&nbsp;&nbsp;&nbsp; NO MANAGER ASSGINED FOR THIS LandFill </p> : landFillData.manager.map((manager, index) => (
98+
<p key={manager}>
99+
&nbsp;&nbsp;&nbsp;&nbsp;{index + 1 + "."}&nbsp;{manager}
100+
</p>
101+
))}
102+
</div>
103+
</DialogDescription>
104+
</DialogHeader>
105+
</DialogContent>
106+
</Dialog>
107+
);
108+
};

0 commit comments

Comments
 (0)