parent
a89c1dda05
commit
2583a1eb84
29 changed files with 9 additions and 1993 deletions
@ -1,306 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import { |
|
||||||
useTable, |
|
||||||
useFilters, |
|
||||||
useGlobalFilter, |
|
||||||
useAsyncDebounce, |
|
||||||
useSortBy, |
|
||||||
usePagination, |
|
||||||
} from "react-table"; |
|
||||||
import { |
|
||||||
ChevronDoubleLeftIcon, |
|
||||||
ChevronLeftIcon, |
|
||||||
ChevronRightIcon, |
|
||||||
ChevronDoubleRightIcon, |
|
||||||
} from "@heroicons/react/solid"; |
|
||||||
import { Button, PageButton } from "./shared/Button"; |
|
||||||
import { classNames } from "./shared/Utils"; |
|
||||||
import { SortIcon, SortUpIcon, SortDownIcon } from "./shared/Icons"; |
|
||||||
|
|
||||||
// Define a default UI for filtering
|
|
||||||
function GlobalFilter({ |
|
||||||
preGlobalFilteredRows, |
|
||||||
globalFilter, |
|
||||||
setGlobalFilter, |
|
||||||
}) { |
|
||||||
const count = preGlobalFilteredRows.length; |
|
||||||
const [value, setValue] = React.useState(globalFilter); |
|
||||||
const onChange = useAsyncDebounce((value) => { |
|
||||||
setGlobalFilter(value || undefined); |
|
||||||
}, 200); |
|
||||||
|
|
||||||
return ( |
|
||||||
<label className="flex gap-x-2 items-baseline"> |
|
||||||
<span className="text-gray-700">Search: </span> |
|
||||||
<input |
|
||||||
type="text" |
|
||||||
className="rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" |
|
||||||
value={value || ""} |
|
||||||
onChange={(e) => { |
|
||||||
setValue(e.target.value); |
|
||||||
onChange(e.target.value); |
|
||||||
}} |
|
||||||
placeholder={`${count} records...`} |
|
||||||
/> |
|
||||||
</label> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export function StatusPill({ value }) { |
|
||||||
// const status = value ? value.toLowerCase() : "unknown";
|
|
||||||
|
|
||||||
return ( |
|
||||||
<span |
|
||||||
className={`p-4 whitespace-nowrap text-base font-light
|
|
||||||
${value ? "text-green-400" : "text-red-400"}`}
|
|
||||||
> |
|
||||||
{value ? "فعال" : "غیر فعال"} |
|
||||||
</span> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// export function AvatarCell({ value, column, row }) {
|
|
||||||
// return (
|
|
||||||
// <div className="flex items-center">
|
|
||||||
// {/* برای عکس */}
|
|
||||||
// {/* <div className="flex-shrink-0 h-10 w-10">
|
|
||||||
// <img
|
|
||||||
// className="h-10 w-10 rounded-full"
|
|
||||||
// src={row.original[column.imgAccessor]}
|
|
||||||
// alt=""
|
|
||||||
// />
|
|
||||||
// </div> */}
|
|
||||||
// {/* اگر بخواهیم در کنار عنوان یک محتوا دیگه ای بنویسیم */}
|
|
||||||
// {/* <div className="ml-4">
|
|
||||||
// <div className="text-sm font-medium text-gray-900">{value}</div>
|
|
||||||
// <div className="text-sm text-gray-500">
|
|
||||||
// {row.original[column.emailAccessor]}
|
|
||||||
// </div>
|
|
||||||
// </div> */}
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
function Table({ columns, data }) { |
|
||||||
// Use the state and functions returned from useTable to build your UI
|
|
||||||
const { |
|
||||||
getTableProps, |
|
||||||
getTableBodyProps, |
|
||||||
headerGroups, |
|
||||||
prepareRow, |
|
||||||
page, // Instead of using 'rows', we'll use page,
|
|
||||||
// which has only the rows for the active page
|
|
||||||
|
|
||||||
// The rest of these things are super handy, too ;)
|
|
||||||
canPreviousPage, |
|
||||||
canNextPage, |
|
||||||
pageOptions, |
|
||||||
pageCount, |
|
||||||
gotoPage, |
|
||||||
nextPage, |
|
||||||
previousPage, |
|
||||||
setPageSize, |
|
||||||
|
|
||||||
state, |
|
||||||
preGlobalFilteredRows, |
|
||||||
setGlobalFilter, |
|
||||||
} = useTable( |
|
||||||
{ |
|
||||||
columns, |
|
||||||
data, |
|
||||||
}, |
|
||||||
useFilters, // useFilters!
|
|
||||||
useGlobalFilter, |
|
||||||
useSortBy, |
|
||||||
usePagination // new
|
|
||||||
); |
|
||||||
|
|
||||||
// Render the UI for your table
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<div className="sm:flex sm:gap-x-2"> |
|
||||||
<GlobalFilter |
|
||||||
preGlobalFilteredRows={preGlobalFilteredRows} |
|
||||||
globalFilter={state.globalFilter} |
|
||||||
setGlobalFilter={setGlobalFilter} |
|
||||||
/> |
|
||||||
{headerGroups.map((headerGroup) => |
|
||||||
headerGroup.headers.map((column) => |
|
||||||
column.Filter ? ( |
|
||||||
<div className="mt-2 sm:mt-0" key={column.id}> |
|
||||||
{column.render("Filter")} |
|
||||||
</div> |
|
||||||
) : null |
|
||||||
) |
|
||||||
)} |
|
||||||
</div> |
|
||||||
{/* table */} |
|
||||||
<div className="mt-4 flex flex-col"> |
|
||||||
<div className="-my-2 overflow-x-auto -mx-4 sm:-mx-6 lg:-mx-8"> |
|
||||||
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"> |
|
||||||
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"> |
|
||||||
<table |
|
||||||
{...getTableProps()} |
|
||||||
className="min-w-full divide-y divide-gray-200" |
|
||||||
> |
|
||||||
<thead className="bg-gray-50"> |
|
||||||
{headerGroups.map((headerGroup) => ( |
|
||||||
<tr {...headerGroup.getHeaderGroupProps()}> |
|
||||||
{headerGroup.headers.map((column) => ( |
|
||||||
// Add the sorting props to control sorting. For this example
|
|
||||||
// we can add them into the header props
|
|
||||||
<th |
|
||||||
scope="col" |
|
||||||
className="px-6 py-3 text-xs text-blue-600 bg-gray-200" |
|
||||||
{...column.getHeaderProps( |
|
||||||
column.getSortByToggleProps() |
|
||||||
)} |
|
||||||
> |
|
||||||
<div className="flex items-center"> |
|
||||||
{column.render("Header")} |
|
||||||
{/* Add a sort direction indicator */} |
|
||||||
<span> |
|
||||||
{column.isSorted ? ( |
|
||||||
column.isSortedDesc ? ( |
|
||||||
<SortUpIcon className="w-4 h-4 text-gray-400 mr-1" /> |
|
||||||
) : ( |
|
||||||
<SortDownIcon className="w-4 h-4 text-gray-400 mr-1" /> |
|
||||||
) |
|
||||||
) : ( |
|
||||||
<SortIcon className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 mr-1" /> |
|
||||||
)} |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
</th> |
|
||||||
))} |
|
||||||
</tr> |
|
||||||
))} |
|
||||||
</thead> |
|
||||||
<tbody |
|
||||||
{...getTableBodyProps()} |
|
||||||
className="bg-white divide-y divide-gray-200" |
|
||||||
> |
|
||||||
{page.map((row, i) => { |
|
||||||
// new
|
|
||||||
prepareRow(row); |
|
||||||
return ( |
|
||||||
<tr {...row.getRowProps()}> |
|
||||||
{row.cells.map((cell) => { |
|
||||||
return ( |
|
||||||
<td |
|
||||||
{...cell.getCellProps()} |
|
||||||
className="px-6 py-4 whitespace-nowrap" |
|
||||||
role="cell" |
|
||||||
> |
|
||||||
{cell.column.Cell.name === "defaultRenderer" ? ( |
|
||||||
<div className="text-sm text-gray-500"> |
|
||||||
{cell.render("Cell")} |
|
||||||
</div> |
|
||||||
) : ( |
|
||||||
cell.render("Cell") |
|
||||||
)} |
|
||||||
</td> |
|
||||||
); |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
); |
|
||||||
})} |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
{/* Pagination */} |
|
||||||
<div className="py-3 flex items-center justify-between"> |
|
||||||
<div className="flex-1 flex justify-between sm:hidden"> |
|
||||||
<Button onClick={() => previousPage()} disabled={!canPreviousPage}> |
|
||||||
Previous |
|
||||||
</Button> |
|
||||||
<Button onClick={() => nextPage()} disabled={!canNextPage}> |
|
||||||
Next |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
||||||
{/* numbers */} |
|
||||||
<div className="flex gap-x-2 items-baseline"> |
|
||||||
<span className="text-sm text-gray-700"> |
|
||||||
صفحه <span className="font-medium"> {state.pageIndex + 1} </span> |
|
||||||
از |
|
||||||
<span className="font-medium"> {pageOptions.length} </span> |
|
||||||
</span> |
|
||||||
<label> |
|
||||||
<span className="sr-only">ایتم های موجود در هر صفحه</span> |
|
||||||
<select |
|
||||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" |
|
||||||
value={state.pageSize} |
|
||||||
onChange={(e) => { |
|
||||||
setPageSize(Number(e.target.value)); |
|
||||||
}} |
|
||||||
> |
|
||||||
{[5, 10, 20].map((pageSize) => ( |
|
||||||
<option key={pageSize} value={pageSize}> |
|
||||||
نمایش {pageSize} |
|
||||||
</option> |
|
||||||
))} |
|
||||||
</select> |
|
||||||
</label> |
|
||||||
</div> |
|
||||||
{/* arrows */} |
|
||||||
<div> |
|
||||||
<nav |
|
||||||
className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" |
|
||||||
aria-label="Pagination" |
|
||||||
> |
|
||||||
<PageButton |
|
||||||
className="rounded-l-md" |
|
||||||
onClick={() => gotoPage(0)} |
|
||||||
disabled={!canPreviousPage} |
|
||||||
> |
|
||||||
<span className="sr-only">First</span> |
|
||||||
<ChevronDoubleRightIcon |
|
||||||
className="h-5 w-5 text-gray-400" |
|
||||||
aria-hidden="true" |
|
||||||
/> |
|
||||||
</PageButton> |
|
||||||
|
|
||||||
<PageButton |
|
||||||
onClick={() => previousPage()} |
|
||||||
disabled={!canPreviousPage} |
|
||||||
> |
|
||||||
<span className="sr-only">Previous</span> |
|
||||||
<ChevronRightIcon |
|
||||||
ChevronLeftIcon |
|
||||||
className="h-5 w-5 text-gray-400" |
|
||||||
aria-hidden="true" |
|
||||||
/> |
|
||||||
</PageButton> |
|
||||||
|
|
||||||
<PageButton onClick={() => nextPage()} disabled={!canNextPage}> |
|
||||||
<span className="sr-only"> Next</span> |
|
||||||
<ChevronLeftIcon |
|
||||||
className="h-5 w-5 text-gray-400" |
|
||||||
aria-hidden="true" |
|
||||||
/> |
|
||||||
</PageButton> |
|
||||||
|
|
||||||
<PageButton |
|
||||||
className="rounded-r-md" |
|
||||||
onClick={() => gotoPage(pageCount - 1)} |
|
||||||
disabled={!canNextPage} |
|
||||||
> |
|
||||||
<span className="sr-only">Last</span> |
|
||||||
<ChevronDoubleLeftIcon |
|
||||||
className="h-5 w-5 text-gray-400" |
|
||||||
aria-hidden="true" |
|
||||||
/> |
|
||||||
</PageButton> |
|
||||||
</nav> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default Table; |
|
||||||
@ -1,90 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import Table, { AvatarCell, SelectColumnFilter, StatusPill } from "./Table"; // new
|
|
||||||
|
|
||||||
const getData = () => { |
|
||||||
const data = [ |
|
||||||
{ |
|
||||||
name: "مایکروویر سامسونگ مدل ", |
|
||||||
// email: "jane.cooper@example.com",
|
|
||||||
status: true, |
|
||||||
date: "1399/09/21", |
|
||||||
price: 20000, |
|
||||||
// imgUrl:
|
|
||||||
// "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60",
|
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "آزمون آنلاین درس علوم تجربی ", |
|
||||||
status: false, |
|
||||||
date: "1399/09/23", |
|
||||||
price: 18000, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "مایکروویر سامسونگ مدل ", |
|
||||||
status: true, |
|
||||||
date: "1392/09/21", |
|
||||||
price: 20000, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "آزمون آنلاین درس علوم تجربی ", |
|
||||||
status: false, |
|
||||||
date: "1375/09/21", |
|
||||||
price: 18000, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "مایکروویر سامسونگ مدل ", |
|
||||||
status: true, |
|
||||||
date: "1360/09/21", |
|
||||||
price: 27000000, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "آزمون آنلاین درس علوم تجربی ", |
|
||||||
status: false, |
|
||||||
date: "1404/09/21", |
|
||||||
price: 1000, |
|
||||||
}, |
|
||||||
]; |
|
||||||
return [...data, ...data, ...data]; |
|
||||||
}; |
|
||||||
|
|
||||||
const ReactTable2 = () => { |
|
||||||
const columns = React.useMemo( |
|
||||||
() => [ |
|
||||||
{ |
|
||||||
Header: "عنوان", |
|
||||||
accessor: "name", |
|
||||||
// اگر بخواهیم عکسی در جدول نشان بدیم یا یک محتوایی در کنار عنوان داشته باشیم اول باید اواتار سل رو در فایل تیبل جی اس ان کامنت کنیم و بعد ...
|
|
||||||
// Cell: AvatarCell,
|
|
||||||
// imgAccessor: "imgUrl",
|
|
||||||
// emailAccessor: "email",
|
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "وضعیت", |
|
||||||
accessor: "status", |
|
||||||
Cell: StatusPill, |
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "تاریخ", |
|
||||||
accessor: "date", |
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "مبلغ پرداختی", |
|
||||||
accessor: "price", |
|
||||||
}, |
|
||||||
], |
|
||||||
[] |
|
||||||
); |
|
||||||
|
|
||||||
const data = React.useMemo(() => getData(), []); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="min-h-screen bg-gray-100 text-gray-900"> |
|
||||||
<main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-4"> |
|
||||||
<div className="my-6"> |
|
||||||
<Table columns={columns} data={data} /> |
|
||||||
</div> |
|
||||||
</main> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default ReactTable2; |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
import React from 'react' |
|
||||||
import { classNames } from './Utils' |
|
||||||
|
|
||||||
export function Button({ children, className, ...rest }) { |
|
||||||
return ( |
|
||||||
<button |
|
||||||
type="button" |
|
||||||
className={ |
|
||||||
classNames( |
|
||||||
"relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50", |
|
||||||
className |
|
||||||
)} |
|
||||||
{...rest} |
|
||||||
> |
|
||||||
{children} |
|
||||||
</button> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export function PageButton({ children, className, ...rest }) { |
|
||||||
return ( |
|
||||||
<button |
|
||||||
type="button" |
|
||||||
className={ |
|
||||||
classNames( |
|
||||||
"relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50", |
|
||||||
className |
|
||||||
)} |
|
||||||
{...rest} |
|
||||||
> |
|
||||||
{children} |
|
||||||
</button> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,17 +0,0 @@ |
|||||||
export function SortIcon({ className }) { |
|
||||||
return ( |
|
||||||
<svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z"></path></svg> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export function SortUpIcon({ className }) { |
|
||||||
return ( |
|
||||||
<svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z"></path></svg> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export function SortDownIcon({ className }) { |
|
||||||
return ( |
|
||||||
<svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path></svg> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
export function classNames(...classes) { |
|
||||||
return classes.filter(Boolean).join(" "); |
|
||||||
} |
|
||||||
@ -1,31 +0,0 @@ |
|||||||
import arrowIcon from "./arrow-icon.svg"; |
|
||||||
import more from "./more.svg"; |
|
||||||
import edit from "./edit.svg"; |
|
||||||
|
|
||||||
import { useState } from "react"; |
|
||||||
|
|
||||||
export function Buttons({ row }) { |
|
||||||
const [activeDetails, setActiveDetails] = useState(null); |
|
||||||
return ( |
|
||||||
<div className="flex flex-row items-center justify-end"> |
|
||||||
<button |
|
||||||
className="flex flex-row items-center justify-around p-2 rounded border border-gray-300 mx-1" |
|
||||||
onClick={() => setActiveDetails(!activeDetails)} |
|
||||||
{...row.getToggleRowExpandedProps()} |
|
||||||
> |
|
||||||
جزیات |
|
||||||
<img |
|
||||||
src={arrowIcon} |
|
||||||
alt="" |
|
||||||
className={`w-3 cursor-pointer mr-2 ${ |
|
||||||
activeDetails ? "rotate-60" : "rotate-90" |
|
||||||
}`}
|
|
||||||
/> |
|
||||||
</button> |
|
||||||
<div className="p-2 rounded border border-gray-300 cursor-pointer mx-1"> |
|
||||||
<img src={edit} alt="" className="w-4" /> |
|
||||||
</div> |
|
||||||
<img src={more} alt="" className="w-5 cursor-pointer rotate-90 mx-1" /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
export const Checkbox = React.forwardRef(({ indeterminate, ...rest }, ref) => { |
|
||||||
const defaultRef = React.useRef(); |
|
||||||
const resolvedRef = ref || defaultRef; |
|
||||||
|
|
||||||
React.useEffect(() => { |
|
||||||
resolvedRef.current.indeterminate = indeterminate; |
|
||||||
}, [resolvedRef, indeterminate]); |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<input type="checkbox" ref={resolvedRef} {...rest} /> |
|
||||||
</> |
|
||||||
); |
|
||||||
}); |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
export const ColumnFilter = ({ column }) => { |
|
||||||
|
|
||||||
const { filterValue, setFilter } = column
|
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
<span> |
|
||||||
|
|
||||||
Search: {''} |
|
||||||
|
|
||||||
<input value={filterValue || '' } |
|
||||||
onChange={(e) => setFilter(e.target.value)} /> |
|
||||||
|
|
||||||
</span> |
|
||||||
|
|
||||||
); |
|
||||||
}; |
|
||||||
@ -1,82 +0,0 @@ |
|||||||
import React, {useState} from 'react'; |
|
||||||
|
|
||||||
import search from './search-normal.svg'; |
|
||||||
import filter from './filter.svg'; |
|
||||||
import settings from './settings.svg'; |
|
||||||
import arrow from './blue-arrow.svg'; |
|
||||||
import plus from './plus.svg'; |
|
||||||
import { GlobalFilter } from './GlobalFilter'; |
|
||||||
|
|
||||||
export function EditButtons({buttons }) { |
|
||||||
const [selectedButton, setSelectedButton] = useState(null); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="flex flex-row items-center justify-end"> |
|
||||||
{buttons.map((button,index) =>( |
|
||||||
<div className={`border border-blue-400 flex flex-row items-center justify-around p-1 rounded-sm bg-opacity-30 mx-1`} |
|
||||||
style={{backgroundColor: button.backgroundColor}} |
|
||||||
// onClick={() => setOpenModal(true)}
|
|
||||||
onClick={() => setSelectedButton(selectedButton === button ? null : button)} |
|
||||||
> |
|
||||||
<p className={`text-sm ${button.textColor}`}>{button.title}</p> |
|
||||||
<img src={button.logo} alt="" className={`cursor-pointer ${button.width} ${button.height} ${button.title === null ? "mr-0": "mx-2"}`} /> |
|
||||||
</div> |
|
||||||
))} |
|
||||||
<div |
|
||||||
>
|
|
||||||
{selectedButton?.components} |
|
||||||
|
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
EditButtons.defaultProps = { |
|
||||||
buttons : [ |
|
||||||
{ |
|
||||||
logo: search, |
|
||||||
width: "w-5", |
|
||||||
height: "h-5", |
|
||||||
title: null, |
|
||||||
textColor: null, |
|
||||||
backgroundColor: "#F3F8FF", |
|
||||||
components: <GlobalFilter />, |
|
||||||
|
|
||||||
}, |
|
||||||
{ |
|
||||||
logo: filter, |
|
||||||
width: "w-5", |
|
||||||
height: "h-5", |
|
||||||
title: null, |
|
||||||
textColor: null, |
|
||||||
backgroundColor: "#F3F8FF", |
|
||||||
components: "a", }, |
|
||||||
{ |
|
||||||
logo: settings, |
|
||||||
width: "w-5", |
|
||||||
height: "h-5", |
|
||||||
title: null, |
|
||||||
textColor: null, |
|
||||||
backgroundColor: "#F3F8FF", |
|
||||||
components: "b", |
|
||||||
}, |
|
||||||
{ |
|
||||||
logo: arrow, |
|
||||||
width: "w-3", |
|
||||||
height: "h-3", |
|
||||||
title: 'عملیات', |
|
||||||
textColor: "text-blue-400", |
|
||||||
backgroundColor: "#F3F8FF", |
|
||||||
components: "c", |
|
||||||
}, |
|
||||||
{ |
|
||||||
logo: plus, |
|
||||||
width: "w-3", |
|
||||||
height: "h-3", |
|
||||||
title: 'ثبت جدید', |
|
||||||
textColor: "text-white", |
|
||||||
backgroundColor: "#65A9FF", |
|
||||||
components: "d", |
|
||||||
}, |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
import React, {useState} from 'react'; |
|
||||||
import { useAsyncDebounce } from 'react-table'; |
|
||||||
|
|
||||||
import search from "./search-normal.svg"; |
|
||||||
|
|
||||||
export const GlobalFilter = ({ filter, setFilter }) => { |
|
||||||
const [openModal, setOpenModal] = useState(true); |
|
||||||
|
|
||||||
const [value, setValue] = useState(filter); |
|
||||||
|
|
||||||
const onChange = useAsyncDebounce(value => { |
|
||||||
setFilter(value || undefined) |
|
||||||
}, 1000) |
|
||||||
|
|
||||||
return ( |
|
||||||
<div onClick={() => setOpenModal(false)}
|
|
||||||
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
|
|
||||||
${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}`}>
|
|
||||||
<div className="absolute " style={{top: "10%"}} onClick={(e) => e.stopPropagation()}> |
|
||||||
<div className="flex flex-row-reverse items-center relative w-96"> |
|
||||||
<img |
|
||||||
src={search} |
|
||||||
alt="" |
|
||||||
className="w-6 h-6 absolute left-3" |
|
||||||
/> |
|
||||||
<input |
|
||||||
value={value || ''} |
|
||||||
onChange={(e) => { |
|
||||||
setValue(e.target.value) |
|
||||||
onChange(e.target.value) |
|
||||||
}} |
|
||||||
type="text" |
|
||||||
placeholder="نام کالا را جستجو کنید..." |
|
||||||
className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
|
|
||||||
@ -1,182 +0,0 @@ |
|||||||
[ |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 1", |
|
||||||
"order-date": "1399/09/27", |
|
||||||
"order-price": 27, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 1, |
|
||||||
"order-level": 1 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 2", |
|
||||||
"order-date": "1399/09/25", |
|
||||||
"order-price": 26, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 2, |
|
||||||
"order-level": 2 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 3", |
|
||||||
"order-date": "1399/09/22", |
|
||||||
"order-price": 44, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 3, |
|
||||||
"order-level": 3 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "لپ تاپ مک بوک اپل", |
|
||||||
"order-date": "1410/09/27", |
|
||||||
"order-price": 73, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 4, |
|
||||||
"order-level": 4 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "تبلت اپل", |
|
||||||
"order-date": "1375/09/25", |
|
||||||
"order-price": 96, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 5, |
|
||||||
"order-level": 5 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 1", |
|
||||||
"order-date": "1399/09/27", |
|
||||||
"order-price": 27, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 1, |
|
||||||
"order-level": 1 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 2", |
|
||||||
"order-date": "1399/09/25", |
|
||||||
"order-price": 26, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 2, |
|
||||||
"order-level": 2 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 3", |
|
||||||
"order-date": "1399/09/22", |
|
||||||
"order-price": 44, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 3, |
|
||||||
"order-level": 3 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "لپ تاپ مک بوک اپل", |
|
||||||
"order-date": "1410/09/27", |
|
||||||
"order-price": 73, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 4, |
|
||||||
"order-level": 4 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "تبلت اپل", |
|
||||||
"order-date": "1375/09/25", |
|
||||||
"order-price": 96, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 5, |
|
||||||
"order-level": 5 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 1", |
|
||||||
"order-date": "1399/09/27", |
|
||||||
"order-price": 27, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 1, |
|
||||||
"order-level": 1 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 2", |
|
||||||
"order-date": "1399/09/25", |
|
||||||
"order-price": 26, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 2, |
|
||||||
"order-level": 2 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 3", |
|
||||||
"order-date": "1399/09/22", |
|
||||||
"order-price": 44, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 3, |
|
||||||
"order-level": 3 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "لپ تاپ مک بوک اپل", |
|
||||||
"order-date": "1410/09/27", |
|
||||||
"order-price": 73, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 4, |
|
||||||
"order-level": 4 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "تبلت اپل", |
|
||||||
"order-date": "1375/09/25", |
|
||||||
"order-price": 96, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 5, |
|
||||||
"order-level": 5 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 1", |
|
||||||
"order-date": "1399/09/27", |
|
||||||
"order-price": 27, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 1, |
|
||||||
"order-level": 1 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 2", |
|
||||||
"order-date": "1399/09/25", |
|
||||||
"order-price": 26, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 2, |
|
||||||
"order-level": 2 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مایکروویر سامسونگ مدل 3", |
|
||||||
"order-date": "1399/09/22", |
|
||||||
"order-price": 44, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 3, |
|
||||||
"order-level": 3 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "لپ تاپ مک بوک اپل", |
|
||||||
"order-date": "1410/09/27", |
|
||||||
"order-price": 73, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 4, |
|
||||||
"order-level": 4 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "تبلت اپل", |
|
||||||
"order-date": "1375/09/25", |
|
||||||
"order-price": 96, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 5, |
|
||||||
"order-level": 5 |
|
||||||
} |
|
||||||
] |
|
||||||
@ -1,302 +0,0 @@ |
|||||||
import React, { useMemo } from "react"; |
|
||||||
|
|
||||||
import { |
|
||||||
useTable, |
|
||||||
useSortBy, |
|
||||||
useGlobalFilter, |
|
||||||
useFilters, |
|
||||||
usePagination, |
|
||||||
useRowSelect, |
|
||||||
useColumnOrder, |
|
||||||
} from "react-table"; |
|
||||||
|
|
||||||
import { COLUMNS } from "./columns"; |
|
||||||
|
|
||||||
import { GlobalFilter } from "./GlobalFilter"; |
|
||||||
|
|
||||||
import { Checkbox } from "./Checkbox"; |
|
||||||
|
|
||||||
import MOCK_DATA from "./MOCK_DATA.json"; |
|
||||||
|
|
||||||
const BasicTable = () => { |
|
||||||
const columns = React.useMemo(() => COLUMNS, []); |
|
||||||
const data = useMemo(() => MOCK_DATA, []); |
|
||||||
|
|
||||||
const { |
|
||||||
getTableProps, |
|
||||||
getTableBodyProps, |
|
||||||
headerGroups, |
|
||||||
footerGroups, |
|
||||||
rows, |
|
||||||
page, |
|
||||||
nextPage, |
|
||||||
previousPage, |
|
||||||
canNextPage, |
|
||||||
canPreviousPage, |
|
||||||
pageOptions, |
|
||||||
gotoPage, |
|
||||||
pageCount, |
|
||||||
setPageSize, |
|
||||||
prepareRow, |
|
||||||
allColumns, |
|
||||||
getToggleHideAllColumnsProps, |
|
||||||
setColumnOrder, |
|
||||||
selectedFlatRows, |
|
||||||
state, |
|
||||||
setGlobalFilter, |
|
||||||
} = useTable( |
|
||||||
{ |
|
||||||
columns, |
|
||||||
data, |
|
||||||
// initialState: { pageIndex: 2 }
|
|
||||||
}, |
|
||||||
useColumnOrder, |
|
||||||
useFilters, |
|
||||||
useGlobalFilter, |
|
||||||
useSortBy, |
|
||||||
usePagination, |
|
||||||
useRowSelect, |
|
||||||
(hooks) => { |
|
||||||
hooks.visibleColumns.push((columns) => { |
|
||||||
return [ |
|
||||||
{ |
|
||||||
id: "selection", |
|
||||||
Header: ({ getToggleAllRowsSelectedProps }) => ( |
|
||||||
<Checkbox {...getToggleAllRowsSelectedProps()} /> |
|
||||||
), |
|
||||||
Cell: ({ row }) => ( |
|
||||||
<Checkbox {...row.getToggleRowSelectedProps()} /> |
|
||||||
), |
|
||||||
}, |
|
||||||
...columns, |
|
||||||
]; |
|
||||||
}); |
|
||||||
} |
|
||||||
); |
|
||||||
|
|
||||||
const changeOrder = () => { |
|
||||||
setColumnOrder([ |
|
||||||
"name", |
|
||||||
"order-number", |
|
||||||
"user-job", |
|
||||||
"order-level", |
|
||||||
"order-status", |
|
||||||
"order-price", |
|
||||||
]); |
|
||||||
}; |
|
||||||
|
|
||||||
const { globalFilter, pageIndex, pageSize } = state; |
|
||||||
// const firstPageRows = rows.slice(0, 10);
|
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<div className="bg-yellow-500"> |
|
||||||
{/* search box */} |
|
||||||
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> |
|
||||||
{/* pagination */} |
|
||||||
</div> |
|
||||||
{/* toggle columns */} |
|
||||||
{/* <div> |
|
||||||
<div> |
|
||||||
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All |
|
||||||
</div> |
|
||||||
{allColumns.map((column) => ( |
|
||||||
<div key={column.id}> |
|
||||||
<label> |
|
||||||
<input type="checkbox" {...column.getToggleHiddenProps()} /> |
|
||||||
{column.Header} |
|
||||||
</label> |
|
||||||
</div> |
|
||||||
))} |
|
||||||
</div> */} |
|
||||||
|
|
||||||
{/* Change Column Order */} |
|
||||||
{/* <button onClick={changeOrder}> Change Column Order </button> */} |
|
||||||
|
|
||||||
<table |
|
||||||
{...getTableProps()} |
|
||||||
className="min-w-full divide-y divide-gray-200" |
|
||||||
> |
|
||||||
<thead className="bg-gray-300"> |
|
||||||
{headerGroups.map((headerGroup) => ( |
|
||||||
<tr {...headerGroup.getHeaderGroupProps()}> |
|
||||||
{headerGroup.headers.map((column) => ( |
|
||||||
<th |
|
||||||
{...column.getHeaderProps(column.getSortByToggleProps())} |
|
||||||
scope="col" |
|
||||||
className="cursor-pointer px-4 py-2 text-right text-xs" |
|
||||||
style={{ color: "#3287B9" }} |
|
||||||
> |
|
||||||
{column.render("Header")} |
|
||||||
<span> |
|
||||||
{column.isSorted |
|
||||||
? column.isSortedDesc |
|
||||||
? " 🔽" |
|
||||||
: " 🔼" |
|
||||||
: ""} |
|
||||||
</span> |
|
||||||
{/* not using */} |
|
||||||
{/* <div> |
|
||||||
{column.canFilter ? column.render('Filter') : null } |
|
||||||
</div> */} |
|
||||||
</th> |
|
||||||
))} |
|
||||||
</tr> |
|
||||||
))} |
|
||||||
</thead> |
|
||||||
|
|
||||||
<tbody |
|
||||||
{...getTableBodyProps()} |
|
||||||
className="bg-white divide-y divide-gray-200" |
|
||||||
> |
|
||||||
{/* not using */} |
|
||||||
{/* {rows.map((row) => { |
|
||||||
prepareRow(row) |
|
||||||
return( |
|
||||||
<tr {...row.getRowProps()}> |
|
||||||
{row.cells.map((cell) => { |
|
||||||
return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}> |
|
||||||
{cell.render('Cell')} |
|
||||||
</td> |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
) |
|
||||||
})} */} |
|
||||||
{page.map((row) => { |
|
||||||
prepareRow(row); |
|
||||||
return ( |
|
||||||
<tr {...row.getRowProps()}> |
|
||||||
{row.cells.map((cell) => { |
|
||||||
return ( |
|
||||||
<td |
|
||||||
{...cell.getCellProps()} |
|
||||||
className="px-4 py-4 whitespace-nowrap text-sm" |
|
||||||
role="cell" |
|
||||||
style={{ color: "#00253A" }} |
|
||||||
> |
|
||||||
{cell.render("Cell")} |
|
||||||
</td> |
|
||||||
); |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
); |
|
||||||
})} |
|
||||||
|
|
||||||
{/* not using */} |
|
||||||
{/* {firstPageRows.map((row) => { |
|
||||||
prepareRow(row); |
|
||||||
return ( |
|
||||||
<tr {...row.getRowProps()}> |
|
||||||
{row.cells.map((cell) => { |
|
||||||
return ( |
|
||||||
<td |
|
||||||
{...cell.getCellProps()} |
|
||||||
className="px-4 py-4 whitespace-nowrap text-sm" |
|
||||||
role="cell" |
|
||||||
style={{ color: "#00253A" }} |
|
||||||
> |
|
||||||
{cell.render("Cell")} |
|
||||||
</td> |
|
||||||
); |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
); |
|
||||||
})} */} |
|
||||||
</tbody> |
|
||||||
|
|
||||||
<tfoot |
|
||||||
className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`} |
|
||||||
> |
|
||||||
{footerGroups.map((footerGroup) => ( |
|
||||||
<tr {...footerGroup.getFooterGroupProps()}> |
|
||||||
{footerGroup.headers.map((column) => ( |
|
||||||
<td |
|
||||||
{...column.getFooterProps} |
|
||||||
className="px-4 py-2 text-right text-xs" |
|
||||||
style={{ color: "#3287B9" }} |
|
||||||
> |
|
||||||
{column.render("Footer")} |
|
||||||
</td> |
|
||||||
))} |
|
||||||
</tr> |
|
||||||
))} |
|
||||||
</tfoot> |
|
||||||
</table> |
|
||||||
|
|
||||||
<pre> |
|
||||||
<code> |
|
||||||
{JSON.stringify( |
|
||||||
{ |
|
||||||
selectedFlatRows: selectedFlatRows.map((row) => row.original), |
|
||||||
}, |
|
||||||
null, |
|
||||||
2 |
|
||||||
)} |
|
||||||
</code> |
|
||||||
</pre> |
|
||||||
|
|
||||||
<div> |
|
||||||
<span> |
|
||||||
Page{" "} |
|
||||||
<strong> |
|
||||||
{pageIndex + 1} of {pageOptions.length} |
|
||||||
</strong> |
|
||||||
{""} |
|
||||||
</span> |
|
||||||
|
|
||||||
<span> |
|
||||||
| Go to Page:{" "} |
|
||||||
<input |
|
||||||
type="number" |
|
||||||
defaultValue={pageIndex + 1} |
|
||||||
onChange={(e) => { |
|
||||||
const pageNumber = e.target.value |
|
||||||
? Number(e.target.value) - 1 |
|
||||||
: 0; |
|
||||||
gotoPage(pageNumber); |
|
||||||
}} |
|
||||||
style={{ width: "50px" }} |
|
||||||
/> |
|
||||||
</span> |
|
||||||
|
|
||||||
<select |
|
||||||
value={pageSize} |
|
||||||
onChange={(e) => setPageSize(Number(e.target.value))} |
|
||||||
> |
|
||||||
{[7, 10, 25, 50].map((pageSize) => ( |
|
||||||
<option key={pageSize} value={pageSize}> |
|
||||||
Show {pageSize} |
|
||||||
</option> |
|
||||||
))} |
|
||||||
</select> |
|
||||||
|
|
||||||
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}> |
|
||||||
{" "} |
|
||||||
{"<<"}{" "} |
|
||||||
</button> |
|
||||||
|
|
||||||
<button |
|
||||||
className="bg-blue-400 m-2 rounded text-white p-2" |
|
||||||
onClick={() => previousPage()} |
|
||||||
disabled={!canPreviousPage} |
|
||||||
> |
|
||||||
Previous |
|
||||||
</button> |
|
||||||
<button |
|
||||||
className="bg-blue-400 m-2 rounded text-white p-2" |
|
||||||
onClick={() => nextPage()} |
|
||||||
disabled={!canNextPage} |
|
||||||
> |
|
||||||
Next |
|
||||||
</button> |
|
||||||
|
|
||||||
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}> |
|
||||||
{" "} |
|
||||||
{">>"}{" "} |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
</> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default BasicTable; |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
export function OrderLevel({ value }) { |
|
||||||
return ( |
|
||||||
<div className="p-2 rounded-3xl border border-gray-300 w-fit"> |
|
||||||
{(() => { |
|
||||||
switch(value) { |
|
||||||
case 1: |
|
||||||
return <div className="flex flex-row items-center justify-center "> |
|
||||||
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65FFAD" }}></span> |
|
||||||
<span style={{ color: "#00253A" }} className="">وضعیت عادی</span> |
|
||||||
</div>; |
|
||||||
case 2: |
|
||||||
return <div className="flex flex-row items-center justify-center "> |
|
||||||
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FF6565" }}></span> |
|
||||||
<span style={{ color: "#00253A" }} className="">اعلان سطح هشدار</span> |
|
||||||
</div>; |
|
||||||
case 3: |
|
||||||
return <div className="flex flex-row items-center justify-center "> |
|
||||||
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65DAFF" }}></span> |
|
||||||
<span style={{ color: "#00253A" }} className="">بررسی و پیگیری</span> |
|
||||||
</div>; |
|
||||||
case 4: |
|
||||||
return <div className="flex flex-row items-center justify-center "> |
|
||||||
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FFEA65" }}></span> |
|
||||||
<span style={{ color: "#00253A" }} className="">وضعیت بحرانی</span> |
|
||||||
</div>; |
|
||||||
default: |
|
||||||
return <div className="flex flex-row items-center justify-center "> |
|
||||||
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#CCFF65" }}></span> |
|
||||||
<span style={{ color: "#00253A" }} className="">وضعیت پایدار</span> |
|
||||||
</div>; |
|
||||||
} |
|
||||||
})()} |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,55 +0,0 @@ |
|||||||
export function OrderStatus({ value }) { |
|
||||||
return ( |
|
||||||
<div className=""> |
|
||||||
{(() => { |
|
||||||
if (value === 1) { |
|
||||||
return ( |
|
||||||
<span |
|
||||||
style={{ backgroundColor: "#E2FFE377", color: "#00613D" }} |
|
||||||
className="p-2 rounded" |
|
||||||
> |
|
||||||
ارسال شده |
|
||||||
</span> |
|
||||||
); |
|
||||||
} else if (value === 2) { |
|
||||||
return ( |
|
||||||
<span |
|
||||||
style={{ backgroundColor: "#FFF78733", color: "#ECF150" }} |
|
||||||
className="p-2 rounded" |
|
||||||
> |
|
||||||
رسیدگی |
|
||||||
</span> |
|
||||||
); |
|
||||||
} else if (value === 3) { |
|
||||||
return ( |
|
||||||
<span |
|
||||||
style={{ backgroundColor: "#FFD8CC33", color: "#611100" }} |
|
||||||
className="p-2 rounded" |
|
||||||
> |
|
||||||
لغو شده |
|
||||||
</span> |
|
||||||
); |
|
||||||
} else if (value === 4) { |
|
||||||
return ( |
|
||||||
<span |
|
||||||
style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }} |
|
||||||
className="p-2 rounded" |
|
||||||
> |
|
||||||
پیگیری |
|
||||||
</span> |
|
||||||
); |
|
||||||
} else { |
|
||||||
return ( |
|
||||||
<span |
|
||||||
style={{ backgroundColor: "#DBCCFF33", color: "#440061" }} |
|
||||||
className="p-2 rounded" |
|
||||||
> |
|
||||||
خطری |
|
||||||
</span> |
|
||||||
); |
|
||||||
} |
|
||||||
})()}{" "} |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,84 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
const TabBar = () => { |
|
||||||
const tabs = [ |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
]; |
|
||||||
return ( |
|
||||||
<ul |
|
||||||
className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch" |
|
||||||
onMouseDown={(e) => { |
|
||||||
const slider = window.document.querySelector(".tabbar"); |
|
||||||
window.isDown = true; |
|
||||||
window.startX = e.pageX - slider.offsetLeft; |
|
||||||
window.scrollLeft = slider.scrollLeft; |
|
||||||
}} |
|
||||||
onMouseLeave={(e) => { |
|
||||||
window.isDown = false; |
|
||||||
}} |
|
||||||
onMouseUp={(e) => { |
|
||||||
window.isDown = false; |
|
||||||
}} |
|
||||||
onMouseMove={(e) => { |
|
||||||
const slider = window.document.querySelector(".tabbar"); |
|
||||||
if (!window.isDown) return; |
|
||||||
e.preventDefault(); |
|
||||||
const x = e.pageX - slider.offsetLeft; |
|
||||||
const walk = (x - window.startX) * 1; |
|
||||||
slider.scrollLeft = window.scrollLeft - walk; |
|
||||||
}} |
|
||||||
> |
|
||||||
{tabs.map((el) => ( |
|
||||||
<li className="mr-2 "> |
|
||||||
<span |
|
||||||
onClick={(e) => { |
|
||||||
if (window.isDown) return e.preventDefault(); |
|
||||||
///do here
|
|
||||||
}} |
|
||||||
aria-current="page" |
|
||||||
className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500" |
|
||||||
> |
|
||||||
<span className="p-2"> |
|
||||||
{el} <span className="p-2">x</span> |
|
||||||
</span> |
|
||||||
</span> |
|
||||||
</li> |
|
||||||
))} |
|
||||||
</ul> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default TabBar; |
|
||||||
|
Before Width: | Height: | Size: 489 B |
|
Before Width: | Height: | Size: 472 B |
@ -1,64 +0,0 @@ |
|||||||
import { format } from "date-fns"; |
|
||||||
|
|
||||||
import Table, { SelectColumnFilter } from "./BasicTable"; // new
|
|
||||||
|
|
||||||
import { ColumnFilter } from "./ColumnFilter"; |
|
||||||
|
|
||||||
import { OrderStatus } from "./OrderStatus"; |
|
||||||
import { OrderLevel } from "./OrderLevel"; |
|
||||||
import { Buttons } from "./Buttons"; |
|
||||||
import { EditButtons } from "./EditButtons"; |
|
||||||
|
|
||||||
export const COLUMNS = [ |
|
||||||
{ |
|
||||||
Header: "نام و نام خانوادگی", |
|
||||||
Footer: "نام و نام خانوادگی", |
|
||||||
accessor: "name", |
|
||||||
disableSortBy: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "تاریخ سفارش", |
|
||||||
Footer: "تاریخ سفارش", |
|
||||||
accessor: "order-date", |
|
||||||
Cell: ({ value }) => { |
|
||||||
return format(new Date(value), "dd/MM/yyyy"); |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "مبلغ سفارش", |
|
||||||
Footer: "مبلغ سفارش", |
|
||||||
accessor: "order-price", |
|
||||||
Filter: ColumnFilter, |
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "شماره سفارش", |
|
||||||
Footer: "شماره سفارش", |
|
||||||
accessor: "order-number", |
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "شغل کاربر", |
|
||||||
Footer: "شغل کاربر", |
|
||||||
accessor: "user-job", |
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "وضعیت سفارش", |
|
||||||
Footer: "وضعیت سفارش", |
|
||||||
accessor: "order-status", |
|
||||||
Cell: OrderStatus, |
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: "سطح اهمیت", |
|
||||||
Footer: "سطح اهمیت", |
|
||||||
accessor: "order-level", |
|
||||||
Cell: OrderLevel, |
|
||||||
// Filter: SelectColumnFilter,
|
|
||||||
// new
|
|
||||||
}, |
|
||||||
{ |
|
||||||
Header: EditButtons, |
|
||||||
Footer: "ویرایش", |
|
||||||
accessor: "edit", |
|
||||||
Cell: Buttons, |
|
||||||
disableSortBy: true, |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
Before Width: | Height: | Size: 725 B |
|
Before Width: | Height: | Size: 570 B |
@ -1,154 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import BasicTable from "./BasicTable"; |
|
||||||
// import useDraggableScroll from "use-draggable-scroll";
|
|
||||||
|
|
||||||
const ReactTable3 = ({ breadCrumbs, subTitle, title }) => { |
|
||||||
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"> |
|
||||||
<span |
|
||||||
className={`cursor-pointer text-xs hover:text-blue-900 ${ |
|
||||||
breadCrumb.active ? "text-blue-900" : "text-blue-400" |
|
||||||
}`}
|
|
||||||
> |
|
||||||
{breadCrumb.name} |
|
||||||
</span> |
|
||||||
{Number(index) !== breadCrumbs.length - 1 && ( |
|
||||||
<div |
|
||||||
className={`mx-2 ${ |
|
||||||
breadCrumb.active ? "text-blue-900" : "text-blue-400" |
|
||||||
}`}
|
|
||||||
> |
|
||||||
{" > "} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
|
|
||||||
<div className="my-7"> |
|
||||||
{/* page Title */} |
|
||||||
<div className="flex flex-row items-center"> |
|
||||||
<div className="w-1 h-5 bg-blue-500 rounded ml-1"></div> |
|
||||||
<h2 className="text-base text-blue-900">{title}</h2> |
|
||||||
</div> |
|
||||||
{/* page Title */} |
|
||||||
<div className="flex flex-row items-center mt-4"> |
|
||||||
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div> |
|
||||||
<h2 className="text-sm">{subTitle}</h2> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<Tabbar /> |
|
||||||
<BasicTable /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
window.isDown = false; |
|
||||||
export default ReactTable3; |
|
||||||
function Tabbar() { |
|
||||||
const tabs = [ |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
"تست۱", |
|
||||||
]; |
|
||||||
return ( |
|
||||||
<ul |
|
||||||
className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch" |
|
||||||
onMouseDown={(e) => { |
|
||||||
const slider = window.document.querySelector(".tabbar"); |
|
||||||
window.isDown = true; |
|
||||||
window.startX = e.pageX - slider.offsetLeft; |
|
||||||
window.scrollLeft = slider.scrollLeft; |
|
||||||
}} |
|
||||||
onMouseLeave={(e) => { |
|
||||||
window.isDown = false; |
|
||||||
}} |
|
||||||
onMouseUp={(e) => { |
|
||||||
window.isDown = false; |
|
||||||
}} |
|
||||||
onMouseMove={(e) => { |
|
||||||
const slider = window.document.querySelector(".tabbar"); |
|
||||||
if (!window.isDown) return; |
|
||||||
e.preventDefault(); |
|
||||||
const x = e.pageX - slider.offsetLeft; |
|
||||||
const walk = (x - window.startX) * 1; |
|
||||||
slider.scrollLeft = window.scrollLeft - walk; |
|
||||||
}} |
|
||||||
> |
|
||||||
{tabs.map((el) => ( |
|
||||||
<li className="mr-2 "> |
|
||||||
<span |
|
||||||
onClick={(e) => { |
|
||||||
if (window.isDown) return e.preventDefault(); |
|
||||||
///do here
|
|
||||||
}} |
|
||||||
aria-current="page" |
|
||||||
className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500" |
|
||||||
> |
|
||||||
<span className="p-2"> |
|
||||||
{el} <span className="p-2">x</span> |
|
||||||
</span> |
|
||||||
</span> |
|
||||||
</li> |
|
||||||
))} |
|
||||||
</ul> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
ReactTable3.defaultProps = { |
|
||||||
breadCrumbs: [ |
|
||||||
{ |
|
||||||
name: "صفحه اصلی", |
|
||||||
active: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "آمار و گزارشات", |
|
||||||
active: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "فروش محصولات", |
|
||||||
active: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "سال 1400", |
|
||||||
active: true, |
|
||||||
}, |
|
||||||
], |
|
||||||
|
|
||||||
title: "میزان فروش محصولات", |
|
||||||
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر", |
|
||||||
}; |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
.customeClass1 .customeClass2 input { |
|
||||||
display: none !important; |
|
||||||
} |
|
||||||
.customeClass1 .customeClass2 span { |
|
||||||
display: none !important; |
|
||||||
} |
|
||||||
.no-scrollbar { |
|
||||||
-ms-overflow-style: none; /* IE and Edge */ |
|
||||||
scrollbar-width: none; /* Firefox */ |
|
||||||
} |
|
||||||
.tabbar{ |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.active2 ,.active2 li a{ |
|
||||||
cursor: move !important; |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 658 B |
|
Before Width: | Height: | Size: 543 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 7.7 KiB |
Loading…
Reference in new issue