add loading when post/put data on master data module
This commit is contained in:
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user