change response file & request get user-profile & change design dashboard page & handle limit page dashboard
This commit is contained in:
Ehsan
@@ -0,0 +1,71 @@
|
||||
import ModalDeleteItem from "@/components/dashboard/userAccount/components/modal/ModalDeleteItem";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import { TableCell, TableRow } from "@mui/material";
|
||||
import ModalEditItem from "@/components/dashboard/userAccount/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;
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useState } from "react";
|
||||
import CustomTable from "@/app/component/CustomTable";
|
||||
import Head from "@/components/dashboard/userAccount/components/Head";
|
||||
import ModalAddRelatives from "./modal";
|
||||
import ItemRelatives from "./ItemRelatives";
|
||||
|
||||
function Relatives({ data, changeData }) {
|
||||
const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "آدرس", ""];
|
||||
const centerTable = [0];
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Head text="لیست بستگان">
|
||||
<ModalAddRelatives
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
changeData={changeData}
|
||||
/>
|
||||
</Head>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
export default Relatives;
|
||||
@@ -0,0 +1,54 @@
|
||||
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 }));
|
||||
|
||||
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;
|
||||
@@ -0,0 +1,76 @@
|
||||
import { styleDefault } from "@/mui";
|
||||
import AddBtn from "@/components/dashboard/userAccount/components/AddBtn";
|
||||
import UpdateBtn from "@/components/dashboard/userAccount/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: "",
|
||||
};
|
||||
|
||||
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 (
|
||||
<>
|
||||
{/* Button Modal */}
|
||||
<>
|
||||
<UpdateBtn />
|
||||
<AddBtn handleOpen={handleOpen} />
|
||||
</>
|
||||
|
||||
{/* Content Modal */}
|
||||
<Modal open={open} onClose={handleClose} className="w-full">
|
||||
<div
|
||||
style={styleDefault}
|
||||
className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
|
||||
!w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
|
||||
>
|
||||
<div>
|
||||
<div className="flex justify-between w-full">
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">
|
||||
اضافه کردن بستگان
|
||||
</p>
|
||||
</div>
|
||||
<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={handleAddData}
|
||||
disabled={
|
||||
!newItem.name ||
|
||||
!newItem.relation ||
|
||||
!newItem.phone ||
|
||||
!newItem.address
|
||||
}
|
||||
variant="contained"
|
||||
>
|
||||
اضافه کردن
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalAddRelatives;
|
||||
Reference in New Issue
Block a user