diff --git a/src/App.js b/src/App.js index be999cb..fcba004 100644 --- a/src/App.js +++ b/src/App.js @@ -80,12 +80,12 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} {/* */} - {/* */} + {/* */} {/* */} - + {/* */} {/* */} {/* */} {/* */} diff --git a/src/components/ReactTable3/BasicTable.js b/src/components/ReactTable3/BasicTable.js index 08bafd1..3f3459a 100644 --- a/src/components/ReactTable3/BasicTable.js +++ b/src/components/ReactTable3/BasicTable.js @@ -18,73 +18,14 @@ 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, []); +// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند + const isEven = (idx) => idx % 2 === 0; + const { getTableProps, getTableBodyProps, @@ -166,6 +107,8 @@ const BasicTable = () => { { const pageNumber = e.target.value @@ -264,12 +207,14 @@ const BasicTable = () => { - {page.map((row) => { + {page.map((row, idx) => { prepareRow(row); return ( - + {row.cells.map((cell) => { return ( { )} */} +
صفحه{" "} diff --git a/src/components/ReactTable3/MOCK_DATA.json b/src/components/ReactTable3/MOCK_DATA.json index bc21815..a4056ca 100644 --- a/src/components/ReactTable3/MOCK_DATA.json +++ b/src/components/ReactTable3/MOCK_DATA.json @@ -6,7 +6,7 @@ "order-number": "09120023100", "user-job": "مهندس ساختمان", "order-status": 1, - "order-level": 2 + "order-level": 1 }, { "name": "مایکروویر سامسونگ مدل 2", @@ -24,8 +24,53 @@ "order-number": "09120023100", "user-job": "مهندس ساختمان", "order-status": 3, + "order-level": 3 + }, + { + "name": "لپ تاپ مک بوک اپل", + "order-date": "1410/09/27", + "order-price": 73, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 4, + "order-level": 4 + }, + { + "name": "تبلت اپل", + "order-date": "1375/09/25", + "order-price": 96, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 5, + "order-level": 5 + }, + { + "name": "مایکروویر سامسونگ مدل 1", + "order-date": "1399/09/27", + "order-price": 27, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 1, + "order-level": 1 + }, + { + "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": 3 + }, { "name": "لپ تاپ مک بوک اپل", "order-date": "1410/09/27", @@ -33,8 +78,53 @@ "order-number": "09120023100", "user-job": "مهندس ساختمان", "order-status": 4, + "order-level": 4 + }, + { + "name": "تبلت اپل", + "order-date": "1375/09/25", + "order-price": 96, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 5, + "order-level": 5 + }, + { + "name": "مایکروویر سامسونگ مدل 1", + "order-date": "1399/09/27", + "order-price": 27, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 1, + "order-level": 1 + }, + { + "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": 3 + }, + { + "name": "لپ تاپ مک بوک اپل", + "order-date": "1410/09/27", + "order-price": 73, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 4, + "order-level": 4 + }, { "name": "تبلت اپل", "order-date": "1375/09/25", @@ -42,6 +132,51 @@ "order-number": "09120023100", "user-job": "مهندس ساختمان", "order-status": 5, + "order-level": 5 + }, + { + "name": "مایکروویر سامسونگ مدل 1", + "order-date": "1399/09/27", + "order-price": 27, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 1, + "order-level": 1 + }, + { + "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": 3 + }, + { + "name": "لپ تاپ مک بوک اپل", + "order-date": "1410/09/27", + "order-price": 73, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 4, + "order-level": 4 + }, + { + "name": "تبلت اپل", + "order-date": "1375/09/25", + "order-price": 96, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 5, + "order-level": 5 } ] diff --git a/src/components/ReactTable3/OrderLevel.js b/src/components/ReactTable3/OrderLevel.js new file mode 100644 index 0000000..a09965a --- /dev/null +++ b/src/components/ReactTable3/OrderLevel.js @@ -0,0 +1,35 @@ +export function OrderLevel({ value }) { + return ( +
+ {(() => { + switch(value) { + case 1: + return
+ + وضعیت عادی +
; + case 2: + return
+ + اعلان سطح هشدار +
; + case 3: + return
+ + بررسی و پیگیری +
; + case 4: + return
+ + وضعیت بحرانی +
; + default: + return
+ + وضعیت پایدار +
; + } + })()} +
+ ); + } diff --git a/src/components/ReactTable3/OrderStatus.js b/src/components/ReactTable3/OrderStatus.js new file mode 100644 index 0000000..b1403bd --- /dev/null +++ b/src/components/ReactTable3/OrderStatus.js @@ -0,0 +1,55 @@ +export function OrderStatus({ value }) { + return ( +
+ {(() => { + if (value === 1) { + return ( + + ارسال شده + + ); + } else if (value === 2) { + return ( + + رسیدگی + + ); + } else if (value === 3) { + return ( + + لغو شده + + ); + } else if (value === 4) { + return ( + + پیگیری + + ); + } else { + return ( + + خطری + + ); + } + })()}{" "} +
+ ); + } + \ No newline at end of file diff --git a/src/components/ReactTable3/columns.js b/src/components/ReactTable3/columns.js index 1e56c8e..1c9e408 100644 --- a/src/components/ReactTable3/columns.js +++ b/src/components/ReactTable3/columns.js @@ -1,8 +1,12 @@ import { format } from "date-fns"; -import Table, { StatusPill } from "./BasicTable"; // new + +import Table, { } from "./BasicTable"; // new import { ColumnFilter } from "./ColumnFilter"; +import { OrderStatus } from "./OrderStatus"; +import { OrderLevel } from "./OrderLevel"; + export const COLUMNS = [ { Header: "نام و نام خانوادگی", @@ -38,12 +42,12 @@ export const COLUMNS = [ Header: "وضعیت سفارش", Footer: "وضعیت سفارش", accessor: "order-status", - Cell: StatusPill, + Cell: OrderStatus, }, { Header: "سطح اهمیت", Footer: "سطح اهمیت", accessor: "order-level", - Cell: StatusPill, + Cell: OrderLevel, }, ]; diff --git a/src/components/Sidebar/SidebarDesign2/index.js b/src/components/Sidebar/SidebarDesign2/index.js index 5cdea3f..9396dac 100644 --- a/src/components/Sidebar/SidebarDesign2/index.js +++ b/src/components/Sidebar/SidebarDesign2/index.js @@ -69,7 +69,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => { className={`flex flex-row flex-1 items-center cursor-pointer hover:bg-blue-100 rounded-md p-2 transition duration-300 ${activeDropdown === menuItem ? "bg-blue-100" : ""} `} - onClick={() => setActiveDropdown(menuItem)} + onClick={() => setActiveDropdown(activeDropdown === menuItem ? null : menuItem)} >