danak/shop-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update brand

Browse Source
This commit is contained in:
hamid zarghami
2025-09-29 09:44:29 +03:30
parent 8e3c4401b5
commit f4c1a34e27
6 changed files with 255 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/brand/Update.tsx
+188
View File
@@ -0,0 +1,188 @@
import { type FC, useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { useGetCategories, type CategoryTreeNode } from '../category'
import { useFormik } from 'formik'
import { type CreateBrandType } from './types/Types'
import * as Yup from 'yup'
import { useUpdateBrand, useGetBrandById } from './hooks/useBrandData'
import Input from '../../components/Input'
import Select from '../../components/Select'
import Textarea from '../../components/Textarea'
import Button from '../../components/Button'
import { TickCircle } from 'iconsax-react'
import { useUploadMultiple, useUploadSingle } from '../uploader/hooks/useUploaderData'
import UploadBoxDraggble from '@/components/UploadBoxDraggble'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'
const UpdateBrand: FC = () => {
const navigate = useNavigate()
const { id } = useParams<{ id: string }>()
const { data: categoriesData } = useGetCategories()
const { data: brandDetail, isLoading: brandDetailLoading } = useGetBrandById(id!)
const uploadSingle = useUploadSingle()
const uploadMultiple = useUploadMultiple()
const updateBrandMutation = useUpdateBrand()
const [logoFile, setLogoFile] = useState<File[]>([])
const [imageFiles, setImageFiles] = useState<File[]>([])
const formik = useFormik<CreateBrandType>({
initialValues: {
title_fa: '',
title_en: '',
category: '',
description: '',
images: [],
logoUrl: '',
},
validationSchema: Yup.object({
title_fa: Yup.string().required('عنوان فارسی برند الزامی است'),
title_en: Yup.string().required('عنوان انگلیسی برند الزامی است'),
category: Yup.string().required('دسته بندی برند الزامی است'),
description: Yup.string().required('توضیحات برند الزامی است'),
}),
onSubmit: async (values) => {
let logoUrl = values.logoUrl
let images = values.images
if (logoFile.length > 0) {
const logoResponse = await uploadSingle.mutateAsync(logoFile[0])
logoUrl = logoResponse.results?.url?.url || ''
}
if (imageFiles.length > 0) {
const imagesResponse = await uploadMultiple.mutateAsync(imageFiles)
images = imagesResponse.results?.urls?.map(file => file.url) || []
}
const submitData = {
...values,
logoUrl,
images
}
updateBrandMutation.mutate({ id: id!, params: submitData }, {
onSuccess: () => {
toast.success('برند با موفقیت ویرایش شد')
navigate('/brands')
},
onError: (error) => {
toast.error(extractErrorMessage(error))
}
})
},
})
useEffect(() => {
if (brandDetail?.results?.data?.brand) {
const brand = brandDetail.results.data.brand
formik.setValues({
title_fa: brand.title_fa,
title_en: brand.title_en,
category: brand.category?._id || '',
description: brand.description,
images: brand.images,
logoUrl: brand.logoUrl,
})
}
}, [brandDetail, formik])
const categoryOptions = categoriesData?.results?.data?.map((category: CategoryTreeNode) => ({
value: category._id,
label: category.title_fa
})) || []
if (brandDetailLoading) {
return <div className="flex justify-center items-center h-64">در حال بارگذاری...</div>
}
return (
<div className='mt-4'>
<div className='flex justify-between items-center'>
<div className='flex items-center gap-3'>
<h1>ویرایش برند</h1>
</div>
<div>
<Button
className='px-6'
onClick={() => formik.handleSubmit()}
isLoading={updateBrandMutation.isPending || uploadSingle.isPending || uploadMultiple.isPending}
disabled={!formik.isValid || updateBrandMutation.isPending || uploadSingle.isPending || uploadMultiple.isPending}
>
<div className='flex gap-2 items-center'>
<TickCircle size={16} color='#fff' />
<div>بروزرسانی برند</div>
</div>
</Button>
</div>
</div>
<div className='flex gap-6 xl:mt-8 mt-6'>
{/* اطلاعات اصلی */}
<div className='flex-1 text-sm bg-white py-8 xl:px-10 px-6 rounded-3xl'>
<h2 className='text-lg font-medium mb-6'>اطلاعات اصلی</h2>
<div className='space-y-6'>
<div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
<Input
label='عنوان فارسی برند'
placeholder='مثال: سامسونگ'
{...formik.getFieldProps('title_fa')}
error_text={formik.touched.title_fa && formik.errors.title_fa ? formik.errors.title_fa : ''}
/>
<Input
label='عنوان انگلیسی برند'
placeholder='مثال: Samsung'
{...formik.getFieldProps('title_en')}
error_text={formik.touched.title_en && formik.errors.title_en ? formik.errors.title_en : ''}
/>
</div>
<Select
label='دسته‌بندی'
placeholder='انتخاب دسته‌بندی برند'
items={categoryOptions}
{...formik.getFieldProps('category')}
error_text={formik.touched.category && formik.errors.category ? formik.errors.category : ''}
/>
<Textarea
label='توضیحات برند'
placeholder='توضیحات کامل برند را وارد کنید...'
{...formik.getFieldProps('description')}
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
/>
</div>
</div>
{/* فایل‌ها */}
<div className='w-80 space-y-6'>
<div className='text-sm bg-white py-8 px-6 rounded-3xl'>
<h2 className='text-lg font-medium mb-6'>فایل‌ها</h2>
<div className='space-y-6'>
<div>
<UploadBoxDraggble
label='لوگو برند'
isMultiple={false}
onChange={(files) => setLogoFile(files)}
/>
</div>
<div>
<UploadBoxDraggble
label='تصاویر برند'
isMultiple={true}
onChange={(files) => setImageFiles(files)}
/>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default UpdateBrand
src/pages/brand/hooks/useBrandData.ts
+7
View File
@@ -25,3 +25,10 @@ export const useUpdateBrand = () => {
mutationFn: api.updateBrand,
});
};
export const useGetBrandById = (id: string) => {
return useQuery({
queryKey: ["brand", id],
queryFn: () => api.getBrandById(id),
});
};
src/pages/brand/service/BrandService.ts
+6
View File
@@ -1,5 +1,6 @@
import axios from "../../../config/axios";
import { type BrandsResponseType, type CreateBrandType } from "../types/Types";
import { type IBrandResponse } from "../../../types/response.types";
export const getBrands = async (page: number = 1, limit: number = 10): Promise<BrandsResponseType> => {
const { data } = await axios.get(`/brand`, {
@@ -21,4 +22,9 @@ export const createBrand = async (params: CreateBrandType) => {
export const updateBrand = async (params: { id: string, params: CreateBrandType }) => {
const { data } = await axios.patch(`/admin/brand/${params.id}`, params.params);
return data;
};
export const getBrandById = async (id: string): Promise<IBrandResponse> => {
const { data } = await axios.get(`/admin/brand/${id}`);
return data;
};
src/pages/category/List.tsx
+10 -2
View File
@@ -1,7 +1,7 @@
import { type FC, type JSX, useState } from 'react'
import Td from '../../components/Td'
import { ArrowDown2, ArrowLeft2, Edit, Lock } from 'iconsax-react'
import { Link } from 'react-router-dom'
import { Link, useNavigate } from 'react-router-dom'
import { useGetCategories, useDeleteCategory } from './hooks/useCategoryData'
import { type CategoryTreeNode } from './types/Types'
import { Pages } from '../../config/Pages'
@@ -10,6 +10,7 @@ import TrashWithConfrim from '../../components/TrashWithConfrim'
const CategoryList: FC = () => {
const navigate = useNavigate();
const { data, isLoading, refetch } = useGetCategories();
const deleteCategoryMutation = useDeleteCategory();
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set());
@@ -124,7 +125,14 @@ const CategoryList: FC = () => {
return (
<div>
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
<div className='flex justify-end mt-5'>
<Button
label='افزودن دسته‌بندی'
onClick={() => navigate(`${Pages.category.create}`)}
className='w-fit'
/>
</div>
<div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
<table className='w-full text-sm '>
<thead className='thead'>
<tr>
src/router/Main.tsx
+2 -1
View File
@@ -35,6 +35,7 @@ import UpdateCoupon from '@/pages/Coupon/Update'
import UsersList from '@/pages/user/List'
import AdminList from '@/pages/admin/List'
import AdminCreate from '@/pages/admin/Create'
import UpdateBrand from '@/pages/brand/Update'
const MainRouter: FC = () => {
@@ -64,6 +65,7 @@ const MainRouter: FC = () => {
<Route path={`${Pages.products.variants}:id`} element={<ProductVariant />} />
<Route path={Pages.products.brands.list} element={<BrandList />} />
<Route path={Pages.products.brands.create} element={<BrandCreate />} />
<Route path={`${Pages.products.brands.update}:id`} element={<UpdateBrand />} />
<Route path={Pages.products.warranty.list} element={<WarrantyList />} />
<Route path={Pages.products.warranty.create} element={<CreateWarranty />} />
@@ -91,7 +93,6 @@ const MainRouter: FC = () => {
<Route path={Pages.admin.list} element={<AdminList />} />
<Route path={Pages.admin.create} element={<AdminCreate />} />
</Routes>
</div>
</div>
src/types/response.types.ts
+42
View File
@@ -5,3 +5,45 @@ export interface IBaseResponse {
export interface IResponse<T> extends IBaseResponse {
data: T;
}
export interface ICategory {
_id: string;
title_fa: string;
title_en: string;
icon: string;
imageUrl: string;
description: string;
variants: number[];
hierarchy: string[];
leaf: boolean;
parent: string | null;
deleted: boolean;
createdAt: string;
updatedAt: string;
url: string;
children: ICategory[];
theme?: string;
}
export interface IBrand {
_id: string;
title_fa: string;
title_en: string;
category: ICategory;
status: string;
description: string;
logoUrl: string;
images: string[];
deleted: boolean;
createdAt: string;
updatedAt: string;
url: string;
}
export interface IBrandResponse extends IBaseResponse {
results: {
data: {
brand: IBrand;
};
};
}