Skip to content
Extraits de code Groupes Projets
Valider 0d69a8e7 rédigé par salaheddine zidani's avatar salaheddine zidani
Parcourir les fichiers

Integrate ShippingClass backend and frontend

parent 91f043ad
Branches
Pipeline #1779 réussi avec l'étape
in 4 minutes et 4 secondes
Masquer les modifications d'espaces
En ligne Côte à côte
src/contexts/types/Shipping.ts
+ 1
− 1
Voir le fichier @ 0d69a8e7
......@@ -103,7 +103,7 @@ export type ShippingClass = {
name: string;
code: string;
description: string;
productAssigned: number;
productAssigned?: number;
};
......
src/shared/api/server.ts
+ 10
− 0
Voir le fichier @ 0d69a8e7
import axios, { AxiosRequestConfig } from 'axios';
import { comment } from 'postcss';
import { shippingClassesList } from '../_mock/_shipping';
export const HOST_API = 'http://localhost:8080';
......@@ -38,4 +39,13 @@ export const endpoints = {
realTime : (keyStream:string) => `/api/stats/${keyStream}`,
}
},
shipping:{
shippingClass:{
getAll: `/shipping/shipping-class`,
getById:(shippingClassId:string)=> `/shipping/shipping-class/${shippingClassId}`,
add: "/shipping/shipping-class",
edit:(shippingClassId:string)=> `/shipping/shipping-class/${shippingClassId}`,
delete:(shippingClassId:string)=> `/shipping/shipping-class/${shippingClassId}`,
}
}
};
src/shared/api/shipping.ts
+ 62
− 8
Voir le fichier @ 0d69a8e7
import { ShippingClass } from "@/contexts/types/Shipping";
import { endpoints, fetcher } from "@/utils/axios";
import { useMemo } from "react";
import useSWR from "swr";
import { _orders } from "../_mock";
import axiosInstance, { fetcher, endpoints } from './server';
import { mutate, revalidateEvents } from "swr/_internal";
import { success } from "@/theme/palette";
const options = {
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false,
}
export function useGetShippingClass(shippingClassId: string){
const URL = shippingClassId ? [endpoints.shipping.shippingClass.details, {params: { shippingClassId }}] : '';
const { data,isLoading, error, isValidating } = useSWR(URL, fetcher);
///////////////////-----------ShippingClass----------///////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
export function useGetShippingClasses() {
const URL = [endpoints.shipping.shippingClass.getAll];
const { data, error } = useSWR<ShippingClass[]>(URL, fetcher, options);
const memoizedValue = useMemo(
() => ({
shippingClass: data?.shippingClass as ShippingClass,
shippingClassLoading: isLoading,
shippingClassData: (data as ShippingClass[]) || [],
shippingClassError: error,
shippingClassValidating: isValidating,
}),
[data?.shippingClass, error, isLoading, isValidating]
[data, error]
);
return memoizedValue;
}
export function useGetShippingClass(shippingClassId: string) {
const { data, error } = useSWR<ShippingClass>(
shippingClassId ? endpoints.shipping.shippingClass.getById(shippingClassId) : null,
fetcher
);
const memoizedValue = useMemo(
() => ({
shippingClass: data,
shippingClassError: error,
}),
[data, error]
);
return memoizedValue;
}
export async function useAddShippingClass(data: ShippingClass) {
const formData = {
name: data.name,
code: data.code,
description: data.description,
}
const response = await axiosInstance.post(endpoints.shipping.shippingClass.add, formData);
const newData: ShippingClass = response.data;
mutate([endpoints.shipping.shippingClass.getAll], (shippingClasses: ShippingClass[] = []) => [...shippingClasses, newData], true);
return newData;
}
export async function useUpdateShippingClass(id: string, updatedShippingClass: ShippingClass) {
const response = await axiosInstance.put(endpoints.shipping.shippingClass.edit(id), updatedShippingClass);
const updatedData: ShippingClass = response.data;
mutate([endpoints.shipping.shippingClass.getAll], (shippingClasses: ShippingClass[] = []) =>
shippingClasses.map((shippingClass) =>
shippingClass.id === id ? updatedData : shippingClass
),
true
);
return response.data as ShippingClass;
}
export async function useDeleteShippingClass(id: string) {
const response = await axiosInstance.delete(endpoints.shipping.shippingClass.delete(id));
mutate(endpoints.shipping.shippingClass.getAll);
return response.status;
}
src/shared/sections/shipping/general/shippingClass/ShippingClassTableView.tsx
+ 161
− 111
Voir le fichier @ 0d69a8e7
......@@ -25,11 +25,12 @@ import { ShippingClass } from '@/contexts/types/Shipping';
import ShippingClassTableRow from './ShippingClassTableRow';
import RouterLink from '@/routes/router-link';
import * as Yup from 'yup';
import { useForm } from 'react-hook-form';
import { Controller, useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { useMemo } from 'react';
import { Box, Modal, TextField, Typography } from '@mui/material';
import FormProvider from '@/components/hook-form/form-provider';
import { useUpdateShippingClass, useDeleteShippingClass, useGetShippingClasses, useAddShippingClass } from '@/shared/api/shipping';
......@@ -48,38 +49,21 @@ export default function ShippingClassTableView() {
const settings = useSettingsContext();
const router = useRouter();
const table = useTable({ defaultOrderBy: 'title' });
const [tableData, setTableData] = useState<ShippingClass[]>(shippingClassesList);
const { shippingClassData } = useGetShippingClasses();
const [tableData, setTableData] = useState<ShippingClass[]>(shippingClassData);
//----------------------------------------------------------------------------------
const dataInPage = tableData.slice(
table.page * table.rowsPerPage,
table.page * table.rowsPerPage + table.rowsPerPage
);
const denseHeight = table.dense ? 56 : 56 + 20;
const notFound = (!tableData.length) || !tableData.length;
//----------------------------------------------------------------------------------
const [openAddModal, setOpenAddModal] = useState(false);
const [openEditModal, setOpenEditModal] = useState(false);
const handleAddClick = () => {
methods.reset(defaultValues);
setOpenAddModal(true);
};
const handleEditClick = (id: string) => {
const shippingClassEdited: ShippingClass | undefined = tableData.find((c) => c.id === id);
if (shippingClassEdited) {
setShippingClassEditing(shippingClassEdited);
}
methods.reset(defaultValues);
setOpenEditModal(true);
};
const [shippingClassEditing, setShippingClassEditing] = useState<ShippingClass>();
const NewShippingClassSchema = Yup.object().shape({
......@@ -102,59 +86,44 @@ export default function ShippingClassTableView() {
const {
reset,
handleSubmit,
formState: { isSubmitting },
control
} = methods;
useEffect(() => {
setTableData(shippingClassData);
}, [shippingClassData])
useEffect(() => {
if (shippingClassEditing) {
reset(defaultValues);
}
console.log(defaultValues);
}, [shippingClassEditing, defaultValues, reset])
const onSubmit = handleSubmit(async (data) => {
try {
await new Promise((resolve) => setTimeout(resolve, 500));
reset();
enqueueSnackbar('Success!', { variant: 'success' });
console.info('Form Data:', data);
} catch (error) {
console.error(error);
enqueueSnackbar('Failed', { variant: 'error' });
////////////////////////Show and close Add and Edit Modal//////////////////////////////
const handleAddClick = () => {
setShippingClassEditing(undefined);
methods.reset(defaultValues);
setOpenAddModal(true);
};
const handleEditClick = (id: string) => {
const shippingClassEdited = tableData.find((c) => c.id === id);
if (shippingClassEdited) {
setShippingClassEditing(shippingClassEdited);
methods.reset(defaultValues);
setOpenEditModal(true);
}
});
};
const handleCloseEditModal = () => {
setOpenEditModal(false);
setShippingClassEditing(undefined);
setSelectedShippingClass(null);
reset();
};
const handleCloseAddModal = () => {
setOpenAddModal(false);
reset();
};
const handleAddFormSubmit = () => {
setOpenAddModal(false);
};
const handleEditFormSubmit = () => {
setOpenEditModal(false);
};
//-----------------------------------------------------------------
const handleDeleteRow = useCallback(
(id: string) => {
const deleteRow = tableData.filter((row) => row.id !== id);
enqueueSnackbar('Delete success!');
setTableData(deleteRow);
table.onUpdatePageDeleteRow(dataInPage.length);
},
[dataInPage.length, enqueueSnackbar, table, tableData]
);
//----------------view details--------------
const [selectedShippingClass, setSelectedShippingClass] = useState<ShippingClass | null>(null);
......@@ -164,12 +133,59 @@ export default function ShippingClassTableView() {
const handleViewRow = useCallback(
(id: string) => {
const shippingClass = tableData.find((a) => a.id === id);
handelSelectedShippingClass(shippingClass)
handelSelectedShippingClass(shippingClass);
setShippingClassEditing(shippingClass);
},
[tableData]
);
/////////////////////////////
/////////////////////////////CRUD Method///////////////////////////
const handleAddFormSubmit = (formData: any) => {
useAddShippingClass(formData)
.then(() => {
enqueueSnackbar("ShippingClass created successfully", { variant: "success" });
reset();
setOpenAddModal(false);
})
.catch((error) => {
enqueueSnackbar(error, { variant: 'error' });
console.log(error)
})
};
const handleEditFormSubmit = (data: any) => {
if (shippingClassEditing) {
const formDataEdit = {
id: shippingClassEditing.id,
...data,
};
useUpdateShippingClass(shippingClassEditing?.id, formDataEdit).then(() => {
enqueueSnackbar('ShippingClass updated successfully', { variant: 'success' });
setOpenEditModal(false);
reset();
}).catch((error) => {
enqueueSnackbar(error, { variant: 'error' });
console.error(error);
})
}
};
const handleDeleteRow = useCallback(
async (id: string) => {
try {
await useDeleteShippingClass(id);
const updatedTableData = tableData.filter((row) => row.id !== id);
setTableData(updatedTableData);
table.onUpdatePageDeleteRow(updatedTableData.length);
enqueueSnackbar('Classe d\'expédition supprimée avec succès', { variant: 'success' });
} catch (error) {
console.error(`Error deleting shipping class with ID ${id}:`, error);
enqueueSnackbar('Erreur lors de la suppression de la classe d\'expédition', { variant: 'error' });
}
},
[tableData, table, enqueueSnackbar]
);
return (
<>
......@@ -265,72 +281,106 @@ export default function ShippingClassTableView() {
</LocalizationProvider>
<Modal open={openAddModal} onClose={handleCloseAddModal}>
<FormProvider methods={methods} onSubmit={onSubmit}>
<Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 500, bgcolor: 'background.paper', boxShadow: 24, p: 4, borderRadius: 3 }}>
<Typography variant="h6" align="center" gutterBottom sx={{ mt: 2, mb: 3 }}>Ajouter une classe d'expédition</Typography>
<TextField
name='name'
label="Nom"
type="text"
sx={{ m: 1, width: '97%' }}
<Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 500, bgcolor: 'background.paper', boxShadow: 24, p: 4, borderRadius: 3 }}>
<Typography variant="h6" align="center" gutterBottom sx={{ mt: 2, mb: 3 }}>Ajouter une classe d'expédition</Typography>
<FormProvider methods={methods} onSubmit={handleSubmit(handleAddFormSubmit)}>
<Controller
name="name"
control={control}
render={({ field }) => (
<TextField
{...field}
label="Nom"
fullWidth
margin="normal"
/>
)}
/>
<TextField
name='code'
label="Code"
type="text"
sx={{ ml: 1, mr: 1, mb: 1, width: '97%' }}
<Controller
name="code"
control={control}
render={({ field }) => (
<TextField
{...field}
label="Code"
fullWidth
margin="normal"
/>
)}
/>
<TextField
name='description'
label="Description"
placeholder="Description..."
type="text"
multiline
rows={4}
sx={{ ml: 1, mr: 1, width: '97%' }}
<Controller
name="description"
control={control}
render={({ field }) => (
<TextField
{...field}
label="Description"
fullWidth
margin="normal"
multiline
rows={4}
/>
)}
/>
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
<Button onClick={() => setOpenAddModal(false)} sx={{ mt: 2, mb: 2, mr: 1 }} variant="outlined" color="inherit">Annuler</Button>
<Button onClick={handleAddFormSubmit} sx={{ mt: 2, mb: 2 }} variant="contained" color="inherit">Ajouter</Button>
<Button onClick={handleCloseAddModal} sx={{ mt: 2, mb: 2, mr: 1 }} variant="outlined" color="inherit">Annuler</Button>
<Button type='submit' sx={{ mt: 2, mb: 2 }} variant="contained" color="inherit">Ajouter</Button>
</Box>
</Box>
</FormProvider>
</Modal>
</FormProvider>
</Box>
</Modal >
<Modal open={openEditModal} onClose={handleCloseEditModal}>
<FormProvider methods={methods} onSubmit={onSubmit}>
<Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 500, bgcolor: 'background.paper', boxShadow: 24, p: 4, borderRadius: 3 }}>
<Typography variant="h6" align="center" gutterBottom sx={{ mt: 2, mb: 3 }}>Modifier une classe d'expédition</Typography>
<TextField
name='name'
label="Nom"
type="text"
defaultValue={shippingClassEditing?.name}
sx={{ m: 1, width: '97%' }}
<Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 500, bgcolor: 'background.paper', boxShadow: 24, p: 4, borderRadius: 3 }}>
<Typography variant="h6" align="center" gutterBottom sx={{ mt: 2, mb: 3 }}>Modifier une classe d'expédition</Typography>
<FormProvider methods={methods} onSubmit={handleSubmit(handleEditFormSubmit)}>
<Controller
name="name"
control={control}
render={({ field }) => (
<TextField
{...field}
label="Nom"
fullWidth
margin="normal"
defaultValue={shippingClassEditing?.name}
/>
)}
/>
<TextField
name='code'
label="Code"
type="text"
defaultValue={shippingClassEditing?.code}
sx={{ ml: 1, mr: 1, mb: 1, width: '97%' }}
<Controller
name="code"
control={control}
render={({ field }) => (
<TextField
{...field}
label="Code"
fullWidth
margin="normal"
defaultValue={shippingClassEditing?.code}
/>
)}
/>
<TextField
name='description'
label="Description"
placeholder="Description..."
type="text"
defaultValue={shippingClassEditing?.description}
multiline
rows={4}
sx={{ ml: 1, mr: 1, width: '97%' }}
<Controller
name="description"
control={control}
render={({ field }) => (
<TextField
{...field}
label="Description"
fullWidth
margin="normal"
multiline
rows={4}
defaultValue={shippingClassEditing?.description}
/>
)}
/>
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
<Button onClick={() => setOpenEditModal(false)} sx={{ mt: 2, mb: 2, mr: 1 }} variant="outlined" color="inherit">Annuler</Button>
<Button onClick={handleEditFormSubmit} sx={{ mt: 2, mb: 2 }} variant="contained" color="inherit">Modifier</Button>
<Button onClick={handleCloseEditModal} sx={{ mt: 2, mb: 2, mr: 1 }} variant="outlined" color="inherit">Annuler</Button>
<Button type='submit' sx={{ mt: 2, mb: 2 }} variant="contained" color="inherit">Modifier</Button>
</Box>
</Box>
</FormProvider>
</FormProvider>
</Box>
</Modal>
</>
);
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter