master
mahdi andalib 3 years ago
parent 7a189071e8
commit 5b96ce80c0
  1. 74
      src/components/ReactTable4/BasicTable.js
  2. 8
      src/components/ReactTable4/Buttons.js
  3. 8
      src/components/ReactTable4/EditButtons.js
  4. 13
      src/components/ReactTable4/SliderColumnFilter.js
  5. 2
      src/components/ReactTable4/index.js
  6. 10
      src/components/ReactTable4/zarbedar-icon.svg

@ -1,7 +1,8 @@
import React, { useMemo } from "react";
import React, { useMemo, useState } from "react";
import "./index.scss";
import { ColumnSearch } from "./ColumnSearch.js";
import { Tabbar } from "./index";
import {
useTable,
@ -28,6 +29,9 @@ const BasicTable = ({ settingsIcon }) => {
const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []);
//selected row
// const [selectedFilterRow, setSelectedFilterRow] = useState(null);
const defaultColumn = useMemo(() => {
return {
Filter: ColumnSearch,
@ -103,9 +107,14 @@ const BasicTable = ({ settingsIcon }) => {
// };
const { globalFilter, pageIndex, pageSize } = state;
// const firstPageRows = rows.slice(0, 10);
return (
<>
{/* <button
className="bg-orange-600"
onClick={() => setSelectedFilterRow(!selectedFilterRow)}
>
click me
</button> */}
{/* toggle columns */}
{/* <div>
<div>
@ -122,7 +131,11 @@ const BasicTable = ({ settingsIcon }) => {
</div> */}
{/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */}
<div className="flex flex-row items-center justify-end">
<div className="flex flex-row items-center justify-between">
{/* right box */}
<div className="w-8/12">
<Tabbar />
</div>
{/* left box */}
<div
className="rounded-md p-2 flex flex-row items-center"
@ -188,11 +201,12 @@ const BasicTable = ({ settingsIcon }) => {
))}
</thead>
{/* filter row */}
{/* {selectedFilterRow === !null && ( )} */}
<thead style={{ backgroundColor: "#FAFBFF" }}>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()} className="py-2 text-sm ">
<th {...column.getHeaderProps()} className="py-2 text-sm">
{column.canFilter ? column.render("Filter") : null}
</th>
))}
@ -207,7 +221,6 @@ const BasicTable = ({ settingsIcon }) => {
prepareRow(row);
return (
<React.Fragment>
<tr></tr>
<tr
{...row.getRowProps()}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
@ -228,7 +241,7 @@ const BasicTable = ({ settingsIcon }) => {
{row.isExpanded ? (
<tr>
<td colSpan={headerGroups[0].headers.length}>
{renderRowSubComponent({ rows: row.original })}
{renderRowSubComponent({ row: row.original })}
{/* {renderRowSubComponent({ row: row.values })} */}
</td>
</tr>
@ -322,7 +335,8 @@ const BasicTable = ({ settingsIcon }) => {
);
};
function renderRowSubComponent({ rows }) {
function renderRowSubComponent({ row }) {
console.log(row);
const persian = {
weight: "وزن",
pageNumber: "تعداد صفحات",
@ -334,7 +348,10 @@ function renderRowSubComponent({ rows }) {
publishedYear: "سال انتشار",
};
return (
<div className="w-full flex flex-row items-center bg-indigo-100 border-r-4 border-blue-600 p-2">
<div
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#FAFBFF" }}
>
{/* right */}
<div
className="flex flex-row flex-wrap items-center"
@ -351,7 +368,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
نام و نام خانوادگی:
<span className="mr-1 text-black">{rows.name}</span>
<span className="mr-1 text-black">{row.name}</span>
</p>
</div>
{/* 2 */}
@ -365,7 +382,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
تاریخ سفارش:
<span className="mr-1 text-black">{rows.order_date}</span>
<span className="mr-1 text-black">{row.order_date}</span>
</p>
</div>
{/* 3 */}
@ -379,7 +396,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
مبلغ سفارش:
<span className="mr-1 text-black">{rows.order_price}</span>
<span className="mr-1 text-black">{row.order_price}</span>
</p>
</div>
{/* 4 */}
@ -393,7 +410,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
شماره سفارش:
<span className="mr-1 text-black">{rows.order_number}</span>
<span className="mr-1 text-black">{row.order_number}</span>
</p>
</div>
{/* 5 */}
@ -407,7 +424,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
شغل کاربر:
<span className="mr-1 text-black">{rows.user_job}</span>
<span className="mr-1 text-black">{row.user_job}</span>
</p>
</div>
{/* 6 */}
@ -421,7 +438,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
<span className="mr-1 text-black">{rows.order_status}</span>
<span className="mr-1 text-black">{row.order_status}</span>
</p>
</div>
{/* 7 */}
@ -435,7 +452,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
سطح اهمیت:
<span className="mr-1 text-black">{rows.order_level}</span>
<span className="mr-1 text-black">{row.order_level}</span>
</p>
</div>
{/* 8 */}
@ -449,7 +466,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
محل تولد:
<span className="mr-1 text-black">{rows.birth_place}</span>
<span className="mr-1 text-black">{row.birth_place}</span>
</p>
</div>
{/* 9 */}
@ -463,7 +480,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
تلفن محل کار:
<span className="mr-1 text-black">{rows.office_phone}</span>
<span className="mr-1 text-black">{row.office_phone}</span>
</p>
</div>
{/* 10 */}
@ -477,7 +494,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
تحصیلات:
<span className="mr-1 text-black">{rows.education}</span>
<span className="mr-1 text-black">{row.education}</span>
</p>
</div>
{/* 11 */}
@ -491,7 +508,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
تاریخ تولد:
<span className="mr-1 text-black">{rows.birth_day}</span>
<span className="mr-1 text-black">{row.birth_day}</span>
</p>
</div>
{/* 12 */}
@ -505,7 +522,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
شغل:
<span className="mr-1 text-black">{rows.job}</span>
<span className="mr-1 text-black">{row.job}</span>
</p>
</div>
{/* 13 */}
@ -519,7 +536,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
دانشگاه:
<span className="mr-1 text-black">{rows.uni}</span>
<span className="mr-1 text-black">{row.uni}</span>
</p>
</div>
{/* 14 */}
@ -533,7 +550,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
رشته تحصیلی:
<span className="mr-1 text-black">{rows.field_study}</span>
<span className="mr-1 text-black">{row.field_study}</span>
</p>
</div>
{/* 15 */}
@ -547,7 +564,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
اخلاق:
<span className="mr-1 text-black">{rows.behaviour}</span>
<span className="mr-1 text-black">{row.behaviour}</span>
</p>
</div>
{/* 16 */}
@ -561,7 +578,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }}
>
نشانی:
<span className="mr-1 text-black">{rows.address}</span>
<span className="mr-1 text-black">{row.address}</span>
</p>
</div>
</div>
@ -571,12 +588,15 @@ function renderRowSubComponent({ rows }) {
style={{ width: "10%" }}
>
<button
className="border rounded text-red-600 w-8/12 text-xs py-2 mb-2"
style={{ borderColor: "#D53921" }}
className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
style={{ borderColor: "#D53921", color: "#D53921" }}
>
حذف
</button>
<button className="border rounded text-blue-600 w-8/12 text-xs py-2">
<button
className="border rounded w-8/12 text-xs py-2 bg-white"
style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
>
جزیات بیشتر
</button>
</div>

@ -7,13 +7,11 @@ import { useState } from "react";
export function Buttons({ row }) {
const [activeDetails, setActiveDetails] = useState(null);
return (
<div
className="flex flex-row items-center justify-end"
{...row.getToggleRowExpandedProps()}
>
<div className="flex flex-row items-center justify-end">
<button
className="mx-1 flex flex-row items-center justify-around p-2 rounded border border-gray-300 "
className="mx-1 flex flex-row items-center justify-around p-2 rounded border border-gray-300"
onClick={() => setActiveDetails(!activeDetails)}
{...row.getToggleRowExpandedProps()}
>
جزیات
<img

@ -1,4 +1,5 @@
import React, { useState } from "react";
import Table from "./BasicTable";
import DropDown from "./DropDown";
@ -7,6 +8,7 @@ import plus from "./plus.svg";
export function EditButtons({}) {
const [activeFilter, setActiveFilter] = useState(null);
// const [selectedFilterRow, setSelectedFilterRow] = useState(null);
return (
<div className="flex flex-row items-center justify-end">
@ -21,10 +23,10 @@ export function EditButtons({}) {
{/* filter */}
<img
src={filter}
// onClick={() => setSelectedFilterRow(!selectedFilterRow)}
alt=""
className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 ${
activeFilter ? "border" : "border-0"
}`}
className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8
${activeFilter ? "border" : "border-0"}`}
onClick={() => setActiveFilter(!activeFilter)}
/>
{/* dropDown */}

@ -1,5 +1,7 @@
import React from "react";
import cancleIcon from "./zarbedar-icon.svg";
export const SliderColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id },
}) => {
@ -14,8 +16,9 @@ export const SliderColumnFilter = ({
}, [id, preFilteredRows]);
return (
<div className="flex flex-row items-center">
<div className="flex flex-row items-center justify-between w-10/12">
<input
className=" w-10/12"
type="range"
min={min}
max={max}
@ -24,7 +27,13 @@ export const SliderColumnFilter = ({
setFilter(parseInt(e.target.value, 10));
}}
/>
<input type="checkbox" onClick={() => setFilter(undefined)} />
<div className="p-1 rounded bg-blue-300">
<img
src={cancleIcon}
onClick={() => setFilter(undefined)}
className="cursor-pointer w-2 h-2"
/>
</div>
{/* <button onClick={() => setFilter(undefined)}>ریست</button> */}
</div>
);

@ -48,7 +48,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
window.isDown = false;
export default ReactTable4;
function Tabbar({}) {
export function Tabbar({}) {
const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref);

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18.118" height="18.118" viewBox="0 0 18.118 18.118">
<g id="Group_1" data-name="Group 1" transform="translate(-244.586 -251.497)">
<g id="vuesax_linear_clipboard-close" data-name="vuesax/linear/clipboard-close">
<g id="clipboard-close">
<path id="Vector" d="M15.136,15.136,0,0" transform="translate(246.153 252.911)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M15.136,0,0,15.136" transform="translate(246 253.064)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 713 B

Loading…
Cancel
Save