Edit or update Functionality done

Author: 5codeman

app.js

@@ -9,8 +9,8 @@ app.use(bodyParser.json()); // It parses only json object(when any request post
 
 // connect to the mysql DB
 const sequelize = require('./util/database');
-const User = require('./models/user');
-const Expense = require('./models/expense');
+const User = require('./models/user');  // ? What is use of this
+const Expense = require('./models/expense'); // ? What is use of this
 
 // set the static folder in my express (by the we can use css and js file)
 app.use(express.static('./public'));
@@ -20,7 +20,7 @@ app.use('/', require('./router/user'));
 app.use('/user', require('./router/user'));
 app.use('/expense', require('./router/expense'));
 
-sequelize.sync().then((result) => {
+sequelize.sync().then((result) => { // ? How this .sync find the all module for creating table
     app.listen(port, function (err) {
         if (err) {
             console.log(`Error in running the server: ${err}`);

controllers/expense_controller.js

@@ -66,4 +66,32 @@ exports.deleteExpense = async (req, res) => {
     } catch (err) {
         console.log(err);
     }
-};
+};
+
+exports.updateExpense = async (req, res) => {
+    try {
+        const id = req.params.id;
+        const category = req.body.category;
+        const description = req.body.description;
+        const amount = req.body.amount;
+
+        //   const expense = await Expense.findByPk(id);
+
+        //   await User.update(
+        //     {
+        //       totalExpenses: req.user.totalExpenses - expense.amount + Number(amount),
+        //     },
+        //     { where: { id: req.user.id } }
+        //   );
+
+        await Expense.update({
+            category: category,
+            description: description,
+            amount: amount
+        }, { where: { id: id } } //, userId: req.user.id
+        );
+        res.redirect("/user_dashboard");
+    } catch (err) {
+        console.log(err);
+    }
+};

public/js/user_dashboard.js

@@ -245,52 +245,57 @@ async function deleteExpense(e) {
     }
 }
 
-// async function editExpense(e) {
-//     try {
-//         const token = localStorage.getItem("token");
-//         const categoryValue = document.getElementById("categoryBtn");
-//         const descriptionValue = document.getElementById("descriptionValue");
-//         const amountValue = document.getElementById("amountValue");
-//         const addExpenseBtn = document.getElementById("submitBtn");
-//         if (e.target.classList.contains("edit")) {
-//             let tr = e.target.parentElement.parentElement;
-//             let id = tr.children[0].textContent;
-//             //Fill the input values with the existing values
-//             const res = await axios.get(
-//                 "http://localhost:3000/expense/getAllExpenses",
-//                 { headers: { Authorization: token } }
-//             );
-//             res.data.forEach((expense) => {
-//                 if (expense.id == id) {
-//                     categoryValue.textContent = expense.category;
-//                     descriptionValue.value = expense.description;
-//                     amountValue.value = expense.amount;
-//                     addExpenseBtn.textContent = "Update";
-
-//                     // const form = document.getElementById("form1");
-//                     addExpenseBtn.removeEventListener("click", addExpense);
-
-//                     addExpenseBtn.addEventListener("click", async function update(e) {
-//                         e.preventDefault();
-//                         console.log("request to backend for edit");
-//                         const res = await axios.post(
-//                             `http://localhost:3000/expense/editExpense/${id}`,
-//                             {
-//                                 category: categoryValue.textContent.trim(),
-//                                 description: descriptionValue.value,
-//                                 amount: amountValue.value,
-//                             },
-//                             { headers: { Authorization: token } }
-//                         );
-//                         window.location.reload();
-//                     });
-//                 }
-//             });
-//         }
-//     } catch {
-//         (err) => console.log(err);
-//     }
-// }
+table.addEventListener("click", (e) => {
+    editExpense(e);
+});
+
+async function editExpense(e) {
+    try {
+        // const token = localStorage.getItem("token");
+        const categoryValue = document.getElementById("categoryBtn");
+        const descriptionValue = document.getElementById("descriptionValue");
+        const amountValue = document.getElementById("amountValue");
+        const addExpenseBtn = document.getElementById("submitBtn");
+
+        if (e.target.classList.contains("edit")) {
+            let tr = e.target.parentElement.parentElement;
+            let id = tr.children[0].textContent;
+            //Fill the input values with the existing values
+            const res = await axios.get(
+                "http://localhost:9000/expense/getAllExpenses" // here not need of api call we can acess all the data from tr.children[1] tr.children[2].... so on
+                // ,{ headers: { Authorization: token } }
+            );
+            res.data.forEach((expense) => {
+                if (expense.id == id) {
+                    categoryValue.textContent = expense.category;
+                    descriptionValue.value = expense.description;
+                    amountValue.value = expense.amount;
+                    addExpenseBtn.textContent = "Update";
+
+                    // const form = document.getElementById("form1");
+                    addExpenseBtn.removeEventListener("click", addExpense);
+
+                    addExpenseBtn.addEventListener("click", async function update(e) {
+                        e.preventDefault();
+                        // console.log("request to backend for edit");
+                        const res = await axios.post(
+                            `http://localhost:9000/expense/updateExpense/${id}`,
+                            {
+                                category: categoryValue.textContent.trim(),
+                                description: descriptionValue.value,
+                                amount: amountValue.value,
+                            }
+                            //, { headers: { Authorization: token } }
+                        );
+                        window.location.reload();
+                    });
+                }
+            });
+        }
+    } catch {
+        (err) => console.log(err);
+    }
+}
 
 // async function buyPremium(e) {
 //     const token = localStorage.getItem("token");
@@ -354,8 +359,4 @@ async function deleteExpense(e) {
 
 // document.addEventListener("DOMContentLoaded", isPremiumUser);
 
-
-// table.addEventListener("click", (e) => {
-//     editExpense(e);
-// });
 // logoutBtn.addEventListener("click", logout);

router/expense.js

@@ -9,4 +9,6 @@ router.get('/getAllExpenses', expenseController.getAllExpenses);
 
 router.get('/deleteExpense/:id', expenseController.deleteExpense);
 
+router.post('/updateExpense/:id', expenseController.updateExpense);
+
 module.exports = router;