design and handle modal add, edit and delete in all tabs dashboard & change list & update data profile_other

2025-05-30 02:22:10 +03:30
parent e12e6c171c
commit 0969eca274
28 changed files with 1108 additions and 337 deletions
@@ -0,0 +1,71 @@
+import ModalDeleteItem from "../../components/modal/ModalDeleteItem";
+import TextLoading from "@/app/component/loading/Text";
+import { TableCell, TableRow } from "@mui/material";
+import ModalEditItem from "../../components/modal/ModalEditItem";
+import Content from "./modal/Content";
+import { useState } from "react";
+
+function ItemRelatives({ row, idx, changeData }) {
+  const contentData = {
+    name: row.name,
+    relation: row.relation,
+    phone: row.contact.phone,
+    address: row.contact.address,
+  };
+  const [data, setData] = useState(contentData);
+  const resetData = () => setData(contentData);
+
+  return (
+    <TableRow
+      key={idx}
+      className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
+    >
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="center"
+      >
+        <TextLoading width={15} height={18} loading={false}>
+          {idx + 1}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.name}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.relation}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {`${row.contact.phone?.replace("+", "")}+`}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        {row.contact.address}
+      </TableCell>
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="right"
+      >
+        <div className="flex items-center justify-center gap-[4px]">
+          <ModalDeleteItem id={idx} name="relatives" changeData={changeData} />
+          <ModalEditItem
+            id={idx}
+            data={data}
+            name="relatives"
+            title="داروی مصرفی"
+            resetData={resetData}
+            changeData={changeData}
+          >
+            <Content data={data} setData={setData} />
+          </ModalEditItem>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default ItemRelatives;
@@ -1,13 +1,10 @@
 import CustomTable from "@/app/component/CustomTable";
-import TextLoading from "@/app/component/loading/Text";
-import EditB from "@/components/icons/EditB";
-import TrashB from "@/components/icons/TrashB";
-import { Button, TableCell, TableRow, Tooltip } from "@mui/material";
 import Head from "../../components/Head";
 import ModalAddRelatives from "./modal";
 import { useState } from "react";
+import ItemRelatives from "./ItemRelatives";

-function Relatives({ data }) {
+function Relatives({ data, changeData }) {
  const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "آدرس", ""];
  const centerTable = [0];
  const [open, setOpen] = useState(false);
@@ -15,61 +12,32 @@ function Relatives({ data }) {
  return (
    <div>
      <Head text="لیست بستگان">
-        <ModalAddRelatives open={open} setOpen={setOpen} />
+        <ModalAddRelatives
+          open={open}
+          setOpen={setOpen}
+          changeData={changeData}
+        />
      </Head>
-      <CustomTable
-        zeroRadius={true}
-        tableHead={tableHead}
-        centerTable={centerTable}
-      >
-        {data.relatives.map((row, idx) => (
-          <TableRow
-            key={idx}
-            className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
-          >
-            <TableCell
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
-              align="center"
-            >
-              <TextLoading width={15} height={18} loading={false}>
-                {idx + 1}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {row.name}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {row.relation}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {`${row.contact.phone?.replace("+", "")}+`}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              {row.contact.address}
-            </TableCell>
-
-            <TableCell
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
-              align="right"
-            >
-              <div className="flex items-center justify-center gap-[4px]">
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <TrashB />
-                </Button>
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <EditB />
-                </Button>
-              </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </CustomTable>
+      {data.medications.length ? (
+        <CustomTable
+          zeroRadius={true}
+          tableHead={tableHead}
+          centerTable={centerTable}
+        >
+          {data.relatives.map((row, idx) => (
+            <ItemRelatives
+              key={idx}
+              row={row}
+              idx={idx}
+              changeData={changeData}
+            />
+          ))}
+        </CustomTable>
+      ) : (
+        <p className="text-center py-10 text-gray-500">
+          هیچ داروی مصرفی وجود ندارد!
+        </p>
+      )}
    </div>
  );
 }
@@ -0,0 +1,55 @@
+import FieldLabel from "@/components/contactUs/FieldLabel";
+import Field from "@/app/component/Field";
+
+function Content({ setData, data }) {
+  const handleChange = (name, value) =>
+    setData((prev) => ({ ...prev, [name]: value }));
+  console.log(data);
+
+  return (
+    <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
+      <FieldLabel title="نام">
+        <Field
+          title=""
+          type="text"
+          name="name"
+          isPlaceHolder={true}
+          value={data?.name}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="نسبت">
+        <Field
+          title=""
+          type="text"
+          name="relation"
+          isPlaceHolder={true}
+          value={data?.relation}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="شماره تماس">
+        <Field
+          title=""
+          type="number"
+          name="phone"
+          isPlaceHolder={true}
+          value={Number(data?.phone.replace(/^\+/, ""))}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="آدرس">
+        <Field
+          title=""
+          type="text"
+          name="address"
+          isPlaceHolder={true}
+          value={data?.address}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+    </div>
+  );
+}
+
+export default Content;
@@ -2,10 +2,34 @@ import { styleDefault } from "@/mui";
 import AddBtn from "../../../components/AddBtn";
 import UpdateBtn from "../../../components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
+import Content from "./Content";
+import { useState } from "react";
+
+function ModalAddRelatives({ open, setOpen, changeData }) {
+  const contentItem = {
+    name: "",
+    relation: "",
+    phone: "",
+    address: "",
+  };

-function ModalAddRelatives({ open, setOpen }) {
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
+  const [newItem, setNewItem] = useState(contentItem);
+  const handleAddData = () => {
+    const changedKey = {
+      name: newItem.name,
+      relation: newItem.relation,
+      contact: {
+        phone: newItem.phone,
+        address: newItem.address,
+      },
+    };
+
+    changeData("add", "relatives", null, changedKey);
+    setNewItem(contentItem);
+    handleClose();
+  };

  return (
    <>
@@ -24,16 +48,24 @@ function ModalAddRelatives({ open, setOpen }) {
        >
          <div>
            <div className="flex justify-between w-full">
-              <p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن بستگان</p>
+              <p className="text-[#3B3B3B] text-[20px] font-bold">
+                اضافه کردن بستگان
+              </p>
            </div>
-            {/* <Content /> */}
+            <Content setData={setNewItem} />
          </div>
          <Button
            className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
-            onClick={handleClose}
+            onClick={handleAddData}
+            disabled={
+              !newItem.name ||
+              !newItem.relation ||
+              !newItem.phone ||
+              !newItem.address
+            }
            variant="contained"
          >
-            اعمال تغییرات
+            اضافه کردن
          </Button>
        </div>
      </Modal>