ok

2025-05-08 13:44:01 +07:00
parent c136495d10
commit 47f43f05f9
5 changed files with 167 additions and 86 deletions
--- a/src/components/ItemConfig.js
+++ b/src/components/ItemConfig.js
@@ -12,7 +12,8 @@ const ItemConfig = ({
    isBeingEdit,
    cancelEdit,
    handleCreateItem,
-    handleUpdateItem
+    handleUpdateItem,
+    handleDelete
 }) => {
    const [selectedImage, setSelectedImage] = useState();
    const [previewUrl, setPreviewUrl] = useState(imageUrl);
@@ -104,9 +105,12 @@ const ItemConfig = ({
                        />
                    </div>
                    <div style={{ width: '72%', height: '26vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                        <div onClick={() => handleChangeImage()} style={{ width: '140px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                        <div onClick={() => handleChangeImage()} style={{ width: '140px', marginRight: '10px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                            {isBeingEdit ? 'Ganti gambar' : 'Tambah gambar'}
                        </div>
+                        <div onClick={handleDelete} style={{ width: '76px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid rgb(211 96 96)', color: 'rgb(211 96 96)', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                            Hapus
+                        </div>
                    </div>
                </div>

--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -15,7 +15,7 @@ import {
  deleteItemType,
 } from "../helpers/itemHelper.js";
 import ItemType from "./ItemType.js";
-import { createItemType } from "../helpers/itemHelper.js";
+import { createItemType, updateItemDeletionStatus } from "../helpers/itemHelper.js";
 import ItemConfig from "./ItemConfig.js"

 const ItemLister = ({
@@ -169,8 +169,8 @@ const ItemLister = ({
  };
  const onEditItem = async (itemId, name, price, image, description, promoPrice) => {
    await updateItemInCreate(itemId, name, price, image, description, promoPrice);
-    setRandomKey(randomKey + 1); 
-    console.log(image) 
+    setRandomKey(randomKey + 1);
+    console.log(image)
    editItem(0);
  }
  const onCreateItem = async (itemName, itemPrice, selectedImage, previewUrl, description, promoPrice) => {
@@ -232,63 +232,63 @@ const ItemLister = ({
  };
  const onUpdateItem = async (itemId, name, price, image, description, promoPrice) => {
    if (isEdit)
-      setItemsToUpdate((prev) => [...prev, { itemId, name, price,promoPrice, image, description }]);
+      setItemsToUpdate((prev) => [...prev, { itemId, name, price, promoPrice, image, description }]);
    else {
      console.log(itemId, name, price, image, description)
      handleUpdateItem(itemId, name, price, image, description, promoPrice);
    }
-      const itemIndex = items.findIndex((item) => item.itemId === itemId);
-      if (itemIndex === -1) return; // Item not found
+    const itemIndex = items.findIndex((item) => item.itemId === itemId);
+    if (itemIndex === -1) return; // Item not found

-      // Create a copy of the current items array
-      const updatedItems = [...items];
-      const item = updatedItems[itemIndex];
-      console.log(item)
-      console.log(image)
-      // Toggle the availability locally
-      const readImage = (image) => {
-        return new Promise((resolve, reject) => {
-          // Check if image is a valid File or Blob object
-          if (!(image instanceof Blob)) {
-            return;
-          }
-      
-          const reader = new FileReader();
-          reader.onloadend = () => resolve(reader.result);
-          reader.onerror = (error) => reject(error);
-          reader.readAsDataURL(image);  // read the image as a data URL
-        });
-      };
-      
-      
-      let newImage = null;
-      if (image) {
-        try {
-          newImage = await readImage(image);
-          console.log(newImage);
-        } catch (error) {
-          console.error("Error reading image:", error);
+    // Create a copy of the current items array
+    const updatedItems = [...items];
+    const item = updatedItems[itemIndex];
+    console.log(item)
+    console.log(image)
+    // Toggle the availability locally
+    const readImage = (image) => {
+      return new Promise((resolve, reject) => {
+        // Check if image is a valid File or Blob object
+        if (!(image instanceof Blob)) {
+          return;
        }
+
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result);
+        reader.onerror = (error) => reject(error);
+        reader.readAsDataURL(image);  // read the image as a data URL
+      });
+    };
+
+
+    let newImage = null;
+    if (image) {
+      try {
+        newImage = await readImage(image);
+        console.log(newImage);
+      } catch (error) {
+        console.error("Error reading image:", error);
      }
-      
-      updatedItems[itemIndex] = {
-        itemId: item.itemId,
-        name,
-        price,
-        description: description,
-        promoPrice: promoPrice,
-        availability: item.availability,
-        image: image ? newImage : item.image,
-        selectedImage: image ? newImage : null
-      };
-      
-      console.log(updatedItems)
+    }
+
+    updatedItems[itemIndex] = {
+      itemId: item.itemId,
+      name,
+      price,
+      description: description,
+      promoPrice: promoPrice,
+      availability: item.availability,
+      image: image ? newImage : item.image,
+      selectedImage: image ? newImage : null
+    };
+
+    console.log(updatedItems)
+
+    // Update the state with the local change
+    setItems(updatedItems);
+    setRandomKey(randomKey + 1);

-      // Update the state with the local change
-      setItems(updatedItems);
-      setRandomKey(randomKey + 1);

-    
    console.log(itemsToUpdate);
  };

@@ -509,7 +509,7 @@ const ItemLister = ({
          for (const { name, price, selectedImage, description } of itemsToCreate) {
            // Call handleCreateItem to create a new item
            const newItem = await handleCreateItem(newItemType.itemTypeId, name, price, selectedImage, description);
-            
+
            // If the item was created successfully, update the shopItems state
            if (newItem) {
              setShopItems((prevShopItems) =>
@@ -561,6 +561,40 @@ const ItemLister = ({
    setIsFirstStep(true);
  };

+  const handleItemDeletionToggle = async (itemId, willBeDeleted) => {
+    try {
+      editItem(0)
+      // 1. Await the API or helper that updates the deletion status
+      const updatedItem = await updateItemDeletionStatus(itemId, willBeDeleted);
+  
+      // 2. Update the local state with the new `willBeDeleted` status
+      setShopItems((prevShopItems) => {
+        return prevShopItems.map((itemType) => {
+          const updatedItemList = itemType.itemList.map((item) => {
+            if (item.itemId === itemId) {
+              return {
+                ...item,
+                willBeDeleted: updatedItem.willBeDeleted, // Update deletion status
+                name: item.name,
+                price: item.price,
+                image: item.image,
+              };
+            }
+            return item;
+          });
+  
+          return {
+            ...itemType,
+            itemList: updatedItemList,
+          };
+        });
+      });
+    } catch (error) {
+      console.error("Failed to update item deletion status:", error);
+      // Optional: show a user notification
+    }
+  };
+  
  return (
    <>
      {(items.length > 0 ||
@@ -873,7 +907,7 @@ const ItemLister = ({
                            imageUrl={item.image}
                            imageFile={item.selectedImage}
                            cancelEdit={() => editItem(0)}
-                            handleUpdateItem={(name, price, image, description, promoPrice) => { onEditItem(item.itemId, name, price, image, description, promoPrice);}
+                            handleUpdateItem={(name, price, image, description, promoPrice) => { onEditItem(item.itemId, name, price, image, description, promoPrice); }
                            }
                          />
                        )}
@@ -964,43 +998,58 @@ const ItemLister = ({
                          //   batal
                          // </button>
                          <ItemConfig
-                          isBeingEdit={true}
-                          name={item.name}
-                          price={item.price}
-                          promoPrice={item.promoPrice}
-                          description={item.description}
-                          imageUrl={itemTypeId ? getImageUrl(item.image) : item.image}
-                          imageFile={item.selectedImage}
-                          cancelEdit={() => editItem(0)}
-                          handleCreateItem={onCreateItem}
-                          handleUpdateItem={async (name, price, image, description, promoPrice) => {
-                            try {
-                              console.log(description);
-                              await onUpdateItem(item.itemId, name, price, image, description, promoPrice);
-                            } catch (error) {
-                              console.error("Error updating item:", error);
-                            }
-                          }}
-                        />
+                            isBeingEdit={true}
+                            name={item.name}
+                            price={item.price}
+                            promoPrice={item.promoPrice}
+                            description={item.description}
+                            imageUrl={itemTypeId ? getImageUrl(item.image) : item.image}
+                            imageFile={item.selectedImage}
+                            cancelEdit={() => editItem(0)}
+                            handleCreateItem={onCreateItem}
+                            handleUpdateItem={async (name, price, image, description, promoPrice) => {
+                              try {
+                                console.log(description);
+                                await onUpdateItem(item.itemId, name, price, image, description, promoPrice);
+                              } catch (error) {
+                                console.error("Error updating item:", error);
+                              }
+                            }}
+                            handleDelete={() => handleItemDeletionToggle(item.itemId, true)}
+                            />

                        )}
                        <div className={styles["itemWrapper"]}>
-                          {isEditMode && isEditItem != item.itemId && (
+                          {(isEditMode && isEditItem != item.itemId || item.willBeDeleted) && (
                            <div className={styles["editModeLayout"]}>
                              <div style={{ display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw' }}>
-                                {isEditMode && (
+                                {!item.willBeDeleted && isEditMode && (
                                  <Switch
                                    onChange={() => handleChange(item.itemId)}
                                    checked={item.availability}
                                  />
                                )}
-                                <h3>
-                                  &nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"}
-                                </h3>
+                                {item.willBeDeleted ?
+
+                                  <h3 style={{ backgroundColor: 'black', padding: '13px 26px' }}>
+                                    Ditandai untuk dihapus
+                                  </h3>
+                                  :
+                                  <h3>
+                                    &nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"}
+                                  </h3>
+                                }
                              </div>

-                              <div onClick={() => editItem(item.itemId)} style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}>
-                                <div
+                              <div onClick={() => {
+                                if (!item.willBeDeleted) {
+                                  editItem(item.itemId);
+                                } else {
+                                  handleItemDeletionToggle(item.itemId, false);
+                                }
+                              }}
+                                style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}>
+                                {!item.willBeDeleted && <div
                                  style={{
                                    width: '32px',
                                    height: '32px', // Add a height to the div
@@ -1028,14 +1077,15 @@ const ItemLister = ({
                                    </g>
                                  </svg>
                                </div>
-                                <h3>Edit item</h3>
+                                }
+                                <h3>{item.willBeDeleted ? 'Batalkan' : 'Edit item'}</h3>
                              </div>
                            </div>
                          )}

                          <Item
                            key={item.itemId}
-                            last={index === indexTotal-1 && indexx === items.length - 1}
+                            last={index === indexTotal - 1 && indexx === items.length - 1}
                            forCart={forCart}
                            forInvoice={forInvoice}
                            name={item.name}
--- a/src/helpers/itemHelper.js
+++ b/src/helpers/itemHelper.js
@@ -176,6 +176,33 @@ export async function updateItemAvalilability(itemId, isAvailable) {
    throw error;
  }
 }
+
+export async function updateItemDeletionStatus(itemId, willBeDeleted) {
+  try {
+    const response = await fetch(
+      `${API_BASE_URL}/item/set-deletion/` + itemId,
+      {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${getAuthToken()}`,
+        },
+        body: JSON.stringify({ willBeDeleted: willBeDeleted }),
+      }
+    );
+
+    if (!response.ok) {
+      // throw new Error(`Error: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    console.log(data);
+    return data;
+  } catch (error) {
+    console.error("Failed to update item type:", error);
+    throw error;
+  }
+}
 export async function createItemType(shopId, name, selectedImage, previewUrl) {
  try {
    const formData = new FormData();
--- a/src/index.js
+++ b/src/index.js
@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';

 const root = ReactDOM.createRoot(document.getElementById('root'));
 // Disable console methods
-// console.log = () => {};
-// console.warn = () => {};
-// console.error = () => {};
+console.log = () => {};
+console.warn = () => {};
+console.error = () => {};

 root.render(
  <React.StrictMode>
--- a/src/pages/Transaction.js
+++ b/src/pages/Transaction.js
@@ -235,7 +235,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
                : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
                }`}
            </h2>
-            {transaction.notes != "" && (
+            {transaction.notes != null && (
              <>
                <div className={styles.NoteContainer}>
                  <span>Note :</span>