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
@@ -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(() => {