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>
{row.isExpanded ? (
<tr>
<td colSpan={headerGroups[0].headers.length}>
<RenderRowSubComponent
columns={columns}
addTab={addTab}
row={row.original}
/>
</td>
</tr>
<RenderRowSubComponent
columns={columns}
row={row.original}
/>
) : null}
</React.Fragment>
);

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

@ -1,395 +1,67 @@
import React from "react";
import SendForm from "./SendForm";
import Location from "./Location";
import History from "./History";
import React, { useState } from "react";
const EditRow = ({ row }) => {
const [openModal, setOpenModal] = useState(true);
const EditRow = ({ row, columns }) => {
// console.log(columns);
return (
<section
className=" border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#F1F5FE" }}
<div
onClick={() => setOpenModal(false)}
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
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p className="text-sm font-bold" style={{ color: "#00253A" }}>
اطلاعات هویتی
</p>
</div>
{/* table data */}
<div className="flex flex-wrap">
{/* 1 */}
<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.name}
</span>
</div>
{/* 2 */}
<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_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
className="absolute w-6/12 bg-white p-4 rounded flex flex-row flex-wrap items-center justify-around"
style={{ top: "10%" }}
onClick={(e) => e.stopPropagation()}
>
<img src={row.original.filePic} className="w-20" />
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
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"
>
{row.original.fileName}
</span>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
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"
>
{row.original.fileType}
</span>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
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"
>
{row.original.fileSize}
</span>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
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"
>
{row.original.fileDate}
</span>
</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 (
<div
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 "
style={{ backgroundColor: "#FBFCFE" }}
onClick={() => setOpenModal(false)}
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
className="flex flex-col items-end justify-end"
style={{ width: "10%" }}
className="absolute w-6/12 p-4 rounded"
style={{ top: "10%" }}
onClick={(e) => e.stopPropagation()}
>
<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" }}
onClick={() => {
console.log(row.name);
addTab({ name: row.name, id: row.id });
}}
>
جزئیات بیشتر
</button>
<img src={row.filePic} className="w-52 mx-auto" />
</div>
</div>
);

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

Loading…
Cancel
Save