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

update

Browse Source
master
mahdi andalib 3 years ago
parent 101a0350a4
commit ab36e19f16
2 changed files with 382 additions and 237 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. 611
      src/components/ReactTable4/EditRow.js
  2. 8
      src/components/ReactTable4/map.svg

611
src/components/ReactTable4/EditRow.js
Unescape View File

@ -1,253 +1,390 @@
import React from "react";
import map from "./map.svg";
const EditRow = ({ row, columns }) => {
// console.log(columns);
return (
<div
className="flex flex-wrap border-r-4 border-blue-600 p-2"
<section
className=" border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#F1F5FE" }}
>
{/* 1 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
نام و نام خانوادگی:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.name}
/>
</div>
{/* 2 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
تاریخ سفارش:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_date}
/>
</div>
{/* 3 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
مبلغ سفارش:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_price}
/>
</div>
{/* 4 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
شماره سفارش:
<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>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_number}
/>
</div>
{/* 5 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
شغل کاربر:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.user_job}
/>
</div>
{/* 6 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_status}
/>
</div>
{/* 7 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_status}
/>
</div>
{/* 8 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
محل تولد:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.birth_place}
/>
{/* 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>
<input
type="text"
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"
value={row.name}
/>
</div>
{/* 2 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
تاریخ سفارش:
</p>
<input
type="text"
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"
value={row.order_date}
/>
</div>
{/* 3 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
مبلغ سفارش:
</p>
<input
type="text"
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"
value={row.order_price}
/>
</div>
{/* 4 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
شماره سفارش:
</p>
<input
type="text"
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"
value={row.order_number}
/>
</div>
{/* 5 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
شغل کاربر:
</p>
<input
type="text"
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"
value={row.user_job}
/>
</div>
{/* 6 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
</p>
<input
type="text"
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"
value={row.order_status}
/>
</div>
{/* 7 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
</p>
<input
type="text"
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"
value={row.order_status}
/>
</div>
{/* 8 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
محل تولد:
</p>
<input
type="text"
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"
value={row.birth_place}
/>
</div>
{/* 9 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
تلفن محل کار:
</p>
<input
type="text"
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"
value={row.office_phone}
/>
</div>
{/* 10 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
تحصیلات:
</p>
<input
type="text"
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"
value={row.education}
/>
</div>
{/* 11 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
تاریخ تولد:
</p>
<input
type="text"
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"
value={row.birth_day}
/>
</div>
{/* 12 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
شغل:
</p>
<input
type="text"
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"
value={row.job}
/>
</div>
{/* 13 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
دانشگاه:
</p>
<input
type="text"
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"
value={row.uni}
/>
</div>
{/* 14 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
رشته تحصیلی:
</p>
<input
type="text"
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"
value={row.field_study}
/>
</div>
{/* 15 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
اخلاق:
</p>
<input
type="text"
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"
value={row.behaviour}
/>
</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"
className="text-xs rounded-sm bo, color: "#00253A",
rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.address}{" "}
</span> */}
<input
type="text"
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"
value={row.address}
/>
</div>
</div>
{/* 9 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
تلفن محل کار:
{/* 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>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.office_phone}
/>
</div>
{/* 10 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
تحصیلات:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.education}
/>
</div>
{/* 11 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
تاریخ تولد:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.birth_day}
/>
</div>
{/* 12 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
شغل:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.job}
/>
</div>
{/* 13 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
دانشگاه:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.uni}
/>
</div>
{/* 14 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
رشته تحصیلی:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.field_study}
/>
</div>
{/* 15 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
اخلاق:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.behaviour}
/>
</div>
{/* 16 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
نشانی:
</p>
<input
type="text"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }}
className="text-black text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.address}
/>
{/* bottom */}
<div className="flex flex-1 items-center">
{/* map */}
<div className="">
<span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
لوکیشن مد نظر:
</span>
<img className="my-2 mr-2 border rounded" src={map} />
</div>
{/* formInput */}
<div className="flex flex-col ">
<span className="text-md mb-2" style={{ color: "#65A9FF" }}>
توضیحات:
</span>
<form className="flex flex-col ">
<input
placeholder="موضوع"
className="text-xs placeholder-blue-300 rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
}}
/>
<textarea
placeholder="متن"
className="resize-none placeholder-blue-300 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={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
}}
></textarea>
</form>
</div>
{/* previous */}
<div className="flex flex-col ">
<span className="text-md mb-2" style={{ color: "#65A9FF" }}>
توضیحات قبلی:
</span>
</div>
</div>
</div>
</section>
);
};

8
src/components/ReactTable4/map.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 378 KiB

Write Preview
Loading…
Cancel
Save