add loading when post/put data on master data module

This commit is contained in:
Wikzyy
2025-04-23 13:35:32 +07:00
parent e248c463c9
commit 94ffc332e9
26 changed files with 838 additions and 454 deletions

View File

@ -34,6 +34,7 @@ import {
} from '@/components/ui/select';
import { useManageConversionContext } from '../hooks/useManageConversionContext';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { RefreshCw } from 'lucide-react';
interface CurrencyProps {
ID: string;
name: string;
@ -65,6 +66,7 @@ const AddDialog = () => {
const [formField, setFormField] = useState(initialState);
const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [isSubmitting, setIsSubmitting] = useState(false);
const resetForm = () => {
setFormField(initialState);
@ -74,24 +76,31 @@ const AddDialog = () => {
const doCreateConversion = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
const response = await PostData(`${API_URL}/dashboard/conversion`, formField);
try {
const response = await PostData(`${API_URL}/dashboard/conversion`, formField);
if (response?.status) {
resetForm();
handleAddDialog(false);
toast.success('Success Create Conversion');
const createActivity = {
module: 'Manage Conversion',
description: `Create Conversion => ${formField.id_currency_origin} => ${formField.id_currency_destination}`,
action: 'C'
};
if (response?.status) {
resetForm();
handleAddDialog(false);
toast.success('Success Create Conversion');
const createActivity = {
module: 'Manage Conversion',
description: `Create Conversion => ${formField.id_currency_origin} => ${formField.id_currency_destination}`,
action: 'C'
};
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Error Create Conversion');
setAlert({ show: true, message: 'Failed to create Conversion. Please try again.' });
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Error Create Conversion');
setAlert({ show: true, message: response?.message });
}
} catch (error) {
toast.error('Something Went Wrong');
} finally {
setIsSubmitting(false);
}
},
[formField]
@ -280,7 +289,13 @@ const AddDialog = () => {
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default">Save Changes</Button>
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
) : (
'Create'
)}
</Button>
</div>
</div>
</form>

View File

@ -34,6 +34,7 @@ import {
} from '@/components/ui/select';
import { useManageConversionContext } from '../hooks/useManageConversionContext';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { RefreshCw } from 'lucide-react';
interface CurrencyProps {
ID: string;
name: string;
@ -49,6 +50,7 @@ const EditDialog = () => {
const parsedUser = getAuth()?.user;
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
const [open, setOpen] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [alert, setAlert] = useState({
show: false,
@ -75,26 +77,33 @@ const EditDialog = () => {
const doUpdateConversion = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!showEditDialog) return;
const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`, {
...formField
});
setIsSubmitting(true);
if (response?.status) {
resetForm();
handleEditDialog(false, null);
toast.success('Success Update Conversion');
const createActivity = {
module: 'Manage Conversion',
description: `Update Conversion => ${selectedConversion}`,
action: 'U'
};
try {
const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`, {
...formField
});
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Error Create Conversion');
setAlert({ show: true, message: 'Failed to Update Conversion. Please try again.' });
if (response?.status) {
resetForm();
handleEditDialog(false, null);
toast.success('Success Update Conversion');
const createActivity = {
module: 'Manage Conversion',
description: `Update Conversion => ${selectedConversion}`,
action: 'U'
};
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Error Create Conversion');
setAlert({ show: true, message: response?.message });
}
} catch (error) {
toast.error('Something went wrong');
} finally {
setIsSubmitting(false);
}
},
[formField]
@ -305,7 +314,13 @@ const EditDialog = () => {
</div>
</div>
<div className="flex justify-end gap-5">
<Button variant="default">Save Changes</Button>
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
) : (
'Create'
)}
</Button>
</div>
</div>
</form>