update user and delte

2023-10-21 15:57:05 +03:30 · 2023-10-21 15:57:05 +03:30 · d2dd80b147
parent ac5cf24c28
commit d2dd80b147
5 changed files with 241 additions and 46 deletions
--- a/components/EmployeesComponent/Users/page.jsx
+++ b/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 ? (
@ -30,10 +36,10 @@ const UsersEmployees = () => {
                    </h4>
                    <p className="mb-0 text-[11px]">صندوق دار</p>
                  </div>
-                  <div className="flex ">
+                  <div className="flex">
                    <div
-                      className="w-[35px] h-[35px] bg-secondaryLighter-100 rounded-full"
-                      onClick={() => goToEditRole(e.id)}
+                      className="w-[35px] h-[35px] bg-secondaryLighter-100 rounded-full pt-[3px]"
+                      onClick={() => goToEditUser(e.userId)}
                    >
                      <svg
                        width="13"
--- a/plugins/BottomSheet/BottomSheetCreateEmployees.jsx
+++ b/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 (
-    <BottomSheet
-      onSpringStart={(e) => {
-        if (e.type == "OPEN") {
-          CTX.GetRoles();
-        }
-
+  const handleBottomSheetCreateEmployeesOpen = (e) => {
    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="ثبت کاربر  "
+            title="ویرایش کاربر"
            color="INFO"
            icon="CHECK"
+            buttonEvent={() => handleCreateUser("UPDATE")}
+            subButton={true}
+            subButtonTitle="حذف کاربر"
+            subButtonEvent={() => CTX.DeleteUser(idEditUser)}
+          />
+        ) : (
+          <Buttonbriz
+            title="ثبت کاربر"
+            color="PRIMARY"
+            icon="CHECK"
            buttonEvent={() => handleCreateUser()}
          />
+        )}
      </div>
    </BottomSheet>
  );
--- a/plugins/Buttonbriz/page.jsx
+++ b/plugins/Buttonbriz/page.jsx
@ -105,8 +105,7 @@ const Buttonbriz = ({
              subButtonAction ? "text-white font-semibold" : "text-red-500"
            } `}
          >
-            {" "}
-            {subButtonTitle}{" "}
+            {subButtonTitle}
          </p>
        </div>
      )}
--- a/plugins/DatePickerIran/page.jsx
+++ b/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(() => {
-    setSelectedDay(date);
-  }, [date]);
+  const [selectedDay, setSelectedDay] = useState(null);
+  const goToEditUser = CTX.state.goToEditUser;
+
+  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  ${
--- a/src/app/layout.jsx
+++ b/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">