change structure dmenu
This commit is contained in:
hamid zarghami
@@ -0,0 +1,125 @@
|
||||
import { type FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../../components/Button'
|
||||
import { Add } from 'iconsax-react'
|
||||
import CreateGroupIcon from './components/CreateGroupIcon'
|
||||
import { useGetGroupIcons, useDeleteGroupIcon } from '../hooks/useIconData'
|
||||
import Td from '../../../components/Td'
|
||||
import Input from '../../../components/Input'
|
||||
import PageLoading from '../../../components/PageLoading'
|
||||
import TrashWithConfrim from '../../../components/TrashWithConfrim'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
import { GroupIconType } from './types/Types'
|
||||
|
||||
const GroupIconList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [showModal, setShowModal] = useState<boolean>(false)
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const { data: groupIcons, isLoading, refetch } = useGetGroupIcons()
|
||||
const deleteGroupIcon = useDeleteGroupIcon()
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setShowModal(false)
|
||||
refetch()
|
||||
}
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
deleteGroupIcon.mutate(id, {
|
||||
onSuccess: () => {
|
||||
refetch()
|
||||
toast.success(t('success'))
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const groups = (groupIcons as unknown as { data?: GroupIconType[] })?.data || []
|
||||
const filteredGroups = groups.filter((group: GroupIconType) =>
|
||||
group.name.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
|
||||
return (
|
||||
<div className='mt-4 min-h-[500px]'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('icon.group_list')}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
onClick={() => setShowModal(true)}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Add size={20} color='white' />
|
||||
<div>
|
||||
{t('icon.add_new_group')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-end items-center'>
|
||||
<div className='xl:w-[300px] w-full'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('ads.search')}
|
||||
className='bg-white w-full'
|
||||
onChangeSearchFinal={(value) => setSearch(value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
isLoading ?
|
||||
<PageLoading />
|
||||
:
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm'>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('icon.name')} />
|
||||
<Td text={t('icon.icons_count')} />
|
||||
<Td text={t('icon.created_at')} />
|
||||
<Td text={t('')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
filteredGroups.map((item: GroupIconType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={item.name} />
|
||||
<Td text={item.icons?.length?.toString() || '0'} />
|
||||
<Td text={new Date(item.createdAt).toLocaleDateString('fa-IR')} />
|
||||
<Td text={t('')}>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TrashWithConfrim
|
||||
onDelete={() => handleDelete(item.id)}
|
||||
isLoading={deleteGroupIcon.isPending}
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<CreateGroupIcon
|
||||
open={showModal}
|
||||
close={handleCloseModal}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GroupIconList
|
||||
@@ -0,0 +1,144 @@
|
||||
import { useState, type FC } from 'react'
|
||||
import { useGetIcons, useDeleteIcon } from '../hooks/useIconData'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../../components/Button'
|
||||
import { Add } from 'iconsax-react'
|
||||
import CreateIcon from './components/CreateIcon'
|
||||
import Td from '../../../components/Td'
|
||||
import Input from '../../../components/Input'
|
||||
import PageLoading from '../../../components/PageLoading'
|
||||
import TrashWithConfrim from '../../../components/TrashWithConfrim'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
import { IconType } from './types/Types'
|
||||
import moment from 'moment-jalaali'
|
||||
|
||||
const IconsList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [showModal, setShowModal] = useState<boolean>(false)
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const { data: iconsData, isLoading, refetch } = useGetIcons()
|
||||
const deleteIcon = useDeleteIcon()
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setShowModal(false)
|
||||
refetch()
|
||||
}
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
deleteIcon.mutate(id, {
|
||||
onSuccess: () => {
|
||||
refetch()
|
||||
toast.success(t('success'))
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const icons = (iconsData as unknown as { data?: IconType[] })?.data || []
|
||||
const filteredIcons = icons.filter((icon: IconType) =>
|
||||
icon.url.toLowerCase().includes(search.toLowerCase()) ||
|
||||
icon.group?.name?.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
|
||||
return (
|
||||
<div className='mt-4 min-h-[500px]'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('icon.list_icon')}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
onClick={() => setShowModal(true)}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Add size={20} color='white' />
|
||||
<div>
|
||||
{t('icon.add_new_icon')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-end items-center'>
|
||||
<div className='xl:w-[300px] w-full'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('ads.search')}
|
||||
className='bg-white w-full'
|
||||
onChangeSearchFinal={(value) => setSearch(value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
isLoading ?
|
||||
<PageLoading />
|
||||
:
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm'>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('icon.url')} />
|
||||
<Td text={t('icon.group')} />
|
||||
<Td text={t('icon.created_at')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
filteredIcons.map((item: IconType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={''}>
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='size-10 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center'>
|
||||
<img
|
||||
src={item.url}
|
||||
alt={item.url}
|
||||
className='size-full object-contain'
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement
|
||||
target.style.display = 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className='truncate max-w-xs' title={item.url}>
|
||||
{item.url}
|
||||
</div>
|
||||
</div>
|
||||
</Td>
|
||||
<Td text={item.group?.name || '-'} />
|
||||
<Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
|
||||
<Td text={''}>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TrashWithConfrim
|
||||
onDelete={() => handleDelete(item.id)}
|
||||
isLoading={deleteIcon.isPending}
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<CreateIcon
|
||||
open={showModal}
|
||||
close={handleCloseModal}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconsList
|
||||
@@ -0,0 +1,99 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../../../components/Button'
|
||||
import DefaulModal from '../../../../components/DefaulModal'
|
||||
import Input from '../../../../components/Input'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { toast } from 'react-toastify'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import { useCreateGroupIcon } from '../../hooks/useIconData'
|
||||
import { CreateGroupIconType } from '../types/Types'
|
||||
import { ErrorType } from '../../../../helpers/types'
|
||||
|
||||
interface CreateGroupIconProps {
|
||||
open: boolean
|
||||
close: () => void
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
const CreateGroupIcon: FC<CreateGroupIconProps> = ({ open, close, onSuccess }) => {
|
||||
const { t } = useTranslation('global')
|
||||
const createGroupIcon = useCreateGroupIcon()
|
||||
|
||||
const formik = useFormik<CreateGroupIconType>({
|
||||
initialValues: {
|
||||
name: ''
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
name: Yup.string()
|
||||
.required(t('errors.required'))
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
createGroupIcon.mutate(values, {
|
||||
onSuccess: () => {
|
||||
formik.resetForm()
|
||||
close()
|
||||
toast.success(t('success'))
|
||||
onSuccess?.()
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const handleClose = () => {
|
||||
formik.resetForm()
|
||||
close()
|
||||
}
|
||||
|
||||
return (
|
||||
<DefaulModal
|
||||
open={open}
|
||||
close={handleClose}
|
||||
title_header={t('icon.add_new_group')}
|
||||
isHeader
|
||||
>
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('title')}
|
||||
className='bg-white bg-opacity-30'
|
||||
name='name'
|
||||
value={formik.values.name}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
|
||||
/>
|
||||
|
||||
<div className='mt-12 border-t border-border pt-5 flex justify-end'>
|
||||
<div className='flex gap-5 items-center'>
|
||||
<Button
|
||||
className='w-[150px] bg-white bg-opacity-15 text-description'
|
||||
label={t('cancel')}
|
||||
onClick={handleClose}
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createGroupIcon.isPending}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<TickCircle
|
||||
size={20}
|
||||
color='white'
|
||||
/>
|
||||
<div>
|
||||
{t('submit')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaulModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateGroupIcon
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../../../components/Button'
|
||||
import DefaulModal from '../../../../components/DefaulModal'
|
||||
import UploadBox from '../../../../components/UploadBox'
|
||||
import Select from '../../../../components/Select'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { toast } from 'react-toastify'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import { useCreateIcon, useGetGroupIcons } from '../../hooks/useIconData'
|
||||
import { useSingleUpload } from '../../../service/hooks/useServiceData'
|
||||
import { CreateIconType, GroupIconType } from '../types/Types'
|
||||
import { ErrorType } from '../../../../helpers/types'
|
||||
|
||||
interface CreateIconProps {
|
||||
open: boolean
|
||||
close: () => void
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
const CreateIcon: FC<CreateIconProps> = ({ open, close, onSuccess }) => {
|
||||
const { t } = useTranslation('global')
|
||||
const [file, setFile] = useState<File>()
|
||||
const createIcon = useCreateIcon()
|
||||
const singleUpload = useSingleUpload()
|
||||
const { data: groupIcons } = useGetGroupIcons()
|
||||
|
||||
const groups = (groupIcons as unknown as { data?: GroupIconType[] })?.data || []
|
||||
const groupOptions = groups.map((group: GroupIconType) => ({
|
||||
value: group.id,
|
||||
label: group.name
|
||||
}))
|
||||
|
||||
const handleCreateIcon = (values: CreateIconType) => {
|
||||
createIcon.mutate(values, {
|
||||
onSuccess: () => {
|
||||
formik.resetForm()
|
||||
setFile(undefined)
|
||||
close()
|
||||
toast.success(t('success'))
|
||||
onSuccess?.()
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const formik = useFormik<CreateIconType>({
|
||||
initialValues: {
|
||||
url: '',
|
||||
groupId: ''
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
groupId: Yup.string()
|
||||
.required(t('errors.required'))
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
if (!file) {
|
||||
toast.error(t('errors.required'))
|
||||
return
|
||||
}
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
await singleUpload.mutateAsync(formData, {
|
||||
onSuccess: (data) => {
|
||||
values.url = data?.data?.url
|
||||
handleCreateIcon(values)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const handleClose = () => {
|
||||
formik.resetForm()
|
||||
setFile(undefined)
|
||||
close()
|
||||
}
|
||||
|
||||
return (
|
||||
<DefaulModal
|
||||
open={open}
|
||||
close={handleClose}
|
||||
title_header={t('icon.add_new_icon')}
|
||||
isHeader
|
||||
>
|
||||
<div className='mt-6'>
|
||||
<UploadBox
|
||||
label={t('icon.url')}
|
||||
onChange={(files) => setFile(files[0])}
|
||||
isReset={!open}
|
||||
accept="image/svg+xml"
|
||||
/>
|
||||
|
||||
<div className='mt-4'>
|
||||
<Select
|
||||
label={t('icon.group')}
|
||||
className='bg-white bg-opacity-30'
|
||||
items={groupOptions}
|
||||
placeholder={t('icon.select_group')}
|
||||
{...formik.getFieldProps('groupId')}
|
||||
error_text={formik.touched.groupId && formik.errors.groupId ? formik.errors.groupId : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-12 border-t border-border pt-5 flex justify-end'>
|
||||
<div className='flex gap-5 items-center'>
|
||||
<Button
|
||||
className='w-[150px] bg-white bg-opacity-15 text-description'
|
||||
label={t('cancel')}
|
||||
onClick={handleClose}
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createIcon.isPending || singleUpload.isPending}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<TickCircle
|
||||
size={20}
|
||||
color='white'
|
||||
/>
|
||||
<div>
|
||||
{t('submit')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaulModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateIcon
|
||||
@@ -0,0 +1,44 @@
|
||||
import { IResponse } from "../../../../types/response.types";
|
||||
|
||||
export type CreateGroupIconType = {
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type GroupIconType = {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
name: string;
|
||||
icons: unknown[];
|
||||
};
|
||||
|
||||
export interface GroupIconsResponse extends IResponse<GroupIconType[]> {
|
||||
statusCode: number;
|
||||
}
|
||||
|
||||
export type CreateIconType = {
|
||||
url: string;
|
||||
groupId: string;
|
||||
};
|
||||
|
||||
export type IconGroupType = {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type IconType = {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
url: string;
|
||||
group: IconGroupType;
|
||||
};
|
||||
|
||||
export interface IconsResponse extends IResponse<IconType[]> {
|
||||
statusCode: number;
|
||||
}
|
||||
Reference in New Issue
Block a user