rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-30 19:52:20 +01:00
Code Issues Releases Activity

(feat) add loading for save product btn

Browse Source
This commit is contained in:
Du Peng 2022-10-20 18:53:36 +02:00
parent 531b8d4947
commit 2f676d1a89
1 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/frontend/src/javascript/components/store/product-form.tsx
View File

@ -56,6 +56,7 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
const [machines, setMachines] = useState<checklistOption[]>([]);
const [stockTab, setStockTab] = useState<boolean>(false);
const [openCloneModal, setOpenCloneModal] = useState<boolean>(false);
const [saving, setSaving] = useState<boolean>(false);
useEffect(() => {
ProductCategoryAPI.index().then(data => {
@ -130,16 +131,24 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
* Call product creation or update api
*/
const saveProduct = (data: Product) => {
setSaving(true);
if (product.id) {
ProductAPI.update(data).then((res) => {
reset(res);
setSaving(false);
onSuccess(res);
}).catch(onError);
}).catch(e => {
setSaving(false);
onError(e);
});
} else {
ProductAPI.create(data).then((res) => {
reset(res);
onSuccess(res);
}).catch(onError);
}).catch(e => {
setSaving(false);
onError(e);
});
}
};
@ -256,7 +265,10 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
<CloneProductModal isOpen={openCloneModal} toggleModal={toggleCloneModal} product={product} onSuccess={onSuccess} onError={onError} />
</>
}
<FabButton className="main-action-btn" onClick={handleSubmit(saveProduct)}>{t('app.admin.store.product_form.save')}</FabButton>
<FabButton className="main-action-btn" onClick={handleSubmit(saveProduct)} disabled={saving}>
{!saving && t('app.admin.store.product_form.save')}
{saving && <i className="fa fa-spinner fa-pulse fa-fw text-white" />}
</FabButton>
</div>
</header>
<form className="product-form" onSubmit={handleSubmit(onSubmit)}>
@ -435,7 +447,10 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
</div>
<div className="main-actions">
<FabButton type="submit" className="main-action-btn">{t('app.admin.store.product_form.save')}</FabButton>
<FabButton type="submit" className="main-action-btn" disabled={saving}>
{!saving && t('app.admin.store.product_form.save')}
{saving && <i className="fa fa-spinner fa-pulse fa-fw" />}
</FabButton>
</div>
</section>
}