From bf64271d14e94f5d843b13c08e09628328090361 Mon Sep 17 00:00:00 2001 From: Ehsan Date: Wed, 11 Jun 2025 16:52:01 +0330 Subject: [PATCH] handle change data and update data in dashboard page for all tabs --- app/component/element/AutoSelector.js | 2 +- app/globals.css | 10 ++ .../userAccount/components/UpdateBtn.js | 26 +++- .../components/modal/ModalEditItem.js | 18 +-- .../detailUser/allergies/ItemAllergie.js | 11 +- .../userAccount/detailUser/allergies/index.js | 10 +- .../detailUser/allergies/modal/index.js | 10 +- .../userAccount/detailUser/disease/index.js | 4 +- .../detailUser/familyHistory/ItemHistory.js | 10 +- .../detailUser/familyHistory/index.js | 10 +- .../detailUser/familyHistory/modal/index.js | 4 +- .../userAccount/detailUser/function.js | 10 +- .../dashboard/userAccount/detailUser/index.js | 126 ++++++++++-------- .../detailUser/information/DateBirthday.js | 2 +- .../detailUser/information/Form.js | 9 +- .../detailUser/information/index.js | 2 +- .../detailUser/medications/ItemMedication.js | 10 +- .../detailUser/medications/index.js | 10 +- .../detailUser/medications/modal/index.js | 10 +- .../detailUser/relatives/ItemRelatives.js | 12 +- .../userAccount/detailUser/relatives/index.js | 10 +- .../detailUser/relatives/modal/index.js | 4 +- .../detailUser/surgeries/ItemSurgeries.js | 10 +- .../userAccount/detailUser/surgeries/index.js | 10 +- .../detailUser/surgeries/modal/index.js | 4 +- tailwind.config.js | 9 ++ 26 files changed, 235 insertions(+), 118 deletions(-) diff --git a/app/component/element/AutoSelector.js b/app/component/element/AutoSelector.js index 308e5fb..c0d219c 100644 --- a/app/component/element/AutoSelector.js +++ b/app/component/element/AutoSelector.js @@ -17,7 +17,7 @@ function AutoSelector({ disablePortal options={list} disabled={disabled} - defaultValue={value || ""} + value={value || ""} ListboxProps={listboxProps} getOptionLabel={(option) => { if (typeof option === "string") return option; diff --git a/app/globals.css b/app/globals.css index 0a00a54..edbf7c4 100644 --- a/app/globals.css +++ b/app/globals.css @@ -867,3 +867,13 @@ html { .MuiButton-loading .MuiButton-loadingIndicator { color: #ffffff !important; } + +@keyframes spin { + to { + transform: rotate(90deg); + } +} + +.spin { + animation: spin 1s linear infinite; +} diff --git a/components/dashboard/userAccount/components/UpdateBtn.js b/components/dashboard/userAccount/components/UpdateBtn.js index 305cd8b..a07c12e 100644 --- a/components/dashboard/userAccount/components/UpdateBtn.js +++ b/components/dashboard/userAccount/components/UpdateBtn.js @@ -1,16 +1,30 @@ import UpdateList from "@/components/icons/UpdateList"; -import { Button } from "@mui/material"; +import { Button, CircularProgress } from "@mui/material"; -function UpdateBtn({ updateData }) { +function UpdateBtn({ updateData, loading }) { return ( ); } diff --git a/components/dashboard/userAccount/components/modal/ModalEditItem.js b/components/dashboard/userAccount/components/modal/ModalEditItem.js index 12f793f..957badd 100644 --- a/components/dashboard/userAccount/components/modal/ModalEditItem.js +++ b/components/dashboard/userAccount/components/modal/ModalEditItem.js @@ -51,15 +51,15 @@ function ModalEditItem({ + diff --git a/components/dashboard/userAccount/detailUser/disease/index.js b/components/dashboard/userAccount/detailUser/disease/index.js index c9ec833..bd7943d 100644 --- a/components/dashboard/userAccount/detailUser/disease/index.js +++ b/components/dashboard/userAccount/detailUser/disease/index.js @@ -4,7 +4,7 @@ import { Switch, TableCell, TableRow } from "@mui/material"; import Head from "@/components/dashboard/userAccount/components/Head"; import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn"; -function Disease({ data, setData, updateData }) { +function Disease({ data, setData, updateData, loading }) { const { other } = data; const { disease } = other && other[0]; const tableHead = ["ردیف", "اسم", "وضعیت", ""]; @@ -31,7 +31,7 @@ function Disease({ data, setData, updateData }) { return (
- + setData(contentData); + useEffect(() => { + setData({ + relation: row.relation, + disease: row.disease, + }); + }, [row]); return ( diff --git a/components/dashboard/userAccount/detailUser/familyHistory/index.js b/components/dashboard/userAccount/detailUser/familyHistory/index.js index f6d7e3d..7745465 100644 --- a/components/dashboard/userAccount/detailUser/familyHistory/index.js +++ b/components/dashboard/userAccount/detailUser/familyHistory/index.js @@ -4,7 +4,9 @@ import { useState } from "react"; import ModalAddHistory from "./modal"; import ItemHistory from "./ItemHistory"; -function FamilyHistory({ data, changeData }) { +function FamilyHistory({ data, changeData, loading, updateData }) { + const { other } = data; + const { family_history } = other && other[0]; const tableHead = ["ردیف", "بیماری", "نسبت خانوادگی", ""]; const centerTable = [0]; const [open, setOpen] = useState(false); @@ -15,16 +17,18 @@ function FamilyHistory({ data, changeData }) { - {data.medications.length ? ( + {family_history.length ? ( - {data.family_history.map((row, idx) => ( + {family_history.map((row, idx) => ( {/* Button Modal */} <> - + diff --git a/components/dashboard/userAccount/detailUser/function.js b/components/dashboard/userAccount/detailUser/function.js index f60b599..8ee6b4c 100644 --- a/components/dashboard/userAccount/detailUser/function.js +++ b/components/dashboard/userAccount/detailUser/function.js @@ -1,20 +1,20 @@ -export const changeData = (action, name, id, payload) => { +export const setNewData = (action, name, id, payload, data, setData) => { const newData = { ...data, - [name]: [...data[name]], + // [name]: [...data[name]], }; switch (action) { case "update": - newData[name][id] = payload; + newData.other[0][name][id] = payload; break; case "add": - newData[name].push(payload); + newData.other[0][name].push(payload); break; case "delete": - newData[name].splice(id, 1); + newData.other[0][name].splice(id, 1); break; default: diff --git a/components/dashboard/userAccount/detailUser/index.js b/components/dashboard/userAccount/detailUser/index.js index cfa506b..eb1513e 100644 --- a/components/dashboard/userAccount/detailUser/index.js +++ b/components/dashboard/userAccount/detailUser/index.js @@ -1,6 +1,7 @@ import { useState } from "react"; import HeadTab from "../content/HeadTab"; -import profileData from "@/data/profile_other.json"; +import { request } from "@/services/response"; +import { setNewData } from "./function"; // Tabs import Medications from "./medications"; @@ -10,8 +11,6 @@ import Allergies from "./allergies"; import Surgeries from "./surgeries"; import FamilyHistory from "./familyHistory"; import Relatives from "./relatives"; -import { request } from "@/services/response"; -import { changeData } from "./function"; function DetailUser({ user, @@ -20,50 +19,28 @@ function DetailUser({ isTurnsDetails, setIsTurnsDetails, }) { - const [tab, setTab] = useState(0); - const { - name, - description, - birthday, - insurance_id, - basic_insurance, - blood_type, - education, - fathers_name, - gender, - home_phone, - job, - marital_status, - national_code, - national_code_approved, - supplementary_insurance, - work_phone, - address, - other, - } = dataUser; - const [data, setData] = useState({ - name: name, - description: description, - birthday: birthday, - insurance_id: insurance_id, - basic_insurance: basic_insurance, - blood_type: blood_type, - education: education, - fathers_name: fathers_name, - gender: gender, - home_phone: home_phone, - job: job, - marital_status: marital_status, - national_code: national_code, - national_code_approved: national_code_approved, - supplementary_insurance: supplementary_insurance, - work_phone: work_phone, - address: address, - other: other, - }); - console.log(data); - console.log(dataUser); - console.log(userInfo); + const [tab, setTab] = useState(5); + const initialData = { + name: dataUser?.name, + description: dataUser?.description, + birthday: dataUser?.birthday, + basic_insurance: [dataUser?.basic_insurance?.id], + blood_type: dataUser?.blood_type, + education: dataUser?.education, + fathers_name: dataUser?.fathers_name, + gender: dataUser?.gender, + home_phone: dataUser?.home_phone, + job: dataUser?.job, + marital_status: dataUser?.marital_status, + supplementary_insurance: dataUser?.supplementary_insurance, + work_phone: dataUser?.work_phone, + address: dataUser?.address, + other: dataUser?.other, + national_code: dataUser?.national_code, + }; + + const [data, setData] = useState(initialData); + const [loading, setLoading] = useState(false); const listTab = [ "اطلاعات عمومی", @@ -77,11 +54,18 @@ function DetailUser({ const handleChange = (_, newValue) => setTab(newValue); const updateData = () => { + setLoading(true); request - .patchUserProfile(data, data.uuid) - .then((res) => {}) - .catch((err) => {}); + .patchUserProfile(data, dataUser.uuid) + .then((res) => { + setLoading(false); + }) + .catch((err) => { + setLoading(false); + }); }; + const changeData = (action, name, id, payload) => + setNewData(action, name, id, payload, data, setData); const components = [ , - , - , - , - , - , - , + , + , + , + , + , + , ]; return ( diff --git a/components/dashboard/userAccount/detailUser/information/DateBirthday.js b/components/dashboard/userAccount/detailUser/information/DateBirthday.js index 7b3c6bb..bac3d1e 100644 --- a/components/dashboard/userAccount/detailUser/information/DateBirthday.js +++ b/components/dashboard/userAccount/detailUser/information/DateBirthday.js @@ -57,7 +57,7 @@ function DateBirthday({ data, changeData }) { { - changeData(convertToJalali(e._d), "value", "date_of_birth"); + changeData(convertToJalali(e._d), "value", "birthday"); handleClose(); }} /> diff --git a/components/dashboard/userAccount/detailUser/information/Form.js b/components/dashboard/userAccount/detailUser/information/Form.js index 1f00b81..aa1ca8e 100644 --- a/components/dashboard/userAccount/detailUser/information/Form.js +++ b/components/dashboard/userAccount/detailUser/information/Form.js @@ -11,8 +11,11 @@ import { import AutoSelector from "@/app/component/element/AutoSelector"; function Form({ data, userInfo, insurance, changeData, prevData }) { - const findVal = (list, name) => - data && list && list.length && list.find((g) => g.id === data[name]); + const findVal = (list, name, arr) => + data && + list && + list.length && + list.find((g) => g.id === (arr ? data[name][0] : data[name])); return (
@@ -78,7 +81,7 @@ function Form({ data, userInfo, insurance, changeData, prevData }) { updateData={(name, val) => { changeData([Number(val.id)], "value", name); }} - value={findVal(insurance, "basic_insurance")} + value={findVal(insurance, "basic_insurance", true)?.name} label="نوع بیمه" name="basic_insurance" list={insurance} diff --git a/components/dashboard/userAccount/detailUser/information/index.js b/components/dashboard/userAccount/detailUser/information/index.js index a8558f5..a409f32 100644 --- a/components/dashboard/userAccount/detailUser/information/index.js +++ b/components/dashboard/userAccount/detailUser/information/index.js @@ -33,7 +33,7 @@ function Information({ user, data, setData, userInfo, dataUser }) { setLoading(true); request[dataUser ? "patchUserProfile" : "postUserProfile"]( data, - Cookies.get("uuid") + dataUser ? dataUser.uuid : Cookies.get("uuid") ) .then((res) => { setLoading(false); diff --git a/components/dashboard/userAccount/detailUser/medications/ItemMedication.js b/components/dashboard/userAccount/detailUser/medications/ItemMedication.js index 315e949..aa8e868 100644 --- a/components/dashboard/userAccount/detailUser/medications/ItemMedication.js +++ b/components/dashboard/userAccount/detailUser/medications/ItemMedication.js @@ -3,7 +3,7 @@ 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"; +import { useEffect, useState } from "react"; function ItemMedication({ row, idx, changeData }) { const contentData = { @@ -14,6 +14,14 @@ function ItemMedication({ row, idx, changeData }) { const [data, setData] = useState(contentData); const resetData = () => setData(contentData); + useEffect(() => { + setData({ + name: row.name, + dose: row.dose, + frequency: row.frequency, + }); + }, [row]); + return ( - {data.medications.length ? ( + {medications.length ? ( - {data.medications.map((row, idx) => ( + {medications.map((row, idx) => ( {/* Button Modal */} <> - + diff --git a/components/dashboard/userAccount/detailUser/relatives/ItemRelatives.js b/components/dashboard/userAccount/detailUser/relatives/ItemRelatives.js index 3eac8e1..02bd9d8 100644 --- a/components/dashboard/userAccount/detailUser/relatives/ItemRelatives.js +++ b/components/dashboard/userAccount/detailUser/relatives/ItemRelatives.js @@ -3,7 +3,7 @@ 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"; +import { useEffect, useState } from "react"; function ItemRelatives({ row, idx, changeData }) { const contentData = { @@ -12,9 +12,19 @@ function ItemRelatives({ row, idx, changeData }) { phone: row.contact.phone, address: row.contact.address, }; + const [data, setData] = useState(contentData); const resetData = () => setData(contentData); + useEffect(() => { + setData({ + name: row.name, + relation: row.relation, + phone: row.contact.phone, + address: row.contact.address, + }); + }, [row]); + return ( - {data.medications.length ? ( + {relatives.length ? ( - {data.relatives.map((row, idx) => ( + {relatives.map((row, idx) => ( {/* Button Modal */} <> - + diff --git a/components/dashboard/userAccount/detailUser/surgeries/ItemSurgeries.js b/components/dashboard/userAccount/detailUser/surgeries/ItemSurgeries.js index 02e5079..2a7fd16 100644 --- a/components/dashboard/userAccount/detailUser/surgeries/ItemSurgeries.js +++ b/components/dashboard/userAccount/detailUser/surgeries/ItemSurgeries.js @@ -3,7 +3,7 @@ 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"; +import { useEffect, useState } from "react"; function ItemSurgeries({ row, idx, changeData }) { const contentData = { @@ -14,6 +14,14 @@ function ItemSurgeries({ row, idx, changeData }) { const [data, setData] = useState(contentData); const resetData = () => setData(contentData); + useEffect(() => { + setData({ + type: row.type, + year: row.year, + hospital: row.hospital, + }); + }, [row]); + return ( - {data.surgeries.length ? ( + {surgeries.length ? ( - {data.surgeries.map((row, idx) => ( + {surgeries.map((row, idx) => ( {/* Button Modal */} <> - + diff --git a/tailwind.config.js b/tailwind.config.js index 149ea7a..4515817 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,6 +12,15 @@ module.exports = { "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, + keyframes: { + spinCounter: { + from: { transform: "rotate(0deg)" }, + to: { transform: "rotate(-360deg)" }, + }, + }, + animation: { + spinCounter: "spinCounter 1s linear infinite", + }, }, }, plugins: [],