hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handle just one item is active

Browse Source
This commit is contained in:
Ehsan
2024-10-23 01:53:33 +03:30
parent 7c14323126
commit 09532bc47d
5 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/SwitchTable.js
+9 -3
View File
@@ -1,7 +1,7 @@
import { FormControlLabel, FormGroup, Switch } from "@mui/material"; import { FormControlLabel, FormGroup, Switch } from "@mui/material";
import { styled } from "@mui/material/styles"; import { styled } from "@mui/material/styles";
const MaterialUISwitch = styled(Switch)(({ theme }) => ({ const MaterialUISwitch = styled(Switch)(() => ({
width: 63, width: 63,
height: 38, height: 38,
padding: 7, padding: 7,
@@ -48,11 +48,17 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({
}, },
})); }));
function SwitchTable({ value }) { function SwitchTable({ value, id, changeStatus }) {
return ( return (
<FormGroup className="custom-switch"> <FormGroup className="custom-switch">
<FormControlLabel <FormControlLabel
control={<MaterialUISwitch defaultChecked={value} sx={{ m: 1 }} />} control={
<MaterialUISwitch
sx={{ m: 1 }}
checked={value}
onChange={(e) => changeStatus(e.target.checked, id)}
/>
}
/> />
</FormGroup> </FormGroup>
); );
components/panel/userAccount/bank/List.js
+6 -2
View File
@@ -5,7 +5,7 @@ import TrashB from "@/components/icons/TrashB";
import EditB from "@/components/icons/EditB"; import EditB from "@/components/icons/EditB";
import SwitchTable from "@/app/component/SwitchTable"; import SwitchTable from "@/app/component/SwitchTable";
function List({ data, loading }) { function List({ data, loading, changeStatus }) {
const tableHead = ["ردیف", "شماره کارت", "شماره شبا", "بانک", "وضعیت", ""]; const tableHead = ["ردیف", "شماره کارت", "شماره شبا", "بانک", "وضعیت", ""];
const centerTable = [0, 4, 5]; const centerTable = [0, 4, 5];
@@ -59,7 +59,11 @@ function List({ data, loading }) {
<p className="text-[16px] min-w-[60px] dark:text-[#A1A1A1] font-medium text-[#616161]"> <p className="text-[16px] min-w-[60px] dark:text-[#A1A1A1] font-medium text-[#616161]">
{row.status ? "فعال" : "غیر فعال"} {row.status ? "فعال" : "غیر فعال"}
</p> </p>
<SwitchTable value={row.status} /> <SwitchTable
id={row.id}
value={row.status}
changeStatus={changeStatus}
/>
</div> </div>
</TextLoading> </TextLoading>
</TableCell> </TableCell>
components/panel/userAccount/bank/index.js
+18 -2
View File
@@ -1,13 +1,29 @@
import { useState } from "react";
import Cards from "./cards"; import Cards from "./cards";
import Head from "./head"; import Head from "./head";
import List from "./List"; import List from "./List";
function Bank({ data, loading }) { function Bank({ data, loading }) {
const [list, setList] = useState(data);
const changeStatus = (value, id) => {
let newList = list;
if (value) {
newList = newList.map((item, idx) => {
return {
...item,
status: item.id === id ? value : false,
};
});
}
setList(newList);
};
return ( return (
<div className="opacity-page"> <div className="opacity-page">
<Head /> <Head />
<List data={data} loading={loading} /> <List data={list} loading={loading} changeStatus={changeStatus} />
<Cards data={data} loading={loading} /> <Cards data={list} loading={loading} changeStatus={changeStatus} />
</div> </div>
); );
} }
components/panel/userAccount/index.js
+1 -1
View File
@@ -8,7 +8,7 @@ import Tab from "./Tab";
const listTab = ["حساب کاربری", "حساب بانکی"]; const listTab = ["حساب کاربری", "حساب بانکی"];
function UserAccountPage({ data }) { function UserAccountPage({ data }) {
const [value, setValue] = useState(0); const [value, setValue] = useState(1);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
data/bank.json
+3
View File
@@ -1,17 +1,20 @@
[ [
{ {
"id": 1,
"card_number": "6037154532659987", "card_number": "6037154532659987",
"shaba_number": "IR502229107590758200000000", "shaba_number": "IR502229107590758200000000",
"bank": "مسکن", "bank": "مسکن",
"status": true "status": true
}, },
{ {
"id": 2,
"card_number": "6037154532659987", "card_number": "6037154532659987",
"shaba_number": "IR502229107590758200000000", "shaba_number": "IR502229107590758200000000",
"bank": "مسکن", "bank": "مسکن",
"status": false "status": false
}, },
{ {
"id": 3,
"card_number": "6037154532659987", "card_number": "6037154532659987",
"shaba_number": "IR502229107590758200000000", "shaba_number": "IR502229107590758200000000",
"bank": "مسکن", "bank": "مسکن",