edited version

3 years ago · c4ccca28d0
parent f65096ccfe
commit c4ccca28d0
7 changed files with 132 additions and 104 deletions
--- a/src/components/ReactTable4/BasicTable.js
+++ b/src/components/ReactTable4/BasicTable.js
@ -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,15 +161,33 @@ const BasicTable = () => {
            ) : 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> */}
+      {/* 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 */}
-        {/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
-        {/* pagination */}
        <div
-          className="border border-blue-400 rounded-sm py-1 px-2 flex flex-items-center"
-          style={{}}
+          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
@ -188,15 +211,15 @@ const BasicTable = () => {
            <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"
+              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"
+              className="rounded py-1 px-2 mx-1 text-xs font-bold"
              style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
              onClick={() => previousPage()}
              disabled={!canPreviousPage}
@ -204,7 +227,7 @@ const BasicTable = () => {
              {"<"}
            </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" }}
              onClick={() => nextPage()}
              disabled={!canNextPage}
@ -212,32 +235,19 @@ const BasicTable = () => {
              {">"}
            </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" }}
              onClick={() => gotoPage(pageCount - 1)}
              disabled={!canNextPage}
            >
              {">>"}
            </button>
+            {/* dobleLeftArrow
+leftArrow
+import rightArrow from "./right-arrow.svg"; */}
          </div>
        </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"
@ -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
--- a/src/components/ReactTable4/EditButtons.js
+++ b/src/components/ReactTable4/EditButtons.js
@ -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",
-        },
      ],
    },
  ],
--- a/src/components/ReactTable4/double-left-arrow.svg
+++ b/src/components/ReactTable4/double-left-arrow.svg
@ -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>
--- a/src/components/ReactTable4/index.js
+++ b/src/components/ReactTable4/index.js
@ -42,7 +42,7 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
          <h2 className="text-sm">{subTitle}</h2>
        </div>
      </div>
-      <Tabbar />
+      {/* <Tabbar /> */}
      <BasicTable />
    </div>
  );
--- a/src/components/ReactTable4/left-arrow.svg
+++ b/src/components/ReactTable4/left-arrow.svg
@ -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>
--- a/src/components/ReactTable4/right-arrow.svg
+++ b/src/components/ReactTable4/right-arrow.svg
@ -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>
--- a/src/components/Sidebar/SidebarDesign2/index.js
+++ b/src/components/Sidebar/SidebarDesign2/index.js
@ -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">
@ -137,7 +141,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
                  ))}
              </div>
            ))}
-            { Number(i) !== items.length -1 && (
+            {Number(i) !== items.length - 1 && (
              <div className="border border-gray-100 my-2"></div>
            )}
          </div>