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

percantage

Browse Source
This commit is contained in:
hamid zarghami
2025-03-03 12:18:56 +03:30
parent c7d6f45501
commit 3af46a330f
10 changed files with 72 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+9 -1
View File
@@ -6,6 +6,7 @@ import { clx } from '../helpers/utils'
type Props = {
className?: string;
isLoading?: boolean,
percentage?: number,
} & ButtonHTMLAttributes<HTMLButtonElement> &
XOR<{ children: ReactNode }, { label: string }>;
@@ -21,7 +22,14 @@ const Button: FC<Props> = memo((props: Props) => {
<button {...props} className={`${buttonClass} ${props.className}`} >
{
props.isLoading ?
<MoonLoader color="white" size={20} />
<div className='flex gap-2 items-center'>
{
!props.percentage ?
<MoonLoader size={20} color='#fff' />
:
<span>{props.percentage}%</span>
}
</div>
:
props.label || props.children
}
src/components/Select.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ const Select: FC<Props> = (props: Props) => {
<option value="" disabled selected>{props.placeholder}</option>
}
{
props.items.map((item) => {
props.items?.map((item) => {
return (
<option key={item.value} value={item.value}>
{item.label}
src/pages/criticisms/Add.tsx
+3 -1
View File
@@ -18,7 +18,8 @@ const AddCriticisms: FC = () => {
const { t } = useTranslation('global')
const [files, setFiles] = useState<File[]>([])
const multiUpload = useMultiUpload()
const [percent, setPercent] = useState<number>(0)
const multiUpload = useMultiUpload(setPercent)
const createCriticisms = useCreateCriticisms()
const formik = useFormik<CreateCriticismsTypes>({
@@ -118,6 +119,7 @@ const AddCriticisms: FC = () => {
className='xl:max-w-[100px]'
onClick={() => formik.handleSubmit()}
isLoading={createCriticisms.isPending || multiUpload.isPending}
percentage={percent}
>
<div className='flex gap-2 items-center'>
<TickCircle size={20} color='white' />
src/pages/profile/Profile.tsx
+3 -1
View File
@@ -22,10 +22,11 @@ import Phone from './components/Phone'
const Profile: FC = () => {
const { t } = useTranslation('global')
const singleUpload = useSingleUpload()
const [file, setFile] = useState<File>()
const getProvines = useGetProvines()
const getProfile = useGetProfile()
const [percent, setPercent] = useState<number>(0)
const singleUpload = useSingleUpload(setPercent)
const updateProfile = useUpdateProfile()
const formik = useFormik<UpdateProfileType>({
@@ -126,6 +127,7 @@ const Profile: FC = () => {
<Button
isLoading={singleUpload.isPending || updateProfile.isPending}
className='xl:w-[160px] w-fit px-4 xl:;px-0 h-8 xl:h-10 text-xs xl:text-sm'
percentage={percent}
>
<input {...getInputProps()} />
<div {...getRootProps()} className='flex items-center gap-3'>
src/pages/ticket/CreateTicket.tsx
+3 -1
View File
@@ -25,9 +25,10 @@ const CreateTicket: FC = () => {
const { t } = useTranslation('global')
const navigate = useNavigate()
const [files, setFiles] = useState<File[]>([])
const [percent, setPercent] = useState<number>(0)
const getProfile = useGetProfile()
const getCategories = useGetCategoriesTicket()
const multiUpload = useMultiUpload()
const multiUpload = useMultiUpload(setPercent)
const createTicket = useCreateTicket()
const getMyservice = useGetMyServices('')
@@ -206,6 +207,7 @@ const CreateTicket: FC = () => {
className='xl:max-w-[100px]'
onClick={() => formik.handleSubmit()}
isLoading={createTicket.isPending || multiUpload.isPending}
percentage={percent}
>
<div className='flex gap-2 items-center'>
<TickCircle size={20} color='white' />
src/pages/ticket/Detail.tsx
+4 -2
View File
@@ -23,10 +23,11 @@ const TicketDetail: FC = () => {
const { t } = useTranslation('global')
const navigate = useNavigate()
const { id } = useParams()
const getMessages = useGetMessages(id ? id : '')
const [files, setFiles] = useState<File[]>([])
const [percent, setPercent] = useState<number>(0)
const getMessages = useGetMessages(id ? id : '')
const addMessage = useAddMessageTicket(id ? id : '')
const multiUpload = useMultiUpload()
const multiUpload = useMultiUpload(setPercent)
const [isResetFiles, setIsResetFiles] = useState<boolean>(false)
const closeTicket = useCloseTicket()
@@ -223,6 +224,7 @@ const TicketDetail: FC = () => {
<Button
className='xl:max-w-[100px]'
onClick={() => formik.handleSubmit()}
percentage={percent}
isLoading={addMessage.isPending || multiUpload.isPending}
>
<div className='flex gap-2 items-center'>
src/pages/ticket/hooks/useTicketData.ts
+5 -4
View File
@@ -22,14 +22,15 @@ export const useGetCategoriesTicket = () => {
});
};
export const useSingleUpload = () => {
export const useSingleUpload = (callback?: (value: number) => void) => {
return useMutation({
mutationFn: (variables: FormData) => api.uploadSingle(variables),
mutationFn: (variables: FormData) => api.uploadSingle(variables, callback),
});
};
export const useMultiUpload = () => {
export const useMultiUpload = (callback?: (value: number) => void) => {
return useMutation({
mutationFn: (variables: FormData) => api.uploadMultiple(variables),
mutationFn: (variables: FormData) =>
api.uploadMultiple(variables, callback),
});
};
src/pages/ticket/service/TicketService.ts
+36 -4
View File
@@ -20,13 +20,45 @@ export const getCategoriesTicket = async () => {
return data;
};
export const uploadSingle = async (params: FormData) => {
const { data } = await axios.post(`/uploader/single-file`, params);
export const uploadSingle = async (
params: FormData,
callback?: (value: number) => void
) => {
const { data } = await axios.post(`/uploader/single-file`, params, {
onUploadProgress: (progressEvent: any) => {
if (progressEvent.bytes) {
if (callback) {
callback(
Math.round((progressEvent.loaded / progressEvent.total) * 100)
);
}
}
},
});
if (callback) {
callback(0);
}
return data;
};
export const uploadMultiple = async (params: FormData) => {
const { data } = await axios.post(`/uploader/multi-file`, params);
export const uploadMultiple = async (
params: FormData,
callback?: (value: number) => void
) => {
const { data } = await axios.post(`/uploader/multi-file`, params, {
onUploadProgress: (progressEvent: any) => {
if (progressEvent.bytes) {
if (callback) {
callback(
Math.round((progressEvent.loaded / progressEvent.total) * 100)
);
}
}
},
});
if (callback) {
callback(0);
}
return data;
};
src/pages/wallet/components/CardtoCard.tsx
+4 -2
View File
@@ -17,10 +17,11 @@ import { TickCircle } from 'iconsax-react'
const CardtoCard: FC = () => {
const { t } = useTranslation('global')
const [file, setFile] = useState<File>()
const [percent, setPercent] = useState<number>(0)
const getBankAccount = useGetBankAccount()
const depositTransfer = useDepositTransfer()
const upload = useSingleUpload()
const [file, setFile] = useState<File>()
const upload = useSingleUpload(setPercent)
const formik = useFormik<DepositTransferType>({
initialValues: {
@@ -103,6 +104,7 @@ const CardtoCard: FC = () => {
className='xl:w-[180px]'
onClick={() => formik.handleSubmit()}
isLoading={depositTransfer.isPending || upload.isPending}
percentage={percent}
>
<div className='flex gap-2 items-center'>
<TickCircle
src/pages/wallet/components/Sheba.tsx
+4 -2
View File
@@ -17,10 +17,11 @@ import { TickCircle } from 'iconsax-react'
const CardtoCard: FC = () => {
const { t } = useTranslation('global')
const [file, setFile] = useState<File>()
const [percent, setPercent] = useState<number>(0)
const getBankAccount = useGetBankAccount()
const depositTransfer = useDepositTransfer()
const upload = useSingleUpload()
const [file, setFile] = useState<File>()
const upload = useSingleUpload(setPercent)
const formik = useFormik<DepositTransferType>({
initialValues: {
@@ -104,6 +105,7 @@ const CardtoCard: FC = () => {
className='xl:w-[180px]'
onClick={() => formik.handleSubmit()}
isLoading={depositTransfer.isPending || upload.isPending}
percentage={percent}
>
<div className='flex gap-2 items-center'>
<TickCircle