update status added

3 years ago · 3d66dbbdf3
parent 91a0c4d3af
commit 3d66dbbdf3
3 changed files with 191 additions and 262 deletions
--- a/src/components/ReactTable3/BasicTable.js
+++ b/src/components/ReactTable3/BasicTable.js
@ -18,6 +18,69 @@ 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, []);
@ -87,7 +150,7 @@ const BasicTable = () => {

  const { globalFilter, pageIndex, pageSize } = state;
  // const firstPageRows = rows.slice(0, 10);
-
+  console.log(rows.length);
  return (
    <>
      <div className="flex flex-row items-center justify-between mb-3 mx-4">
@ -95,7 +158,7 @@ const BasicTable = () => {
        <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
        {/* pagination */}
        <div
-          className="border border-blue-400 rounded p-1 flex flex-items-center"
+          className="border border-blue-400 rounded-sm py-1 px-2 flex flex-items-center"
          style={{}}
        >
          {/* go to page */}
@ -112,8 +175,13 @@ const BasicTable = () => {
              }}
              style={{ width: "50px" }}
            />
-            <span className="text-sm"> برو به صفحه </span>
+            <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"
@ -149,6 +217,7 @@ const BasicTable = () => {
          </button>
        </div>
      </div>
+      {/*  */}
      {/* toggle columns */}
      {/* <div>
        <div>
@ -163,22 +232,20 @@ const BasicTable = () => {
          </div>
        ))}
      </div> */}
-
      {/* Change Column Order */}
      {/* <button onClick={changeOrder}> Change Column Order </button> */}
-
      <table
        {...getTableProps()}
        className="min-w-full divide-y divide-gray-200"
      >
-        <thead className="bg-gray-300">
+        <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  scope="col"
-                  className="cursor-pointer px-4 py-2 text-right text-xs"
+                  className="cursor-pointer p-4 text-right text-sm font-medium"
                  style={{ color: "#3287B9" }}
                >
                  {column.render("Header")}
@ -207,7 +274,7 @@ const BasicTable = () => {
                  return (
                    <td
                      {...cell.getCellProps()}
-                      className="px-4 py-4 whitespace-nowrap text-sm"
+                      className="p-4 whitespace-nowrap text-sm"
                      role="cell"
                      style={{ color: "#00253A" }}
                    >
@ -221,7 +288,7 @@ const BasicTable = () => {
        </tbody>

        <tfoot
-          className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`}
+          className={`bg-blue-900 ${rows.length > 10 ? "w-full" : "hidden"}`}
        >
          {footerGroups.map((footerGroup) => (
            <tr {...footerGroup.getFooterGroupProps()}>
@ -229,7 +296,7 @@ const BasicTable = () => {
                <td
                  {...column.getFooterProps}
                  className="px-4 py-2 text-right text-xs"
-                  style={{ color: "#3287B9" }}
+                  style={{ color: "#fff" }}
                >
                  {column.render("Footer")}
                </td>
@ -238,8 +305,7 @@ const BasicTable = () => {
          ))}
        </tfoot>
      </table>
-
-      <pre>
+      {/* <pre>
        <code>
          {JSON.stringify(
            {
@ -249,24 +315,36 @@ const BasicTable = () => {
            2
          )}
        </code>
-      </pre>
-
-      <div>
-        <span>
-          Page{" "}
-          <strong>
-            {pageIndex + 1} of {pageOptions.length}
+      </pre> */}
+      <div className="mt-3 ">
+        <span className="text-sm ml-4">
+          صفحه{" "}
+          <strong className="text-indigo-500">
+            {pageIndex + 1} از {pageOptions.length}
          </strong>
          {""}
        </span>

        <select
+          className="text-white text-sm rounded cursor-pointer"
+          style={{
+            backgroundColor: "#65A9FF",
+            borderColor: "#65A9FF",
+          }}
          value={pageSize}
          onChange={(e) => setPageSize(Number(e.target.value))}
        >
          {[7, 10, 25, 50].map((pageSize) => (
-            <option key={pageSize} value={pageSize}>
-              Show {pageSize}
+            <option
+              key={pageSize}
+              value={pageSize}
+              className=" text-sm"
+              style={{
+                direction: "ltr",
+                textAlign: "right",
+              }}
+            >
+              نمایش {pageSize}
            </option>
          ))}
        </select>
--- a/src/components/ReactTable3/MOCK_DATA.json
+++ b/src/components/ReactTable3/MOCK_DATA.json
@ -14,7 +14,7 @@
    "order-price": 26,
    "order-number": "09120023100",
    "user-job": "مهندس ساختمان",
-      "order-status": 1,
+    "order-status": 2,
    "order-level": 2
  },
  {
@ -23,7 +23,7 @@
    "order-price": 44,
    "order-number": "09120023100",
    "user-job": "مهندس ساختمان",
-      "order-status": 1,
+    "order-status": 3,
    "order-level": 2
  },
  {
@ -32,7 +32,7 @@
    "order-price": 73,
    "order-number": "09120023100",
    "user-job": "مهندس ساختمان",
-      "order-status": 1,
+    "order-status": 4,
    "order-level": 2
  },
  {
@ -41,160 +41,7 @@
    "order-price": 96,
    "order-number": "09120023100",
    "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "کیس استوک",
-      "order-date": "1396/09/22",
-      "order-price": 75,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 2",
-      "order-date": "1399/09/25",
-      "order-price": 26,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 2",
-      "order-date": "1399/09/25",
-      "order-price": 26,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 3",
-      "order-date": "1399/09/22",
-      "order-price": 44,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "لپ تاپ مک بوک اپل",
-      "order-date": "1410/09/27",
-      "order-price": 73,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "تبلت اپل",
-      "order-date": "1375/09/25",
-      "order-price": 96,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 3",
-      "order-date": "1399/09/22",
-      "order-price": 44,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "لپ تاپ مک بوک اپل",
-      "order-date": "1410/09/27",
-      "order-price": 73,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "تبلت اپل",
-      "order-date": "1375/09/25",
-      "order-price": 96,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "کیس استوک",
-      "order-date": "1396/09/22",
-      "order-price": 75,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 1",
-      "order-date": "1399/09/27",
-      "order-price": 27,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "کیس استوک",
-      "order-date": "1396/09/22",
-      "order-price": 75,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 2",
-      "order-date": "1399/09/25",
-      "order-price": 26,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "مایکروویر سامسونگ مدل 3",
-      "order-date": "1399/09/22",
-      "order-price": 44,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "لپ تاپ مک بوک اپل",
-      "order-date": "1410/09/27",
-      "order-price": 73,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "تبلت اپل",
-      "order-date": "1375/09/25",
-      "order-price": 96,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
-      "order-level": 2
-    },
-    {
-      "name": "کیس استوک",
-      "order-date": "1396/09/22",
-      "order-price": 75,
-      "order-number": "09120023100",
-      "user-job": "مهندس ساختمان",
-      "order-status": 1,
+    "order-status": 5,
    "order-level": 2
  }
 ]
--- a/src/components/ReactTable3/columns.js
+++ b/src/components/ReactTable3/columns.js
@ -1,45 +1,49 @@
-import {format} from 'date-fns'
+import { format } from "date-fns";
+import Table, { StatusPill } from "./BasicTable"; // new

-import {ColumnFilter} from './ColumnFilter';
+import { ColumnFilter } from "./ColumnFilter";

 export const COLUMNS = [
  {
-        Header: 'نام و نام خانوادگی',
-        Footer: 'نام و نام خانوادگی',
-        accessor: 'name',
+    Header: "نام و نام خانوادگی",
+    Footer: "نام و نام خانوادگی",
+    accessor: "name",
    disableSortBy: true,
  },
  {
-        Header: 'تاریخ سفارش',
-        Footer: 'تاریخ سفارش',
-        accessor: 'order-date',
-        Cell: ({ value }) => { return format(new Date (value), 'dd/MM/yyyy') }
+    Header: "تاریخ سفارش",
+    Footer: "تاریخ سفارش",
+    accessor: "order-date",
+    Cell: ({ value }) => {
+      return format(new Date(value), "dd/MM/yyyy");
+    },
  },
  {
-        Header: 'مبلغ سفارش',
-        Footer: 'مبلغ سفارش',
-        accessor: 'order-price',
-        Filter: ColumnFilter
+    Header: "مبلغ سفارش",
+    Footer: "مبلغ سفارش",
+    accessor: "order-price",
+    Filter: ColumnFilter,
  },
  {
-        Header: 'شماره سفارش',
-        Footer: 'شماره سفارش',
-        accessor: 'order-number',
+    Header: "شماره سفارش",
+    Footer: "شماره سفارش",
+    accessor: "order-number",
  },
  {
-        Header: 'شغل کاربر',
-        Footer: 'شغل کاربر',
-        accessor: 'user-job',
+    Header: "شغل کاربر",
+    Footer: "شغل کاربر",
+    accessor: "user-job",
  },
  {
-        Header: 'وضعیت سفارش',
-        Footer: 'وضعیت سفارش',
-        accessor: 'order-status',
+    Header: "وضعیت سفارش",
+    Footer: "وضعیت سفارش",
+    accessor: "order-status",
+    Cell: StatusPill,
  },
  {
-        Header: 'سطح اهمیت',
-        Footer: 'سطح اهمیت',
-        accessor: 'order-level',
-        disableSortBy: true,
+    Header: "سطح اهمیت",
+    Footer: "سطح اهمیت",
+    accessor: "order-level",
+    Cell: StatusPill,
  },
-]
+];