Merge pull request #397 from nishant0708/update-descripandimage

Feat:Allow Canteen Admins to Update food item Images and Description #379
VanshKing30 · Jul 1, 2024 · 71ace33 · 71ace33
2 parents 785fb20 + a177019
commit 71ace33
Show file tree

Hide file tree

Showing 5 changed files with 273 additions and 27 deletions.
diff --git a/server/controllers/canteenController.js b/server/controllers/canteenController.js
@@ -334,12 +334,29 @@ const updateCanteen = async (req, res, next) => {
 // Controller function to update a breakfast dish
 const updateBreakfastDish = asyncHandler(async (req, res, next) => {
   const canteenId = req.params.id;
-  const { dishId, dish } = req.body;
+  const { dishId, dish, description, dishImage } = req.body;
+
+  let uploadedImageUrl = null;
+
+  if (dishImage) {
+    try {
+      const uploadResult = await uploadImage(dishImage);
+      uploadedImageUrl = uploadResult.secure_url;
+    } catch (error) {
+      console.error('Error uploading image:', error);
+      return res.status(500).json({ message: 'Failed to upload image' });
+    }
+  }
 
   try {
+    const updateFields = { dish, description };
+    if (uploadedImageUrl) {
+      updateFields.dishImage = uploadedImageUrl;
+    }
+
     const updatedDish = await Breakfast.findOneAndUpdate(
       { _id: dishId, canteen: canteenId },
-      { $set: { dish } },
+      { $set: updateFields },
       { new: true }
     ).exec();
 
@@ -355,12 +372,29 @@ const updateBreakfastDish = asyncHandler(async (req, res, next) => {
 //Controller to update Lunch
 const updateLunchDish = asyncHandler(async (req, res, next) => {
   const canteenId = req.params.id;
-  const { dishId, dish } = req.body;
+  const { dishId, dish, description, dishImage } = req.body;
+
+  let uploadedImageUrl = null;
+
+  if (dishImage) {
+    try {
+      const uploadResult = await uploadImage(dishImage);
+      uploadedImageUrl = uploadResult.secure_url;
+    } catch (error) {
+      console.error('Error uploading image:', error);
+      return res.status(500).json({ message: 'Failed to upload image' });
+    }
+  }
 
   try {
+    const updateFields = { dish, description };
+    if (uploadedImageUrl) {
+      updateFields.dishImage = uploadedImageUrl;
+    }
+
     const updatedDish = await Lunch.findOneAndUpdate(
       { _id: dishId, canteen: canteenId },
-      { $set: { dish } },
+      { $set: updateFields },
       { new: true }
     ).exec();
 
@@ -377,12 +411,29 @@ const updateLunchDish = asyncHandler(async (req, res, next) => {
 
 const updateDinnerDish = asyncHandler(async (req, res, next) => {
   const canteenId = req.params.id;
-  const { dishId, dish } = req.body;
+  const { dishId, dish, description, dishImage } = req.body;
+
+  let uploadedImageUrl = null;
+
+  if (dishImage) {
+    try {
+      const uploadResult = await uploadImage(dishImage);
+      uploadedImageUrl = uploadResult.secure_url;
+    } catch (error) {
+      console.error('Error uploading image:', error);
+      return res.status(500).json({ message: 'Failed to upload image' });
+    }
+  }
 
   try {
+    const updateFields = { dish, description };
+    if (uploadedImageUrl) {
+      updateFields.dishImage = uploadedImageUrl;
+    }
+
     const updatedDish = await Dinner.findOneAndUpdate(
       { _id: dishId, canteen: canteenId },
-      { $set: { dish } },
+      { $set: updateFields },
       { new: true }
     ).exec();
 
@@ -397,6 +448,7 @@ const updateDinnerDish = asyncHandler(async (req, res, next) => {
 });
 
 
+
 module.exports = {
   getCanteenDashboard,
   addBreakfastDish,

diff --git a/server/routes/canteen.js b/server/routes/canteen.js
@@ -43,8 +43,8 @@ router.delete('/:id/dinner/remove',auth,isCanteen, canteenController.removeDinne
 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);
+router.put('/:id/breakfast/updateitem',auth,isCanteen,multerUploads, canteenController.updateBreakfastDish);
+router.put('/:id/lunch/updateitem',auth,isCanteen,multerUploads, canteenController.updateLunchDish);
+router.put('/:id/dinner/updateitem',auth,isCanteen,multerUploads, canteenController.updateDinnerDish);
 
 module.exports = router;
diff --git a/src/components/Modal-update.js b/src/components/Modal-update.js
@@ -1,8 +1,15 @@
-
 import React, { useState } from "react";
 
 const Modalupdate = ({ dish, onUpdate, onCancel }) => {
-  const [updatedDish, setUpdatedDish] = useState(dish);
+  const [updatedDish, setUpdatedDish] = useState({
+    dish: dish.dish,
+    description: dish.description || "",
+    dishImage: null, // For the new image file
+  });
+
+  const handleFileChange = (e) => {
+    setUpdatedDish({ ...updatedDish, dishImage: e.target.files[0] });
+  };
 
   const handleUpdate = () => {
     onUpdate(updatedDish);
@@ -14,8 +21,19 @@ const Modalupdate = ({ dish, onUpdate, onCancel }) => {
         <h2 className="text-2xl mb-4">Edit Dish</h2>
         <input
           type="text"
-          value={updatedDish}
-          onChange={(e) => setUpdatedDish(e.target.value)}
+          value={updatedDish.dish}
+          onChange={(e) => setUpdatedDish({ ...updatedDish, dish: e.target.value })}
+          className="border border-gray-300 p-2 w-full mb-4"
+        />
+        <textarea
+          value={updatedDish.description}
+          onChange={(e) => setUpdatedDish({ ...updatedDish, description: e.target.value })}
+          className="border border-gray-300 p-2 w-full mb-4"
+          placeholder="Description"
+        />
+        <input
+          type="file"
+          onChange={handleFileChange}
           className="border border-gray-300 p-2 w-full mb-4"
         />
         <div className="flex justify-end">

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -81,7 +81,6 @@ const Navbar = () => {
               <Link to="/">
                 <button
                   onClick={logout}
-
                   className={`py-1 px-2  w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}
                 >
                   Log out