You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
346 lines
12 KiB
346 lines
12 KiB
3 years ago
|
import React from "react";
|
||
|
|
||
|
const EditRow = ({ row, columns }) => {
|
||
|
console.log(columns);
|
||
|
|
||
|
return (
|
||
|
<div
|
||
|
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
|
||
|
style={{ backgroundColor: "#FAFBFF" }}
|
||
|
>
|
||
|
<div className="flex flex-row flex-wrap items-center">
|
||
|
{/* 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" }}
|
||
|
>
|
||
|
نام و نام خانوادگی:
|
||
|
</p>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
|
||
|
// value={columns[5].Cell({ value: row.order_status })}
|
||
|
value={row.order_status}
|
||
|
/>
|
||
|
</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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
|
||
|
// {columns[6].Cell({ value: row.order_level })}
|
||
|
value={row.order_level}
|
||
|
/>
|
||
|
</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" }}
|
||
|
>
|
||
|
محل تولد:
|
||
|
</p>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 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-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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-full mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
|
||
|
value={row.behaviour}
|
||
|
/>
|
||
|
</div>
|
||
|
{/* 16 */}
|
||
|
<div className=" 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>
|
||
|
<input
|
||
|
type="text"
|
||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
|
||
|
className="w-full mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
|
||
|
value={row.address}
|
||
|
/>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
// {features.map((feature, index) => (
|
||
|
|
||
|
export default EditRow;
|
||
|
|
||
|
{
|
||
|
/* <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" }}
|
||
|
>
|
||
|
جزیات بیشتر
|
||
|
</button>
|
||
|
</div> */
|
||
|
}
|