rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2024-12-01 12:24:28 +01:00
Code Issues Releases Activity

Convert product category form to RHF

Browse Source
This commit is contained in:
vincent 2022-07-18 14:57:33 +02:00 committed by Sylvain
parent 39c8ec3c3e
commit bf1700e43a
5 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/frontend/src/javascript/components/store/manage-product-category.tsx
View File

@ -15,7 +15,7 @@ interface ManageProductCategoryProps {
/**
* This component shows a button.
* When clicked, we show a modal dialog allowing to fill the parameters of a product category (create new or update existing).
* When clicked, we show a modal dialog allowing to fill the parameters of a product category.
*/
export const ManageProductCategory: React.FC<ManageProductCategoryProps> = ({ productCategories, productCategory, action, onSuccess, onError }) => {
const { t } = useTranslation('admin');

3
app/frontend/src/javascript/components/store/product-categories.tsx
View File

@ -18,7 +18,8 @@ interface ProductCategoriesProps {
}
/**
* This component shows a Tree list of all Product's Categories
* This component shows a list of all product categories and offer to manager them
* by creating, deleting, modifying and reordering each product categories.
*/
const ProductCategories: React.FC<ProductCategoriesProps> = ({ onSuccess, onError }) => {
const { t } = useTranslation('admin');

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

@ -29,7 +29,7 @@ interface ProductCategoryFormProps {
export const ProductCategoryForm: React.FC<ProductCategoryFormProps> = ({ action, productCategories, productCategory, onSuccess, onError }) => {
const { t } = useTranslation('admin');
const { register, watch, setValue, control, handleSubmit } = useForm<ProductCategory>({ defaultValues: { ...productCategory } });
const { register, watch, setValue, control, handleSubmit, formState } = useForm<ProductCategory>({ defaultValues: { ...productCategory } });
// filter all first level product categorie
const parents = productCategories.filter(c => !c.parent_id);
@ -53,15 +53,26 @@ export const ProductCategoryForm: React.FC<ProductCategoryFormProps> = ({ action
});
return () => subscription.unsubscribe();
}, [watch]);
// Check slug pattern
// Only lowercase alphanumeric groups of characters separated by an hyphen
const slugPattern = /^[a-z0-9]+(?:-[a-z0-9]+)*$/g;
// Form submit
const onSubmit: SubmitHandler<ProductCategory> = (category: ProductCategory) => {
switch (action) {
case 'create':
console.log('create:', category);
ProductCategoryAPI.create(category).then(() => {
onSuccess(t('app.admin.store.product_category_form.create.success'));
}).catch((error) => {
onError(t('app.admin.store.product_category_form.create.error') + error);
});
break;
case 'update':
console.log('update:', category);
ProductCategoryAPI.update(category).then(() => {
onSuccess(t('app.admin.store.product_category_form.update.success'));
}).catch((error) => {
onError(t('app.admin.store.product_category_form.update.error') + error);
});
break;
case 'delete':
ProductCategoryAPI.destroy(category.id).then(() => {
@ -85,12 +96,20 @@ export const ProductCategoryForm: React.FC<ProductCategoryFormProps> = ({ action
: <>
<FormInput id='name'
register={register}
rules={{ required: 'true' }}
rules={{ required: `${t('app.admin.store.product_category_form.required')}` }}
formState={formState}
label={t('app.admin.store.product_category_form.name')}
defaultValue={productCategory?.name || ''} />
<FormInput id='slug'
register={register}
rules={{ required: 'true' }}
rules={{
required: `${t('app.admin.store.product_category_form.required')}`,
pattern: {
value: slugPattern,
message: `${t('app.admin.store.product_category_form.slug_pattern')}`
}
}}
formState={formState}
label={t('app.admin.store.product_category_form.slug')}
defaultValue={productCategory?.slug} />
<FormSelect id='parent_id'

12
config/locales/app.admin.en.yml
View File

@ -1907,18 +1907,22 @@ en:
update: "Modify the product category"
delete: "Delete the product category"
product_category_modal:
successfully_created: "The new category has been created."
unable_to_create: "Unable to create the category: "
successfully_updated: "The category has been updated."
unable_to_update: "Unable to modify the category: "
new_product_category: "Create a category"
edit_product_category: "Modify a category"
product_category_form:
name: "Name of category"
slug: "Name of URL"
select_parent_product_category: "Choose a parent category (N1)"
create:
error: "Unable to create the category: "
success: "The new category has been created."
update:
error: "Unable to modify the category: "
success: "The category has been modified."
delete:
confirm: "Do you really want to delete this product category?"
error: "Unable to delete the category: "
success: "The category has been successfully deleted"
save: "Save"
required: "This field is required"
slug_pattern: "Only lowercase alphanumeric groups of characters separated by an hyphen"

12
config/locales/app.admin.fr.yml
View File

@ -1907,18 +1907,22 @@ fr:
update: "Update the product category"
delete: "Delete the product category"
product_category_modal:
successfully_created: "La catégorie a bien été créée."
unable_to_create: "Impossible de créer la catégorie : "
successfully_updated: "La nouvelle catégorie a bien été mise à jour."
unable_to_update: "Impossible de modifier la catégorie : "
new_product_category: "Créer une catégorie"
edit_product_category: "Modifier la catégorie"
product_category_form:
name: "Nom de la catégorie"
slug: "Nom de l'URL"
select_parent_product_category: "Choisir une catégorie parent (N1)"
create:
error: "Impossible de créer la catégorie : "
success: "La catégorie a bien été créée."
update:
error: "Impossible de modifier la catégorie : "
success: "La nouvelle catégorie a bien été mise à jour."
delete:
confirm: "Do you really want to delete this product category?"
error: "Impossible de supprimer the catégorie : "
success: "La catégorie a bien été supprimée"
save: "Enregistrer"
required: "This field is required"
slug_pattern: "Only lowercase alphanumeric groups of characters separated by an hyphen"