master
mahdi andalib 3 years ago
parent 101a0350a4
commit ab36e19f16
  1. 611
      src/components/ReactTable4/EditRow.js
  2. 8
      src/components/ReactTable4/map.svg

@ -1,253 +1,390 @@
import React from "react"; import React from "react";
import map from "./map.svg";
const EditRow = ({ row, columns }) => { const EditRow = ({ row, columns }) => {
// console.log(columns); // console.log(columns);
return ( return (
<div <section
className="flex flex-wrap border-r-4 border-blue-600 p-2" className=" border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#F1F5FE" }} style={{ backgroundColor: "#F1F5FE" }}
> >
{/* 1 */} <div className="flex flex-row items-center mr-2 mt-2 mb-4">
<div className="flex flex-col my-2 mx-2"> <div
<p className="w-1 h-4 ml-1 rounded"
className="text-xs text-blue-400 mb-2" style={{ backgroundColor: "#65A9FF" }}
style={{ borderColor: "#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.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" }}
>
شماره سفارش:
</p> </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> </div>
{/* 5 */} {/* table data */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-wrap">
<p {/* 1 */}
className="text-xs text-blue-400 mb-2" <div className="flex flex-col my-2 mx-2">
style={{ borderColor: "#65A9FF" }} <p
> className="text-xs text-blue-400 mb-2"
شغل کاربر: style={{ borderColor: "#65A9FF" }}
</p> >
<input نام و نام خانوادگی:
type="text" </p>
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }} <input
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" type="text"
value={row.user_job} style={{
/> backgroundColor: "#F8FBFF",
</div> borderColor: "#C8DEF9",
{/* 6 */} 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" value={row.name}
style={{ borderColor: "#65A9FF" }} />
> </div>
وضعیت سفارش: {/* 2 */}
</p> <div className="flex flex-col my-2 mx-2">
<input <p
type="text" className="text-xs text-blue-400 mb-2"
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }} style={{ borderColor: "#65A9FF" }}
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} تاریخ سفارش:
/> </p>
</div> <input
{/* 7 */} type="text"
<div className="flex flex-col my-2 mx-2"> style={{
<p backgroundColor: "#F8FBFF",
className="text-xs text-blue-400 mb-2" borderColor: "#C8DEF9",
style={{ borderColor: "#65A9FF" }} 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"
</p> value={row.order_date}
<input />
type="text" </div>
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }} {/* 3 */}
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" <div className="flex flex-col my-2 mx-2">
value={row.order_status} <p
/> className="text-xs text-blue-400 mb-2"
</div> style={{ borderColor: "#65A9FF" }}
{/* 8 */} >
<div className="flex flex-col my-2 mx-2"> مبلغ سفارش:
<p </p>
className="text-xs text-blue-400 mb-2" <input
style={{ borderColor: "#65A9FF" }} type="text"
> style={{
محل تولد: backgroundColor: "#F8FBFF",
</p> borderColor: "#C8DEF9",
<input color: "#00253A",
type="text" }}
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }} 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-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}
value={row.birth_place} />
/> </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> </div>
{/* 9 */} {/* title bottom */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-row items-center mr-2 mt-2 mb-4">
<p <div
className="text-xs text-blue-400 mb-2" className="w-1 h-4 ml-1 rounded"
style={{ borderColor: "#65A9FF" }} style={{ backgroundColor: "#65A9FF" }}
> ></div>
تلفن محل کار: <p className="text-sm font-bold" style={{ color: "#00253A" }}>
اطلاعات شخصی
</p> </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> </div>
{/* 10 */} {/* bottom */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-1 items-center">
<p {/* map */}
className="text-xs text-blue-400 mb-2" <div className="">
style={{ borderColor: "#65A9FF" }} <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
> لوکیشن مد نظر:
تحصیلات: </span>
</p> <img className="my-2 mr-2 border rounded" src={map} />
<input </div>
type="text" {/* formInput */}
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }} <div className="flex flex-col ">
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" <span className="text-md mb-2" style={{ color: "#65A9FF" }}>
value={row.education} توضیحات:
/> </span>
</div> <form className="flex flex-col ">
{/* 11 */} <input
<div className="flex flex-col my-2 mx-2"> placeholder="موضوع"
<p 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"
className="text-xs text-blue-400 mb-2" style={{
style={{ borderColor: "#65A9FF" }} backgroundColor: "#F8FBFF",
> borderColor: "#C8DEF9",
تاریخ تولد: color: "#00253A",
</p> }}
<input />
type="text" <textarea
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }} placeholder="متن"
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" 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"
value={row.birth_day} style={{
/> backgroundColor: "#F8FBFF",
</div> borderColor: "#C8DEF9",
{/* 12 */} color: "#00253A",
<div className="flex flex-col my-2 mx-2"> }}
<p ></textarea>
className="text-xs text-blue-400 mb-2" </form>
style={{ borderColor: "#65A9FF" }} </div>
> {/* previous */}
شغل: <div className="flex flex-col ">
</p> <span className="text-md mb-2" style={{ color: "#65A9FF" }}>
<input توضیحات قبلی:
type="text" </span>
style={{ backgroundColor: "#F8FBFF", borderColor: "#C8DEF9" }} </div>
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}
/>
</div> </div>
</div> </section>
); );
}; };

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 378 KiB

Loading…
Cancel
Save