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

@ -255,15 +255,10 @@ const BasicTable = ({ addTab, activeTab }) => {
})} })}
</tr> </tr>
{row.isExpanded ? ( {row.isExpanded ? (
<tr>
<td colSpan={headerGroups[0].headers.length}>
<RenderRowSubComponent <RenderRowSubComponent
columns={columns} columns={columns}
addTab={addTab}
row={row.original} 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
className=" border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#F1F5FE" }}
>
<div className="flex flex-row items-center mr-2 mt-2 mb-4">
<div <div
className="w-1 h-4 ml-1 rounded" onClick={() => setOpenModal(false)}
style={{ backgroundColor: "#65A9FF" }} data-modal-toggle="large-modal"
></div> 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
<p className="text-sm font-bold" style={{ color: "#00253A" }}> ${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
اطلاعات هویتی
</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} <div
</span> className="absolute w-6/12 bg-white p-4 rounded flex flex-row flex-wrap items-center justify-around"
</div> style={{ top: "10%" }}
{/* 6 */} onClick={(e) => e.stopPropagation()}
<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" }}
> >
دانشگاه: <img src={row.original.filePic} className="w-20" />
</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.uni} {row.original.fileName}
</span> </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 <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.field_study} {row.original.fileType}
</span> </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 <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.behaviour} {row.original.fileSize}
</span> </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 <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.address} {row.original.fileDate}
</span> </span>
</div> </div>
</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>
</section>
); );
}; };

@ -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
{/* right */} ${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
<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 <div
className="w-1 h-4 ml-1 rounded" className="absolute w-6/12 p-4 rounded"
style={{ backgroundColor: "#EDF2FB" }} style={{ top: "10%" }}
></div> onClick={(e) => e.stopPropagation()}
<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" }}
onClick={() => {
console.log(row.name);
addTab({ name: row.name, id: row.id });
}}
> >
جزئیات بیشتر <img src={row.filePic} className="w-52 mx-auto" />
</button>
</div> </div>
</div> </div>
); );

@ -1,9 +1,12 @@
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">
<div onClick={(e) => e.stopPropagation()}>
<ButtonNewDesign <ButtonNewDesign
bgColor={"bg-blue-400"} bgColor={"bg-blue-400"}
bgHoverColor={"hover:bg-blue-600"} bgHoverColor={"hover:bg-blue-600"}
@ -13,8 +16,11 @@ const ViewEdit = () => {
fontSize={"text-xs"} fontSize={"text-xs"}
padding={"p-2"} padding={"p-2"}
icon={null} icon={null}
text={"ویرایش"} text={"نمایش"}
{...row.getToggleRowExpandedProps()}
/> />
</div>
<div onClick={(e) => e.stopPropagation()}>
<ButtonNewDesign <ButtonNewDesign
bgColor={"bg-transparent"} bgColor={"bg-transparent"}
bgHoverColor={null} bgHoverColor={null}
@ -25,9 +31,12 @@ const ViewEdit = () => {
fontSize={"text-xs"} fontSize={"text-xs"}
padding={"p-2"} padding={"p-2"}
icon={null} icon={null}
text={"نمایش"} text={"ویرایش"}
onClick={() => setSelectedTab(true)}
/> />
</div> </div>
{selectedTab === true ? <EditRow row={row} /> : ""}
</div>
); );
}; };

Loading…
Cancel
Save