update status added

master
mahdi 3 years ago
parent 91a0c4d3af
commit 3d66dbbdf3
  1. 120
      src/components/ReactTable3/BasicTable.js
  2. 247
      src/components/ReactTable3/MOCK_DATA.json
  3. 86
      src/components/ReactTable3/columns.js

@ -18,6 +18,69 @@ import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json";
export function StatusPill({ value }) {
return (
<div className="">
{(() => {
if (value === 1) {
return (
<span
style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
className="p-2 rounded"
>
ارسال شده
</span>
);
} else if (value === 2) {
return (
<span
style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
className="p-2 rounded"
>
رسیدگی
</span>
);
} else if (value === 3) {
return (
<span
style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
className="p-2 rounded"
>
لغو شده
</span>
);
} else if (value === 4) {
return (
<span
style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
className="p-2 rounded"
>
پیگیری
</span>
);
} else {
return (
<span
style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
className="p-2 rounded"
>
خطری
</span>
);
}
})()}{" "}
</div>
);
}
// style={
// count > -1
// ? count === 0
// ? { color: "gray" }
// : { color: "green" }
// : { color: "red" }
// }
const BasicTable = () => {
const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []);
@ -87,7 +150,7 @@ const BasicTable = () => {
const { globalFilter, pageIndex, pageSize } = state;
// const firstPageRows = rows.slice(0, 10);
console.log(rows.length);
return (
<>
<div className="flex flex-row items-center justify-between mb-3 mx-4">
@ -95,7 +158,7 @@ const BasicTable = () => {
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{/* pagination */}
<div
className="border border-blue-400 rounded p-1 flex flex-items-center"
className="border border-blue-400 rounded-sm py-1 px-2 flex flex-items-center"
style={{}}
>
{/* go to page */}
@ -112,8 +175,13 @@ const BasicTable = () => {
}}
style={{ width: "50px" }}
/>
<span className="text-sm"> برو به صفحه </span>
<span className={`text-xs`} style={{ color: "#65A9FF" }}>
{" "}
برو به صفحه{" "}
</span>
</div>
{/* */}
<div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
{/* arrows */}
<button
className="rounded py-1 px-2 mx-1 text-xs"
@ -149,6 +217,7 @@ const BasicTable = () => {
</button>
</div>
</div>
{/* */}
{/* toggle columns */}
{/* <div>
<div>
@ -163,22 +232,20 @@ const BasicTable = () => {
</div>
))}
</div> */}
{/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */}
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-300">
<thead className="" style={{ backgroundColor: "#F3F8FF" }}>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps(column.getSortByToggleProps())}
scope="col"
className="cursor-pointer px-4 py-2 text-right text-xs"
className="cursor-pointer p-4 text-right text-sm font-medium"
style={{ color: "#3287B9" }}
>
{column.render("Header")}
@ -207,7 +274,7 @@ const BasicTable = () => {
return (
<td
{...cell.getCellProps()}
className="px-4 py-4 whitespace-nowrap text-sm"
className="p-4 whitespace-nowrap text-sm"
role="cell"
style={{ color: "#00253A" }}
>
@ -221,7 +288,7 @@ const BasicTable = () => {
</tbody>
<tfoot
className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`}
className={`bg-blue-900 ${rows.length > 10 ? "w-full" : "hidden"}`}
>
{footerGroups.map((footerGroup) => (
<tr {...footerGroup.getFooterGroupProps()}>
@ -229,7 +296,7 @@ const BasicTable = () => {
<td
{...column.getFooterProps}
className="px-4 py-2 text-right text-xs"
style={{ color: "#3287B9" }}
style={{ color: "#fff" }}
>
{column.render("Footer")}
</td>
@ -238,8 +305,7 @@ const BasicTable = () => {
))}
</tfoot>
</table>
<pre>
{/* <pre>
<code>
{JSON.stringify(
{
@ -249,24 +315,36 @@ const BasicTable = () => {
2
)}
</code>
</pre>
<div>
<span>
Page{" "}
<strong>
{pageIndex + 1} of {pageOptions.length}
</pre> */}
<div className="mt-3 ">
<span className="text-sm ml-4">
صفحه{" "}
<strong className="text-indigo-500">
{pageIndex + 1} از {pageOptions.length}
</strong>
{""}
</span>
<select
className="text-white text-sm rounded cursor-pointer"
style={{
backgroundColor: "#65A9FF",
borderColor: "#65A9FF",
}}
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
{[7, 10, 25, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
<option
key={pageSize}
value={pageSize}
className=" text-sm"
style={{
direction: "ltr",
textAlign: "right",
}}
>
نمایش {pageSize}
</option>
))}
</select>

@ -1,200 +1,47 @@
[
{
"name": "مایکروویر سامسونگ مدل 1",
"order-date": "1399/09/27",
"order-price": 27,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 2",
"order-date": "1399/09/25",
"order-price": 26,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 3",
"order-date": "1399/09/22",
"order-price": 44,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "لپ تاپ مک بوک اپل",
"order-date": "1410/09/27",
"order-price": 73,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "تبلت اپل",
"order-date": "1375/09/25",
"order-price": 96,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "کیس استوک",
"order-date": "1396/09/22",
"order-price": 75,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 2",
"order-date": "1399/09/25",
"order-price": 26,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 2",
"order-date": "1399/09/25",
"order-price": 26,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 3",
"order-date": "1399/09/22",
"order-price": 44,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "لپ تاپ مک بوک اپل",
"order-date": "1410/09/27",
"order-price": 73,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "تبلت اپل",
"order-date": "1375/09/25",
"order-price": 96,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 3",
"order-date": "1399/09/22",
"order-price": 44,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "لپ تاپ مک بوک اپل",
"order-date": "1410/09/27",
"order-price": 73,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "تبلت اپل",
"order-date": "1375/09/25",
"order-price": 96,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "کیس استوک",
"order-date": "1396/09/22",
"order-price": 75,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 1",
"order-date": "1399/09/27",
"order-price": 27,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "کیس استوک",
"order-date": "1396/09/22",
"order-price": 75,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 2",
"order-date": "1399/09/25",
"order-price": 26,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 3",
"order-date": "1399/09/22",
"order-price": 44,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "لپ تاپ مک بوک اپل",
"order-date": "1410/09/27",
"order-price": 73,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "تبلت اپل",
"order-date": "1375/09/25",
"order-price": 96,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "کیس استوک",
"order-date": "1396/09/22",
"order-price": 75,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
}
]
[
{
"name": "مایکروویر سامسونگ مدل 1",
"order-date": "1399/09/27",
"order-price": 27,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 2",
"order-date": "1399/09/25",
"order-price": 26,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 2,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 3",
"order-date": "1399/09/22",
"order-price": 44,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 3,
"order-level": 2
},
{
"name": "لپ تاپ مک بوک اپل",
"order-date": "1410/09/27",
"order-price": 73,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 4,
"order-level": 2
},
{
"name": "تبلت اپل",
"order-date": "1375/09/25",
"order-price": 96,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 5,
"order-level": 2
}
]

@ -1,45 +1,49 @@
import {format} from 'date-fns'
import { format } from "date-fns";
import Table, { StatusPill } from "./BasicTable"; // new
import {ColumnFilter} from './ColumnFilter';
import { ColumnFilter } from "./ColumnFilter";
export const COLUMNS = [
{
Header: 'نام و نام خانوادگی',
Footer: 'نام و نام خانوادگی',
accessor: 'name',
disableSortBy: true,
{
Header: "نام و نام خانوادگی",
Footer: "نام و نام خانوادگی",
accessor: "name",
disableSortBy: true,
},
{
Header: "تاریخ سفارش",
Footer: "تاریخ سفارش",
accessor: "order-date",
Cell: ({ value }) => {
return format(new Date(value), "dd/MM/yyyy");
},
{
Header: 'تاریخ سفارش',
Footer: 'تاریخ سفارش',
accessor: 'order-date',
Cell: ({ value }) => { return format(new Date (value), 'dd/MM/yyyy') }
},
{
Header: 'مبلغ سفارش',
Footer: 'مبلغ سفارش',
accessor: 'order-price',
Filter: ColumnFilter
},
{
Header: 'شماره سفارش',
Footer: 'شماره سفارش',
accessor: 'order-number',
},
{
Header: 'شغل کاربر',
Footer: 'شغل کاربر',
accessor: 'user-job',
},
{
Header: 'وضعیت سفارش',
Footer: 'وضعیت سفارش',
accessor: 'order-status',
},
{
Header: 'سطح اهمیت',
Footer: 'سطح اهمیت',
accessor: 'order-level',
disableSortBy: true,
},
]
},
{
Header: "مبلغ سفارش",
Footer: "مبلغ سفارش",
accessor: "order-price",
Filter: ColumnFilter,
},
{
Header: "شماره سفارش",
Footer: "شماره سفارش",
accessor: "order-number",
},
{
Header: "شغل کاربر",
Footer: "شغل کاربر",
accessor: "user-job",
},
{
Header: "وضعیت سفارش",
Footer: "وضعیت سفارش",
accessor: "order-status",
Cell: StatusPill,
},
{
Header: "سطح اهمیت",
Footer: "سطح اهمیت",
accessor: "order-level",
Cell: StatusPill,
},
];

Loading…
Cancel
Save