fixing update delete reward

This commit is contained in:
Raja Oktafrianto
2025-04-09 09:56:26 +07:00
parent 0c5608273f
commit 0a1ff7de18
6 changed files with 81 additions and 76 deletions

View File

@ -130,7 +130,7 @@ const AddDialog = () => {
} }
doCreateProduct(e); doCreateProduct(e);
console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };

View File

@ -109,7 +109,7 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
const response = await GetData(`${API_URL}/product/getdata/${id}`, { id }); const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
console.log(response); // console.log(response);
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({

View File

@ -14,6 +14,7 @@ import { apiConfig } from '@/config/api.config';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { getAuth } from '@/auth'; import { getAuth } from '@/auth';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { NumericFormat } from 'react-number-format';
import { useManageRewardContext } from '../hooks/useManageRewardContext'; import { useManageRewardContext } from '../hooks/useManageRewardContext';
import { import {
Select, Select,
@ -57,7 +58,7 @@ const AddDialog = () => {
const doCreateReward = useCallback( const doCreateReward = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
console.log('Data yang akan dikirim:', formField); // console.log('Data yang akan dikirim:', formField);
const response = await PostData(`${API_URL}/reward/create`, formField); const response = await PostData(`${API_URL}/reward/create`, formField);
if (response?.status) { if (response?.status) {
@ -91,20 +92,15 @@ const AddDialog = () => {
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
const handleReset = () => {
resetForm();
setAlert({ show: false, message: '' });
};
useEffect(() => { useEffect(() => {
if (showAddDialog) { if (showAddDialog) {
setFormField({ setFormField((prev) => ({
...formField, ...prev,
created_by: parsedUser?.username, created_by: parsedUser?.username,
created_at: formattedTime created_at: formattedTime
}); }));
} }
}, [formattedTime]); }, [showAddDialog, parsedUser?.username, formattedTime]);
useEffect(() => { useEffect(() => {
if (showAddDialog === false) { if (showAddDialog === false) {
@ -159,19 +155,19 @@ const AddDialog = () => {
Amount<span className="text-red-500">*</span> Amount<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input col-span-6" className="input col-span-6"
type="number"
min={0}
step={0.01}
value={formField.amount} value={formField.amount}
onChange={(e) => { thousandSeparator="."
const value = parseFloat(e.target.value); decimalSeparator=","
setFormField({ allowNegative={false}
...formField, onValueChange={(values) => {
amount: isNaN(value) ? 0 : value setFormField((prev) => ({
}); ...prev,
amount: values.floatValue || 0
}));
}} }}
placeholder="Enter Amount"
/> />
</div> </div>
<div className="grid grid-cols-8 gap-2 w-full items-center"> <div className="grid grid-cols-8 gap-2 w-full items-center">

View File

@ -25,13 +25,16 @@ const DeleteDialog = () => {
message: '' message: ''
}); });
// console.log('ini data :', selectedReward);
const doDeleteReward = useCallback(async () => { const doDeleteReward = useCallback(async () => {
if (!selectedReward) { if (!selectedReward) {
toast.error('No Reward selected'); toast.error('No Reward selected');
return; return;
} }
const response = await DeleteData(`${API_URL}/reward/delete/${selectedReward}`, { // console.log('Ini datanya:', selectedReward);
id: selectedReward const response = await DeleteData(`${API_URL}/reward/delete/${selectedReward?.id}/true`, {
id: selectedReward.id
}); });
if (response?.status) { if (response?.status) {

View File

@ -14,6 +14,7 @@ import {
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { NumericFormat } from 'react-number-format';
import { import {
Select, Select,
SelectContent, SelectContent,
@ -58,7 +59,8 @@ const EditDialog = () => {
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
const response = await PutData(`${API_URL}/reward/update/${selectedReward}`, formField); // console.log('Ini datanya:', selectedReward);
const response = await PutData(`${API_URL}/reward/update/${selectedReward?.id}`, formField);
if (response?.status) { if (response?.status) {
resetForm(); resetForm();
@ -74,16 +76,17 @@ const EditDialog = () => {
); );
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
// console.log('Ini datanya:', id);
const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id }); const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
console.log('API Response:', response); // console.log('API Response:', response);
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
name: response?.data.name, name: response.data.name,
type: response?.data.type, type: response.data.type,
amount: response?.data.amount, amount: response.data.amount,
status: response?.data.status status: response.data.status
})); }));
} }
}, []); }, []);
@ -107,21 +110,20 @@ const EditDialog = () => {
// }; // };
useEffect(() => { useEffect(() => {
// console.log('Selected Reward:', selectedReward);
if (selectedReward) { if (selectedReward) {
doFetchData(selectedReward); doFetchData(selectedReward.id.toString());
} }
}, [selectedReward]); }, [selectedReward]);
useEffect(() => { useEffect(() => {
if (showEditDialog) { if (showEditDialog && selectedReward) {
setFormField({ setFormField((prev) => ({
...formField, ...prev,
updated_by: parsedUser.username, updated_by: parsedUser.username,
updated_at: formattedTime updated_at: formattedTime
}); }));
} }
}, [formattedTime]); }, [showEditDialog, selectedReward]);
useEffect(() => { useEffect(() => {
if (showEditDialog === false) { if (showEditDialog === false) {
@ -142,67 +144,71 @@ const EditDialog = () => {
<form onSubmit={doUpdateReward}> <form onSubmit={doUpdateReward}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label"> <label className="form-label flex items-center gap-1 col-span-2">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<Input <Input
className="input" className="input col-span-6"
type="text" type="text"
value={formField.name} value={formField.name}
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))} onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
/> />
</div> </div>
<div className="w-full"> <div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label"> <label className="form-label flex items-center gap-1 col-span-2">
Type<span className="text-red-500">*</span> Type<span className="text-red-500">*</span>
</label> </label>
<Input <Input
className="input" className="input col-span-6"
type="text" type="text"
value={formField.type} value={formField.type}
onChange={(e) => setFormField({ ...formField, type: e.target.value })} onChange={(e) => setFormField({ ...formField, type: e.target.value })}
/> />
</div> </div>
<div className="w-full"> <div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label"> <label className="form-label flex items-center gap-1 col-span-2">
Amount<span className="text-red-500">*</span> Amount<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input col-span-6"
type="number"
min={0}
step={0.01}
value={formField.amount} value={formField.amount}
onChange={(e) => { thousandSeparator="."
const value = parseFloat(e.target.value); decimalSeparator=","
setFormField({ allowNegative={false}
...formField, onValueChange={(values) => {
amount: isNaN(value) ? 0 : value setFormField((prev) => ({
}); ...prev,
amount: values.floatValue || 0
}));
}} }}
placeholder="Enter Amount"
/> />
</div> </div>
<div className="w-full"> <div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label"> <label className="form-label flex items-center gap-1 col-span-2">
Status<span className="text-red-500">*</span> Status<span className="text-red-500">*</span>
</label> </label>
<Select <div className="col-span-6">
value={formField.status} <Select
onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))} value={formField.status}
> onValueChange={(value) =>
<SelectTrigger className="w-full"> setFormField((prev) => ({ ...prev, status: value }))
<SelectValue placeholder="Select" defaultValue={formField.status} /> }
</SelectTrigger> >
<SelectContent> <SelectTrigger className="w-full">
<SelectItem value="Y">Active</SelectItem> <SelectValue placeholder="Select" defaultValue={formField.status} />
<SelectItem value="N">InActive</SelectItem> </SelectTrigger>
</SelectContent> <SelectContent>
</Select> <SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">InActive</SelectItem>
</SelectContent>
</Select>
</div>
</div> </div>
<div className="flex justify-end gap-5"> <div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}> <Button type="button" variant="outline" onClick={resetForm}>

View File

@ -26,10 +26,10 @@ interface ContextProps {
showAddDialog: boolean; showAddDialog: boolean;
handleAddDialog: (show: boolean) => void; handleAddDialog: (show: boolean) => void;
showEditDialog: boolean; showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_reward: string | null) => void; handleEditDialog: (show: boolean, selected_reward: Reward | null) => void;
showDeleteDialog: boolean; showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_rewad: string | null) => void; handleDeleteDialog: (show: boolean, selected_rewad: Reward | null) => void;
selectedReward: string | null; selectedReward: Reward | null;
reward: string | null; reward: string | null;
} }
@ -52,19 +52,19 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
const [showAddDialog, setShowAddDialog] = useState(false); const [showAddDialog, setShowAddDialog] = useState(false);
const [showEditDialog, setShowEditDialog] = useState(false); const [showEditDialog, setShowEditDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [selectedReward, setSelectedReward] = useState<string | null>(null); const [selectedReward, setSelectedReward] = useState<Reward | null>(null);
const { GetData } = useCallApi(); const { GetData } = useCallApi();
const handleAddDialog = useCallback((show: boolean) => { const handleAddDialog = useCallback((show: boolean) => {
setShowAddDialog(show); setShowAddDialog(show);
}, []); }, []);
const handleEditDialog = useCallback((show: boolean, selected_reward: string | null) => { const handleEditDialog = useCallback((show: boolean, selected_reward: Reward | null) => {
setShowEditDialog(show); setShowEditDialog(show);
setSelectedReward(show ? selected_reward : null); setSelectedReward(show ? selected_reward : null);
}, []); }, []);
const handleDeleteDialog = useCallback((show: boolean, selected_reward: string | null) => { const handleDeleteDialog = useCallback((show: boolean, selected_reward: Reward | null) => {
setShowDeleteDialog(show); setShowDeleteDialog(show);
setSelectedReward(show ? selected_reward : null); setSelectedReward(show ? selected_reward : null);
}, []); }, []);