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

edit my company

Browse Source
This commit is contained in:
hamid zarghami
2025-06-01 15:18:42 +03:30
parent f7132ae2ee
commit 46e29c4909
10 changed files with 391 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/UploadBox.tsx
+17 -4
View File
@@ -9,6 +9,7 @@ type Props = {
isMultiple?: boolean,
onChange?: (file: File[]) => void;
isReset?: boolean;
preview?: string;
}
const UploadBox: FC<Props> = (props: Props) => {
@@ -44,15 +45,11 @@ const UploadBox: FC<Props> = (props: Props) => {
}
useEffect(() => {
if (props.isReset) {
setFiles([])
}
}, [props.isReset])
return (
<div>
<div className='text-sm'>{props.label}</div>
@@ -72,6 +69,14 @@ const UploadBox: FC<Props> = (props: Props) => {
</div>
))
}
{
files.length === 0 && props.preview && (
<div className='flex bg-gray-200 py-1.5 px-2 rounded-lg items-center gap-1'>
<div className='text-xs'>فایل موجود</div>
<img src={props.preview} alt="preview" className="h-4 w-4 object-cover" />
</div>
)
}
</div>
</div>
<div className='lg:hidden gap-2 flex flex-wrap mt-4'>
@@ -83,6 +88,14 @@ const UploadBox: FC<Props> = (props: Props) => {
</div>
))
}
{
files.length === 0 && props.preview && (
<div className='flex bg-gray-200 py-1.5 px-2 rounded-lg items-center gap-1'>
<div className='text-xs'>فایل موجود</div>
<img src={props.preview} alt="preview" className="h-4 w-4 object-cover" />
</div>
)
}
</div>
</div>
)
src/pages/company/Detail.tsx
+2 -2
View File
@@ -65,7 +65,7 @@ const CompanyDetail: FC = () => {
color='black'
/>
<div>
شماره تماس : {data?.data?.company?.user?.phone}
شماره تماس : {data?.data?.company?.phone}
</div>
</div>
<div className='flex gap-1 items-center'>
@@ -85,7 +85,7 @@ const CompanyDetail: FC = () => {
color='black'
/>
<div>
ایمیل : {data?.data?.company?.user?.email}
ایمیل : {data?.data?.company?.email}
</div>
</div>
<div className='flex gap-1 items-center'>
src/pages/company/MyCompany.tsx
+31 -9
View File
@@ -1,6 +1,6 @@
import { Add, Calendar, CallCalling, Location, Map1, MessageMinus, Profile, Setting2, Sms } from 'iconsax-react'
import { Add, Calendar, CallCalling, Edit, Location, Map1, MessageMinus, Profile, Setting2, Sms } from 'iconsax-react'
import { FC } from 'react'
import { Link } from 'react-router-dom'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { useGetMyCompany } from '../home/hooks/useHomeData'
import moment from 'moment-jalaali'
import Button from '../../components/Button'
@@ -9,7 +9,16 @@ import { Pages } from '../../config/Pages'
import MyProduct from './components/MyProduct'
const CompanyDetail: FC = () => {
const { slug } = useParams()
const { data } = useGetMyCompany()
const navigate = useNavigate()
const handleEditClick = () => {
if (data?.data?.company) {
console.log('Navigating to edit with company data:', data.data.company);
navigate(buildPath(`${Pages.request}/${data.data.company.id}`, slug))
}
}
if (data?.data?.company) {
return (
@@ -22,13 +31,28 @@ const CompanyDetail: FC = () => {
<div className='flex gap-3'>
<img
src={data?.data?.company?.profileImageUrl}
className='size-16 rounded-xl object-cover'
className='size-14 rounded-xl object-cover'
/>
<div className='flex-1 items-center flex justify-between '>
<div className='text-sm'>
<div className='text-xs'>
{data?.data?.company?.name}
</div>
<div className='flex items-center gap-1.5 text-xs'>
<div
className='flex gap-2 text-[#0047FF] text-xs items-center cursor-pointer'
onClick={handleEditClick}
>
<Edit
size={16}
color='#0047FF'
/>
<div>
ویرایش
</div>
</div>
</div>
</div>
<div className='flex justify-end items-center gap-1.5 text-xs'>
<Map1
size={20}
color='black'
@@ -37,8 +61,6 @@ const CompanyDetail: FC = () => {
آدرس در نقشه
</div>
</div>
</div>
</div>
<div className='mt-5 text-[10px]'>
<div className='flex justify-between'>
@@ -48,7 +70,7 @@ const CompanyDetail: FC = () => {
color='black'
/>
<div>
مدیرعامل: {data?.data?.company?.user?.fullName}
مدیرعامل: {data?.data?.company?.chiefExecutiveOfficer}
</div>
</div>
<div className='flex gap-1 items-center'>
@@ -68,7 +90,7 @@ const CompanyDetail: FC = () => {
color='black'
/>
<div>
شماره تماس : {data?.data?.company?.user?.phone}
شماره تماس : {data?.data?.company?.phone}
</div>
</div>
<div className='flex gap-1 items-center'>
src/pages/home/Home.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ const Home: FC = () => {
alt='banner'
width={1920}
height={1080}
className='w-full rounded-3xl object-cover xl:mt-14 mt-8 min-h-[210px] max-h-[500px]'
className='w-full rounded-3xl object-cover min-h-[210px] max-h-[500px]'
/>
<div className='absolute flex items-center z-1 top-0 left-0 w-full h-full bg-black/10 rounded-3xl'>
src/pages/request/Request.tsx
+151 -30
View File
@@ -1,4 +1,4 @@
import { FC } from 'react'
import { FC, useEffect } from 'react'
import withAuth from '../../hoc/withAuth'
import Button from '../../components/Button'
import { TickCircle } from 'iconsax-react'
@@ -8,12 +8,11 @@ import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useState } from 'react'
import { toast } from '../../components/Toast'
import { ErrorType } from '../../helpers/types'
import { Pages } from '../../config/Pages'
import { useNavigate, useParams } from 'react-router-dom'
import DatePickerComponent from '../../components/DatePicker'
import moment from 'moment-jalaali'
import { useCreateCompany, useMultiUpload, useSingleUpload } from './hooks/useRequestData'
import { useCreateCompany, useMultiUpload, useSingleUpload, useUpdateCompany, useGetCompanyById } from './hooks/useRequestData'
import { CreateCompanyType } from './types/Types'
import UploadBox from '../../components/UploadBox'
import CompanyServices from './components/CompanyServices'
@@ -22,9 +21,11 @@ import { useGetIndustry } from '../home/hooks/useHomeData'
import Select from '../../components/Select'
import { IndustryItemType } from '../home/types/HomeTypes'
import { buildPath } from '../../helpers/utils'
const Request: FC = () => {
const createCompany = useCreateCompany()
const updateCompany = useUpdateCompany()
const navigate = useNavigate()
const { t } = useTranslation('global')
const [profileImage, setProfileImage] = useState<File | null>(null)
@@ -32,10 +33,16 @@ const Request: FC = () => {
const multiUpload = useMultiUpload()
const singleUpload = useSingleUpload()
const { data: industries } = useGetIndustry()
const { slug } = useParams()
const { slug, id } = useParams()
const isEdit = !!id
const { data: companyResponse, isLoading: isLoadingCompany } = useGetCompanyById(id)
const companyData = companyResponse?.data?.company || null
const [isSubmitting, setIsSubmitting] = useState(false)
const [services, setServices] = useState<{ title: string; image?: File }[]>([])
const [products, setProducts] = useState<{ title: string; image?: File }[]>([])
const [services, setServices] = useState<{ title: string; image?: File; imageUrl?: string; existingImageUrl?: string }[]>([])
const [products, setProducts] = useState<{ title: string; image?: File; imageUrl?: string; existingImageUrl?: string }[]>([])
const [profileImageUrl, setProfileImageUrl] = useState<string>('')
const [coverImageUrl, setCoverImageUrl] = useState<string>('')
const formik = useFormik<CreateCompanyType>({
initialValues: {
@@ -68,83 +75,196 @@ const Request: FC = () => {
industryId: Yup.string().required(t('errors.required')),
}),
onSubmit: async (values) => {
if (!profileImage || !coverImage) {
values.dateOfEstablishment = moment(values.dateOfEstablishment, 'jYYYY-jMM-jDD').format('YYYY-MM-DD')
try {
setIsSubmitting(true)
if (!isEdit && (!profileImage || !coverImage)) {
toast('لطفا تصاویر را انتخاب کنید', 'error')
setIsSubmitting(false)
return
}
// بررسی مقادیر ضروری برای آپدیت
if (isEdit && !values.profileImageUrl && !profileImage) {
toast('لطفا تصویر پروفایل را انتخاب کنید', 'error')
setIsSubmitting(false)
return
}
if (isEdit && !values.coverImageUrl && !coverImage) {
toast('لطفا تصویر کاور را انتخاب کنید', 'error')
setIsSubmitting(false)
return
}
let serviceImages: string[] = []
if (services.length > 0) {
const newServices = services.filter(s => s.image)
if (newServices.length > 0) {
const formDataServices = new FormData()
services.forEach(s => s.image && formDataServices.append('files', s.image))
newServices.forEach(s => s.image && formDataServices.append('files', s.image))
const serviceUploadRes = await multiUpload.mutateAsync(formDataServices)
serviceImages = serviceUploadRes.data.map((item: { url: string }) => item?.url)
}
}
// آپلود تصاویر محصولات
let productImages: string[] = []
if (products.length > 0) {
const newProducts = products.filter(p => p.image)
if (newProducts.length > 0) {
const formDataProducts = new FormData()
products.forEach(p => p.image && formDataProducts.append('files', p.image))
newProducts.forEach(p => p.image && formDataProducts.append('files', p.image))
const productUploadRes = await multiUpload.mutateAsync(formDataProducts)
productImages = productUploadRes.data.map((item: { url: string }) => item?.url)
}
}
// مقداردهی به values
values.services = services.map((s, idx) => ({
values.services = services.map((s, idx) => {
const newImageIndex = services.filter((item, i) => item.image && i < idx).length
return {
title: s.title,
imageUrl: serviceImages[idx] ? serviceImages[idx] : ''
}))
values.products = products.map((p, idx) => ({
title: p.title,
imageUrl: productImages[idx] ? productImages[idx] : ''
}))
imageUrl: s.image ? (serviceImages[newImageIndex] || '') : (s.existingImageUrl || '')
}
})
values.products = products.map((p, idx) => {
const newImageIndex = products.filter((item, i) => item.image && i < idx).length
return {
title: p.title,
imageUrl: p.image ? (productImages[newImageIndex] || '') : (p.existingImageUrl || '')
}
})
if (profileImage) {
const formDataProfile = new FormData()
formDataProfile.append('file', profileImage)
const profileUploadRes = await singleUpload.mutateAsync(formDataProfile)
values.profileImageUrl = profileUploadRes.data.url
} else if (profileImageUrl) {
values.profileImageUrl = profileImageUrl
}
if (coverImage) {
const formDataCover = new FormData()
formDataCover.append('file', coverImage)
const coverUploadRes = await singleUpload.mutateAsync(formDataCover)
values.coverImageUrl = coverUploadRes.data.url
} else if (coverImageUrl) {
values.coverImageUrl = coverImageUrl
}
createCompany.mutate(values, {
onSuccess: () => {
if (isEdit && companyData?.id) {
await handleUpdateCompany(companyData.id, values)
} else {
await handleCreateCompany(values)
}
} catch (error) {
setIsSubmitting(false)
toast('خطا در ثبت اطلاعات', 'error')
console.error('Submit error:', error)
}
}
})
const handleUpdateCompany = async (companyId: string, values: CreateCompanyType) => {
try {
console.log('Updating company with ID:', companyId);
console.log('Update data:', values);
await updateCompany.mutateAsync(
{ id: companyId, data: values }
)
toast('اطلاعات شرکت با موفقیت ویرایش شد', 'success')
navigate(buildPath(Pages.company.my, slug), { replace: true })
} catch (error: any) {
console.error('Update error:', error);
toast(error?.response?.data?.error?.message[0] || 'خطا در ویرایش اطلاعات', 'error')
} finally {
setIsSubmitting(false)
}
}
const handleCreateCompany = async (values: CreateCompanyType) => {
try {
await createCompany.mutateAsync(values)
toast('درخواست با موفقیت ثبت شد', 'success')
navigate(buildPath(Pages.dashboard, slug))
},
onError: (error: ErrorType) => {
toast(error?.response?.data?.error?.message[0], 'error')
navigate(buildPath(Pages.dashboard, slug), { replace: true })
} catch (error: any) {
toast(error?.response?.data?.error?.message[0] || 'خطا در ثبت درخواست', 'error')
} finally {
setIsSubmitting(false)
}
})
}
useEffect(() => {
if (isEdit && companyData) {
formik.setValues({
phone: companyData.user?.phone || '',
name: companyData.name || '',
email: companyData?.email || '',
identificationNumber: companyData.identificationNumber || '',
dateOfEstablishment: moment(companyData.dateOfEstablishment, 'jYYYY-jMM-jDD').format('jYYYY-jMM-jDD') || '',
address: companyData.address || '',
mapAddressLink: companyData.mapAddressLink || '',
description: companyData.description || '',
websiteUrl: companyData.websiteUrl || '',
profileImageUrl: companyData.profileImageUrl || '',
coverImageUrl: companyData.coverImageUrl || '',
industryId: companyData.industry?.id || '',
chiefExecutiveOfficer: companyData.user?.fullName || '',
products: [],
services: [],
})
setProfileImageUrl(companyData.profileImageUrl || '')
setCoverImageUrl(companyData.coverImageUrl || '')
if (companyData.services?.length) {
setServices(companyData.services.map((service: any) => ({
title: service.title,
existingImageUrl: service.imageUrl
})))
}
if (companyData.products?.length) {
setProducts(companyData.products.map((product: any) => ({
title: product.title,
existingImageUrl: product.imageUrl
})))
}
}
}, [isEdit, companyData])
return (
<div className='mt-4'>
{isLoadingCompany && isEdit ? (
<div className='flex justify-center items-center py-20'>
<div className='animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary'></div>
</div>
) : (
<>
<div className='flex flex-col md:flex-row justify-between items-start md:items-center gap-4'>
<div className='text-base'>
ثبت درخواست
{isEdit ? 'ویرایش اطلاعات شرکت' : 'ثبت درخواست'}
</div>
<div className='flex justify-end w-full'>
<Button
className='w-fit px-4'
onClick={() => formik.handleSubmit()}
isLoading={singleUpload.isPending || multiUpload.isPending}
isLoading={isSubmitting}
>
<div className='flex items-center gap-2'>
<TickCircle size={20} color='white' />
<div>ثبت درخواست</div>
<div>{isEdit ? 'ذخیره تغییرات' : 'ثبت درخواست'}</div>
</div>
</Button>
</div>
</div>
<div className='mt-10 bg-white py-8 px-4 md:px-6 lg:px-10 rounded-3xl'>
<div className='text-lg font-medium mb-6'>اطلاعات درخواست</div>
<div className='text-lg font-medium mb-6'>{isEdit ? 'اطلاعات شرکت' : 'اطلاعات درخواست'}</div>
<div className='space-y-6'>
<Input
@@ -165,7 +285,6 @@ const Request: FC = () => {
/>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
<Input
label={t('company.phone_number')}
@@ -194,8 +313,9 @@ const Request: FC = () => {
<DatePickerComponent
label={t('company.establishment_date')}
placeholder='تاریخ تاسیس'
onChange={(date) => formik.setFieldValue('dateOfEstablishment', moment(date).format('YYYY-MM-DD'))}
onChange={(date) => formik.setFieldValue('dateOfEstablishment', date)}
error_text={formik.touched.dateOfEstablishment && formik.errors.dateOfEstablishment ? formik.errors.dateOfEstablishment : ''}
defaulValue={formik.values.dateOfEstablishment}
/>
</div>
@@ -249,11 +369,12 @@ const Request: FC = () => {
onChange={(file) => setCoverImage(file[0])}
/>
<CompanyServices value={services} onChange={setServices} />
<CompanyProducts value={products} onChange={setProducts} />
</div>
</div>
</>
)}
</div>
)
}
src/pages/request/components/CompanyProducts.tsx
+3 -3
View File
@@ -65,7 +65,7 @@ const CompanyProducts: FC<Props> = ({ value, onChange }) => {
>
<div className='flex gap-2'>
<Add size={22} color='white' />
<div>افزودن خدمت</div>
<div>افزودن محصول</div>
</div>
</Button>
</div>
@@ -75,8 +75,8 @@ const CompanyProducts: FC<Props> = ({ value, onChange }) => {
{value.map((prd, idx) => (
<div key={idx} className='flex border p-2 rounded-xl items-center gap-2'>
<div className='flex items-center gap-2'>
{prd.image && <img src={URL.createObjectURL(prd.image)} alt='' className='size-6 min-w-6 rounded-full object-cover' />}
{prd.existingImageUrl && !prd.image && <img src={prd.existingImageUrl} alt='' className='size-6 min-w-6 rounded-full object-cover' />}
{prd.image && <img src={URL.createObjectURL(prd.image)} alt='' className='size-10 min-w-10 rounded-md object-cover' />}
{prd.existingImageUrl && !prd.image && <img src={prd.existingImageUrl} alt='' className='size-10 min-w-10 rounded-md object-cover' />}
</div>
<div className='w-full text-xs'>{prd.title}</div>
<button type='button' onClick={() => handleRemoveProduct(idx)} className='ml-auto'>
src/pages/request/components/CompanyServices.tsx
+2 -2
View File
@@ -75,8 +75,8 @@ const CompanyServices: FC<Props> = ({ value, onChange }) => {
{value.map((srv, idx) => (
<div key={idx} className='flex border p-2 rounded-xl items-center gap-2'>
<div className='flex items-center gap-2'>
{srv.image && <img src={URL.createObjectURL(srv.image)} alt='' className='size-6 min-w-6 rounded-full object-cover' />}
{srv.existingImageUrl && !srv.image && <img src={srv.existingImageUrl} alt='' className='size-6 min-w-6 rounded-full object-cover' />}
{srv.image && <img src={URL.createObjectURL(srv.image)} alt='' className='size-10 min-w-10 rounded-md object-cover' />}
{srv.existingImageUrl && !srv.image && <img src={srv.existingImageUrl} alt='' className='size-10 min-w-10 rounded-md object-cover' />}
</div>
<div className='w-full text-xs'>{srv.title}</div>
<button type='button' onClick={() => handleRemoveService(idx)} className='ml-auto'>
src/pages/request/hooks/useRequestData.ts
+16 -1
View File
@@ -1,5 +1,5 @@
import * as api from "../service/Service";
import { useMutation } from "@tanstack/react-query";
import { useMutation, useQuery } from "@tanstack/react-query";
import { CreateCompanyType } from "../types/Types";
export const useCreateCompany = () => {
@@ -8,6 +8,21 @@ export const useCreateCompany = () => {
});
};
export const useUpdateCompany = () => {
return useMutation({
mutationFn: (variables: { id: string; data: CreateCompanyType }) =>
api.updateCompany(variables),
});
};
export const useGetCompanyById = (id: string | undefined) => {
return useQuery({
queryKey: ["company", id],
queryFn: () => (id ? api.getCompanyById(id) : null),
enabled: !!id,
});
};
export const useSingleUpload = () => {
return useMutation({
mutationFn: (variables: FormData) => api.uploadSingle(variables),
src/pages/request/service/Service.ts
+16
View File
@@ -6,6 +6,22 @@ export const createCompany = async (data: CreateCompanyType) => {
return response.data;
};
export const updateCompany = async ({
id,
data,
}: {
id: string;
data: CreateCompanyType;
}) => {
const response = await axios.patch(`/companies/${id}/user`, data);
return response.data;
};
export const getCompanyById = async (id: string) => {
const response = await axios.get(`/companies/${id}`);
return response.data;
};
export const uploadSingle = async (params: FormData) => {
const { data } = await axios.post(`/uploader/single-file`, params);
return data;
src/router/Main.tsx
+1
View File
@@ -77,6 +77,7 @@ const MainRouter = () => {
<Route path="reportCard/list" element={<ReportCardList />} />
<Route path="profile" element={<Profile />} />
<Route path="request" element={<Request />} />
<Route path="request/:id" element={<Request />} />
<Route path="tickets" element={<TicketList />} />
<Route path="tickets/create" element={<TicketCreate />} />
<Route path="tickets/messages/:id" element={<TicketDetail />} />