added

3 years ago · a2a7ffb1ed
parent 88c0fd870f
commit a2a7ffb1ed
10 changed files with 198 additions and 72 deletions
--- a/src/components/ProductSuggestion/index.js
+++ b/src/components/ProductSuggestion/index.js
@ -19,7 +19,12 @@ const ProductSuggestion = ({ suggestions, selected }) => {
            <div
              className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer transition-all ease-in-out duration-500
                ${selectedProduct === suggestion ? "bg-white" : ""}`}
-              onClick={() => setSelectedProduct(suggestion)}
+              // onClick={() => setSelectedProduct(suggestion)}
+              onClick={() =>
+                setSelectedProduct(
+                  selectedProduct === suggestion ? null : suggestion
+                )
+              }
            >
              <img
                src={suggestion.productImage}
--- a/src/components/ReactTable4/BasicTable.js
+++ b/src/components/ReactTable4/BasicTable.js
@ -16,13 +16,14 @@ import {

 import { COLUMNS } from "./columns";
 import { GlobalFilter } from "./GlobalFilter";
+
 import { Pagination } from "./Pagination";
 import { GoToPage } from "./GoToPage";
+import { Settings } from "./Settings";
+
 import { Checkbox } from "./Checkbox";
 import MOCK_DATA from "./MOCK_DATA.json";

-import settings from "./settings.svg";
-
 // This is a custom filter UI for selecting
 // a unique option from a list
 export function SelectColumnFilter({
@ -181,27 +182,25 @@ const BasicTable = ({ settingsIcon }) => {
      <div className="flex flex-row items-center justify-end">
        {/* left box */}
        <div
-          className="rounded-md p-2 flex flex-row flex-items-center"
+          className="rounded-md p-2 flex flex-row items-center"
          style={{ backgroundColor: "#F1F6FF" }}
        >
          {/* search box */}
          <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
          {/* pagination */}
          <div
-            className="flex flex-row flex-items-center p-1 rounded"
+            className="flex flex-row items-center p-1 rounded"
            style={{ backgroundColor: "#F9FBFF" }}
          >
            {/* go to page */}
-            <div>
-              <GoToPage
-                pageIndex={pageIndex}
-                gotoPage={gotoPage}
-                pageOptions={pageOptions}
-              />
-            </div>
+            <GoToPage
+              pageIndex={pageIndex}
+              gotoPage={gotoPage}
+              pageOptions={pageOptions}
+            />
            {/* vertical line */}
            <div
-              className={`w-0.5 my-1 mx-2`}
+              className={`w-0.5 h-4 mr-2`}
              style={{ backgroundColor: "#65A9FF" }}
            ></div>
            {/* arrows */}
@ -215,14 +214,7 @@ const BasicTable = ({ settingsIcon }) => {
            />
          </div>
          {/* settings icon */}
-          {settingsIcon && (
-            <div
-              style={{ backgroundColor: "#F9FBFF" }}
-              className="mr-2 flex flex-col items-center justify-center p-1 rounded"
-            >
-              <img src={settings} className="w-5 h-5 cursor-pointer" />
-            </div>
-          )}
+          {settingsIcon && <Settings />}
        </div>
      </div>
      <table
@ -387,5 +379,5 @@ function renderRowSubComponent({ row }) {
 export default BasicTable;

 BasicTable.defaultProps = {
-  settingsIcon: false,
+  settingsIcon: true,
 };
--- a/src/components/ReactTable4/Buttons.js
+++ b/src/components/ReactTable4/Buttons.js
@ -7,7 +7,7 @@ import { useState } from "react";
 export function Buttons({ row }) {
  const [activeDetails, setActiveDetails] = useState(null);
  return (
-    <div className="flex flex-row items-center justify-end">
+    <div className="flex flex-row items-center justify-end mx-1">
      <button
        className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 mx-1"
        onClick={() => setActiveDetails(!activeDetails)}
--- a/src/components/ReactTable4/DropDown.js
+++ b/src/components/ReactTable4/DropDown.js
@ -0,0 +1,72 @@
+import React from "react";
+
+export const DropDown = ({}) => {
+  return (
+    <div>
+      <button
+        id="dropdownButton"
+        data-dropdown-toggle="dropdown"
+        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        type="button"
+      >
+        Dropdown button{" "}
+        <svg
+          className="ml-2 w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 9l-7 7-7-7"
+          ></path>
+        </svg>
+      </button>
+
+      <div
+        id="dropdown"
+        className="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+      >
+        <ul className="py-1" aria-labelledby="dropdownButton">
+          <li>
+            <a
+              href="#"
+              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+            >
+              Dashboard
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+            >
+              Settings
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+            >
+              Earnings
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+            >
+              Sign out
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default DropDown;
--- a/src/components/ReactTable4/EditButtons.js
+++ b/src/components/ReactTable4/EditButtons.js
@ -3,15 +3,16 @@ import React, { useState } from "react";
 import filter from "./filter.svg";
 import plus from "./plus.svg";
 import more from "./more2.svg";
+import DropDown from "./DropDown";

 export function EditButtons({ buttons }) {
  const [selectedButton, setSelectedButton] = useState(null);
  return (
-    <div className="flex flex-row items-center justify-end">
+    <div className="flex flex-row items-center justify-end ">
      {buttons.map((button, index) => (
        <div>
          <div
-            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.borderColor} ${
              selectedButton === button ? "border" : "border-0"
@ -36,6 +37,7 @@ export function EditButtons({ buttons }) {
          </div>
        </div>
      ))}
+      <div>{selectedButton?.components}</div>
    </div>
  );
 }
@ -51,8 +53,7 @@ EditButtons.defaultProps = {
      border: "border-b-4",
      borderColor: "#3686EC",
      padding: "4px 7px",
-      components: "d",
-      buttonSubItems: [],
+      // components: "d",
    },
    {
      logo: filter,
@ -62,8 +63,7 @@ EditButtons.defaultProps = {
      backgroundColor: "#F3F8FF",
      border: null,
      borderColor: null,
-      components: "a",
-      buttonSubItems: [],
+      // components: "a",
    },
    {
      logo: more,
@ -74,22 +74,7 @@ EditButtons.defaultProps = {
      backgroundColor: "#F3F8FF",
      border: null,
      borderColor: null,
-      components: "a",
-      buttonSubItems: [
-        {
-          title: "دراپ داون 1",
-        },
-      ],
+      // components: <DropDown />,
    },
  ],
 };
-
-// {
-//   logo: settings,
-//   width: "w-5",
-//   height: "h-5",
-//   title: null,
-//   textColor: null,
-//   backgroundColor: "#F3F8FF",
-//   components: "b",
-// },
--- a/src/components/ReactTable4/GlobalFilter.js
+++ b/src/components/ReactTable4/GlobalFilter.js
@ -2,9 +2,10 @@ import React, { useState } from "react";
 import { useAsyncDebounce } from "react-table";

 import search from "./search-normal.svg";
+import settings from "./settings.svg";

 export const GlobalFilter = ({ filter, setFilter }) => {
-  const [openModal, setOpenModal] = useState(true);
+  // const [activeSearchBox, setActiveSearchBox] = useState(null);

  const [value, setValue] = useState(filter);

@ -13,9 +14,13 @@ export const GlobalFilter = ({ filter, setFilter }) => {
  }, 400);

  return (
-    <div className="flex flex-row-reverse items-center relative ml-2">
+    <div
+      className="flex flex-row-reverse items-center relative ml-2"
+      // onClick={() => setActiveSearchBox(!activeSearchBox)}
+    >
      <img
        src={search}
+        // src={activeSearchBox ? { search } : { settings }}
        alt=""
        className="w-4 h-4 absolute left-2 cursor-pointer"
      />
@ -26,25 +31,9 @@ export const GlobalFilter = ({ filter, setFilter }) => {
          onChange(e.target.value);
        }}
        type="text"
-        // placeholder="نام کالا را جستجو کنید..."
-        className="text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border"
+        className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
        style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
      />
    </div>
  );
 };
-
-{
-  /* <div className="flex flex-row-reverse items-center relative w-full">
-              <img
-                src={lightGraySearchIcon}
-                alt=""
-                className="w-4 h-4 absolute left-3"
-              />
-              <input
-                type="text"
-                placeholder="نام کالا را جستجو کنید..."
-                className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor	placeholder-gray-400 focus:outline-none"
-              />
-            </div> */
-}
--- a/src/components/ReactTable4/GoToPage.js
+++ b/src/components/ReactTable4/GoToPage.js
@ -2,17 +2,16 @@ import React from "react";

 export const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => {
  return (
-    <span className="text-xs text-blue-400">
+    <span className="text-xs text-blue-400 mr-1">
      صفحه{" "}
      <input
-        className="ml-1 text-xs p-1 rounded border-blue-400"
+        className="ml-1 text-xs p-1 rounded border-blue-400 w-9"
        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}
    </span>
--- a/src/components/ReactTable4/MOCK_DATA.json
+++ b/src/components/ReactTable4/MOCK_DATA.json
@ -1,4 +1,64 @@
 [
+  {
+    "name": "mahdi",
+    "order-date": "1399/09/27",
+    "order-price": 25,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "مهدی"
+  },
+  {
+    "name": "مهدی",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "mahdimahdi"
+  },
+  {
+    "name": "mahdi",
+    "order-date": "1399/09/27",
+    "order-price": 25,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "مهدی"
+  },
+  {
+    "name": "مهدی",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "mahdimahdi"
+  },
+  {
+    "name": "mahdi",
+    "order-date": "1399/09/27",
+    "order-price": 25,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "مهدی"
+  },
+  {
+    "name": "مهدی",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "mahdimahdi"
+  },
  {
    "name": "mahdi",
    "order-date": "1399/09/27",
--- a/src/components/ReactTable4/Pagination.js
+++ b/src/components/ReactTable4/Pagination.js
@ -12,9 +12,9 @@ export const Pagination = ({
  nextPage,
 }) => {
  return (
-    <div className="flex flex-row items-center">
+    <div className="flex flex-row items-center space-x-1">
      <button
-        className="rounded py-1 px-2 mx-1 text-xs font-bold"
+        className="rounded py-1 px-2  text-xs font-bold"
        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
        onClick={() => gotoPage(0)}
        disabled={!canPreviousPage}
@ -22,7 +22,7 @@ export const Pagination = ({
        <img src={dobleLeftArrow} className="rotate-180 w-4 h-4" />
      </button>
      <button
-        className="rounded py-1 px-2 mx-1 text-xs font-bold"
+        className="rounded py-1 px-2  text-xs font-bold"
        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
        onClick={() => previousPage()}
        disabled={!canPreviousPage}
@ -30,7 +30,7 @@ export const Pagination = ({
        <img src={rightArrow} className="w-3 h-3" />
      </button>
      <button
-        className="rounded py-1 px-2 mx-1 text-xs font-bold"
+        className="rounded py-1 px-2  text-xs font-bold"
        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
        onClick={() => nextPage()}
        disabled={!canNextPage}
@ -38,7 +38,7 @@ export const Pagination = ({
        <img src={leftArrow} className="w-3 h-3" />
      </button>
      <button
-        className="rounded py-1 px-2 mx-1 text-xs font-bold"
+        className="rounded py-1 px-2  text-xs font-bold"
        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
        onClick={() => gotoPage(pageCount - 1)}
        disabled={!canNextPage}
@ -48,3 +48,14 @@ export const Pagination = ({
    </div>
  );
 };
+
+export default Pagination;
+
+// Pagination.defaultProps = {
+//   pagintaionButtons: [
+//     {
+//       image: { dobleLeftArrow },
+//       click: gotoPage(0),
+//     },
+//   ],
+// };
--- a/src/components/ReactTable4/Settings.js
+++ b/src/components/ReactTable4/Settings.js
@ -0,0 +1,13 @@
+import React from "react";
+import settings from "./settings.svg";
+
+export const Settings = ({}) => {
+  return (
+    <div
+      style={{ backgroundColor: "#F9FBFF" }}
+      className="mr-2 flex flex-col items-center justify-center p-1 rounded"
+    >
+      <img src={settings} className="w-6 h-6 cursor-pointer" />
+    </div>
+  );
+};