master
mahdi andalib 3 years ago
parent 3505bcc6a8
commit 9970484bce
  1. 1
      src/components/ReactTable4/BasicTable.js
  2. 200
      src/components/ReactTable4/MOCK_DATA.json
  3. 13
      src/components/ReactTable4/SelectColumnFilter.js
  4. 56
      src/components/ReactTable4/SelectColumnFilter2.js
  5. 31
      src/components/ReactTable4/SliderColumnFilter.js
  6. 7
      src/components/ReactTable4/columns.js

@ -266,7 +266,6 @@ const BasicTable = ({ settingsIcon }) => {
)}
</code>
</pre>
<div className="mt-3 ">
{/* <span className="text-sm ml-4">
صفحه{" "}

@ -2,7 +2,7 @@
{
"name": "خسرو سهرابی",
"order-date": "1400/11/09",
"order-price": 910.325,
"order-price": 1,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
@ -21,7 +21,7 @@
{
"name": "خسرو شکیبایی",
"order-date": "1340/04/13",
"order-price": 225.2569,
"order-price": 2,
"order-number": "09390646589",
"user-job": "بازیگر",
"order-status": 2,
@ -40,7 +40,7 @@
{
"name": "علی علوی",
"order-date": "1330/12/05",
"order-price": 910.325,
"order-price": 3,
"order-number": "09120403285",
"user-job": "تاجر",
"order-status": 3,
@ -59,7 +59,7 @@
{
"name": "پارسا ایرانی",
"order-date": "1372/01/08",
"order-price": 123456789,
"order-price": 4,
"order-number": "09120336508",
"user-job": "حسابدار",
"order-status": 4,
@ -78,7 +78,197 @@
{
"name": "محمد محمدی",
"order-date": "1389/01/26",
"order-price": 550000,
"order-price": 5,
"order-number": "0913698574",
"user-job": "دکتر",
"order-status": 5,
"order-level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "خسرو سهرابی",
"order-date": "1400/11/09",
"order-price": 1,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "خسرو شکیبایی",
"order-date": "1340/04/13",
"order-price": 2,
"order-number": "09390646589",
"user-job": "بازیگر",
"order-status": 2,
"order-level": 2,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "علی علوی",
"order-date": "1330/12/05",
"order-price": 3,
"order-number": "09120403285",
"user-job": "تاجر",
"order-status": 3,
"order-level": 3,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "پارسا ایرانی",
"order-date": "1372/01/08",
"order-price": 4,
"order-number": "09120336508",
"user-job": "حسابدار",
"order-status": 4,
"order-level": 4,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "محمد محمدی",
"order-date": "1389/01/26",
"order-price": 5,
"order-number": "0913698574",
"user-job": "دکتر",
"order-status": 5,
"order-level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "خسرو سهرابی",
"order-date": "1400/11/09",
"order-price": 1,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "خسرو شکیبایی",
"order-date": "1340/04/13",
"order-price": 2,
"order-number": "09390646589",
"user-job": "بازیگر",
"order-status": 2,
"order-level": 2,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "علی علوی",
"order-date": "1330/12/05",
"order-price": 3,
"order-number": "09120403285",
"user-job": "تاجر",
"order-status": 3,
"order-level": 3,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "پارسا ایرانی",
"order-date": "1372/01/08",
"order-price": 4,
"order-number": "09120336508",
"user-job": "حسابدار",
"order-status": 4,
"order-level": 4,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "محمد محمدی",
"order-date": "1389/01/26",
"order-price": 5,
"order-number": "0913698574",
"user-job": "دکتر",
"order-status": 5,

@ -22,11 +22,20 @@ export const SelectColumnFilter = ({
setFilter(e.target.value || undefined);
}}
>
<option className="" value="">
<option
className="text-white"
value=""
style={{ backgroundColor: "#65A9FF" }}
>
همه
</option>
{options.map((option, i) => (
<option key={i} value={option} className="text-right">
<option
key={i}
value={option}
className="text-right text-white px-2"
style={{ backgroundColor: "#65A9FF" }}
>
{(() => {
if (option === 1) {
return "وضعیت عادی";

@ -0,0 +1,56 @@
import React from "react";
export const SelectColumnFilter2 = ({
column: { filterValue, setFilter, preFilteredRows, id, render },
}) => {
const options = React.useMemo(() => {
const options = new Set();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return [...options.values()];
}, [id, preFilteredRows]);
return (
<select
className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
name={id}
id={id}
value={filterValue}
onChange={(e) => {
setFilter(e.target.value || undefined);
}}
>
<option
className="text-white"
value=""
style={{ backgroundColor: "#65A9FF" }}
>
همه
</option>
{options.map((option, i) => (
<option
key={i}
value={option}
className="text-right text-white px-2"
style={{ backgroundColor: "#65A9FF" }}
>
{(() => {
if (option === 1) {
return "ارسال شده";
} else if (option === 2) {
return "رسیدگی";
} else if (option === 3) {
return "لغو شده";
} else if (option === 4) {
return "پیگیری";
} else {
return "خطری";
}
})()}{" "}
</option>
))}
</select>
);
};

@ -0,0 +1,31 @@
import React from "react";
export const SliderColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id },
}) => {
const [min, max] = React.useMemo(() => {
let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
preFilteredRows.forEach((row) => {
min = Math.min(row.values[id], min);
max = Math.max(row.values[id], max);
});
return [min, max];
}, [id, preFilteredRows]);
return (
<div className="flex flex-row items-center">
<input
type="range"
min={min}
max={max}
value={filterValue || min}
onChange={(e) => {
setFilter(parseInt(e.target.value, 10));
}}
/>
<input type="checkbox" onClick={() => setFilter(undefined)} />
{/* <button onClick={() => setFilter(undefined)}>ریست</button> */}
</div>
);
};

@ -1,12 +1,14 @@
import { format } from "date-fns";
import Table from "./BasicTable"; // new
import Table from "./BasicTable";
import { OrderStatus } from "./OrderStatus";
import { OrderLevel } from "./OrderLevel";
import { Buttons } from "./Buttons";
import { EditButtons } from "./EditButtons";
import { SelectColumnFilter } from "./SelectColumnFilter.js";
import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
import { SliderColumnFilter } from "./SliderColumnFilter.js";
export const COLUMNS = [
{
@ -19,6 +21,7 @@ export const COLUMNS = [
Header: "تاریخ سفارش",
Footer: "تاریخ سفارش",
accessor: "order-date",
Filter: SliderColumnFilter,
Cell: ({ value }) => {
return format(new Date(value), "dd/MM/yyyy");
},
@ -27,6 +30,7 @@ export const COLUMNS = [
Header: "مبلغ سفارش",
Footer: "مبلغ سفارش",
accessor: "order-price",
Filter: SliderColumnFilter,
},
{
Header: "شماره سفارش",
@ -43,6 +47,7 @@ export const COLUMNS = [
Footer: "وضعیت سفارش",
accessor: "order-status",
Cell: OrderStatus,
Filter: SelectColumnFilter2,
},
{
Header: "سطح اهمیت",

Loading…
Cancel
Save