master
mahdi andalib 3 years ago
parent 54bc257244
commit 101a0350a4
  1. 613
      src/components/ReactTable4/EditRow.js

@ -3,379 +3,254 @@ import React from "react";
const EditRow = ({ row, columns }) => { const EditRow = ({ row, columns }) => {
// console.log(columns); // console.log(columns);
return ( return (
<section className="bg-white p-4 rounded shadow-md "> <div
<div className="flex flex-wrap border-r-4 border-blue-600 p-2"
className="flex flex-col border-r-4 border-blue-600 p-2 rounded-md" style={{ backgroundColor: "#F1F5FE" }}
style={{ backgroundColor: "#F1F5FE" }} >
> {/* 1 */}
{/* 1 */} <div className="flex flex-col my-2 mx-2">
<div className="flex flex-col mr-2 my-2"> <p
<div className="flex flex-row"> className="text-xs text-blue-400 mb-2"
<div style={{ borderColor: "#65A9FF" }}
className="w-1 h-4 ml-1 rounded" >
style={{ backgroundColor: "#65A9FF" }} نام و نام خانوادگی:
></div> </p>
<p <input
className="text-xs text-blue-400" type="text"
style={{ borderColor: "#65A9FF" }} 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}
</p> />
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.name}
// style={{ width: "100%" }}
/>
</div>
{/* 2 */}
<div className="flex flex-col mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تاریخ سفارش:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
مبلغ سفارش:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شماره سفارش:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شغل کاربر:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
سطح اهمیت:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_level}
/>
</div>
{/* 8 */}
<div className="flex flex-col mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
محل تولد:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تلفن محل کار:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تحصیلات:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تاریخ تولد:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شغل:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
دانشگاه:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
رشته تحصیلی:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
اخلاق:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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 mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
نشانی:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 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>
<button {/* 2 */}
className="text-sm text-white mt-4 rounded px-4 py-2 mr-10" <div className="flex flex-col my-2 mx-2">
style={{ backgroundColor: "#65A9FF" }} <p
> className="text-xs text-blue-400 mb-2"
به روز رسانی style={{ borderColor: "#65A9FF" }}
</button> >
</section> تاریخ سفارش:
</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>
<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}
/>
</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" }}
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}
/>
</div>
</div>
); );
}; };
// {features.map((feature, index) => ( // {features.map((feature, index) => (
export default EditRow; 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> */
}

Loading…
Cancel
Save