diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 5b97a97..ced51dd 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -26,9 +26,20 @@ import { Settings } from "./Settings"; import { Checkbox } from "./Checkbox"; import MOCK_DATA from "./MOCK_DATA.json"; -const BasicTable = ({ settingsIcon }) => { - const columns = React.useMemo(() => COLUMNS, []); +const BasicTable = ({ + settingsIcon, + addTab, + tabs, + delTab, + setActivateTab, + activeTab, +}) => { const data = useMemo(() => MOCK_DATA, []); + const [filtering, setFiltering] = useState(false); + const columns = React.useMemo( + () => COLUMNS({ filtering, setFiltering, addTab }), + [] + ); const defaultColumn = useMemo(() => { return { @@ -104,141 +115,212 @@ const BasicTable = ({ settingsIcon }) => {
{/* right box */}
- +
{/* left box */} -
- {/* search box */} - - {/* pagination */} -
- {/* go to page */} - - {/* vertical line */} + {activeTab == 0 ? ( +
+ {/* search box */} + + {/* pagination */}
- {/* arrows */} - + className="flex flex-row items-center p-1 rounded" + style={{ backgroundColor: "#F9FBFF" }} + > + {/* go to page */} + + {/* vertical line */} +
+ {/* arrows */} + +
+ {/* settings icon */} + {settingsIcon && }
- {/* settings icon */} - {settingsIcon && } -
+ ) : null}
- - - {headerGroups.map((headerGroup) => ( - - {headerGroup.headers.map((column) => ( - - ))} - - ))} - - {/* filter row */} - {/* {selectedFilterRow === !null && ( )} */} - - {headerGroups.map((headerGroup) => ( - - {headerGroup.headers.map((column) => ( - - ))} - - ))} - - - {page.map((row, idx) => { - prepareRow(row); - return ( - - - {row.cells.map((cell) => { - return ( - - ); - })} + {activeTab == 0 ? ( + <> +
- {column.render("Header")} - - {column.isSorted - ? column.isSortedDesc - ? " 🔽" - : " 🔼" - : ""} - -
- {column.canFilter ? column.render("Filter") : null} -
- {cell.render("Cell")} -
+ + {headerGroups.map((headerGroup, index) => ( + + {headerGroup.headers.map((column) => ( + + ))} - {row.isExpanded ? ( - - + ))} + + {/* filter row */} + {filtering && ( + + {headerGroups.map((headerGroup, index) => ( + + {headerGroup.headers.map((column) => ( + + ))} - ) : null} - - ); - })} - - 10 ? "w-full" : "hidden"}`} - > - {footerGroups.map((footerGroup) => ( - - {footerGroup.headers.map((column) => ( - + {page.map((row, idx) => { + prepareRow(row); + return ( + + + {row.cells.map((cell, index) => { + return ( + + ); + })} + + {row.isExpanded ? ( + + + + ) : null} + + ); + })} + + 10 ? "w-full" : "hidden" + }`} + > + {footerGroups.map((footerGroup, index) => ( + + {footerGroup.headers.map((column, index) => ( + + ))} + + ))} + +
+ {column.render("Header")} + + {column.isSorted + ? column.isSortedDesc + ? " 🔽" + : " 🔼" + : ""} + +
- {renderRowSubComponent({ row: row.original })} - {/* {renderRowSubComponent({ row: row.values })} */} -
+ {column.canFilter ? column.render("Filter") : null} +
+ )} +
+ {cell.render("Cell")} +
+ {RenderRowSubComponent({ + row: row.original, + columns, + })} + {/* {RenderRowSubComponent({ row: row.values })} */} +
+ {column.render("Footer")} +
+
+ + صفحه{" "} + + { + const pageNumber = e.target.value + ? Number(e.target.value) - 1 + : 0; + gotoPage(pageNumber); + }} + style={{ width: "50px" }} + />{" "} + از {pageOptions.length} + + {""} + + +
+ + ) : ( + e.original && +e.original.id === activeTab) + ?.original || {} + } + columns={columns} + /> + )} + {/* 
         
           {JSON.stringify(
             {
@@ -248,56 +330,283 @@ const BasicTable = ({ settingsIcon }) => {
             2
           )}
         
-
-
- - صفحه{" "} - - { - const pageNumber = e.target.value - ? Number(e.target.value) - 1 - : 0; - gotoPage(pageNumber); - }} - style={{ width: "50px" }} - />{" "} - از {pageOptions.length} - - {""} - - -
+ */} ); }; - -function renderRowSubComponent({ row }) { +function EditRow({ row, columns }) { + console.log(row); + const persian = { + weight: "وزن", + pageNumber: "تعداد صفحات", + pageType: "نوع کاغذ", + bookNumber: "شماره شابک", + publisher: "انتشارات", + author: "نویسنده", + bookType: "قطع", + publishedYear: "سال انتشار", + }; + return ( +
+ {/* right */} +
+ {/* 1 */} +
+
+

+ نام و نام خانوادگی: + +

+
+ {/* 2 */} +
+
+

+ تاریخ سفارش: + {row.order_date} +

+
+ {/* 3 */} +
+
+

+ مبلغ سفارش: + {row.order_price} +

+
+ {/* 4 */} +
+
+

+ شماره سفارش: + {row.order_number} +

+
+ {/* 5 */} +
+
+

+ شغل کاربر: + {row.user_job} +

+
+ {/* 6 */} +
+
+

+ وضعیت سفارش: + + {columns[5].Cell({ value: row.order_status })} + +

+
+ {/* 7 */} +
+
+

+ سطح اهمیت: + + {columns[6].Cell({ value: row.order_level })} + +

+
+ {/* 8 */} +
+
+

+ محل تولد: + {row.birth_place} +

+
+ {/* 9 */} +
+
+

+ تلفن محل کار: + {row.office_phone} +

+
+ {/* 10 */} +
+
+

+ تحصیلات: + {row.education} +

+
+ {/* 11 */} +
+
+

+ تاریخ تولد: + {row.birth_day} +

+
+ {/* 12 */} +
+
+

+ شغل: + {row.job} +

+
+ {/* 13 */} +
+
+

+ دانشگاه: + {row.uni} +

+
+ {/* 14 */} +
+
+

+ رشته تحصیلی: + {row.field_study} +

+
+ {/* 15 */} +
+
+

+ اخلاق: + {row.behaviour} +

+
+ {/* 16 */} +
+
+

+ نشانی: + {row.address} +

+
+
+ {/* left */} +
+ + +
+
+ ); +} +function RenderRowSubComponent({ row, columns }) { console.log(row); const persian = { weight: "وزن", @@ -400,7 +709,9 @@ function renderRowSubComponent({ row }) { style={{ borderColor: "#65A9FF" }} > وضعیت سفارش: - {row.order_status} + + {columns[5].Cell({ value: row.order_status })} +

{/* 7 */} @@ -414,7 +725,9 @@ function renderRowSubComponent({ row }) { style={{ borderColor: "#65A9FF" }} > سطح اهمیت: - {row.order_level} + + {columns[6].Cell({ value: row.order_level })} +

{/* 8 */} diff --git a/src/components/ReactTable4/Buttons.js b/src/components/ReactTable4/Buttons.js index 24db09d..4701c29 100644 --- a/src/components/ReactTable4/Buttons.js +++ b/src/components/ReactTable4/Buttons.js @@ -4,7 +4,7 @@ import edit from "./edit.svg"; import { useState } from "react"; -export function Buttons({ row }) { +export const Buttons = ({ row, addTab }) => { const [activeDetails, setActiveDetails] = useState(null); return (
@@ -13,7 +13,7 @@ export function Buttons({ row }) { onClick={() => setActiveDetails(!activeDetails)} {...row.getToggleRowExpandedProps()} > - جزیات + جزپیات -
+
{ + addTab({ name: row.original.name, id: row.original.id }); + }} + >
); -} +}; diff --git a/src/components/ReactTable4/EditButtons.js b/src/components/ReactTable4/EditButtons.js index f8d0102..8febe51 100644 --- a/src/components/ReactTable4/EditButtons.js +++ b/src/components/ReactTable4/EditButtons.js @@ -6,9 +6,9 @@ import DropDown from "./DropDown"; import filter from "./filter.svg"; import plus from "./plus.svg"; -export function EditButtons({}) { - const [activeFilter, setActiveFilter] = useState(null); - // const [selectedFilterRow, setSelectedFilterRow] = useState(null); +export function EditButtons({ setFiltering, filtering, addTab }) { + const [selectedFilterRow, setSelectedFilterRow] = useState(filtering); + // setFiltering(selectedFilterRow); return (
@@ -16,6 +16,10 @@ export function EditButtons({}) {
); }; diff --git a/src/components/ReactTable4/columns.js b/src/components/ReactTable4/columns.js index 25c5f0f..664ce5f 100644 --- a/src/components/ReactTable4/columns.js +++ b/src/components/ReactTable4/columns.js @@ -10,7 +10,7 @@ import { SelectColumnFilter } from "./SelectColumnFilter.js"; import { SelectColumnFilter2 } from "./SelectColumnFilter2.js"; import { SliderColumnFilter } from "./SliderColumnFilter.js"; -export const COLUMNS = [ +export const COLUMNS = ({ setFiltering, filtering, addTab }) => [ { Header: "نام و نام خانوادگی", Footer: "نام و نام خانوادگی", @@ -57,10 +57,10 @@ export const COLUMNS = [ Filter: SelectColumnFilter, }, { - Header: EditButtons, + Header: () => EditButtons({ setFiltering, filtering, addTab }), Footer: "ویرایش", accessor: "edit", - Cell: Buttons, + Cell: ({ row }) => Buttons({ row, addTab }), disableSortBy: true, disableFilters: true, }, diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js index 0fc8cd1..c5d5eea 100644 --- a/src/components/ReactTable4/index.js +++ b/src/components/ReactTable4/index.js @@ -1,16 +1,35 @@ -import React, { useRef } from "react"; +import React, { useRef, useState } from "react"; import BasicTable from "./BasicTable"; // import useDraggableScroll from "use-draggable-scroll"; import cancleIcon from "./zarbedar-icon.svg"; const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { + const [tabs, setTabs] = useState([ + { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 }, + ]); + let [activeTab, setActivateTab] = useState(0); + const stateRef = useRef(); + const stateActiveRef = useRef(); + stateRef.current = tabs; + stateActiveRef.current = activeTab; + + const addTab = (newTab) => { + setActivateTab(newTab.id); + if (stateRef.current.find((e) => e.id === newTab.id)) return; + setTabs([...stateRef.current, newTab]); + }; + const delTab = (id) => { + setTabs(stateRef.current.filter((e) => e.id != id)); + if (stateActiveRef.current == id) setActivateTab(0); + }; + return (
{/* breadCrumb */}
{breadCrumbs.map((breadCrumb, index) => ( -
+
{

{subTitle}

- - + {/* */} +
); }; window.isDown = false; export default ReactTable4; -export function Tabbar({}) { - const ref = useRef(null); - +export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) { // const { onMouseDown } = useDraggableScroll(ref); - const tabs = ["فروشگاه دانوین", "مهدی عندلیب"]; + return (
    - {tabs.map((el) => ( + {tabs.map((el, index) => (
  • { if (window.isDown) return e.preventDefault(); }} aria-current="page" - className="flex flex-row items-center text-sm text-center active px-4 py-4 rounded-sm mx-1" - style={{ backgroundColor: "#F1F6FF" }} + className="flex flex-row items-center text-sm text-center active px-4 rounded-sm mx-1" + style={{ + backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF", + + color: activeTab === el.id ? "#fff" : "#000", + }} > - {el} - +
    setActivateTab(el.id)}> + {el.name} +
    + {el.id ? ( + { + e.preventDefault(); + delTab(el.id); + }} + /> + ) : null}
    • ))}