ok

2024-08-09 13:00:10 +00:00
parent 76741e304f
commit 6102db3f56
18 changed files with 271 additions and 141 deletions
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -3,8 +3,9 @@ import styles from "./Footer.module.css"; // assuming you have a CSS module for
 import { useNavigationHelpers } from "../helpers/navigationHelpers";

 export default function Footer({
+  showTable,
  shopId,
-  tableId,
+  table,
  cartItemsLength,
  selectedPage,
 }) {
@@ -15,13 +16,13 @@ export default function Footer({
    goToTransactions,
    goToScan,
    goToNonTable,
-  } = useNavigationHelpers(shopId, tableId);
+  } = useNavigationHelpers(shopId, table.tableCode);

  const [isStretched, setIsStretched] = useState(false);
  const scanMejaRef = useRef(null);

  const handleScanMejaClick = () => {
-    if (tableId) {
+    if (table) {
      setIsStretched(true);
    } else {
      goToTransactions();
@@ -98,25 +99,27 @@ export default function Footer({
      </div>

      {/* Rounded Rectangle with "Scan Meja" and QR Icon */}
-      {shopId && (
+      {showTable && shopId && (
        <div
          ref={scanMejaRef}
-          onClick={!tableId ? goToScan : handleScanMejaClick}
+          onClick={table.length == 0 ? goToScan : handleScanMejaClick}
          className={`${styles.scanMeja} ${
            isStretched ? styles.stretched : ""
          }`}
        >
          <span>
-            {tableId ? `Diantar ke meja ${tableId}` : `Scan Meja\u00A0`}
+            {table.length != 0
+              ? `Diantar ke meja ${table.tableNo}`
+              : `Scan Meja\u00A0`}
          </span>
-          {!tableId && (
+          {table.length == 0 && (
            <img
              src="https://static-00.iconduck.com/assets.00/qr-scan-icon-2048x2048-aeh36n7y.png"
              alt="QR Code"
              className={styles.qrIcon}
            />
          )}
-          {tableId && isStretched && (
+          {table.length != 0 && isStretched && (
            <button onClick={handleHapusMeja} className={styles.hapusMejaBtn}>
              Hapus Meja
            </button>
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -215,7 +215,7 @@ const Header = ({
  shopName,
  shopOwnerId,
  shopClerks,
-  tableId,
+  tableCode,
  showProfile,
  user,
  setModal,
@@ -225,7 +225,7 @@ const Header = ({
  removeConnectedGuestSides,
 }) => {
  const { goToLogin, goToGuestSideLogin, goToAdminCafes } =
-    useNavigationHelpers(shopId, tableId);
+    useNavigationHelpers(shopId, tableCode);
  const [showRectangle, setShowRectangle] = useState(false);
  const [animate, setAnimate] = useState("");
  const rectangleRef = useRef(null);
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -5,6 +5,7 @@ import TableMaps from "../components/TableMaps";
 import Transactions from "../pages/Transactions";
 import Transaction_pending from "../pages/Transaction_pending";
 import Transaction_success from "../pages/Transaction_success";
+import Transaction_failed from "../pages/Transaction_failed";
 import MaterialList from "../pages/MaterialList.js";
 import MaterialMutationsPage from "../pages/MaterialMutationsPage.js";

@@ -35,6 +36,7 @@ const Modal = ({ shopId, isOpen, onClose, modalContent }) => {
        )}{" "}
        {modalContent === "transaction_pending" && <Transaction_pending />}
        {modalContent === "transaction_success" && <Transaction_success />}
+        {modalContent === "transaction_failed" && <Transaction_failed />}
        {modalContent === "add_material" && <MaterialList cafeId={shopId} />}
        {modalContent === "update_stock" && (
          <MaterialMutationsPage cafeId={shopId} />
--- a/src/components/QR.js
+++ b/src/components/QR.js
@@ -8,9 +8,7 @@ const QRCodeWithBackground = ({
  backgroundUrl,
  initialQrPosition,
  initialQrSize,
-  setInitialPos,
-  setInitialSize,
-  onBackgroundUrlChange,
+  handleQrSave,
 }) => {
  const [qrPosition, setQrPosition] = useState(initialQrPosition);
  const [qrSize, setQrSize] = useState(initialQrSize);
@@ -22,12 +20,12 @@ const QRCodeWithBackground = ({
    const { name, value } = e.target;
    setQrPosition((prevPosition) => ({
      ...prevPosition,
-      [name]: value,
+      [name]: parseFloat(value).toFixed(2),
    }));
  };

  const handleSizeChange = (e) => {
-    setQrSize(e.target.value);
+    setQrSize(parseFloat(e.target.value).toFixed(2));
  };

  const handleFileChange = (e) => {
@@ -35,14 +33,11 @@ const QRCodeWithBackground = ({
    if (file) {
      const newBgImage = URL.createObjectURL(file);
      setBgImage(newBgImage);
-      onBackgroundUrlChange(newBgImage);
    }
  };

  const handleSave = () => {
-    setInitialPos(qrPosition);
-    setInitialSize(qrSize);
-    onBackgroundUrlChange(bgImage);
+    handleQrSave(qrPosition, qrSize, bgImage);
  };

  const printQRCode = () => {
@@ -142,13 +137,15 @@ const QRCodeWithBackground = ({
          }}
        />
        {/* Overlay text that triggers file input */}
-        <div
-          ref={overlayTextRef}
-          style={styles.overlayText}
-          onClick={() => fileInputRef.current.click()}
-        >
-          Click To Change Image
-        </div>
+        {isConfigure && (
+          <div
+            ref={overlayTextRef}
+            style={styles.overlayText}
+            onClick={() => fileInputRef.current.click()}
+          >
+            Click To Change Image
+          </div>
+        )}
        {/* Hidden file input */}
        <input
          type="file"
--- a/src/components/SearchInput.js
+++ b/src/components/SearchInput.js
@@ -44,7 +44,7 @@ const SearchIcon = styled.svg`

 export default function SearchInput({
  shopId,
-  tableId,
+  tableCode,
  autofocus,
  onSearchChange,
 }) {
@@ -73,15 +73,15 @@ export default function SearchInput({
      //Start the timer
      let url = "";
      if (autofocus || songName != "") {
-        url = tableId
-          ? `/${shopId}/${tableId}/search?query=${encodeURIComponent(songName)}`
+        url = tableCode
+          ? `/${shopId}/${tableCode}/search?query=${encodeURIComponent(songName)}`
          : `/${shopId}/search?query=${encodeURIComponent(songName)}`;
        navigate(url);
      }

      if (autofocus) {
        if (songName == "") {
-          if (tableId) navigate(`/${shopId}/${tableId}`);
+          if (tableCode) navigate(`/${shopId}/${tableCode}`);
          else navigate(`/${shopId}`);
        }
      }
--- a/src/components/TableList.js
+++ b/src/components/TableList.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import QRCodeWithBackground from "./QR"; // Adjust path as needed

 const TableList = ({ shopUrl, tables, onSelectTable, selectedTable }) => {
@@ -17,12 +17,17 @@ const TableList = ({ shopUrl, tables, onSelectTable, selectedTable }) => {
    setBgImageUrl(newUrl);
  };

+  const handleQrSave = (qrPosition, qrSize, bgImage) => {
+    setInitialPos(qrPosition);
+    setInitialSize(qrSize);
+    setBgImageUrl(bgImage);
+  };
+
  return (
    <div
      style={{
        width: "100%",
        marginTop: "20px",
-        maxHeight: "400px",
        overflowY: "auto",
      }}
    >
@@ -47,53 +52,51 @@ const TableList = ({ shopUrl, tables, onSelectTable, selectedTable }) => {
          {-1 == selectedTable?.tableId && (
            <QRCodeWithBackground
              isConfigure={true}
+              handleQrSave={handleQrSave}
              setInitialPos={setInitialPos}
              setInitialSize={setInitialSize}
              qrCodeUrl={generateQRCodeUrl("sample")}
              backgroundUrl={bgImageUrl}
              initialQrPosition={initialPos}
              initialQrSize={initialSize}
-              onBackgroundUrlChange={handleBackgroundUrlChange}
            />
          )}
        </li>
-        {tables.map((table) => (
-          <li
-            key={table.tableId}
-            style={{
-              backgroundColor:
-                table.tableId === selectedTable?.tableId
-                  ? "lightblue"
-                  : "white",
-              marginBottom: "10px",
-              padding: "10px",
-              borderRadius: "4px",
-              boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-              cursor: "pointer",
-            }}
-            onClick={() => onSelectTable(table)}
-          >
-            <div style={{ marginBottom: "10px" }}>
-              {table.tableNo === 0 ? "Clerk" : `Table ${table.tableNo}`} -
-              Position: ({table.xposition}, {table.yposition})
-            </div>
-            {table.tableNo != 0 && table.tableId == selectedTable?.tableId && (
-              <>
-                <QRCodeWithBackground
-                  tableNo={table.tableNo}
-                  setInitialPos={setInitialPos}
-                  setInitialSize={setInitialSize}
-                  qrCodeUrl={generateQRCodeUrl(table.tableCode)}
-                  backgroundUrl={bgImageUrl}
-                  initialQrPosition={initialPos}
-                  initialQrSize={initialSize}
-                  onBackgroundUrlChange={handleBackgroundUrlChange}
-                />
-                <h2>{shopUrl + "/" + table.tableCode}</h2>
-              </>
-            )}
-          </li>
-        ))}
+        {tables
+          .filter((table) => table.tableNo !== 0)
+          .map((table) => (
+            <li
+              key={table.tableId}
+              style={{
+                backgroundColor:
+                  table.tableId === selectedTable?.tableId
+                    ? "lightblue"
+                    : "white",
+                marginBottom: "10px",
+                padding: "10px",
+                borderRadius: "4px",
+                boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+                cursor: "pointer",
+              }}
+              onClick={() => onSelectTable(table)}
+            >
+              <div style={{ marginBottom: "10px" }}>
+                Table {table.tableNo}
+              </div>
+              {table.tableId === selectedTable?.tableId && (
+                <>
+                  <QRCodeWithBackground
+                    tableNo={table.tableNo}
+                    qrCodeUrl={generateQRCodeUrl(table.tableCode)}
+                    backgroundUrl={bgImageUrl}
+                    initialQrPosition={initialPos}
+                    initialQrSize={initialSize}
+                  />
+                  <h5>{shopUrl + "/" + table.tableCode}</h5>
+                </>
+              )}
+            </li>
+          ))}
      </ul>
    </div>
  );
--- a/src/components/TablesPage.js
+++ b/src/components/TablesPage.js
@@ -184,9 +184,10 @@ const TablesPage = ({ shopId }) => {
        justifyContent: "center",
        fontSize: "calc(10px + 2vmin)",
        color: "rgba(88, 55, 50, 1)",
+        height: "100%",
      }}
    >
-      <TableCanvas
+      {/* <TableCanvas
        isAdmin={true}
        tables={tables}
        selectedTable={selectedTable}
@@ -199,7 +200,7 @@ const TablesPage = ({ shopId }) => {
        handleCancel={handleCancel}
        handleSetTableNo={handleSetTableNo}
        tableNo={tableNo}
-      />
+      /> */}
      <TableList
        shopUrl={window.location.hostname + "/" + shopId}
        tables={tables}