From 956c6685a94b5144424a797cd9e9008539f5c73b Mon Sep 17 00:00:00 2001
From: mahdi andalib <andalibmahdi45@gmail.com>
Date: Mon, 21 Feb 2022 12:56:13 +0330
Subject: [PATCH] added more details component

---
 src/components/ReactTable4/BasicTable.js | 287 +----------------------
 1 file changed, 12 insertions(+), 275 deletions(-)

diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js
index 5b00ac0..2d04d36 100644
--- a/src/components/ReactTable4/BasicTable.js
+++ b/src/components/ReactTable4/BasicTable.js
@@ -15,6 +15,8 @@ import { GoToPage } from "./GoToPage";
 import { Settings } from "./Settings";
 import { Checkbox } from "./Checkbox";
 
+import RenderRowSubComponent from "./RenderRowSubComponent";
+
 import {
   useTable,
   useSortBy,
@@ -129,7 +131,7 @@ const BasicTable = ({
         {/* left box */}
         {activeTab == 0 ? (
           <div
-            className="p-2 flex flex-row items-center rounded-tl rounded-tr"
+            className="flex flex-row items-center p-2 rounded-tl rounded-tr"
             style={{ backgroundColor: "#F1F6FF" }}
           >
             {/* search box */}
@@ -241,11 +243,17 @@ const BasicTable = ({
                     {row.isExpanded ? (
                       <tr>
                         <td colSpan={headerGroups[0].headers.length}>
-                          {RenderRowSubComponent({
+                          {/* {RenderRowSubComponent({
                             row: row.original,
                             columns,
-                          })}
+                            addTab,
+                          })} */}
                           {/* {RenderRowSubComponent({ row: row.values })} */}
+                          <RenderRowSubComponent
+                            columns={columns}
+                            addTab={addTab}
+                            row={row.original}
+                          />
                         </td>
                       </tr>
                     ) : null}
@@ -342,6 +350,7 @@ const BasicTable = ({
     </>
   );
 };
+
 function EditRow({ row, columns }) {
   console.log(row);
   const persian = {
@@ -614,278 +623,6 @@ function EditRow({ row, columns }) {
     </div>
   );
 }
-function RenderRowSubComponent({ row, columns }) {
-  console.log(row);
-  const persian = {
-    weight: "وزن",
-    pageNumber: "تعداد صفحات",
-    pageType: "نوع کاغذ",
-    bookNumber: "شماره شابک",
-    publisher: "انتشارات",
-    author: "نویسنده",
-    bookType: "قطع",
-    publishedYear: "سال انتشار",
-  };
-  return (
-    <div
-      className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
-      style={{ backgroundColor: "#FBFCFE" }}
-    >
-      {/* right */}
-      <div
-        className="flex flex-row  flex-wrap items-center"
-        style={{ width: "90%" }}
-      >
-        {/* 1 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            نام و نام خانوادگی:
-            <span className="mr-1 text-black">{row.name}</span>
-          </p>
-        </div>
-        {/* 2 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تاریخ سفارش:
-            <span className="mr-1 text-black">{row.order_date}</span>
-          </p>
-        </div>
-        {/* 3 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            مبلغ سفارش:
-            <span className="mr-1 text-black">{row.order_price}</span>
-          </p>
-        </div>
-        {/* 4 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            شماره سفارش:
-            <span className="mr-1 text-black">{row.order_number}</span>
-          </p>
-        </div>
-        {/* 5 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            شغل کاربر:
-            <span className="mr-1 text-black">{row.user_job}</span>
-          </p>
-        </div>
-        {/* 6 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            وضعیت سفارش:
-            <span className="mr-1 text-black">
-              {columns[5].Cell({ value: row.order_status })}
-            </span>
-          </p>
-        </div>
-        {/* 7 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            سطح اهمیت:
-            <span className="mr-1 text-black">
-              {columns[6].Cell({ value: row.order_level })}
-            </span>
-          </p>
-        </div>
-        {/* 8 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            محل تولد:
-            <span className="mr-1 text-black">{row.birth_place}</span>
-          </p>
-        </div>
-        {/* 9 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تلفن محل کار:
-            <span className="mr-1 text-black">{row.office_phone}</span>
-          </p>
-        </div>
-        {/* 10 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تحصیلات:
-            <span className="mr-1 text-black">{row.education}</span>
-          </p>
-        </div>
-        {/* 11 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تاریخ تولد:
-            <span className="mr-1 text-black">{row.birth_day}</span>
-          </p>
-        </div>
-        {/* 12 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            شغل:
-            <span className="mr-1 text-black">{row.job}</span>
-          </p>
-        </div>
-        {/* 13 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            دانشگاه:
-            <span className="mr-1 text-black">{row.uni}</span>
-          </p>
-        </div>
-        {/* 14 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            رشته تحصیلی:
-            <span className="mr-1 text-black">{row.field_study}</span>
-          </p>
-        </div>
-        {/* 15 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            اخلاق:
-            <span className="mr-1 text-black">{row.behaviour}</span>
-          </p>
-        </div>
-        {/* 16 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            نشانی:
-            <span className="mr-1 text-black">{row.address}</span>
-          </p>
-        </div>
-      </div>
-      {/* left */}
-      <div
-        className="flex flex-col items-end justify-end"
-        style={{ width: "10%" }}
-      >
-        <button
-          className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
-          style={{ borderColor: "#D53921", color: "#D53921" }}
-        >
-          حذف
-        </button>
-        <button
-          className="border rounded w-8/12 text-xs py-2 bg-white"
-          style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
-        >
-          جزیات بیشتر
-        </button>
-      </div>
-    </div>
-  );
-}
 
 export default BasicTable;