definecoder · nafi-ullah · Mar 29, 2024 · Mar 29, 2024 · Mar 29, 2024
diff --git a/client/app/profile/[userId]/page.tsx b/client/app/profile/[userId]/page.tsx
@@ -8,6 +8,7 @@ import { useParams } from "next/navigation";
 import { useRouter } from "next/navigation";
 import { EditIcon, Factory, CircleUser } from "lucide-react";
 import {useEffect, useState} from "react";
+import { ProfileEditModal } from "@/components/modals/ProfileEditModal";
 
 
 
@@ -50,16 +51,12 @@ export default function ProfilePage() {
           <h1><span className="font-bold">ID: </span></h1>
           <p><span className="font-bold">Email: </span>{user.email}</p>
           <p><span className="font-bold">Role: </span>{user.roleName}</p>
-          <p><span className="font-bold">Name: </span>{user.profileName}</p>
+          <p><span className="font-bold">Profile Name: </span>{user.profileName}</p>
+          <p><span className="font-bold">Username: </span>{user.username}</p>
           <p><span className="font-bold">Role Description: </span>{user.roleDescription}</p>
         </div>
-        <Button
-        variant="outline"
-        className="w-24"
-        onClick={() => router.push("/dashboard")}
-      ><EditIcon className="h-4 w-4" />
-        Edit
-      </Button>
+        <ProfileEditModal profileInfo={user}/>
+
       </div>
 
 
@@ -90,7 +87,11 @@ export default function ProfilePage() {
 
 
         </div>}
-      {user?.roleName !== 'STS_MANAGER' && user?.roleName !== 'LAND_MANAGER' && (
+        {user?.roleName === 'SYSTEM_ADMIN' && <div>
+        <div className="font-bold text-2xl my-4">Admin</div>
+          <div>You are admin</div>
+        </div>}
+      {user?.roleName !== 'STS_MANAGER' && user?.roleName !== 'LAND_MANAGER' && user?.roleName !== 'SYSTEM_ADMIN' && (
         <div>Oops! Your role has not assigned yet</div>
       )}
       </div>

diff --git a/client/components/modals/ProfileEditModal.tsx b/client/components/modals/ProfileEditModal.tsx
@@ -0,0 +1,158 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose
+} from "@/components/ui/dialog";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import React, { use, useEffect, useState } from "react";
+import { Send, Trash,EditIcon  } from "lucide-react";
+import deleteUser from "@/hooks/user_data/deleteUser";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectGroup,
+  SelectLabel,
+  SelectItem,
+} from "../ui/select";
+import editUser from "@/hooks/user_data/editUser";
+import gettAllRoles from "@/hooks/user_data/useGetAllRole";
+import { number } from "prop-types";
+import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
+import editSTS from "@/hooks/entityCreation/editSTS";
+import getUserByRole from "@/hooks/user_data/getUserByRole";
+import VehicleRelaseRoute from "../maps/VehicleReleaseRoute";
+import useVehicleReleaseFromSTS from "@/hooks/StsDashboard/useVehicleReleaseFromSTS";
+import useUpcomingVehicle from "@/hooks/landFillDashboard/useUpcomingVehiclesList";
+import useTripComplete from "@/hooks/landFillDashboard/useTripComplete";
+import { profile } from "console";
+import useEditProfileInfo from "@/hooks/user_data/useEditProfileInfo";
+import useGetUserProfile from "@/hooks/user_data/useGetUserProfile";
+
+
+type User = {
+  id: string;
+  username: string;
+  email: string;
+  profileName: string;
+   roleName: string;
+  roleDescription: string;
+
+};
+
+
+export const ProfileEditModal = ({ profileInfo }: { profileInfo: User }) => {
+  const [profileData, setProfileData] = useState<User>(profileInfo);
+
+  const { user, stsDetails, landfillDetails, getUserDetails} = useGetUserProfile(); 
+
+
+  const [username , setUsername] = useState<string>(user.username);
+  const [profilename , setProfilename] = useState<string>(user.profileName);
+
+  const { EditProfileInfo } = useEditProfileInfo();
+
+
+
+
+  const handleSaveChanges = async () => {
+    try {
+
+
+      const postEntry = await EditProfileInfo({
+        username : username,
+        profileName: profilename
+      });
+
+    } catch (error) {
+      console.error("Error:", error);
+    }
+
+
+  };
+  useEffect(() => {
+    getUserDetails();
+  }, []);
+
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" title="Edit STS Info" className="h-8 w-24 p-0">
+        <EditIcon className="h-4 w-4" /> Edit
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="mt-4 text-xl sm:text-2xl">
+            Edit Profile
+          </DialogTitle>
+          <DialogDescription>
+            <div className="mt-4 flex flex-col justify-center items-start text-left p-4 rounded-lg border shadow-xl text-md">
+              <h1>
+                <span className="font-bold">Role Name: </span>
+                {user.roleName}
+              </h1>
+              <p>
+                <span className="font-bold">Email: </span>
+                {user.email}
+              </p>
+              <p>
+              <span className="font-bold">Username: </span>
+                {user.username}
+              </p>
+              <p>
+                <span className="font-bold">Profile Name: </span>
+                {user.profileName}
+              </p>
+
+
+
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+             Username
+            </Label>
+            <Input
+              id="weightOfWaste"
+              placeholder={username}
+              className="col-span-3"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
+          </div>
+
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="capacity" className="text-right">
+              Profile Name
+            </Label>
+            <Input
+              id="capacity"
+              placeholder={profilename}
+              className="col-span-3"
+              value={profilename}
+              onChange={(e) => setProfilename(e.target.value)}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+        <DialogClose asChild>
+        <Button type="button" onClick={handleSaveChanges}>Save changes</Button>
+        </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/client/data/apiRoutes.ts b/client/data/apiRoutes.ts
@@ -51,5 +51,6 @@ export const apiRoutes = {
     },
     profile: {
         getProfile: `${baseUrl}/profile`,
+        edit: `${baseUrl}/profile`,
     }
 }
diff --git a/client/hooks/user_data/useEditProfileInfo.tsx b/client/hooks/user_data/useEditProfileInfo.tsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { setCookie, getCookie } from '@/lib/cookieFunctions';
+import axios from 'axios';
+import { jwtToken, stsId } from '@/data/cookieNames'; // Ensure these variables are properly defined
+import { apiRoutes } from '@/data/apiRoutes';
+
+export default function useEditProfileInfo() {
+  async function EditProfileInfo(data: {
+    username: string;
+    profileName: string;
+  }) {
+
+
+    try {
+      const editedProfile = {
+        username: data.username,
+        profileName: data.profileName,
+      };
+
+
+      const res = await axios.put(
+        apiRoutes.profile.edit,
+        editedProfile,
+        {
+          headers: { Authorization: `Bearer ${getCookie(jwtToken)}` },
+        }
+      );
+
+
+
+      return true;
+    } catch (error: any) {
+      alert(error.message?.toString() || 'Error Editing');
+      return false;
+    }
+  }
+
+  return { EditProfileInfo };
+}
diff --git a/client/hooks/user_data/useGetUserProfile.tsx b/client/hooks/user_data/useGetUserProfile.tsx
@@ -68,6 +68,7 @@ export default function useGetUserProfile() {
     try {
       const res = await axios.get(apiRoutes.profile.getProfile, {
         headers: { Authorization: `Bearer ${getCookie(jwtToken)}` },
+
       });
         console.log(res.data);
       if (res.data.roleName === "STS_MANAGER" ) {
@@ -125,12 +126,24 @@ export default function useGetUserProfile() {
             setLandfillDetails(ResLandDetails);
 
         }
+        setUser(userDetails);
+
+      }else if(res.data.roleName === "SYSTEM_ADMIN" ) {
+
+        const userDetails: User = {
+          id: res.data.id,
+          username: res.data.username,
+          email: res.data.email,
+          profileName: res.data.profileName,
+            roleName: res.data.roleName,
+        roleDescription: res.data.role.description,
 
 
+        };
 
+
         setUser(userDetails);
 
-
       }else{
         const userDetails: User = {
           id: res.data.id,
@@ -153,11 +166,11 @@ export default function useGetUserProfile() {
     }
   }
 
-  useEffect(() => {
-    console.log(user);
-    console.log(stsDetails);
-    console.log(landfillDetails)
-  }, [user, stsDetails, landfillDetails]); // Call getUserDetails when the component mounts
+  // useEffect(() => {
+  //   console.log(user);
+  //   console.log(stsDetails);
+  //   console.log(landfillDetails)
+  // }, [user, stsDetails, landfillDetails]); // Call getUserDetails when the component mounts
 
   return { user, stsDetails, landfillDetails, getUserDetails };
 }