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

edited version

Browse Source
master
mahdi 3 years ago
parent f65096ccfe
commit c4ccca28d0
7 changed files with 132 additions and 104 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. 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

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

@ -19,6 +19,10 @@ import { GlobalFilter } from "./GlobalFilter";
import { Checkbox } from "./Checkbox";
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
// a unique option from a list
export function SelectColumnFilter({
@ -146,7 +150,8 @@ const BasicTable = () => {
// const firstPageRows = rows.slice(0, 10);
return (
<>
<div className="customeClass1">
{/* filter */}
{/* <div className="customeClass1">
{headerGroups.map((headerGroup) =>
headerGroup.headers.map((column) =>
column.Filter ? (
@ -156,71 +161,7 @@ const BasicTable = () => {
) : null
)
)}
</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>
</div> */}
{/* */}
{/* toggle columns */}
{/* <div>
@ -238,6 +179,75 @@ const BasicTable = () => {
</div> */}
{/* Change Column Order */}
{/* <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
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
@ -334,12 +344,31 @@ const BasicTable = () => {
</pre>
<div className="mt-3 ">
<span className="text-sm ml-4">
{/* <span className="text-sm ml-4">
صفحه{" "}
<strong className="text-indigo-500">
{pageIndex + 1} از {pageOptions.length}
</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>
<select

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

@ -10,10 +10,7 @@ export function EditButtons({ buttons }) {
<div className="flex flex-row items-center justify-end">
{buttons.map((button, index) => (
<div>
<button
id="dropdownButton"
data-dropdown-toggle="dropdown"
type="button"
<div
className={`flex flex-row items-center justify-around p-1 rounded-md bg-opacity-30 mx-1 ${
button.border
} ${button.borderColor} ${
@ -36,22 +33,6 @@ export function EditButtons({ buttons }) {
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>
))}
@ -98,18 +79,6 @@ EditButtons.defaultProps = {
{
title: "دراپ داون 1",
},
{
title: "دراپ داون 2",
},
{
title: "دراپ داون 3",
},
{
title: "دراپ داون 4",
},
{
title: "دراپ داون 5",
},
],
},
],

12
src/components/ReactTable4/double-left-arrow.svg
Unescape View File

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

After

Width:  |  Height:  |  Size: 1.1 KiB

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

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

8
src/components/ReactTable4/left-arrow.svg
Unescape View File

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

After

Width:  |  Height:  |  Size: 622 B

6
src/components/ReactTable4/right-arrow.svg
Unescape View File

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

After

Width:  |  Height:  |  Size: 552 B

12
src/components/Sidebar/SidebarDesign2/index.js
Unescape View File

@ -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
${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" />
<p className="text-blue-800 text-sm flex-1 mx-2">
@ -117,7 +121,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
-
</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)}
>
<p className="text-xs transition duration-300">
@ -137,8 +141,8 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
))}
</div>
))}
{ Number(i) !== items.length -1 && (
<div className="border border-gray-100 my-2"></div>
{Number(i) !== items.length - 1 && (
<div className="border border-gray-100 my-2"></div>
)}
</div>
))}

Write Preview
Loading…
Cancel
Save