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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 83
      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. 8
      src/components/Sidebar/SidebarDesign2/index.js

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

@ -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,15 +161,33 @@ const BasicTable = () => {
) : null ) : null
) )
)} )}
</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>
))}
</div> */}
{/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */}
<div className="flex flex-row items-center justify-end mb-3 mx-4"> <div className="flex flex-row items-center justify-end mb-3 mx-4">
{/* search box */} {/* search box */}
{/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
{/* pagination */}
<div <div
className="border border-blue-400 rounded-sm py-1 px-2 flex flex-items-center" className="rounded-md py-2 px-4 flex flex-row flex-items-center"
style={{}} style={{ backgroundColor: "#F1F6FF" }}
> >
{/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
{/* pagination */}
<div className="flex flex-row flex-items-center bg-white p-1">
{/* go to page */} {/* go to page */}
<div> <div>
<input <input
@ -188,15 +211,15 @@ const BasicTable = () => {
<div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div> <div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
{/* arrows */} {/* arrows */}
<button <button
className="rounded py-1 px-2 mx-1 text-xs" className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(0)} onClick={() => gotoPage(0)}
disabled={!canPreviousPage} disabled={!canPreviousPage}
> >
{"<<"} <img src={dobleLeftArrow} />
</button> </button>
<button <button
className="rounded py-1 px-2 mx-1 text-xs" className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()} onClick={() => previousPage()}
disabled={!canPreviousPage} disabled={!canPreviousPage}
@ -204,7 +227,7 @@ const BasicTable = () => {
{"<"} {"<"}
</button> </button>
<button <button
className="rounded py-1 px-2 mx-1 text-xs" className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()} onClick={() => nextPage()}
disabled={!canNextPage} disabled={!canNextPage}
@ -212,32 +235,19 @@ const BasicTable = () => {
{">"} {">"}
</button> </button>
<button <button
className="rounded py-1 px-2 mx-1 text-xs" className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)} onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage} disabled={!canNextPage}
> >
{">>"} {">>"}
</button> </button>
{/* dobleLeftArrow
leftArrow
import rightArrow from "./right-arrow.svg"; */}
</div> </div>
</div> </div>
{/* */}
{/* toggle columns */}
{/* <div>
<div>
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
</div> </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 <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

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"> <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",
},
], ],
}, },
], ],

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> <h2 className="text-sm">{subTitle}</h2>
</div> </div>
</div> </div>
<Tabbar /> {/* <Tabbar /> */}
<BasicTable /> <BasicTable />
</div> </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

8
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 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">
@ -137,7 +141,7 @@ 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>

Write Preview
Loading…
Cancel
Save