From 7b2a4ea834ffacad4c3a99f20d242e09b9a453b8 Mon Sep 17 00:00:00 2001 From: pramod mahajan Date: Tue, 22 Jul 2025 18:53:17 +0530 Subject: [PATCH] initiated forn edit and created with one component --- src/components/Expenses/ExpenseList.jsx | 6 +-- src/components/Expenses/ExpenseSchema.js | 15 +++++++ .../{CreateExpense.jsx => ManageExpense.jsx} | 41 +++++++++++-------- src/hooks/useExpense.js | 13 ++++++ src/pages/Expense/ExpensePage.jsx | 7 +++- src/repositories/ExpsenseRepository.jsx | 5 ++- 6 files changed, 63 insertions(+), 24 deletions(-) rename src/components/Expenses/{CreateExpense.jsx => ManageExpense.jsx} (93%) diff --git a/src/components/Expenses/ExpenseList.jsx b/src/components/Expenses/ExpenseList.jsx index bb4d523a..65fdbd2a 100644 --- a/src/components/Expenses/ExpenseList.jsx +++ b/src/components/Expenses/ExpenseList.jsx @@ -7,7 +7,7 @@ import Pagination from "../common/Pagination"; import { ITEMS_PER_PAGE } from "../../utils/constants"; const ExpenseList = () => { - const { setViewExpense } = useExpenseContext(); + const { setViewExpense,setExpenseModal } = useExpenseContext(); const [currentPage, setCurrentPage] = useState(1); const pageSize = 10; @@ -197,14 +197,12 @@ const ExpenseList = () => { setExpenseModal({isOpen:true,ExpEdit:expense})} > - diff --git a/src/components/Expenses/ExpenseSchema.js b/src/components/Expenses/ExpenseSchema.js index 99b75633..a2e11ed7 100644 --- a/src/components/Expenses/ExpenseSchema.js +++ b/src/components/Expenses/ExpenseSchema.js @@ -68,6 +68,21 @@ export const ExpenseSchema = (expenseTypes) => { }); }; +export const defaultExpense = { + projectId: "", + expensesTypeId: "", + paymentModeId: "", + paidById: "", + transactionDate: "", + transactionId: "", + description: "", + location: "", + supplerName: "", + amount: "", + noOfPersons: "", + billAttachments: [], + } + export const ActionSchema = z.object({ comment : z.string().min(1,{message:"Please leave comment"}), selectedStatus: z.string().min(1, { message: "Please select a status" }), diff --git a/src/components/Expenses/CreateExpense.jsx b/src/components/Expenses/ManageExpense.jsx similarity index 93% rename from src/components/Expenses/CreateExpense.jsx rename to src/components/Expenses/ManageExpense.jsx index cddc79dd..44283453 100644 --- a/src/components/Expenses/CreateExpense.jsx +++ b/src/components/Expenses/ManageExpense.jsx @@ -1,7 +1,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import React, { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; -import { ExpenseSchema } from "./ExpenseSchema"; +import { defaultExpense, ExpenseSchema } from "./ExpenseSchema"; import { formatFileSize } from "../../utils/appUtils"; import { useProjectName } from "../../hooks/useProjects"; import { useDispatch, useSelector } from "react-redux"; @@ -18,7 +18,7 @@ import { import Avatar from "../common/Avatar"; import { useCreateExpnse } from "../../hooks/useExpense"; -const CreateExpense = ({closeModal}) => { +const CreateExpense = ({closeModal,expenseToEdit,}) => { const [ExpenseType, setExpenseType] = useState(); const dispatch = useDispatch(); const { @@ -36,21 +36,30 @@ const CreateExpense = ({closeModal}) => { formState: { errors }, } = useForm({ resolver: zodResolver(schema), - defaultValues: { - projectId: "", - expensesTypeId: "", - paymentModeId: "", - paidById: "", - transactionDate: "", - transactionId: "", - description: "", - location: "", - supplerName: "", - amount: "", - noOfPersons: "", - billAttachments: [], - }, + defaultValues: defaultExpense, }); + console.log(expenseToEdit) + + useEffect(() => { + if (expenseToEdit) { + reset({ + projectId: expenseToEdit.project.id || "", + expensesTypeId: expenseToEdit.expensesType.id + || "", + paymentModeId: expenseToEdit.paymentMode.id || "", + paidById: expenseToEdit.paidBy.id || "", + transactionDate: expenseToEdit.transactionDate?.slice(0, 10) || "", + transactionId: expenseToEdit.transactionId || "", + description: expenseToEdit.description || "", + location: expenseToEdit.location || "", + supplerName: expenseToEdit.supplerName || "", + amount: expenseToEdit.amount || "", + noOfPersons: expenseToEdit.noOfPersons || "", + billAttachments: expenseToEdit.billAttachments || [], + }); + } +}, [expenseToEdit, reset]); + const selectedproject = watch("projectId"); const selectedProject = useSelector( diff --git a/src/hooks/useExpense.js b/src/hooks/useExpense.js index 4d5afdf0..2e9a5e56 100644 --- a/src/hooks/useExpense.js +++ b/src/hooks/useExpense.js @@ -50,6 +50,19 @@ export const useCreateExpnse = (onSuccessCallBack) => { }); }; +export const useUpdateExepse =()=>{ +const queryClient = useQueryClient(); + +return useMutation({ + mutationFn:async (id,payload)=>{ + const response = await ExpenseRepository.UpdateExpense(id,payload) + }, + onSuccess:(updatedExpense,variables)=>{ + // updation list and details + } +}) +} + export const useActionOnExpense = (onSuccessCallBack) => { const queryClient = useQueryClient(); diff --git a/src/pages/Expense/ExpensePage.jsx b/src/pages/Expense/ExpensePage.jsx index 7a98c49e..8c9fe46b 100644 --- a/src/pages/Expense/ExpensePage.jsx +++ b/src/pages/Expense/ExpensePage.jsx @@ -1,7 +1,7 @@ import React, { createContext, useContext, useState } from "react"; import ExpenseList from "../../components/Expenses/ExpenseList"; -import CreateExpense from "../../components/Expenses/CreateExpense"; +import CreateExpense from "../../components/Expenses/ManageExpense"; import ViewExpense from "../../components/Expenses/ViewExpense"; import Breadcrumb from "../../components/common/Breadcrumb"; import GlobalModel from "../../components/common/GlobalModel"; @@ -11,7 +11,10 @@ export const ExpenseContext = createContext(); export const useExpenseContext = () => useContext(ExpenseContext); const ExpensePage = () => { - const [isNewExpense, setNewExpense] = useState(false); + const [expenseModal, setExpenseModal] = useState({ + isOpen: false, + ExpEdit: false, + }); const [viewExpense, setViewExpense] = useState({ expenseId: null, view: false, diff --git a/src/repositories/ExpsenseRepository.jsx b/src/repositories/ExpsenseRepository.jsx index 376cb534..eedf5a7d 100644 --- a/src/repositories/ExpsenseRepository.jsx +++ b/src/repositories/ExpsenseRepository.jsx @@ -12,10 +12,11 @@ const ExpenseRepository = { GetExpenseDetails:(id)=>api.get(`/api/Expense/details/${id}`), CreateExpense:(data)=>api.post("/api/Expense/create",data), - UpdateExpense:(id)=>api.put(`/api/Expense/edit/${id}`), + UpdateExpense:(id,data)=>api.put(`/api/Expense/edit/${id}`,data), DeleteExpense:(id)=>api.delete(`/api/Expense/edit/${id}`), - ActionOnExpense:(data)=>api.post('/api/expense/action',data) + ActionOnExpense:(data)=>api.post('/api/expense/action',data), + }