mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi andalib 3 years ago
parent 1bcaa5b6a7
commit 3086010e47
5 changed files with 111 additions and 680 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

13
src/components/ReactTable5/BasicTable.js
Unescape View File

@ -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>
);

2
src/components/ReactTable5/COLUMNS.js
Unescape View File

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

448
src/components/ReactTable5/EditRow.js
Unescape View File

@ -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>
);
};

269
src/components/ReactTable5/RenderRowSubComponent.js
Unescape View File

@ -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>
);

59
src/components/ReactTable5/ViewEdit.js
Unescape View File

@ -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>
);
};

Write Preview
Loading…
Cancel
Save