TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add submitting handler on disbursement upload batch

Browse Source
This commit is contained in:
Wikzyy
2025-05-06 13:17:57 +07:00
parent 464d97d39e
commit 896c472ce8
1 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/pages/disbursement/history-transaction/blocks/UploadBatchDialog.tsx
View File

@ -24,6 +24,7 @@ import { toast } from 'sonner';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import clsx from 'clsx'; import clsx from 'clsx';
import { RefreshCw } from 'lucide-react';
const API_URL = apiConfig.service_disbursement; const API_URL = apiConfig.service_disbursement;
@ -32,17 +33,18 @@ const UploadBatchDialog = () => {
const { showUploadBatchDialog, handleUploadBatchDialog } = useTransactionContext(); const { showUploadBatchDialog, handleUploadBatchDialog } = useTransactionContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { PostData, PostDataFile, GetData } = useCallApi(); const { PostData, PostDataFile, GetData } = useCallApi();
const [isSubmitting, setIsSubmitting] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
}); });
const initialState: { const initialState: {
execution_date: string, execution_date: string;
file: File | null; file: File | null;
} = { } = {
execution_date: '', execution_date: '',
file: null file: null
} };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const resetForm = () => { const resetForm = () => {
@ -54,9 +56,11 @@ const UploadBatchDialog = () => {
const doUploadBatch = useCallback( const doUploadBatch = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
const formData = new FormData(); const formData = new FormData();
formData.append('execution_date', formField.execution_date); formData.append('execution_date', formField.execution_date);
if (formField.file) { if (formField.file) {
formData.append('file', formField.file); formData.append('file', formField.file);
} }
@ -88,6 +92,8 @@ const UploadBatchDialog = () => {
} catch (error) { } catch (error) {
toast.error('Error uploading batch'); toast.error('Error uploading batch');
setAlert({ show: true, message: 'Something went wrong. Please try again.' }); setAlert({ show: true, message: 'Something went wrong. Please try again.' });
} finally {
setIsSubmitting(false);
} }
}, },
[formField] [formField]
@ -98,10 +104,7 @@ const UploadBatchDialog = () => {
console.log('Form data before submit:', formField); console.log('Form data before submit:', formField);
if ( if (formField.execution_date.trim() === '' || formField.file === null) {
formField.execution_date.trim() === '' ||
formField.file === null
) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
@ -150,7 +153,9 @@ const UploadBatchDialog = () => {
<div className="card-body grid gap-5 p-0"> <div className="card-body grid gap-5 p-0">
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Execution Date</label> <label className="form-label flex items-center gap-1 max-w-56">
Execution Date
</label>
<Input <Input
className="input" className="input"
type="datetime-local" type="datetime-local"
@ -167,19 +172,23 @@ const UploadBatchDialog = () => {
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">File</label> <label className="form-label flex items-center gap-1 max-w-56">File</label>
<Input <Input
className="input" className="input"
type="file" type="file"
autoComplete="off" autoComplete="off"
required required
onChange={({ target }) => onChange={({ target }) =>
setFormField((prev) => ({ ...prev, file: target.files?.[0] ?? null })) setFormField((prev) => ({ ...prev, file: target.files?.[0] ?? null }))
} }
/> />
</div> </div>
</div> </div>
<div className="flex justify-end pt-2.5"> <div className="flex justify-end pt-2.5">
<Button className="btn btn-primary" type="submit"> <Button variant="default" type="submit" disabled={isSubmitting}>
Save Changes {isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
) : (
'Submit'
)}
</Button> </Button>
</div> </div>
</div> </div>