handle just one item is active

2024-10-23 01:53:33 +03:30
parent 7c14323126
commit 09532bc47d
5 changed files with 37 additions and 8 deletions
@@ -1,7 +1,7 @@
 import { FormControlLabel, FormGroup, Switch } from "@mui/material";
 import { styled } from "@mui/material/styles";

-const MaterialUISwitch = styled(Switch)(({ theme }) => ({
+const MaterialUISwitch = styled(Switch)(() => ({
  width: 63,
  height: 38,
  padding: 7,
@@ -48,11 +48,17 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({
  },
 }));

-function SwitchTable({ value }) {
+function SwitchTable({ value, id, changeStatus }) {
  return (
    <FormGroup className="custom-switch">
      <FormControlLabel
-        control={<MaterialUISwitch defaultChecked={value} sx={{ m: 1 }} />}
+        control={
+          <MaterialUISwitch
+            sx={{ m: 1 }}
+            checked={value}
+            onChange={(e) => changeStatus(e.target.checked, id)}
+          />
+        }
      />
    </FormGroup>
  );
@@ -5,7 +5,7 @@ import TrashB from "@/components/icons/TrashB";
 import EditB from "@/components/icons/EditB";
 import SwitchTable from "@/app/component/SwitchTable";

-function List({ data, loading }) {
+function List({ data, loading, changeStatus }) {
  const tableHead = ["ردیف", "شماره کارت", "شماره شبا", "بانک", "وضعیت", ""];
  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]">
                      {row.status ? "فعال" : "غیر فعال"}
                    </p>
-                    <SwitchTable value={row.status} />
+                    <SwitchTable
+                      id={row.id}
+                      value={row.status}
+                      changeStatus={changeStatus}
+                    />
                  </div>
                </TextLoading>
              </TableCell>
@@ -1,13 +1,29 @@
+import { useState } from "react";
 import Cards from "./cards";
 import Head from "./head";
 import List from "./List";

 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 (
    <div className="opacity-page">
      <Head />
-      <List data={data} loading={loading} />
-      <Cards data={data} loading={loading} />
+      <List data={list} loading={loading} changeStatus={changeStatus} />
+      <Cards data={list} loading={loading} changeStatus={changeStatus} />
    </div>
  );
 }
@@ -8,7 +8,7 @@ import Tab from "./Tab";
 const listTab = ["حساب کاربری", "حساب بانکی"];

 function UserAccountPage({ data }) {
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState(1);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
@@ -1,17 +1,20 @@
 [
  {
+    "id": 1,
    "card_number": "6037154532659987",
    "shaba_number": "IR502229107590758200000000",
    "bank": "مسکن",
    "status": true
  },
  {
+    "id": 2,
    "card_number": "6037154532659987",
    "shaba_number": "IR502229107590758200000000",
    "bank": "مسکن",
    "status": false
  },
  {
+    "id": 3,
    "card_number": "6037154532659987",
    "shaba_number": "IR502229107590758200000000",
    "bank": "مسکن",