group icon

src/langs/fa.json

@@ -73,7 +73,8 @@
     "sliders": "اسلایدر",
     "support": "پلن پشتیبانی",
     "feedback": "گزارش ها",
-    "accessLogs": "لاگ‌های دسترسی"
+    "accessLogs": "لاگ‌های دسترسی",
+    "icons": "آیکون ها"
   },
   "slider": {
     "new_slider": "اسلایدر جدید",
@@ -845,7 +846,12 @@
   },
   "icon": {
     "group_list": "لیست گروه های آیکون",
-    "add_new_group": "افزودن گروه آیکون"
+    "add_new_group": "افزودن گروه آیکون",
+    "list_icon": "لیست آیکون ها",
+    "add_new_icon": "افزودن آیکون",
+    "name": "نام",
+    "icons_count": "تعداد آیکون ها",
+    "created_at": "تاریخ ایجاد"
   },
   "cancel": "لغو"
 }

src/pages/icon/GroupList.tsx

@@ -3,14 +3,47 @@ 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'>
+        <div className='mt-4 min-h-[500px]'>
             <div className='flex justify-between items-center'>
                 <div>
                     {t('icon.group_list')}
@@ -29,9 +62,61 @@ const GroupIconList: FC = () => {
                 </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={() => setShowModal(false)}
+                close={handleCloseModal}
             />
         </div>
     )

src/pages/icon/List.tsx

@@ -1,12 +1,41 @@
-import { type FC } from 'react'
+import { useState, type FC } from 'react'
 import { useGetIcons } from './hooks/useIconData'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { Add } from 'iconsax-react'
 
 const IconsList: FC = () => {
 
+    const { t } = useTranslation('global')
+    const [showModal, setShowModal] = useState<boolean>(false)
     const { data: icons, isLoading, refetch } = useGetIcons()
 
+    const handleCloseModal = () => {
+        setShowModal(false)
+        refetch()
+    }
+
     return (
-        <div>IconsList</div>
+        <div className='mt-4'>
+            <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>
     )
 }
 

src/pages/icon/hooks/useIconData.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/IconService";
+import { GroupIconsResponse } from "../types/Types";
 
 export const useGetIcons = () => {
   return useQuery({
@@ -13,3 +14,16 @@ export const useCreateGroupIcon = () => {
     mutationFn: api.createGroupIcon,
   });
 };
+
+export const useGetGroupIcons = () => {
+  return useQuery<GroupIconsResponse>({
+    queryKey: ["group-icons"],
+    queryFn: api.getGroupIcons,
+  });
+};
+
+export const useDeleteGroupIcon = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.deleteGroupIcon(id),
+  });
+};

src/pages/icon/service/IconService.ts

@@ -1,5 +1,5 @@
 import axios from "../../../config/axios";
-import { CreateGroupIconType } from "../types/Types";
+import { CreateGroupIconType, GroupIconsResponse } from "../types/Types";
 
 export const getIcons = async () => {
   const { data } = await axios.get("/admin/icons");
@@ -10,3 +10,13 @@ export const createGroupIcon = async (params: CreateGroupIconType) => {
   const { data } = await axios.post("/admin/icons/groups", params);
   return data;
 };
+
+export const getGroupIcons = async (): Promise<GroupIconsResponse> => {
+  const { data } = await axios.get("/admin/icons/groups");
+  return data;
+};
+
+export const deleteGroupIcon = async (id: string) => {
+  const { data } = await axios.delete(`/admin/icons/groups/${id}`);
+  return data;
+};

src/pages/icon/types/Types.ts

@@ -1,3 +1,18 @@
+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;
+}