master
mahdi andalib 3 years ago
parent 1bcaa5b6a7
commit 3086010e47
  1. 13
      src/components/ReactTable5/BasicTable.js
  2. 2
      src/components/ReactTable5/COLUMNS.js
  3. 448
      src/components/ReactTable5/EditRow.js
  4. 269
      src/components/ReactTable5/RenderRowSubComponent.js
  5. 59
      src/components/ReactTable5/ViewEdit.js

@ -255,15 +255,10 @@ const BasicTable = ({ addTab, activeTab }) => {
})} })}
</tr> </tr>
{row.isExpanded ? ( {row.isExpanded ? (
<tr> <RenderRowSubComponent
<td colSpan={headerGroups[0].headers.length}> columns={columns}
<RenderRowSubComponent row={row.original}
columns={columns} />
addTab={addTab}
row={row.original}
/>
</td>
</tr>
) : null} ) : null}
</React.Fragment> </React.Fragment>
); );

@ -43,7 +43,7 @@ export const COLUMNS = ({ toggelChekedItems, refChekedItems }) => [
{ {
Header: "ویرایش نمایش", Header: "ویرایش نمایش",
accessor: "edit", accessor: "edit",
Cell: ViewEdit, Cell: ({ row }) => ViewEdit({ row }),
// Cell: ({ row }) => Buttons({ row, addTab }), // Cell: ({ row }) => Buttons({ row, addTab }),
}, },
]; ];

@ -1,395 +1,67 @@
import React from "react"; import React, { useState } from "react";
import SendForm from "./SendForm";
import Location from "./Location"; const EditRow = ({ row }) => {
import History from "./History"; const [openModal, setOpenModal] = useState(true);
const EditRow = ({ row, columns }) => {
// console.log(columns);
return ( return (
<section <div
className=" border-r-4 border-blue-600 p-2" onClick={() => setOpenModal(false)}
style={{ backgroundColor: "#F1F5FE" }} data-modal-toggle="large-modal"
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg bg-opacity-90 bg-gray-600 flex items-center justify-center fixed left-0 top-0
${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
> >
<div className="flex flex-row items-center mr-2 mt-2 mb-4"> <div
<div className="absolute w-6/12 bg-white p-4 rounded flex flex-row flex-wrap items-center justify-around"
className="w-1 h-4 ml-1 rounded" style={{ top: "10%" }}
style={{ backgroundColor: "#65A9FF" }} onClick={(e) => e.stopPropagation()}
></div> >
<p className="text-sm font-bold" style={{ color: "#00253A" }}> <img src={row.original.filePic} className="w-20" />
اطلاعات هویتی <span
</p> role="textbox"
</div> style={{
{/* table data */} backgroundColor: "#F8FBFF",
<div className="flex flex-wrap"> borderColor: "#C8DEF9",
{/* 1 */} color: "#00253A",
<div className="flex flex-col my-2 mx-2"> }}
<p className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
className="text-xs text-blue-400 mb-2" >
style={{ borderColor: "#65A9FF" }} {row.original.fileName}
> </span>
نام و نام خانوادگی: <span
</p> role="textbox"
<span style={{
role="textbox" backgroundColor: "#F8FBFF",
style={{ borderColor: "#C8DEF9",
backgroundColor: "#F8FBFF", color: "#00253A",
borderColor: "#C8DEF9", }}
color: "#00253A", className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
minWidth: "96px", >
}} {row.original.fileType}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" </span>
> <span
{row.name} role="textbox"
</span> style={{
</div> backgroundColor: "#F8FBFF",
{/* 2 */} borderColor: "#C8DEF9",
<div className="flex flex-col my-2 mx-2"> color: "#00253A",
<p }}
className="text-xs text-blue-400 mb-2" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
style={{ borderColor: "#65A9FF" }} >
> {row.original.fileSize}
تاریخ سفارش: </span>
</p> <span
<span role="textbox"
role="textbox" style={{
style={{ backgroundColor: "#F8FBFF",
backgroundColor: "#F8FBFF", borderColor: "#C8DEF9",
borderColor: "#C8DEF9", color: "#00253A",
color: "#00253A", }}
minWidth: "96px", className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
}} >
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" {row.original.fileDate}
> </span>
{row.order_date}
</span>
</div>
{/* 3 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
مبلغ سفارش:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.order_price}
</span>
</div>
{/* 4 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
شماره سفارش:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.order_number}
</span>
</div>
{/* 5 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
شغل کاربر:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.user_job}
</span>
</div>
{/* 6 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.order_status}
</span>
</div>
{/* 7 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
سطح اهمیت:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.order_level}
</span>
</div>
{/* 8 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
محل تولد:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.birth_place}
</span>
</div>
{/* 9 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
تلفن محل کار:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.office_phone}
</span>
</div>
{/* 10 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
تحصیلات:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.education}
</span>
</div>
{/* 11 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
تاریخ تولد:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.birth_day}
</span>
</div>
{/* 12 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
شغل:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.job}
</span>
</div>
{/* 13 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
دانشگاه:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.uni}
</span>
</div>
{/* 14 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
رشته تحصیلی:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.field_study}
</span>
</div>
{/* 15 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
اخلاق:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.behaviour}
</span>
</div>
{/* 16 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
نشانی:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.address}
</span>
</div>
</div>
{/* title bottom */}
<div className="flex flex-row items-center mr-2 mt-2 mb-4">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p className="text-sm font-bold" style={{ color: "#00253A" }}>
اطلاعات شخصی
</p>
</div>
{/* bottom */}
<div className="flex flex-row items-center">
{/* right */}
<div className="flex items-center w-10/12">
{/* map */}
<Location />
{/* formInput */}
<SendForm />
{/* previous */}
<History />
</div>
{/* left */}
<div className="w-2/12 flex justify-end">
<button
className="border rounded text-sm lg:ml-3 py-2 px-4 text-white"
style={{ backgroundColor: "#65A9FF" }}
>
ذخیره اطلاعات{" "}
</button>
</div>
</div> </div>
</section> </div>
); );
}; };

@ -1,266 +1,21 @@
import React from "react"; import React, { useState } from "react";
const RenderRowSubComponent = ({ columns, row }) => {
const [openModal, setOpenModal] = useState(true);
const RenderRowSubComponent = ({ columns, addTab, row }) => {
return ( return (
<div <div
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 " onClick={() => setOpenModal(false)}
style={{ backgroundColor: "#FBFCFE" }} data-modal-toggle="large-modal"
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg bg-opacity-90 bg-gray-600 flex items-center justify-center fixed left-0 top-0
${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
> >
{/* 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" }}
>
وضعیت سفارش:
</p>
<span className="mr-1 text-black text-xs">
{columns[5].Cell({ value: row.order_status })}
</span>
</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" }}
>
سطح اهمیت:
</p>
<span className="mr-1 text-xs text-black">
{columns[6].Cell({ value: row.order_level })}
</span>
</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 <div
className="flex flex-col items-end justify-end" className="absolute w-6/12 p-4 rounded"
style={{ width: "10%" }} style={{ top: "10%" }}
onClick={(e) => e.stopPropagation()}
> >
<button <img src={row.filePic} className="w-52 mx-auto" />
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" }}
onClick={() => {
console.log(row.name);
addTab({ name: row.name, id: row.id });
}}
>
جزئیات بیشتر
</button>
</div> </div>
</div> </div>
); );

@ -1,32 +1,41 @@
import React from "react"; import React, { useState } from "react";
import ButtonNewDesign from "../ButtonNewDesign"; import ButtonNewDesign from "../ButtonNewDesign";
import EditRow from "./EditRow";
const ViewEdit = () => { const ViewEdit = ({ row }) => {
const [selectedTab, setSelectedTab] = useState(false);
return ( return (
<div className="flex flex-row justify-end gap-x-2"> <div className="flex flex-row justify-end gap-x-2">
<ButtonNewDesign <div onClick={(e) => e.stopPropagation()}>
bgColor={"bg-blue-400"} <ButtonNewDesign
bgHoverColor={"hover:bg-blue-600"} bgColor={"bg-blue-400"}
textColor={"text-white"} bgHoverColor={"hover:bg-blue-600"}
border={"border-0"} textColor={"text-white"}
borderRadius={"rounded"} border={"border-0"}
fontSize={"text-xs"} borderRadius={"rounded"}
padding={"p-2"} fontSize={"text-xs"}
icon={null} padding={"p-2"}
text={"ویرایش"} icon={null}
/> text={"نمایش"}
<ButtonNewDesign {...row.getToggleRowExpandedProps()}
bgColor={"bg-transparent"} />
bgHoverColor={null} </div>
textColor={"text-blue-600"} <div onClick={(e) => e.stopPropagation()}>
border={"border"} <ButtonNewDesign
borderColor={"border-blue-600"} bgColor={"bg-transparent"}
borderRadius={"rounded"} bgHoverColor={null}
fontSize={"text-xs"} textColor={"text-blue-600"}
padding={"p-2"} border={"border"}
icon={null} borderColor={"border-blue-600"}
text={"نمایش"} borderRadius={"rounded"}
/> fontSize={"text-xs"}
padding={"p-2"}
icon={null}
text={"ویرایش"}
onClick={() => setSelectedTab(true)}
/>
</div>
{selectedTab === true ? <EditRow row={row} /> : ""}
</div> </div>
); );
}; };

Loading…
Cancel
Save