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

update 8 files

Browse Source
master
amir hosein gorji 3 years ago
parent 59c14e1604
commit 02a9502f64
8 changed files with 638 additions and 265 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. 375
      src/components/ReactTable4/BasicTable.js
  2. 13
      src/components/ReactTable4/Buttons.js
  3. 17
      src/components/ReactTable4/EditButtons.js
  4. 5
      src/components/ReactTable4/MOCK_DATA.json
  5. 5
      src/components/ReactTable4/OrderStatus.js
  6. 6
      src/components/ReactTable4/ToggleColumns.js
  7. 6
      src/components/ReactTable4/columns.js
  8. 66
      src/components/ReactTable4/index.js

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

@ -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,9 +115,15 @@ const BasicTable = ({ settingsIcon }) => {
<div className="flex flex-row items-center justify-between">
{/* right box */}
<div className="" style={{ width: "70%" }}>
<Tabbar />
<Tabbar
tabs={tabs}
delTab={delTab}
setActivateTab={setActivateTab}
activeTab={activeTab}
/>
</div>
{/* left box */}
{activeTab == 0 ? (
<div
className="rounded-md p-2 flex flex-row items-center justify-end"
style={{ backgroundColor: "#F1F6FF" }}
@ -142,14 +159,17 @@ const BasicTable = ({ settingsIcon }) => {
{/* settings icon */}
{settingsIcon && <Settings />}
</div>
) : null}
</div>
{activeTab == 0 ? (
<>
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="" style={{ backgroundColor: "#F3F8FF" }}>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps(column.getSortByToggleProps())}
@ -171,10 +191,10 @@ const BasicTable = ({ settingsIcon }) => {
))}
</thead>
{/* filter row */}
{/* {selectedFilterRow === !null && ( )} */}
{filtering && (
<thead style={{ backgroundColor: "#FAFBFF" }}>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()} className="py-2 text-sm">
{column.canFilter ? column.render("Filter") : null}
@ -183,6 +203,7 @@ const BasicTable = ({ settingsIcon }) => {
</tr>
))}
</thead>
)}
<tbody
{...getTableBodyProps()}
className="divide-y divide-gray-200 bg-white"
@ -190,14 +211,15 @@ const BasicTable = ({ settingsIcon }) => {
{page.map((row, idx) => {
prepareRow(row);
return (
<React.Fragment>
<React.Fragment key={idx}>
<tr
{...row.getRowProps()}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
>
{row.cells.map((cell) => {
{row.cells.map((cell, index) => {
return (
<td
key={index}
{...cell.getCellProps()}
className="p-4 whitespace-nowrap text-xs"
role="cell"
@ -211,8 +233,11 @@ const BasicTable = ({ settingsIcon }) => {
{row.isExpanded ? (
<tr>
<td colSpan={headerGroups[0].headers.length}>
{renderRowSubComponent({ row: row.original })}
{/* {renderRowSubComponent({ row: row.values })} */}
{RenderRowSubComponent({
row: row.original,
columns,
})}
{/* {RenderRowSubComponent({ row: row.values })} */}
</td>
</tr>
) : null}
@ -221,12 +246,15 @@ const BasicTable = ({ settingsIcon }) => {
})}
</tbody>
<tfoot
className={`bg-blue-900 ${rows.length > 10 ? "w-full" : "hidden"}`}
className={`bg-blue-900 ${
rows.length > 10 ? "w-full" : "hidden"
}`}
>
{footerGroups.map((footerGroup) => (
<tr {...footerGroup.getFooterGroupProps()}>
{footerGroup.headers.map((column) => (
{footerGroups.map((footerGroup, index) => (
<tr key={index} {...footerGroup.getFooterGroupProps()}>
{footerGroup.headers.map((column, index) => (
<td
key={index}
{...column.getFooterProps}
className="px-4 py-2 text-right text-xs"
style={{ color: "#fff" }}
@ -238,17 +266,6 @@ const BasicTable = ({ settingsIcon }) => {
))}
</tfoot>
</table>
<pre>
<code>
{JSON.stringify(
{
selectedFlatRows: selectedFlatRows.map((row) => row.original),
},
null,
2
)}
</code>
</pre>
<div className="mt-3 ">
<span className="text-sm ml-4">
صفحه{" "}
@ -294,10 +311,302 @@ const BasicTable = ({ settingsIcon }) => {
</select>
</div>
</>
) : (
<EditRow
row={
rows.find((e) => e.original && +e.original.id === activeTab)
?.original || {}
}
columns={columns}
/>
)}
{/* <pre>
<code>
{JSON.stringify(
{
selectedFlatRows: selectedFlatRows.map((row) => row.original),
},
null,
2
)}
</code>
</pre> */}
</>
);
};
function renderRowSubComponent({ row }) {
function EditRow({ row, columns }) {
console.log(row);
const persian = {
weight: "وزن",
pageNumber: "تعداد صفحات",
pageType: "نوع کاغذ",
bookNumber: "شماره شابک",
publisher: "انتشارات",
author: "نویسنده",
bookType: "قطع",
publishedYear: "سال انتشار",
};
return (
<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"
style={{ width: "90%" }}
>
{/* 1 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
نام و نام خانوادگی:
<input type="text" className="mr-1 text-black" value={row.name} />
</p>
</div>
{/* 2 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تاریخ سفارش:
<span className="mr-1 text-black">{row.order_date}</span>
</p>
</div>
{/* 3 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
مبلغ سفارش:
<span className="mr-1 text-black">{row.order_price}</span>
</p>
</div>
{/* 4 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شماره سفارش:
<span className="mr-1 text-black">{row.order_number}</span>
</p>
</div>
{/* 5 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شغل کاربر:
<span className="mr-1 text-black">{row.user_job}</span>
</p>
</div>
{/* 6 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
<span className="mr-1 text-black">
{columns[5].Cell({ value: row.order_status })}
</span>
</p>
</div>
{/* 7 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
سطح اهمیت:
<span className="mr-1 text-black">
{columns[6].Cell({ value: row.order_level })}
</span>
</p>
</div>
{/* 8 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
محل تولد:
<span className="mr-1 text-black">{row.birth_place}</span>
</p>
</div>
{/* 9 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تلفن محل کار:
<span className="mr-1 text-black">{row.office_phone}</span>
</p>
</div>
{/* 10 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تحصیلات:
<span className="mr-1 text-black">{row.education}</span>
</p>
</div>
{/* 11 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تاریخ تولد:
<span className="mr-1 text-black">{row.birth_day}</span>
</p>
</div>
{/* 12 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شغل:
<span className="mr-1 text-black">{row.job}</span>
</p>
</div>
{/* 13 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
دانشگاه:
<span className="mr-1 text-black">{row.uni}</span>
</p>
</div>
{/* 14 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
رشته تحصیلی:
<span className="mr-1 text-black">{row.field_study}</span>
</p>
</div>
{/* 15 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
اخلاق:
<span className="mr-1 text-black">{row.behaviour}</span>
</p>
</div>
{/* 16 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
نشانی:
<span className="mr-1 text-black">{row.address}</span>
</p>
</div>
</div>
{/* left */}
<div
className="flex flex-col items-end justify-end"
style={{ width: "10%" }}
>
<button
className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
style={{ borderColor: "#D53921", color: "#D53921" }}
>
حذف
</button>
<button
className="border rounded w-8/12 text-xs py-2 bg-white"
style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
>
جزیات بیشتر
</button>
</div>
</div>
);
}
function RenderRowSubComponent({ row, columns }) {
console.log(row);
const persian = {
weight: "وزن",
@ -400,7 +709,9 @@ function renderRowSubComponent({ row }) {
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
<span className="mr-1 text-black">{row.order_status}</span>
<span className="mr-1 text-black">
{columns[5].Cell({ value: row.order_status })}
</span>
</p>
</div>
{/* 7 */}
@ -414,7 +725,9 @@ function renderRowSubComponent({ row }) {
style={{ borderColor: "#65A9FF" }}
>
سطح اهمیت:
<span className="mr-1 text-black">{row.order_level}</span>
<span className="mr-1 text-black">
{columns[6].Cell({ value: row.order_level })}
</span>
</p>
</div>
{/* 8 */}

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

@ -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 (
<div className="flex flex-row items-center justify-end">
@ -13,7 +13,7 @@ export function Buttons({ row }) {
onClick={() => setActiveDetails(!activeDetails)}
{...row.getToggleRowExpandedProps()}
>
جزیات
جزپیات
<img
src={arrowIcon}
alt=""
@ -22,10 +22,15 @@ export function Buttons({ row }) {
}`}
/>
</button>
<div className="mx-1 p-2 rounded border border-gray-300 cursor-pointer ">
<div
className="mx-1 p-2 rounded border border-gray-300 cursor-pointer"
onClick={() => {
addTab({ name: row.original.name, id: row.original.id });
}}
>
<img src={edit} alt="" className="w-4" />
</div>
<img src={more} alt="" className="w-5 cursor-pointer " />
</div>
);
}
};

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

@ -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 (
<div className="flex flex-row items-center justify-end">
@ -16,6 +16,10 @@ export function EditButtons({}) {
<button
className="mx-1 flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
style={{ backgroundColor: "#65A9FF" }}
onClick={() => {
console.log("new!!!");
addTab({ id: "new", name: "ردیف جدید" });
}}
>
ثبت جدید
<img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} />
@ -26,8 +30,11 @@ export function EditButtons({}) {
// onClick={() => setSelectedFilterRow(!selectedFilterRow)}
alt=""
className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8
${activeFilter ? "border" : "border-0"}`}
onClick={() => setActiveFilter(!activeFilter)}
${selectedFilterRow ? "border" : "border-0"}`}
onClick={() => {
setFiltering(!selectedFilterRow);
setSelectedFilterRow(!selectedFilterRow);
}}
/>
{/* dropDown */}
<DropDown />

5
src/components/ReactTable4/MOCK_DATA.json
Unescape View File

@ -1,5 +1,6 @@
[
{
"id": 1,
"name": "خسرو سهرابی",
"order_date": "1400/11/09",
"order_price": 1,
@ -18,6 +19,7 @@
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 2,
"name": "خسرو شکیبایی",
"order_date": "1340/04/13",
"order_price": 2,
@ -36,6 +38,7 @@
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 3,
"name": "علی علوی",
"order_date": "1330/12/05",
"order_price": 3,
@ -54,6 +57,7 @@
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 4,
"name": "پارسا ایرانی",
"order_date": "1372/01/08",
"order_price": 4,
@ -72,6 +76,7 @@
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 5,
"name": "محمد محمدی",
"order_date": "1389/01/26",
"order_price": 5,

5
src/components/ReactTable4/OrderStatus.js
Unescape View File

@ -1,4 +1,6 @@
export function OrderStatus({ value }) {
value = +value;
return (
<div className="">
{(() => {
@ -51,5 +53,4 @@ export function OrderStatus({ value }) {
})()}{" "}
</div>
);
}
}

6
src/components/ReactTable4/ToggleColumns.js
Unescape View File

@ -6,8 +6,10 @@ export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
<div>
<input type="checkbox" {...getToggleHideAllColumnsProps()} /> Toggle All
</div>
{allColumns.map((column) => (
<div key={column.id}>
{allColumns
.filter((column) => column.Header === "string")
.map((column, index) => (
<div key={index}>
<label>
<input type="checkbox" {...column.getToggleHiddenProps()} />
{column.Header}

6
src/components/ReactTable4/columns.js
Unescape View File

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

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

@ -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 (
<div className="my-10 w-11/12 mx-auto">
{/* breadCrumb */}
<div className="flex flex-row items-center">
{breadCrumbs.map((breadCrumb, index) => (
<div className="flex flex-row items-center">
<div className="flex flex-row items-center" key={index}>
<span
className={`cursor-pointer text-xs hover:text-blue-900 ${
breadCrumb.active ? "text-blue-900" : "text-blue-400"
@ -42,19 +61,23 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
<h2 className="text-xs">{subTitle}</h2>
</div>
</div>
<Tabbar />
<BasicTable />
{/* <Tabbar tabs={tabs} /> */}
<BasicTable
addTab={addTab}
tabs={tabs}
delTab={delTab}
setActivateTab={setActivateTab}
activeTab={activeTab}
/>
</div>
);
};
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 (
<ul
className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
@ -79,17 +102,34 @@ export function Tabbar({}) {
slider.scrollLeft = window.scrollLeft - walk;
}}
>
{tabs.map((el) => (
{tabs.map((el, index) => (
<li
key={index}
onClick={(e) => {
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",
}}
>
<span className="">{el}</span>
<img src={cancleIcon} className="w-2 h-2 mr-2" />
<div className="h-full py-4" onClick={(e) => setActivateTab(el.id)}>
{el.name}
</div>
{el.id ? (
<img
src={cancleIcon}
className="w-2 h-2 mr-2"
alt=""
onClick={(e) => {
e.preventDefault();
delTab(el.id);
}}
/>
) : null}
</li>
))}
</ul>

Write Preview
Loading…
Cancel
Save