address

src/pages/setting/address/Address.tsx

@@ -5,44 +5,149 @@ import { ColumnType } from '@/components/types/TableTypes'
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/components/Button'
-import { TickCircle } from 'iconsax-react'
+import { TickCircle, Edit2, Trash } from 'iconsax-react'
 import { useForm } from 'react-hook-form'
-import { AddressData, CreateAddressType } from './types/Types'
+import { AddressData, CreateAddressType, UpdateAddressType } from './types/Types'
 import { useGetDomains } from '../domain/hooks/useDomainData'
-import { yupResolver } from "@hookform/resolvers/yup"
-import * as yup from "yup"
-import { useCreateAddress, useGetAddress } from './hooks/useAddressData'
+import { useCreateAddress, useGetAddress, useUpdateAddress, useDeleteAddress } from './hooks/useAddressData'
+import { useGetSpace } from '../domain/hooks/useDomainData'
 import { toast } from '@/components/Toast'
 import { ErrorType } from '@/helpers/types'
 import ProgressBarEmail from './components/ProgressBarEmail'
 import ToggleStatus from './components/ToggleStatus'
-
-
+import RowActionsDropdown, { RowActionItem } from '@/components/RowActionsDropdown'
+import ModalConfrim from '@/components/ModalConfrim'
 
 const Address: FC = () => {
     const { t } = useTranslation()
 
-    const schema = yup.object().shape({
-        title: yup.string().required(t('errors.required')),
-        username: yup.string().required(t('errors.required')),
-        password: yup.string().required(t('errors.required')),
-        domainId: yup.string().required(t('errors.required')),
-    })
-
     const [search, setSearch] = useState<string>('')
     const [status, setStatus] = useState<string>('all')
+    const [currentPage, setCurrentPage] = useState<number>(1)
+    const [selectedAddress, setSelectedAddress] = useState<AddressData | null>(null)
+    const [isEditMode, setIsEditMode] = useState(false)
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+    const [addressToDelete, setAddressToDelete] = useState<AddressData | null>(null)
 
     const { data: domain } = useGetDomains()
+    const { data: spaceData } = useGetSpace()
     const { mutate: createAddress, isPending } = useCreateAddress()
-    const { data: addresses, isPending: isPendingAddress } = useGetAddress(search, status)
-    const { register, handleSubmit, formState: { errors }, setValue
-    } = useForm<CreateAddressType>({
-        resolver: yupResolver(schema),
+    const { mutate: updateAddress, isPending: isUpdating } = useUpdateAddress()
+    const { mutate: deleteAddress } = useDeleteAddress()
+    const { data: addresses, isPending: isPendingAddress } = useGetAddress(search, status, currentPage, 10)
+
+    type FormData = CreateAddressType & { password?: string; quotaMB?: number }
+
+    const { register, handleSubmit, formState: { errors }, setValue, reset, setError, clearErrors
+    } = useForm<FormData>({
         defaultValues: {
             domainId: domain?.data?.domain?.id,
         }
     })
 
+    const validateForm = (params: FormData): boolean => {
+        clearErrors()
+        let isValid = true
+
+        if (!params.title) {
+            setError('title', { message: t('errors.required') })
+            isValid = false
+        }
+
+        if (!params.username) {
+            setError('username', { message: t('errors.required') })
+            isValid = false
+        }
+
+        if (!isEditMode && !params.password) {
+            setError('password', { message: t('errors.required') })
+            isValid = false
+        }
+
+        if (!params.domainId) {
+            setError('domainId', { message: t('errors.required') })
+            isValid = false
+        }
+
+        // اعتبارسنجی quota
+        if (params.quotaMB) {
+            const quotaInBytes = params.quotaMB * 1024 * 1024
+            const remainingSpace = spaceData?.data?.quota?.totalInGB * 1024 * 1024 * 1024 - spaceData?.data?.quota?.usedInGB * 1024 * 1024 * 1024
+
+            if (quotaInBytes > remainingSpace) {
+                setError('quotaMB', { message: 'فضای وارد شده بیش از فضای باقی‌مانده است' })
+                isValid = false
+            }
+        }
+
+        return isValid
+    }
+
+    const handleEdit = (address: AddressData) => {
+        setSelectedAddress(address)
+        setIsEditMode(true)
+        reset({
+            title: address.title,
+            username: address.displayName,
+            password: '',
+            domainId: address.domain.id,
+            quotaMB: address.emailQuota ? Math.round(address.emailQuota / (1024 * 1024)) : undefined,
+        })
+    }
+
+    const handleDelete = (address: AddressData) => {
+        setAddressToDelete(address)
+        setIsDeleteModalOpen(true)
+    }
+
+    const handleConfirmDelete = () => {
+        if (addressToDelete) {
+            deleteAddress(addressToDelete.id, {
+                onSuccess: (data) => {
+                    toast(data?.data?.message || 'آدرس با موفقیت حذف شد', 'success')
+                    setIsDeleteModalOpen(false)
+                    setAddressToDelete(null)
+                },
+                onError: (error: ErrorType) => {
+                    toast(error.response?.data?.error?.message[0] || 'خطا در حذف', 'error')
+                    setIsDeleteModalOpen(false)
+                    setAddressToDelete(null)
+                }
+            })
+        }
+    }
+
+    const handleCloseDeleteModal = () => {
+        setIsDeleteModalOpen(false)
+        setAddressToDelete(null)
+    }
+
+    const handleCancelEdit = () => {
+        setSelectedAddress(null)
+        setIsEditMode(false)
+        reset({
+            title: '',
+            username: '',
+            password: '',
+            domainId: domain?.data?.domain?.id,
+            quotaMB: undefined,
+        })
+    }
+
+    const getRowActions = (address: AddressData): RowActionItem[] => [
+        {
+            label: 'ویرایش',
+            icon: <Edit2 color='black' size={16} />,
+            onClick: () => handleEdit(address),
+        },
+        {
+            label: 'حذف',
+            icon: <Trash color='red' size={16} />,
+            onClick: () => handleDelete(address),
+            className: 'text-red-600 hover:bg-red-50'
+        }
+    ]
+
     const columns: ColumnType<AddressData>[] = [
         {
             title: t('setting.address_title'),
@@ -64,7 +169,6 @@ const Address: FC = () => {
             key: 'quota',
             width: '300px',
             render: (item: AddressData) => {
-
                 return (
                     <ProgressBarEmail key={item.id} item={item} />
                 )
@@ -80,6 +184,18 @@ const Address: FC = () => {
                     <ToggleStatus defaultStatus={item.isActive} id={item.id} />
                 </div>
             )
+        },
+        {
+            title: 'عملیات',
+            key: 'actions',
+            width: '120px',
+            align: 'center',
+            render: (item: AddressData) => (
+                <RowActionsDropdown
+                    key={item.id}
+                    actions={getRowActions(item)}
+                />
+            )
         }
     ]
 
@@ -89,24 +205,52 @@ const Address: FC = () => {
         { value: 'inactive', label: t('setting.inactive') }
     ]
 
-    const onSubmit = (params: CreateAddressType) => {
-        createAddress(params, {
-            onSuccess: (data) => {
-                toast(data?.data?.message, 'success')
-            },
-            onError: (error: ErrorType) => {
-                toast(error.response?.data?.error?.message[0], 'error')
+    const onSubmit = (params: FormData) => {
+        if (!validateForm(params)) {
+            return
+        }
+
+        if (isEditMode && selectedAddress) {
+            const updateParams: UpdateAddressType = {
+                title: params.title,
+                password: params.password || undefined,
+                quota: params.quotaMB ? params.quotaMB * 1024 * 1024 : undefined,
             }
-        })
+            updateAddress({ id: selectedAddress.id, params: updateParams }, {
+                onSuccess: (data) => {
+                    toast(data?.data?.message || 'آپدیت با موفقیت انجام شد', 'success')
+                    handleCancelEdit()
+                },
+                onError: (error: ErrorType) => {
+                    toast(error.response?.data?.error?.message[0] || 'خطا در آپدیت', 'error')
+                }
+            })
+        } else {
+            const createParams: CreateAddressType = {
+                ...params,
+                quota: params.quotaMB ? params.quotaMB * 1024 * 1024 : undefined,
+            }
+            createAddress(createParams, {
+                onSuccess: (data) => {
+                    toast(data?.data?.message, 'success')
+                    reset()
+                },
+                onError: (error: ErrorType) => {
+                    toast(error.response?.data?.error?.message[0], 'error')
+                }
+            })
+        }
     }
 
     useEffect(() => {
-        if (domain?.data?.domain?.id) {
+        if (domain?.data?.domain?.id && !isEditMode) {
             setValue('domainId', domain?.data?.domain?.id)
         }
-    }, [domain])
-
+    }, [domain, isEditMode])
 
+    useEffect(() => {
+        setCurrentPage(1)
+    }, [search, status])
 
     return (
         <div className='flex xl:flex-row flex-col-reverse gap-8 mt-8'>
@@ -136,26 +280,28 @@ const Address: FC = () => {
                     columns={columns}
                     data={addresses?.data?.users}
                     pagination={{
-                        currentPage: 1,
-                        totalPages: 6,
-                        onPageChange: (page) => console.log('Page:', page)
+                        currentPage: currentPage,
+                        totalPages: addresses?.data?.pager?.totalPages || 1,
+                        onPageChange: (page) => setCurrentPage(page)
                     }}
                 />
             </div>
 
             <div className='xl:w-[350px] w-full bg-white rounded-4xl p-8'>
-                <div>
-                    {t('setting.add_address')}
-                </div>
-
-                {/* <div className='mt-8 flex items-center justify-between'>
+                <div className='flex justify-between items-center'>
                     <div>
-                        {t('setting.status')}
+                        {isEditMode ? 'ویرایش آدرس' : t('setting.add_address')}
                     </div>
-                    <div className='dltr pt-2'>
-                        <Switch />
-                    </div>
-                </div> */}
+                    {isEditMode && (
+                        <Button
+                            variant='secondary'
+                            onClick={handleCancelEdit}
+                            className='px-4 w-fit text-xs'
+                        >
+                            انصراف
+                        </Button>
+                    )}
+                </div>
 
                 <div className='mt-6'>
                     <Input
@@ -169,7 +315,7 @@ const Address: FC = () => {
                     <Input
                         label={t('setting.title1')}
                         {...register('title')}
-                        error_text={errors.title?.message}
+                        error_text={errors.title?.message as string}
                     />
                 </div>
 
@@ -178,7 +324,8 @@ const Address: FC = () => {
                         label={t('setting.username')}
                         className='text-left'
                         {...register('username')}
-                        error_text={errors.username?.message}
+                        error_text={errors.username?.message as string}
+                        readOnly={isEditMode}
                     />
                     <div className='absolute flex items-center dltr text-xs z-10 right-[1px] top-[29px] rounded-r-2.5 h-[38px] bg-[#EBEEF5] px-3'>
                         @ {domain?.data?.domain?.name}
@@ -187,38 +334,65 @@ const Address: FC = () => {
 
                 <div className='mt-6'>
                     <Input
-                        label={t('setting.password')}
+                        label='حجم ایمیل (مگابایت)'
+                        type='number'
+                        {...register('quotaMB', { valueAsNumber: true })}
+                        error_text={errors.quotaMB?.message as string}
+                        placeholder='حجم ایمیل را به مگابایت وارد کنید'
+                    />
+                    <div className='text-xs text-gray-500 mt-1'>
+                        فضای باقی‌مانده: {spaceData?.data?.quota ? Math.round((spaceData.data.quota.totalInGB - spaceData.data.quota.usedInGB) * 1024) : 0} مگابایت
+                    </div>
+                </div>
+
+                <div className='mt-6'>
+                    <Input
+                        label={isEditMode ? 'رمز عبور جدید' : t('setting.password')}
                         type='password'
                         {...register('password')}
-                        error_text={errors.password?.message}
+                        error_text={errors.password?.message as string}
+                        placeholder={isEditMode ? 'برای تغییر رمز عبور وارد کنید' : ''}
                     />
                 </div>
 
-                <div className='mt-2 text-xs'>
-                    <div>رمز عبور می‌بایست:</div>
-                    <ul className='list-disc pr-3 mt-1 flex flex-col gap-1'>
-                        <li>حداقل ۸ کاراکتر باشد</li>
-                        <li>ترکیبی از حروف کوچک و بزرگ باشد</li>
-                        <li>شامل اعداد باشد</li>
-                        <li>شامل کاراکتر های خاص (نماد ها) باشد</li>
-                    </ul>
-                </div>
+
+
+                {!isEditMode && (
+                    <div className='mt-2 text-xs'>
+                        <div>رمز عبور می‌بایست:</div>
+                        <ul className='list-disc pr-3 mt-1 flex flex-col gap-1'>
+                            <li>حداقل ۸ کاراکتر باشد</li>
+                            <li>ترکیبی از حروف کوچک و بزرگ باشد</li>
+                            <li>شامل اعداد باشد</li>
+                            <li>شامل کاراکتر های خاص (نماد ها) باشد</li>
+                        </ul>
+                    </div>
+                )}
 
                 <div className='mt-9 flex justify-end'>
                     <Button
                         className='w-fit px-20'
                         onClick={handleSubmit(onSubmit)}
-                        loading={isPending}
+                        loading={isPending || isUpdating}
                     >
                         <div className='flex gap-2'>
                             <TickCircle size={20} color='white' />
                             <div>
-                                {t('setting.create')}
+                                {isEditMode ? 'آپدیت' : t('setting.create')}
                             </div>
                         </div>
                     </Button>
                 </div>
             </div>
+
+            <ModalConfrim
+                isOpen={isDeleteModalOpen}
+                close={handleCloseDeleteModal}
+                onConfrim={handleConfirmDelete}
+                title={t('confrim.delete_address_title')}
+                label={addressToDelete ? t('confrim.delete_address_message').replace('{email}', addressToDelete.emailAddress) : ''}
+                isLoading={false}
+            />
         </div>
     )
 }