update

3 years ago · 7b8a4ae1b2
parent d2ec08f10f
commit 7b8a4ae1b2
7 changed files with 248 additions and 73 deletions
--- a/src/App.js
+++ b/src/App.js
@ -80,12 +80,12 @@ function App() {
        {/* <AdvertisementDesign1 /> */}
        {/* <AdvertisementDesign2 /> */}
        {/* <AdvertisementDesign3 /> */}
-        <CourseChapter />
+        {/* <CourseChapter /> */}
        {/* <SidebarMenu /> */}
-        {/* <SidebarDesign2 /> */}
+        <SidebarDesign2 />
        {/* <SimpleBarChart /> */}
        {/* <SpecifiedDomainRadarChart /> */}
-        <Design1 />
+        {/* <Design1 /> */}
        {/* <Design2 /> */}
        {/* <TableDesign1 /> */}
        {/* <ReactTable2 /> */}
--- a/src/components/ReactTable3/BasicTable.js
+++ b/src/components/ReactTable3/BasicTable.js
@ -18,73 +18,14 @@ import { Checkbox } from "./Checkbox";

 import MOCK_DATA from "./MOCK_DATA.json";

-export function StatusPill({ value }) {
-  return (
-    <div className="">
-      {(() => {
-        if (value === 1) {
-          return (
-            <span
-              style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
-              className="p-2 rounded"
-            >
-              ارسال شده
-            </span>
-          );
-        } else if (value === 2) {
-          return (
-            <span
-              style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
-              className="p-2 rounded"
-            >
-              رسیدگی
-            </span>
-          );
-        } else if (value === 3) {
-          return (
-            <span
-              style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
-              className="p-2 rounded"
-            >
-              لغو شده
-            </span>
-          );
-        } else if (value === 4) {
-          return (
-            <span
-              style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
-              className="p-2 rounded"
-            >
-              پیگیری
-            </span>
-          );
-        } else {
-          return (
-            <span
-              style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
-              className="p-2 rounded"
-            >
-              خطری
-            </span>
-          );
-        }
-      })()}{" "}
-    </div>
-  );
-}
-
-// style={
-//   count > -1
-//     ? count === 0
-//       ? { color: "gray" }
-//       : { color: "green" }
-//     : { color: "red" }
-// }

 const BasicTable = () => {
  const columns = React.useMemo(() => COLUMNS, []);
  const data = useMemo(() => MOCK_DATA, []);

+//   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
+  const isEven = (idx) => idx % 2 === 0;
+
  const {
    getTableProps,
    getTableBodyProps,
@ -166,6 +107,8 @@ const BasicTable = () => {
            <input
              className="ml-1 text-xs"
              type="number"
+            //   disabled={!canNextPage}
+            //   disabled={!canPreviousPage}
              defaultValue={pageIndex + 1}
              onChange={(e) => {
                const pageNumber = e.target.value
@ -264,12 +207,14 @@ const BasicTable = () => {

        <tbody
          {...getTableBodyProps()}
-          className="bg-white divide-y divide-gray-200"
+          className="divide-y divide-gray-200 bg-white"
        >
-          {page.map((row) => {
+          {page.map((row, idx) => {
            prepareRow(row);
            return (
-              <tr {...row.getRowProps()}>
+              <tr {...row.getRowProps()} 
+            //   className={isEven(idx) ? "bg-gray-600" : "bg-white"}
+              >
                {row.cells.map((cell) => {
                  return (
                    <td
@ -316,6 +261,7 @@ const BasicTable = () => {
          )}
        </code>
      </pre> */}
+
      <div className="mt-3 ">
        <span className="text-sm ml-4">
          صفحه{" "}
--- a/src/components/ReactTable3/MOCK_DATA.json
+++ b/src/components/ReactTable3/MOCK_DATA.json
@ -6,7 +6,7 @@
    "order-number": "09120023100",
    "user-job": "مهندس ساختمان",
    "order-status": 1,
-    "order-level": 2
+    "order-level": 1
  },
  {
    "name": "مایکروویر سامسونگ مدل 2",
@ -24,8 +24,53 @@
    "order-number": "09120023100",
    "user-job": "مهندس ساختمان",
    "order-status": 3,
+    "order-level": 3
+  },
+  {
+    "name": "لپ تاپ مک بوک اپل",
+    "order-date": "1410/09/27",
+    "order-price": 73,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 4,
+    "order-level": 4
+  },
+  {
+    "name": "تبلت اپل",
+    "order-date": "1375/09/25",
+    "order-price": 96,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 5,
+    "order-level": 5
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 1",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 2",
+    "order-date": "1399/09/25",
+    "order-price": 26,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 2,
    "order-level": 2
  },
+  {
+    "name": "مایکروویر سامسونگ مدل 3",
+    "order-date": "1399/09/22",
+    "order-price": 44,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 3,
+    "order-level": 3
+  },
  {
    "name": "لپ تاپ مک بوک اپل",
    "order-date": "1410/09/27",
@ -33,8 +78,53 @@
    "order-number": "09120023100",
    "user-job": "مهندس ساختمان",
    "order-status": 4,
+    "order-level": 4
+  },
+  {
+    "name": "تبلت اپل",
+    "order-date": "1375/09/25",
+    "order-price": 96,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 5,
+    "order-level": 5
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 1",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 2",
+    "order-date": "1399/09/25",
+    "order-price": 26,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 2,
    "order-level": 2
  },
+  {
+    "name": "مایکروویر سامسونگ مدل 3",
+    "order-date": "1399/09/22",
+    "order-price": 44,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 3,
+    "order-level": 3
+  },
+  {
+    "name": "لپ تاپ مک بوک اپل",
+    "order-date": "1410/09/27",
+    "order-price": 73,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 4,
+    "order-level": 4
+  },
  {
    "name": "تبلت اپل",
    "order-date": "1375/09/25",
@ -42,6 +132,51 @@
    "order-number": "09120023100",
    "user-job": "مهندس ساختمان",
    "order-status": 5,
+    "order-level": 5
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 1",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 2",
+    "order-date": "1399/09/25",
+    "order-price": 26,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 2,
    "order-level": 2
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 3",
+    "order-date": "1399/09/22",
+    "order-price": 44,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 3,
+    "order-level": 3
+  },
+  {
+    "name": "لپ تاپ مک بوک اپل",
+    "order-date": "1410/09/27",
+    "order-price": 73,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 4,
+    "order-level": 4
+  },
+  {
+    "name": "تبلت اپل",
+    "order-date": "1375/09/25",
+    "order-price": 96,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 5,
+    "order-level": 5
  }
 ]
--- a/src/components/ReactTable3/OrderLevel.js
+++ b/src/components/ReactTable3/OrderLevel.js
@ -0,0 +1,35 @@
+export function OrderLevel({ value }) {
+    return (
+      <div className="p-2 rounded-3xl border border-gray-300 w-fit">
+        {(() => {
+           switch(value) {
+            case 1:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65FFAD" }}></span>
+                      <span style={{ color: "#00253A" }} className="">وضعیت عادی</span>
+                  </div>;
+            case 2:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FF6565" }}></span>
+                      <span style={{ color: "#00253A" }} className="">اعلان سطح هشدار</span>
+                    </div>;
+            case 3:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65DAFF" }}></span>
+                      <span style={{ color: "#00253A" }} className="">بررسی و پیگیری</span>
+                    </div>;
+            case 4:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FFEA65" }}></span>
+                      <span style={{ color: "#00253A" }} className="">وضعیت بحرانی</span>
+                    </div>;
+            default:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#CCFF65" }}></span>
+                      <span style={{ color: "#00253A" }} className="">وضعیت پایدار</span>
+                    </div>;
+          }
+        })()}
+      </div>
+    );
+  }
--- a/src/components/ReactTable3/OrderStatus.js
+++ b/src/components/ReactTable3/OrderStatus.js
@ -0,0 +1,55 @@
+export function OrderStatus({ value }) {
+    return (
+      <div className="">
+        {(() => {
+          if (value === 1) {
+            return (
+              <span
+                style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
+                className="p-2 rounded"
+              >
+                ارسال شده
+              </span>
+            );
+          } else if (value === 2) {
+            return (
+              <span
+                style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
+                className="p-2 rounded"
+              >
+                رسیدگی
+              </span>
+            );
+          } else if (value === 3) {
+            return (
+              <span
+                style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
+                className="p-2 rounded"
+              >
+                لغو شده
+              </span>
+            );
+          } else if (value === 4) {
+            return (
+              <span
+                style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
+                className="p-2 rounded"
+              >
+                پیگیری
+              </span>
+            );
+          } else {
+            return (
+              <span
+                style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
+                className="p-2 rounded"
+              >
+                خطری
+              </span>
+            );
+          }
+        })()}{" "}
+      </div>
+    );
+  }
+  
--- a/src/components/ReactTable3/columns.js
+++ b/src/components/ReactTable3/columns.js
@ -1,8 +1,12 @@
 import { format } from "date-fns";
-import Table, { StatusPill } from "./BasicTable"; // new
+
+import Table, {  } from "./BasicTable"; // new

 import { ColumnFilter } from "./ColumnFilter";

+import { OrderStatus } from "./OrderStatus";
+import { OrderLevel } from "./OrderLevel";
+
 export const COLUMNS = [
  {
    Header: "نام و نام خانوادگی",
@ -38,12 +42,12 @@ export const COLUMNS = [
    Header: "وضعیت سفارش",
    Footer: "وضعیت سفارش",
    accessor: "order-status",
-    Cell: StatusPill,
+    Cell: OrderStatus,
  },
  {
    Header: "سطح اهمیت",
    Footer: "سطح اهمیت",
    accessor: "order-level",
-    Cell: StatusPill,
+    Cell: OrderLevel,
  },
 ];
--- a/src/components/Sidebar/SidebarDesign2/index.js
+++ b/src/components/Sidebar/SidebarDesign2/index.js
@ -69,7 +69,7 @@ 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(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">