From e7d775237d5a9ca6212f42e387f92617c6b86e2b Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Tue, 16 Dec 2025 09:42:33 +0330 Subject: [PATCH] icons list and create group icon --- src/config/Pages.ts | 4 + src/langs/fa.json | 7 +- src/pages/icon/GroupList.tsx | 40 ++++++++ src/pages/icon/List.tsx | 13 +++ src/pages/icon/components/CreateGroupIcon.tsx | 99 +++++++++++++++++++ src/pages/icon/hooks/useIconData.ts | 15 +++ src/pages/icon/service/IconService.ts | 12 +++ src/pages/icon/types/Types.ts | 3 + src/router/Main.tsx | 5 + src/shared/SideBar.tsx | 11 ++- 10 files changed, 207 insertions(+), 2 deletions(-) create mode 100644 src/pages/icon/GroupList.tsx create mode 100644 src/pages/icon/List.tsx create mode 100644 src/pages/icon/components/CreateGroupIcon.tsx create mode 100644 src/pages/icon/hooks/useIconData.ts create mode 100644 src/pages/icon/service/IconService.ts create mode 100644 src/pages/icon/types/Types.ts diff --git a/src/config/Pages.ts b/src/config/Pages.ts index 117dd4d..b37f600 100644 --- a/src/config/Pages.ts +++ b/src/config/Pages.ts @@ -122,4 +122,8 @@ export const Pages = { errors: "/access-logs/errors", permissions: "/access-logs/permissions", }, + icons: { + list: "/icons/list", + groupList: "/icons/group/list", + }, }; diff --git a/src/langs/fa.json b/src/langs/fa.json index 0c53427..9987bee 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -842,5 +842,10 @@ "status": "وضعیت", "full_name": "نام و نام خانوادگی", "users": "کاربران" - } + }, + "icon": { + "group_list": "لیست گروه های آیکون", + "add_new_group": "افزودن گروه آیکون" + }, + "cancel": "لغو" } diff --git a/src/pages/icon/GroupList.tsx b/src/pages/icon/GroupList.tsx new file mode 100644 index 0000000..f0fe2bc --- /dev/null +++ b/src/pages/icon/GroupList.tsx @@ -0,0 +1,40 @@ +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' + +const GroupIconList: FC = () => { + + const { t } = useTranslation('global') + const [showModal, setShowModal] = useState(false) + + return ( +
+
+
+ {t('icon.group_list')} +
+ + +
+ + setShowModal(false)} + /> +
+ ) +} + +export default GroupIconList \ No newline at end of file diff --git a/src/pages/icon/List.tsx b/src/pages/icon/List.tsx new file mode 100644 index 0000000..89e1041 --- /dev/null +++ b/src/pages/icon/List.tsx @@ -0,0 +1,13 @@ +import { type FC } from 'react' +import { useGetIcons } from './hooks/useIconData' + +const IconsList: FC = () => { + + const { data: icons, isLoading, refetch } = useGetIcons() + + return ( +
IconsList
+ ) +} + +export default IconsList \ No newline at end of file diff --git a/src/pages/icon/components/CreateGroupIcon.tsx b/src/pages/icon/components/CreateGroupIcon.tsx new file mode 100644 index 0000000..ca463db --- /dev/null +++ b/src/pages/icon/components/CreateGroupIcon.tsx @@ -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 = ({ open, close, onSuccess }) => { + const { t } = useTranslation('global') + const createGroupIcon = useCreateGroupIcon() + + const formik = useFormik({ + 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 ( + +
+ + +
+
+ +
+
+
+ + ) +} + +export default CreateGroupIcon + diff --git a/src/pages/icon/hooks/useIconData.ts b/src/pages/icon/hooks/useIconData.ts new file mode 100644 index 0000000..6d04153 --- /dev/null +++ b/src/pages/icon/hooks/useIconData.ts @@ -0,0 +1,15 @@ +import { useMutation, useQuery } from "@tanstack/react-query"; +import * as api from "../service/IconService"; + +export const useGetIcons = () => { + return useQuery({ + queryKey: ["icons"], + queryFn: api.getIcons, + }); +}; + +export const useCreateGroupIcon = () => { + return useMutation({ + mutationFn: api.createGroupIcon, + }); +}; diff --git a/src/pages/icon/service/IconService.ts b/src/pages/icon/service/IconService.ts new file mode 100644 index 0000000..6979580 --- /dev/null +++ b/src/pages/icon/service/IconService.ts @@ -0,0 +1,12 @@ +import axios from "../../../config/axios"; +import { CreateGroupIconType } from "../types/Types"; + +export const getIcons = async () => { + const { data } = await axios.get("/admin/icons"); + return data; +}; + +export const createGroupIcon = async (params: CreateGroupIconType) => { + const { data } = await axios.post("/admin/icons/groups", params); + return data; +}; diff --git a/src/pages/icon/types/Types.ts b/src/pages/icon/types/Types.ts new file mode 100644 index 0000000..8bde863 --- /dev/null +++ b/src/pages/icon/types/Types.ts @@ -0,0 +1,3 @@ +export type CreateGroupIconType = { + name: string; +}; diff --git a/src/router/Main.tsx b/src/router/Main.tsx index 01bad07..0a980f3 100644 --- a/src/router/Main.tsx +++ b/src/router/Main.tsx @@ -77,6 +77,8 @@ import AccessLogsList from '../pages/accessLogs/AccessLogsList' import AccessLogsStats from '../pages/accessLogs/AccessLogsStats' import ErrorLogs from '../pages/accessLogs/ErrorLogs' import PermissionLogs from '../pages/accessLogs/PermissionLogs' +import IconsList from '../pages/icon/List.tsx' +import GroupIconList from '../pages/icon/GroupList' const MainRouter: FC = () => { const { hasSubMenu } = useSharedStore() @@ -165,6 +167,9 @@ const MainRouter: FC = () => { } /> } /> } /> + + } /> + } /> diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx index 37ef741..0b1db08 100644 --- a/src/shared/SideBar.tsx +++ b/src/shared/SideBar.tsx @@ -2,7 +2,7 @@ import { FC, useEffect } from 'react' import LogoImage from '../assets/images/logo.svg' import LogoSmall from '../assets/images/logo-small.svg' import { useTranslation } from 'react-i18next' -import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Message, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity } from 'iconsax-react' +import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Message, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon } from 'iconsax-react' import SideBarItem from './SideBarItem' import { useLocation } from 'react-router-dom' import { Pages } from '../config/Pages' @@ -295,6 +295,15 @@ const SideBar: FC = () => {
+
+ } + title={t('sidebar.icons')} + isActive={isActive('icons')} + link={Pages.icons.list} + activeName='icons' + /> +
}