From 3d66dbbdf3465079e573a369dc5c68f676afa7b8 Mon Sep 17 00:00:00 2001 From: mahdi Date: Mon, 7 Feb 2022 16:11:50 +0330 Subject: [PATCH] update status added --- src/components/ReactTable3/BasicTable.js | 120 +++++++++-- src/components/ReactTable3/MOCK_DATA.json | 247 ++++------------------ src/components/ReactTable3/columns.js | 86 ++++---- 3 files changed, 191 insertions(+), 262 deletions(-) diff --git a/src/components/ReactTable3/BasicTable.js b/src/components/ReactTable3/BasicTable.js index 21db47c..08bafd1 100644 --- a/src/components/ReactTable3/BasicTable.js +++ b/src/components/ReactTable3/BasicTable.js @@ -18,6 +18,69 @@ import { Checkbox } from "./Checkbox"; import MOCK_DATA from "./MOCK_DATA.json"; +export function StatusPill({ value }) { + return ( +
+ {(() => { + if (value === 1) { + return ( + + ارسال شده + + ); + } else if (value === 2) { + return ( + + رسیدگی + + ); + } else if (value === 3) { + return ( + + لغو شده + + ); + } else if (value === 4) { + return ( + + پیگیری + + ); + } else { + return ( + + خطری + + ); + } + })()}{" "} +
+ ); +} + +// 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 ( <>
@@ -95,7 +158,7 @@ const BasicTable = () => { {/* pagination */}
{/* go to page */} @@ -112,8 +175,13 @@ const BasicTable = () => { }} style={{ width: "50px" }} /> - برو به صفحه + + {" "} + برو به صفحه{" "} +
+ {/* */} +
{/* arrows */}
+ {/* */} {/* toggle columns */} {/*
@@ -163,22 +232,20 @@ const BasicTable = () => {
))}
*/} - {/* Change Column Order */} {/* */} - - + {headerGroups.map((headerGroup) => ( {headerGroup.headers.map((column) => ( 10 ? "w-full" : "hidden"}`} + className={`bg-blue-900 ${rows.length > 10 ? "w-full" : "hidden"}`} > {footerGroups.map((footerGroup) => ( @@ -229,7 +296,7 @@ const BasicTable = () => { @@ -238,8 +305,7 @@ const BasicTable = () => { ))}
{column.render("Header")} @@ -207,7 +274,7 @@ const BasicTable = () => { return ( @@ -221,7 +288,7 @@ const BasicTable = () => {
{column.render("Footer")}
- -
+      {/* 
         
           {JSON.stringify(
             {
@@ -249,24 +315,36 @@ const BasicTable = () => {
             2
           )}
         
-      
- -
- - Page{" "} - - {pageIndex + 1} of {pageOptions.length} +
*/} +
+ + صفحه{" "} + + {pageIndex + 1} از {pageOptions.length} {""} diff --git a/src/components/ReactTable3/MOCK_DATA.json b/src/components/ReactTable3/MOCK_DATA.json index 5333ec4..bc21815 100644 --- a/src/components/ReactTable3/MOCK_DATA.json +++ b/src/components/ReactTable3/MOCK_DATA.json @@ -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 + } +] diff --git a/src/components/ReactTable3/columns.js b/src/components/ReactTable3/columns.js index 7d7cd46..1e56c8e 100644 --- a/src/components/ReactTable3/columns.js +++ b/src/components/ReactTable3/columns.js @@ -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, - }, -] \ No newline at end of file + }, + { + 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, + }, +];