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
Unified 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> </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>
); );

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save