edited version

master
mahdi 3 years ago
parent f65096ccfe
commit c4ccca28d0
  1. 163
      src/components/ReactTable4/BasicTable.js
  2. 33
      src/components/ReactTable4/EditButtons.js
  3. 12
      src/components/ReactTable4/double-left-arrow.svg
  4. 2
      src/components/ReactTable4/index.js
  5. 8
      src/components/ReactTable4/left-arrow.svg
  6. 6
      src/components/ReactTable4/right-arrow.svg
  7. 12
      src/components/Sidebar/SidebarDesign2/index.js

@ -19,6 +19,10 @@ import { GlobalFilter } from "./GlobalFilter";
import { Checkbox } from "./Checkbox"; import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json"; import MOCK_DATA from "./MOCK_DATA.json";
import dobleLeftArrow from "./double-left-arrow.svg";
import leftArrow from "./left-arrow.svg";
import rightArrow from "./right-arrow.svg";
// This is a custom filter UI for selecting // This is a custom filter UI for selecting
// a unique option from a list // a unique option from a list
export function SelectColumnFilter({ export function SelectColumnFilter({
@ -146,7 +150,8 @@ const BasicTable = () => {
// const firstPageRows = rows.slice(0, 10); // const firstPageRows = rows.slice(0, 10);
return ( return (
<> <>
<div className="customeClass1"> {/* filter */}
{/* <div className="customeClass1">
{headerGroups.map((headerGroup) => {headerGroups.map((headerGroup) =>
headerGroup.headers.map((column) => headerGroup.headers.map((column) =>
column.Filter ? ( column.Filter ? (
@ -156,71 +161,7 @@ const BasicTable = () => {
) : null ) : null
) )
)} )}
</div> </div> */}
<div className="flex flex-row items-center justify-end mb-3 mx-4">
{/* search box */}
{/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
{/* pagination */}
<div
className="border border-blue-400 rounded-sm py-1 px-2 flex flex-items-center"
style={{}}
>
{/* go to page */}
<div>
<input
className="ml-1 text-xs p-1 rounded border-blue-400"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>
<span className={`text-xs`} style={{ color: "#65A9FF" }}>
{" "}
برو به صفحه{" "}
</span>
</div>
{/* */}
<div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
{/* arrows */}
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
{"<<"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
{"<"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()}
disabled={!canNextPage}
>
{">"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
{">>"}
</button>
</div>
</div>
{/* */} {/* */}
{/* toggle columns */} {/* toggle columns */}
{/* <div> {/* <div>
@ -238,6 +179,75 @@ const BasicTable = () => {
</div> */} </div> */}
{/* Change Column Order */} {/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */} {/* <button onClick={changeOrder}> Change Column Order </button> */}
<div className="flex flex-row items-center justify-end mb-3 mx-4">
{/* search box */}
<div
className="rounded-md py-2 px-4 flex flex-row flex-items-center"
style={{ backgroundColor: "#F1F6FF" }}
>
{/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
{/* pagination */}
<div className="flex flex-row flex-items-center bg-white p-1">
{/* go to page */}
<div>
<input
className="ml-1 text-xs p-1 rounded border-blue-400"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>
<span className={`text-xs`} style={{ color: "#65A9FF" }}>
{" "}
برو به صفحه{" "}
</span>
</div>
{/* */}
<div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
{/* arrows */}
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
<img src={dobleLeftArrow} />
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
{"<"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()}
disabled={!canNextPage}
>
{">"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
{">>"}
</button>
{/* dobleLeftArrow
leftArrow
import rightArrow from "./right-arrow.svg"; */}
</div>
</div>
</div>
<table <table
{...getTableProps()} {...getTableProps()}
className="min-w-full divide-y divide-gray-200" className="min-w-full divide-y divide-gray-200"
@ -334,12 +344,31 @@ const BasicTable = () => {
</pre> </pre>
<div className="mt-3 "> <div className="mt-3 ">
<span className="text-sm ml-4"> {/* <span className="text-sm ml-4">
صفحه{" "} صفحه{" "}
<strong className="text-indigo-500"> <strong className="text-indigo-500">
{pageIndex + 1} از {pageOptions.length} {pageIndex + 1} از {pageOptions.length}
</strong> </strong>
{""} {""}
</span> */}
<span className="text-sm ml-4">
صفحه{" "}
<strong className="text-indigo-500">
<input
className="ml-1 text-xs p-1 rounded border-blue-400"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>{" "}
از {pageOptions.length}
</strong>
{""}
</span> </span>
<select <select

@ -10,10 +10,7 @@ export function EditButtons({ buttons }) {
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
{buttons.map((button, index) => ( {buttons.map((button, index) => (
<div> <div>
<button <div
id="dropdownButton"
data-dropdown-toggle="dropdown"
type="button"
className={`flex flex-row items-center justify-around p-1 rounded-md bg-opacity-30 mx-1 ${ className={`flex flex-row items-center justify-around p-1 rounded-md bg-opacity-30 mx-1 ${
button.border button.border
} ${button.borderColor} ${ } ${button.borderColor} ${
@ -36,22 +33,6 @@ export function EditButtons({ buttons }) {
button.title === null ? "mr-0" : "mx-2" button.title === null ? "mr-0" : "mx-2"
}`} }`}
/> />
</button>
<div
id="dropdown"
className="hidden z-10 w-44 text-base list-none bg-red-600 rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
>
{button.buttonSubItems === !null &&
button.buttonSubItems.map((buttonSubItem, i) => (
<p>{buttonSubItem.title}</p>
))}
{/* <ul className="py-1" aria-labelledby="dropdownButton">
{button.buttonSubItems === !null &&
button.buttonSubItems.map((buttonSubItem, i) => (
<li className="bg-red-400">{buttonSubItem.title}</li>
))}
</ul> */}
</div> </div>
</div> </div>
))} ))}
@ -98,18 +79,6 @@ EditButtons.defaultProps = {
{ {
title: "دراپ داون 1", title: "دراپ داون 1",
}, },
{
title: "دراپ داون 2",
},
{
title: "دراپ داون 3",
},
{
title: "دراپ داون 4",
},
{
title: "دراپ داون 5",
},
], ],
}, },
], ],

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.988" height="11.988" viewBox="0 0 15.988 11.988">
<g id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" transform="translate(15.988 11.988) rotate(180)">
<g id="arrow-right" transform="translate(4)">
<path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
<g id="arrow-right-2" data-name="arrow-right">
<path id="Vector-3" data-name="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -42,7 +42,7 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
<h2 className="text-sm">{subTitle}</h2> <h2 className="text-sm">{subTitle}</h2>
</div> </div>
</div> </div>
<Tabbar /> {/* <Tabbar /> */}
<BasicTable /> <BasicTable />
</div> </div>
); );

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.988" height="11.988" viewBox="0 0 11.988 11.988">
<g id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" transform="translate(11.988 11.988) rotate(180)">
<g id="arrow-right">
<path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 622 B

@ -0,0 +1,6 @@
<svg id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" xmlns="http://www.w3.org/2000/svg" width="11.988" height="11.988" viewBox="0 0 11.988 11.988">
<g id="arrow-right">
<path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 552 B

@ -69,7 +69,11 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
className={`flex flex-row flex-1 items-center cursor-pointer hover:bg-blue-100 rounded-md p-2 transition duration-300 className={`flex flex-row flex-1 items-center cursor-pointer hover:bg-blue-100 rounded-md p-2 transition duration-300
${activeDropdown === menuItem ? "bg-blue-100" : ""} ${activeDropdown === menuItem ? "bg-blue-100" : ""}
`} `}
onClick={() => setActiveDropdown(activeDropdown === menuItem ? null : menuItem)} onClick={() =>
setActiveDropdown(
activeDropdown === menuItem ? null : menuItem
)
}
> >
<img src={menuItem.icon} alt="" className="w-7 h-7" /> <img src={menuItem.icon} alt="" className="w-7 h-7" />
<p className="text-blue-800 text-sm flex-1 mx-2"> <p className="text-blue-800 text-sm flex-1 mx-2">
@ -117,7 +121,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
- -
</div> </div>
<div <div
className="flex flex-row items-center justify-between flex-1 hover:bg-indigo-300 p-1 rounded cursor-pointer transition duration-300 ease-linear" className="flex flex-row items-center justify-between flex-1 hover:bg-indigo-300 p-1 rounded cursor-pointer transition duration-300 ease-linear"
onClick={() => setActiveDropdown(menuSubItem)} onClick={() => setActiveDropdown(menuSubItem)}
> >
<p className="text-xs transition duration-300"> <p className="text-xs transition duration-300">
@ -137,8 +141,8 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
))} ))}
</div> </div>
))} ))}
{ Number(i) !== items.length -1 && ( {Number(i) !== items.length - 1 && (
<div className="border border-gray-100 my-2"></div> <div className="border border-gray-100 my-2"></div>
)} )}
</div> </div>
))} ))}

Loading…
Cancel
Save