rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-02-07 01:54:16 +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 [machines, setMachines] = useState<checklistOption[]>([]);
const [stockTab, setStockTab] = useState<boolean>(false); const [stockTab, setStockTab] = useState<boolean>(false);
const [openCloneModal, setOpenCloneModal] = useState<boolean>(false); const [openCloneModal, setOpenCloneModal] = useState<boolean>(false);
const [saving, setSaving] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
ProductCategoryAPI.index().then(data => { ProductCategoryAPI.index().then(data => {
@ -130,16 +131,24 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
* Call product creation or update api * Call product creation or update api
*/ */
const saveProduct = (data: Product) => { const saveProduct = (data: Product) => {
setSaving(true);
if (product.id) { if (product.id) {
ProductAPI.update(data).then((res) => { ProductAPI.update(data).then((res) => {
reset(res); reset(res);
setSaving(false);
onSuccess(res); onSuccess(res);
}).catch(onError); }).catch(e => {
setSaving(false);
onError(e);
});
} else { } else {
ProductAPI.create(data).then((res) => { ProductAPI.create(data).then((res) => {
reset(res); reset(res);
onSuccess(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} /> <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> </div>
</header> </header>
<form className="product-form" onSubmit={handleSubmit(onSubmit)}> <form className="product-form" onSubmit={handleSubmit(onSubmit)}>
@ -435,7 +447,10 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
</div> </div>
<div className="main-actions"> <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> </div>
</section> </section>
} }