update status added

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

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

@ -14,7 +14,7 @@
"order-price": 26, "order-price": 26,
"order-number": "09120023100", "order-number": "09120023100",
"user-job": "مهندس ساختمان", "user-job": "مهندس ساختمان",
"order-status": 1, "order-status": 2,
"order-level": 2 "order-level": 2
}, },
{ {
@ -23,7 +23,7 @@
"order-price": 44, "order-price": 44,
"order-number": "09120023100", "order-number": "09120023100",
"user-job": "مهندس ساختمان", "user-job": "مهندس ساختمان",
"order-status": 1, "order-status": 3,
"order-level": 2 "order-level": 2
}, },
{ {
@ -32,7 +32,7 @@
"order-price": 73, "order-price": 73,
"order-number": "09120023100", "order-number": "09120023100",
"user-job": "مهندس ساختمان", "user-job": "مهندس ساختمان",
"order-status": 1, "order-status": 4,
"order-level": 2 "order-level": 2
}, },
{ {
@ -41,160 +41,7 @@
"order-price": 96, "order-price": 96,
"order-number": "09120023100", "order-number": "09120023100",
"user-job": "مهندس ساختمان", "user-job": "مهندس ساختمان",
"order-status": 1, "order-status": 5,
"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 "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 = [ export const COLUMNS = [
{ {
Header: 'نام و نام خانوادگی', Header: "نام و نام خانوادگی",
Footer: 'نام و نام خانوادگی', Footer: "نام و نام خانوادگی",
accessor: 'name', accessor: "name",
disableSortBy: true, disableSortBy: true,
}, },
{ {
Header: 'تاریخ سفارش', Header: "تاریخ سفارش",
Footer: 'تاریخ سفارش', Footer: "تاریخ سفارش",
accessor: 'order-date', accessor: "order-date",
Cell: ({ value }) => { return format(new Date (value), 'dd/MM/yyyy') } Cell: ({ value }) => {
return format(new Date(value), "dd/MM/yyyy");
},
}, },
{ {
Header: 'مبلغ سفارش', Header: "مبلغ سفارش",
Footer: 'مبلغ سفارش', Footer: "مبلغ سفارش",
accessor: 'order-price', accessor: "order-price",
Filter: ColumnFilter Filter: ColumnFilter,
}, },
{ {
Header: 'شماره سفارش', Header: "شماره سفارش",
Footer: 'شماره سفارش', Footer: "شماره سفارش",
accessor: 'order-number', accessor: "order-number",
}, },
{ {
Header: 'شغل کاربر', Header: "شغل کاربر",
Footer: 'شغل کاربر', Footer: "شغل کاربر",
accessor: 'user-job', accessor: "user-job",
}, },
{ {
Header: 'وضعیت سفارش', Header: "وضعیت سفارش",
Footer: 'وضعیت سفارش', Footer: "وضعیت سفارش",
accessor: 'order-status', accessor: "order-status",
Cell: StatusPill,
}, },
{ {
Header: 'سطح اهمیت', Header: "سطح اهمیت",
Footer: 'سطح اهمیت', Footer: "سطح اهمیت",
accessor: 'order-level', accessor: "order-level",
disableSortBy: true, Cell: StatusPill,
}, },
] ];

Loading…
Cancel
Save