Implementing Creating API.
This commit is contained in:
parent
0ede07b0d5
commit
8a5d6158c2
@ -1,12 +1,16 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect } from 'react'
|
||||
import { useProjectName } from '../../hooks/useProjects';
|
||||
import { BranchSchema, defaultBranches } from './BranchSchema';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import Label from '../common/Label';
|
||||
import { useCreateBranch, useServiceProjects, useUpdateBranch } from '../../hooks/useServiceProject';
|
||||
import { useAppForm } from '../../hooks/appHooks/useAppForm';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
const ManageBranch = ({ closeModal,BranchToEdit = null }) => {
|
||||
|
||||
const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
||||
const { data } = {}
|
||||
const { projectId } = useParams();
|
||||
const schema = BranchSchema();
|
||||
const {
|
||||
register,
|
||||
@ -16,23 +20,50 @@ const ManageBranch = ({ closeModal,BranchToEdit = null }) => {
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
} = useAppForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: defaultBranches,
|
||||
defaultValues: {
|
||||
...defaultBranches,
|
||||
projectId: projectId || ""
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
projectNames,
|
||||
loading: projectLoading,
|
||||
error,
|
||||
isError: isProjectError,
|
||||
} = useProjectName();
|
||||
|
||||
const handleClose = () => {
|
||||
reset();
|
||||
closeModal();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (BranchToEdit && data) {
|
||||
reset({
|
||||
branchName: data.branchName || "",
|
||||
projectId: data.project?.id || projectId || "",
|
||||
contactInformation: data.contactInformation || "",
|
||||
address: data.address || "",
|
||||
branchType: data.branchType || "",
|
||||
googleMapUrl: data.googleMapUrl || "",
|
||||
});
|
||||
}
|
||||
}, [data, reset]);
|
||||
|
||||
const { mutate: CreateServiceBranch, isPending: createPending } =
|
||||
useCreateBranch(() => {
|
||||
handleClose();
|
||||
});
|
||||
const { mutate: ServiceBranchUpdate, isPending } =
|
||||
useUpdateBranch(() => handleClose());
|
||||
|
||||
const onSubmit = (fromdata) => {
|
||||
let payload = {
|
||||
...fromdata, projectId,
|
||||
};
|
||||
if (BranchToEdit) {
|
||||
const editPayload = { ...payload, id: data.id };
|
||||
ServiceBranchUpdate({ id: data.id, payload: editPayload });
|
||||
} else {
|
||||
CreateServiceBranch(payload);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container p-3">
|
||||
@ -41,31 +72,8 @@ const ManageBranch = ({ closeModal,BranchToEdit = null }) => {
|
||||
? "Update Branch"
|
||||
: "Create Branch"}
|
||||
</h5>
|
||||
<form onSubmit={handleSubmit(onsubmit)}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-6">
|
||||
<Label className="form-label" required>
|
||||
Select Project
|
||||
</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("projectId")}
|
||||
>
|
||||
<option value="">Select Project</option>
|
||||
{projectLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
projectNames?.map((project) => (
|
||||
<option key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
{errors.projectId && (
|
||||
<small className="danger-text">{errors.projectId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="branchName" className="form-label" required>
|
||||
@ -82,9 +90,6 @@ const ManageBranch = ({ closeModal,BranchToEdit = null }) => {
|
||||
<small className="danger-text">{errors.branchName.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="contactInformation" className="form-label" required>
|
||||
Contact Information
|
||||
@ -100,6 +105,10 @@ const ManageBranch = ({ closeModal,BranchToEdit = null }) => {
|
||||
<small className="danger-text">{errors.contactInformation.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
|
||||
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="address" className="form-label" required>
|
||||
@ -116,10 +125,6 @@ const ManageBranch = ({ closeModal,BranchToEdit = null }) => {
|
||||
<small className="danger-text">{errors.address.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="branchType" className="form-label" required>
|
||||
Branch Type
|
||||
@ -134,6 +139,11 @@ const ManageBranch = ({ closeModal,BranchToEdit = null }) => {
|
||||
<small className="danger-text">{errors.branchType.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
|
||||
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="googleMapUrl" className="form-label" required>
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
import React, { useState } from 'react'
|
||||
import GlobalModel from '../common/GlobalModel';
|
||||
import ManageBranch from './ManageBranch';
|
||||
import { Pagination } from 'swiper/modules';
|
||||
import { useBranches } from '../../hooks/useServiceProject';
|
||||
import { ITEMS_PER_PAGE } from '../../utils/constants';
|
||||
import { useDebounce } from '../../utils/appUtils';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
const ServiceBranch = () => {
|
||||
|
||||
@ -9,12 +14,32 @@ const ServiceBranch = () => {
|
||||
branchId: null,
|
||||
});
|
||||
|
||||
const { projectId } = useParams();
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const debouncedSearch = useDebounce(search, 500);
|
||||
|
||||
const { data, isLoading, isError, error } = useBranches(
|
||||
projectId,
|
||||
debouncedSearch || null,
|
||||
null,
|
||||
currentPage,
|
||||
ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
};
|
||||
|
||||
const ServiceBranch = [
|
||||
{
|
||||
key: "branchName",
|
||||
label: "Branch Name",
|
||||
align: "text-start",
|
||||
getValue: (e) => e?.payee || "N/A",
|
||||
getValue: (e) => e?.branchName || "N/A",
|
||||
},
|
||||
];
|
||||
return (
|
||||
@ -56,84 +81,40 @@ const ServiceBranch = () => {
|
||||
</thead>
|
||||
|
||||
{/* <tbody>
|
||||
{filteredData?.length > 0 ? (
|
||||
filteredData?.map((recurringExpense) => (
|
||||
<tr
|
||||
key={recurringExpense.id}
|
||||
className="align-middle"
|
||||
style={{ height: "40px" }}
|
||||
>
|
||||
{recurringExpenseColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
className={`d-table-cell ${col.align ?? ""} py-3`}
|
||||
>
|
||||
{col?.customRender
|
||||
? col?.customRender(recurringExpense)
|
||||
: col?.getValue(recurringExpense)}
|
||||
{isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={ServiceBranch.length + 1} className="text-center py-5">
|
||||
Loading...
|
||||
</td>
|
||||
))}
|
||||
<td className="sticky-action-column bg-white">
|
||||
<div className="d-flex flex-row gap-2 gap-0">
|
||||
<i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
setViewRecurring({
|
||||
recurringId: recurringExpense?.id,
|
||||
view: true,
|
||||
})
|
||||
}
|
||||
></i>
|
||||
</tr>
|
||||
) : data?.data?.length > 0 ? (
|
||||
data.data.map((branch) => (
|
||||
<tr key={branch.id} className="align-middle">
|
||||
<td className="text-start">{branch.branchName}</td>
|
||||
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end w-auto">
|
||||
<li
|
||||
<td className="text-center">
|
||||
<i
|
||||
className="bx bx-edit text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
setManageServiceBranch({
|
||||
IsOpen: true,
|
||||
RecurringId: recurringExpense?.id,
|
||||
branchId: branch.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||
<i className="bx bx-edit text-primary bx-xs me-2"></i>
|
||||
Modify
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li
|
||||
onClick={() => {
|
||||
setIsDeleteModalOpen(true);
|
||||
setDeletingId(recurringExpense.id);
|
||||
}}
|
||||
>
|
||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||
<i className="bx bx-trash text-danger bx-xs me-2"></i>
|
||||
Delete
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
></i>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={recurringExpenseColumns?.length + 1}
|
||||
className="text-center border-0 py-8"
|
||||
></td>
|
||||
<td colSpan={ServiceBranch.length + 1} className="text-center py-5">
|
||||
No Branch Found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody> */}
|
||||
|
||||
|
||||
</table>
|
||||
{/* )} */}
|
||||
{/* {!filteredData ||
|
||||
@ -162,6 +143,12 @@ const ServiceBranch = () => {
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{/* <Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data?.totalPages}
|
||||
onPageChange={paginate}
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -314,46 +314,45 @@ export const useBranches = (
|
||||
});
|
||||
};
|
||||
|
||||
export const useBranch = (id)=>{
|
||||
export const useBranch = (id) => {
|
||||
return useQuery({
|
||||
queryKey:["branch",id],
|
||||
queryFn:async()=>{
|
||||
queryKey: ["branch", id],
|
||||
queryFn: async () => {
|
||||
const resp = await ServiceProjectRepository.GetBranchDetail(id);
|
||||
return resp.data ?? resp;
|
||||
},
|
||||
enabled:!!id
|
||||
enabled: !!id
|
||||
})
|
||||
}
|
||||
|
||||
export const useCreateBranche =()=>{
|
||||
export const useCreateBranch = (onSuccessCallBack) => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn:async(payload)=> await ServiceProjectRepository.CreateBranch(payload),
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["branches"],
|
||||
});
|
||||
if (onSuccessCallback) onSuccessCallback();
|
||||
showToast("Branch created successfully", "success");
|
||||
mutationFn: async (payload) => {
|
||||
await ServiceProjectRepository.CreateBranch(payload);
|
||||
},
|
||||
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["branches"] });
|
||||
showToast("Branches Created Successfully", "success");
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error?.response?.data?.message ||
|
||||
error.message ||
|
||||
"Failed to create branch",
|
||||
error.message || "Something went wrong please try again !",
|
||||
"error"
|
||||
);
|
||||
},
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateBranch=()=>{
|
||||
export const useUpdateBranch = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn:async({id,payload})=> await ServiceProjectRepository.UpdateBranch(id,payload),
|
||||
onSuccess: (_,variables) => {
|
||||
mutationFn: async ({ id, payload }) => await ServiceProjectRepository.UpdateBranch(id, payload),
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["branches"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["branch",variables.id] });
|
||||
queryClient.invalidateQueries({ queryKey: ["branch", variables.id] });
|
||||
if (onSuccessCallback) onSuccessCallback();
|
||||
showToast("Branch Updated successfully", "success");
|
||||
},
|
||||
@ -368,11 +367,11 @@ export const useUpdateBranch=()=>{
|
||||
})
|
||||
}
|
||||
|
||||
export const useDeleteBranch=()=>{
|
||||
export const useDeleteBranch = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn:async(id)=> await ServiceProjectRepository.DeleteBranch(id),
|
||||
onSuccess: (_,variables) => {
|
||||
mutationFn: async (id) => await ServiceProjectRepository.DeleteBranch(id),
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["branches"] });
|
||||
if (onSuccessCallback) onSuccessCallback();
|
||||
showToast("Branch Deleted successfully", "success");
|
||||
|
||||
@ -41,16 +41,16 @@ export const ServiceProjectRepository = {
|
||||
//#endregion
|
||||
|
||||
//#region Project Branch
|
||||
CreateBranch: (data) => api.post(`/api/ServiceProject/create`, data),
|
||||
CreateBranch: (data) => api.post(`/api/ServiceProject/branch/create`, data),
|
||||
UpdateBranch: (id, data) =>
|
||||
api.put("/api/ServiceProject/branch/edit/${id}", data),
|
||||
GetBranchList: (projectId, isActive, pageSize, pageNumber, searchString) => {
|
||||
api.get(
|
||||
`/api/ServiceProject/branch/list/${projectId}&isActive=${isActive}&pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}`
|
||||
`/api/ServiceProject/branch/list/${projectId}/?isActive=${isActive}&pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}`
|
||||
);
|
||||
},
|
||||
|
||||
GetBranchDetail: (id) => api.get(`/api/ServiceProject/branch/details/${id}`),
|
||||
DeleteBranch: (id) => api.delete(`/api/ServiceProject/branch/delete/${id}`),
|
||||
};
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user