update user and delte

components/EmployeesComponent/Users/page.jsx

@@ -8,6 +8,12 @@ const UsersEmployees = () => {
   const CTX = useContext(AppContext);
   const usersData = CTX.state.usersData;
 
+  const goToEditUser = (id) => {
+    CTX.setGoToEditUser(true);
+    CTX.setBottomSheetCreateEmployeesOpen(true);
+    CTX.setIdEditUser(id);
+  };
+
   return (
     <>
       {usersData.length > 0 ? (
@@ -32,8 +38,8 @@ const UsersEmployees = () => {
                   </div>
                   <div className="flex">
                     <div
-                      className="w-[35px] h-[35px] bg-secondaryLighter-100 rounded-full"
+                      className="w-[35px] h-[35px] bg-secondaryLighter-100 rounded-full pt-[3px]"
-                      onClick={() => goToEditRole(e.id)}
+                      onClick={() => goToEditUser(e.userId)}
                     >
                       <svg
                         width="13"

plugins/BottomSheet/BottomSheetCreateEmployees.jsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useContext, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { BottomSheet } from "react-spring-bottom-sheet";
 import Input from "plugins/Input/page";
 import AppContext from "@ctx/AppContext";
@@ -9,6 +9,7 @@ import { toast } from "react-toastify";
 import Buttonbriz from "plugins/Buttonbriz/page";
 import DatePickerIran from "plugins/DatePickerIran/page";
 import moment from "jalali-moment";
+import validateIranPhone from "plugins/IranPhoneRegex";
 const jalaliMoment = require("jalali-moment");
 
 const BottomSheetCreateEmployees = (props) => {
@@ -17,7 +18,7 @@ const BottomSheetCreateEmployees = (props) => {
   const [lastName, setLastName] = useState("");
   const [phoneNumber, setPhoneNumber] = useState("");
   const [nationalId, setNationalId] = useState("");
-  const [gender, setGender] = useState(0);
+  const [gender, setGender] = useState(parseInt(0));
   const [birthDate, setBirthDate] = useState(null);
   const [roleSelectCurrntData, setRoleSelectCurrntData] = useState("");
   const [roleSelectData, setRoleSelectData] = useState([]);
@@ -39,12 +40,15 @@ const BottomSheetCreateEmployees = (props) => {
   );
   const rolesChoose = CTX.state.rolesChoose;
   const rolesData = CTX.state.rolesData;
+  const goToEditUser = CTX.state.goToEditUser;
+  const idEditUser = CTX.state.idEditUser;
+  const userData = CTX.state.userData;
 
   const body = {
     phoneNumber,
     firstName,
     lastName,
-    birthDate:
+    birthDateTimeStamp:
       birthDate &&
       moment
         .utc(
@@ -57,9 +61,46 @@ const BottomSheetCreateEmployees = (props) => {
     roleIds: rolesChoose,
   };
 
-  const handleCreateUser = () => {
+  const bodyUpdate = {
+    phoneNumber,
+    firstName,
+    lastName,
+    birthDateTimeStamp:
+      birthDate &&
+      moment
+        .utc(
+          [birthDate.year, birthDate.month, birthDate.day],
+          "jYYYY-jMM-jDDTHH"
+        )
+        .unix(),
+    gender: parseInt(gender),
+    nationalId,
+    roleIds: rolesChoose,
+    userId: userData.id,
+  };
+
+  console.log(bodyUpdate);
+
+  const clear = () => {
+    setFirstName("");
+    setLastName("");
+    setPhoneNumber("");
+    setNationalId("");
+    setGender("");
+    setBirthDate("");
+    setRoleSelectCurrntData("");
+    setRoleSelectData([]);
+    CTX.setRolesChoose([]);
+  };
+
+  const handleCreateUser = (update) => {
+    if (validateIranPhone(phoneNumber)) {
       if (validator.current.allValid()) {
+        if (update == "UPDATE") {
+          CTX.UpdateUser(bodyUpdate);
+        } else {
           CTX.CreateUser(body);
+        }
       } else {
         toast.error("پرکردن همه ی فیلد ها واجب است", {
           position: "bottom-right",
@@ -74,26 +115,73 @@ const BottomSheetCreateEmployees = (props) => {
         validator.current.showMessages();
         forceUpdate(1);
       }
+    } else {
+      toast.error("شماره تماس را درست وارد کنید", {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+    }
   };
 
   const deleteRole = (id) => {
     CTX.setRolesChoose(rolesChoose.filter((el) => el !== id));
   };
 
-  return (
+  const handleBottomSheetCreateEmployeesOpen = (e) => {
-    <BottomSheet
-      onSpringStart={(e) => {
-        if (e.type == "OPEN") {
-          CTX.GetRoles();
-        }
-
     setRoleSelectData(
       rolesData.map((item) => ({
         key: item.persianName,
         value: item.id,
       }))
     );
-      }}
+
+    console.log(idEditUser);
+
+    if (e.type == "OPEN") {
+      CTX.GetRoles();
+      if (goToEditUser) {
+        CTX.GetUser(idEditUser);
+      }
+    } else if (e.type == "CLOSE") {
+      clear();
+      CTX.setGoToEditUser(false);
+      CTX.setIdEditUser(null);
+      CTX.setUserData([]);
+    }
+  };
+
+  useEffect(() => {
+    if (goToEditUser) {
+      const date = moment
+        .unix(userData.birthDateTimeStamp)
+        .locale("fa")
+        .format("YYYY/MM/DD")
+        .split("/");
+
+      setFirstName(userData.firstName);
+      setLastName(userData.lastName);
+      setPhoneNumber(userData.phoneNumber);
+      setNationalId(userData.nationalId);
+      setGender(userData.gender);
+      setBirthDate({
+        day: parseInt(date[2]),
+        month: parseInt(date[1]),
+        year: parseInt(date[0]),
+      });
+      // setRoleSelectCurrntData("");
+      CTX.setRolesChoose(userData.roleIds);
+      console.log("userData2", userData);
+    }
+  }, [userData]);
+
+  return (
+    <BottomSheet
+      onSpringStart={(e) => handleBottomSheetCreateEmployeesOpen(e)}
       open={CTX.state.BottomSheetCreateEmployeesOpen}
       onDismiss={() => CTX.setBottomSheetCreateEmployeesOpen(false)}
     >
@@ -153,15 +241,8 @@ const BottomSheetCreateEmployees = (props) => {
             value={gender}
             inputEvent={(e) => {
               setGender(e.target.value);
-              validator.current.showMessageFor("gender");
             }}
             style="text-right"
-            validator={true}
-            validatorData={validator.current.message(
-              "gender",
-              gender,
-              "required"
-            )}
             select={true}
             selectData={[
               { key: "مرد", value: 0 },
@@ -257,12 +338,25 @@ const BottomSheetCreateEmployees = (props) => {
               </div>
             ))}
         </div>
+
+        {goToEditUser ? (
+          <Buttonbriz
+            title="ویرایش کاربر"
+            color="INFO"
+            icon="CHECK"
+            buttonEvent={() => handleCreateUser("UPDATE")}
+            subButton={true}
+            subButtonTitle="حذف کاربر"
+            subButtonEvent={() => CTX.DeleteUser(idEditUser)}
+          />
+        ) : (
           <Buttonbriz
             title="ثبت کاربر"
-          color="INFO"
+            color="PRIMARY"
             icon="CHECK"
             buttonEvent={() => handleCreateUser()}
           />
+        )}
       </div>
     </BottomSheet>
   );

plugins/Buttonbriz/page.jsx

@@ -105,8 +105,7 @@ const Buttonbriz = ({
               subButtonAction ? "text-white font-semibold" : "text-red-500"
             } `}
           >
-            {" "}
+            {subButtonTitle}
-            {subButtonTitle}{" "}
           </p>
         </div>
       )}

plugins/DatePickerIran/page.jsx

@@ -1,16 +1,24 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import "@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css";
 import DatePicker from "@hassanmojab/react-modern-calendar-datepicker";
 import Buttonbriz from "plugins/Buttonbriz/page";
 import { Calendar } from "react-modern-calendar-datepicker";
+import AppContext from "@ctx/AppContext";
 
 const DatePickerIran = ({ datePickerEvent, date }) => {
-  const [selectedDay, setSelectedDay] = useState(null);
+  const CTX = useContext(AppContext);
 
-  useEffect(() => {
+  const [selectedDay, setSelectedDay] = useState(null);
-    setSelectedDay(date);
+  const goToEditUser = CTX.state.goToEditUser;
-  }, [date]);
+
+  console.log("date", date);
+
+  // useEffect(() => {
+  //   if (goToEditUser) {
+  //     setSelectedDay(date);
+  //   }
+  // }, []);
 
   return (
     <div className="">
@@ -21,7 +29,7 @@ const DatePickerIran = ({ datePickerEvent, date }) => {
       </div>
 
       <DatePicker
-        value={selectedDay}
+        value={date}
         onChange={datePickerEvent}
         shouldHighlightWeekends
         inputClassName={`peer w-full border-b placeholder:text-transparent relative !text-right  ${

src/app/layout.jsx

@@ -62,6 +62,9 @@ export default function RootLayout({ children }) {
   // createUser/ user
   const [usersData, setUsersData] = useState([]);
   const [rolesChoose, setRolesChoose] = useState([]);
+  const [userData, setUserData] = useState([]);
+  const [goToEditUser, setGoToEditUser] = useState(false);
+  const [idEditUser, setIdEditUser] = useState(null);
 
   const pathname = usePathname();
   const router = useRouter();
@@ -335,6 +338,34 @@ export default function RootLayout({ children }) {
       setLoading(false);
     }
   };
+  const UpdateUser = async (body) => {
+    setLoading(true);
+    try {
+      const data = await Chapar.put(
+        `${process.env.NEXT_PUBLIC_API_URL}/user`,
+        body,
+
+        {
+          headers: {
+            Authorization: getToken(),
+          },
+        }
+      );
+      toast.success(`کاربر ویرایش شد`, {
+        position: "bottom-right",
+        closeOnClick: true,
+      });
+      setBottomSheetCreateEmployeesOpen(false);
+      setLoading(false);
+      GetUsers();
+    } catch ({ error, status }) {
+      toast.error(`${error.response.data.message}`, {
+        position: "bottom-right",
+        closeOnClick: true,
+      });
+      setLoading(false);
+    }
+  };
   const GetUsers = async () => {
     setLoading(true);
     try {
@@ -359,6 +390,54 @@ export default function RootLayout({ children }) {
       setLoading(false);
     }
   };
+  const GetUser = async (id) => {
+    setLoading(true);
+    try {
+      const data = await Chapar.get(
+        `${process.env.NEXT_PUBLIC_API_URL}/user/${id}`,
+
+        {
+          headers: {
+            Authorization: getToken(),
+          },
+        }
+      );
+      console.log("GetUsersalam", data);
+
+      setUserData(data);
+      setLoading(false);
+    } catch ({ error, status }) {
+      toast.error(`${error.response.data.message}`, {
+        position: "bottom-right",
+        closeOnClick: true,
+      });
+      setLoading(false);
+    }
+  };
+  const DeleteUser = async (id) => {
+    setLoading(true);
+    try {
+      const data = await Chapar.delete(
+        `${process.env.NEXT_PUBLIC_API_URL}/user/${id}`,
+
+        {
+          headers: {
+            Authorization: getToken(),
+          },
+        }
+      );
+      setBottomSheetCreateEmployeesOpen(false);
+      setLoading(false);
+
+      GetUsers();
+    } catch ({ error, status }) {
+      toast.error(`${error.response.data.message}`, {
+        position: "bottom-right",
+        closeOnClick: true,
+      });
+      setLoading(false);
+    }
+  };
 
   // useEffect(() => {
   //   GetPermissions();
@@ -387,6 +466,9 @@ export default function RootLayout({ children }) {
           goToEditRole,
           roleData,
           idEditRole,
+          idEditUser,
+          goToEditUser,
+          userData,
         },
         setBottomSheetCreateRoleOpen,
         setBottomSheetCreateEmployeesOpen,
@@ -418,6 +500,12 @@ export default function RootLayout({ children }) {
         setIdEditRole,
         DeleteRole,
         UpdateRole,
+        setIdEditUser,
+        setGoToEditUser,
+        setUserData,
+        DeleteUser,
+        GetUser,
+        UpdateUser,
       }}
     >
       <html lang="en">