Merge pull request #313 from nishant0708/edit-icon

Feat:In FoodList we Can add option to Edit FoodItem Name for Canteen #310
VanshKing30 · Jun 15, 2024 · 0652d4c · 0652d4c
2 parents e2c6c73 + f698ca9
commit 0652d4c
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 1 deletion.
diff --git a/server/controllers/canteenController.js b/server/controllers/canteenController.js
@@ -212,6 +212,74 @@ const updateCanteen = async (req, res, next) => {
     res.status(500).json({ success: false, error: "Internal Server Error" });
   }
 };
+//controller to update Canteen FoddItem Details
+
+
+// Controller function to update a breakfast dish
+const updateBreakfastDish = asyncHandler(async (req, res, next) => {
+  const canteenId = req.params.id;
+  const { dishId, dish } = req.body;
+
+  try {
+    const updatedDish = await Breakfast.findOneAndUpdate(
+      { _id: dishId, canteen: canteenId },
+      { $set: { dish } },
+      { new: true }
+    ).exec();
+
+    if (!updatedDish) {
+      return res.status(404).json({ message: 'Dish not found' });
+    }
+
+    res.json({ message: 'Dish updated successfully', data: updatedDish });
+  } catch (error) {
+    res.status(500).json({ success: false, error: error.message });
+  }
+});
+//Controller to update Lunch
+const updateLunchDish = asyncHandler(async (req, res, next) => {
+  const canteenId = req.params.id;
+  const { dishId, dish } = req.body;
+
+  try {
+    const updatedDish = await Lunch.findOneAndUpdate(
+      { _id: dishId, canteen: canteenId },
+      { $set: { dish } },
+      { new: true }
+    ).exec();
+
+    if (!updatedDish) {
+      return res.status(404).json({ message: 'Dish not found' });
+    }
+
+    res.json({ message: 'Dish updated successfully', data: updatedDish });
+  } catch (error) {
+    res.status(500).json({ success: false, error: error.message });
+  }
+});
+//Controller to update dinner
+
+const updateDinnerDish = asyncHandler(async (req, res, next) => {
+  const canteenId = req.params.id;
+  const { dishId, dish } = req.body;
+
+  try {
+    const updatedDish = await Dinner.findOneAndUpdate(
+      { _id: dishId, canteen: canteenId },
+      { $set: { dish } },
+      { new: true }
+    ).exec();
+
+    if (!updatedDish) {
+      return res.status(404).json({ message: 'Dish not found' });
+    }
+
+    res.json({ message: 'Dish updated successfully', data: updatedDish });
+  } catch (error) {
+    res.status(500).json({ success: false, error: error.message });
+  }
+});
+
 
 module.exports = {
   getCanteenDashboard,
@@ -226,4 +294,7 @@ module.exports = {
   getLunch,
   getDinner,
   updateCanteen,
+  updateBreakfastDish,
+  updateLunchDish,
+  updateDinnerDish,
 };
diff --git a/server/routes/canteen.js b/server/routes/canteen.js
@@ -41,4 +41,9 @@ router.delete('/:id/dinner/remove',auth,isCanteen, canteenController.removeDinne
 //router to update profile
 router.put('/:id/update', auth, isCanteen, multerUploads, canteenController.updateCanteen);
 
+// New update routes
+router.put('/:id/breakfast/updateitem',auth,isCanteen, canteenController.updateBreakfastDish);
+router.put('/:id/lunch/updateitem',auth,isCanteen, canteenController.updateLunchDish);
+router.put('/:id/dinner/updateitem',auth,isCanteen, canteenController.updateDinnerDish);
+
 module.exports = router;
diff --git a/src/components/Modal-update.js b/src/components/Modal-update.js
@@ -0,0 +1,40 @@
+
+import React, { useState } from "react";
+
+const Modalupdate = ({ dish, onUpdate, onCancel }) => {
+  const [updatedDish, setUpdatedDish] = useState(dish);
+
+  const handleUpdate = () => {
+    onUpdate(updatedDish);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center">
+      <div className="bg-white p-6 rounded-lg shadow-lg">
+        <h2 className="text-2xl mb-4">Edit Dish</h2>
+        <input
+          type="text"
+          value={updatedDish}
+          onChange={(e) => setUpdatedDish(e.target.value)}
+          className="border border-gray-300 p-2 w-full mb-4"
+        />
+        <div className="flex justify-end">
+          <button
+            onClick={onCancel}
+            className="bg-gray-300 text-black px-4 py-2 rounded mr-2"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleUpdate}
+            className="bg-blue-500 text-white px-4 py-2 rounded"
+          >
+            Update
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modalupdate;
diff --git a/src/pages/Foodlist.jsx b/src/pages/Foodlist.jsx
@@ -6,13 +6,16 @@ import Footer from "../components/Footer";
 import { ThemeContext } from "../themeContext";
 import { toast } from "react-hot-toast";
 import axios from "axios";
+import Modalupdate from "../components/Modal-update"; // Import the modal component
 
 const Foodlist = () => {
   const { _id } = useParams();
   const [breakfast, setBreakfast] = useState();
   const [lunch, setLunch] = useState();
   const [dinner, setDinner] = useState();
   const [loading, setLoading] = useState(false);
+  const [editModal, setEditModal] = useState(false);
+  const [currentDish, setCurrentDish] = useState({});
   const { theme } = useContext(ThemeContext);
 
   const getFoodData = async (mealType, setMeal) => {
@@ -67,6 +70,45 @@ const Foodlist = () => {
     }
   };
 
+  const handleEditClick = (dish, mealType) => {
+    setCurrentDish({ ...dish, mealType });
+    setEditModal(true);
+  };
+
+  const handleUpdateDish = async (updatedDish) => {
+    try {
+      const token = localStorage.getItem("token"); // Retrieve token from local storage
+      if (!token) {
+        toast.error("Token is missing. Please log in.");
+        return;
+      }
+
+      await axios.put(
+        `http://localhost:8000/api/v1/${_id}/${currentDish.mealType}/updateitem`,
+        {
+          dishId: currentDish._id,
+          dish: updatedDish,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`, // Include the token in the Authorization header
+          }
+        }
+      );
+
+      toast.success("Dish updated successfully!");
+      setEditModal(false);
+      // Re-fetch the data to update the list
+      getFoodData("breakfast", setBreakfast);
+      getFoodData("lunch", setLunch);
+      getFoodData("dinner", setDinner);
+    } catch (error) {
+      console.error("Error updating dish: ", error);
+      toast.error("Failed to update dish.");
+    }
+  };
+
   useEffect(() => {
     getFoodData("breakfast", setBreakfast);
     getFoodData("lunch", setLunch);
@@ -116,7 +158,20 @@ const Foodlist = () => {
                       >
                         • {dish.dish}
                         <span
-                          className="absolute right-5 top-2 opacity-0 transition-opacity duration-300"
+                          className="absolute right-12 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleEditClick(dish, "breakfast");
+                          }}
+                        >
+                          <img
+                            src="https://cdn-icons-png.flaticon.com/512/2921/2921222.png"
+                            alt="Edit Icon"
+                            className="h-6 w-6"
+                          />
+                        </span>
+                        <span
+                          className="absolute right-5 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
                           onClick={(e) => {
                             e.stopPropagation();
                             handleDelete(dish._id, "breakfast");
@@ -155,6 +210,19 @@ const Foodlist = () => {
                         } hover:text-black mt-2`}
                       >
                         • {dish.dish}
+                        <span
+                          className="absolute right-12 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleEditClick(dish, "lunch");
+                          }}
+                        >
+                          <img
+                            src="https://cdn-icons-png.flaticon.com/512/2921/2921222.png"
+                            alt="Edit Icon"
+                            className="h-6 w-6"
+                          />
+                        </span>
                         <span
                           className="absolute right-5 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
                           onClick={(e) => {
@@ -195,6 +263,19 @@ const Foodlist = () => {
                         } hover:text-black mt-2`}
                       >
                         • {dish.dish}
+                        <span
+                          className="absolute right-12 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleEditClick(dish, "dinner");
+                          }}
+                        >
+                          <img
+                            src="https://cdn-icons-png.flaticon.com/512/2921/2921222.png"
+                            alt="Edit Icon"
+                            className="h-6 w-6"
+                          />
+                        </span>
                         <span
                           className="absolute right-5 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
                           onClick={(e) => {
@@ -218,6 +299,15 @@ const Foodlist = () => {
         )}
       </div>
       <Footer />
+
+      {/* Modal for Editing Dish */}
+      {editModal && (
+        <Modalupdate
+          dish={currentDish.dish}
+          onUpdate={(updatedDish) => handleUpdateDish(updatedDish)}
+          onCancel={() => setEditModal(false)}
+        />
+      )}
     </div>
   );
 };