mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added tabs

Browse Source
master
mahdi andalib 3 years ago
parent 7a189071e8
commit 5b96ce80c0
6 changed files with 77 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

74
src/components/ReactTable4/BasicTable.js
Unescape View File

@ -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>

8
src/components/ReactTable4/Buttons.js
Unescape View File

@ -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

8
src/components/ReactTable4/EditButtons.js
Unescape View File

@ -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 */}

13
src/components/ReactTable4/SliderColumnFilter.js
Unescape View File

@ -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>
);

2
src/components/ReactTable4/index.js
Unescape View File

@ -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);

10
src/components/ReactTable4/zarbedar-icon.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 713 B

Write Preview
Loading…
Cancel
Save