services

src/langs/fa.json

@@ -156,7 +156,8 @@
     "active": "فعال",
     "deactive": "غیرفعال",
     "software_langauge": "زبان نرم افزار",
-    "link": "لینک"
+    "link": "لینک",
+    "danak_sujescet": "پیشنهاد داناک"
   },
   "save": "ذخیره",
   "search": "جستجو",

src/pages/service/List.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
 import { Add, Eye } from 'iconsax-react'
@@ -7,11 +7,24 @@ import Input from '../../components/Input'
 import Td from '../../components/Td'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
-import SwitchComponent from '../../components/Switch'
+import { useGetAllServices, useGetCategoryParents } from './hooks/useServiceData'
+import PageLoading from '../../components/PageLoading'
+import { ServiceCategoryType, ServiceItemType } from './types/ServiceTypes'
+import moment from 'moment-jalaali'
+import Pagination from '../../components/Pagination'
+import ToggleStatusService from './components/ToggleStatusService'
+import CheckBoxComponent from '../../components/CheckBoxComponent'
 
 const ListService: FC = () => {
 
     const { t } = useTranslation('global')
+    const [category, setCategory] = useState<string>('')
+    const [status, setstatus] = useState<'ACTIVE' | 'IN_ACTIVE' | ''>('')
+    const [page, setPage] = useState<number>(1)
+    const [search, setSearch] = useState<string>('')
+    const [isDanakSuggest, setIsDanakSuggest] = useState<boolean>(false)
+    const getServices = useGetAllServices(search, page, category, status, isDanakSuggest)
+    const getCategory = useGetCategoryParents()
 
     return (
         <div className='mt-4'>
@@ -40,71 +53,108 @@ const ListService: FC = () => {
                 <div className='flex gap-4'>
                     <Select
                         className='w-36'
-                        items={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
-                        ]}
+                        items={
+                            getCategory.data?.data ?
+                                getCategory.data?.data?.categories?.map((item: ServiceCategoryType) => ({
+                                    label: item.title,
+                                    value: item.id,
+                                }))
+                                : []
+                        }
                         placeholder={t('service.category')}
+                        onChange={(e) => setCategory(e.target.value)}
                     />
                     <Select
                         className='w-36'
                         items={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
+                            { label: t('all'), value: '' },
+                            { label: t('service.active'), value: 'ACTIVE' },
+                            { label: t('service.deactive'), value: 'IN_ACTIVE' },
                         ]}
                         placeholder={t('service.status')}
+                        onChange={(e) => setstatus(e.target.value as 'ACTIVE' | 'IN_ACTIVE' | '')}
                     />
+                    <div className='flex text-sm items-center'>
+                        <div className='text-xs whitespace-nowrap'>
+                            {t('service.danak_sujescet')}
+                        </div>
+                        <CheckBoxComponent
+                            checked={isDanakSuggest}
+                            onChange={(e) => setIsDanakSuggest(e.target.checked)}
+                        />
+                    </div>
                 </div>
                 <div>
                     <Input
                         variant='search'
                         placeholder={t('service.search')}
                         className='bg-white border border-border'
+                        onChangeSearchFinal={(value) => setSearch(value)}
                     />
                 </div>
             </div>
 
-            <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
-                <table className='w-full text-sm '>
-                    <thead className='thead'>
-                        <tr>
-                            <Td text='' />
-                            <Td text={t('service.title')} />
-                            <Td text={t('service.company_developed')} />
-                            <Td text={t('service.category')} />
-                            <Td text={t('service.publish_date')} />
-                            <Td text={t('ticket.status')} />
-                            <Td text={t('ticket.detail')} />
-                            <Td text={''} />
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr className='tr'>
-                            <Td text=''>
-                                <div className='size-10 rounded-lg bg-red-100'></div>
-                            </Td>
-                            <Td text={'دی  منو'} />
-                            <Td text={'شرکت داناک'} />
-                            <Td text={'رستوران'} />
-                            <Td text={'۱۴۰۳/۰۹/۳۰'} />
-                            <Td text={''}>
-                                <SwitchComponent
-                                    active
-                                    onChange={() => null}
-                                />
-                            </Td>
-                            <Td text={''}>
-                                <Link to={Pages.ticket.detail + '1'}>
-                                    <Eye size={20} color='#8C90A3' />
-                                </Link>
-                            </Td>
-                            <Td text={''} />
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+            {
+                getServices.isPending || getCategory.isPending ?
+                    <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='' />
+                                    <Td text={t('service.title')} />
+                                    <Td text={t('service.company_developed')} />
+                                    <Td text={t('service.category')} />
+                                    <Td text={t('service.publish_date')} />
+                                    <Td text={t('ticket.status')} />
+                                    <Td text={t('ticket.detail')} />
+                                    <Td text={''} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    getServices.data?.data?.services?.map((item: ServiceItemType) => {
+                                        return (
+                                            <tr key={item.id} className='tr'>
+                                                <Td text=''>
+                                                    <div className='size-10 rounded-lg overflow-hidden'>
+                                                        <img src={item.icon} className='size-full' />
+                                                    </div>
+                                                </Td>
+                                                <Td text={item.name} />
+                                                <Td text={item.author} />
+                                                <Td text={item.category?.title} />
+                                                <Td text={moment(item.createDate).format('jYYYY-jMM-jDD')} />
+                                                <Td text={''}>
+                                                    <ToggleStatusService
+                                                        id={item.id}
+                                                        status={item.isActive}
+                                                    />
+                                                </Td>
+                                                <Td text={''}>
+                                                    <Link to={Pages.ticket.detail + item.id}>
+                                                        <Eye size={20} color='#8C90A3' />
+                                                    </Link>
+                                                </Td>
+                                                <Td text={''} />
+                                            </tr>
+                                        )
+                                    })
+                                }
+
+                            </tbody>
+                        </table>
+
+                        <div className='flex justify-end pb-5'>
+                            <Pagination
+                                currentPage={page}
+                                totalPages={getServices.data?.data?.pager?.totalPages}
+                                onPageChange={setPage}
+                            />
+                        </div>
+                    </div>
+            }
         </div>
     )
 }

src/pages/service/components/ToggleStatusService.tsx

@@ -0,0 +1,28 @@
+import { FC, useState } from 'react'
+import { useToggleStatusService } from '../hooks/useServiceData'
+import SwitchComponent from '../../../components/Switch'
+
+type Props = {
+    id: string,
+    status: boolean,
+}
+
+const ToggleStatusService: FC<Props> = (props: Props) => {
+
+    const [isActive, setIsActive] = useState<boolean>(props.status)
+    const toggleStatus = useToggleStatusService()
+
+    const handleChange = (value: boolean) => {
+        setIsActive(value)
+        toggleStatus.mutate(props.id)
+    }
+
+    return (
+        <SwitchComponent
+            active={isActive}
+            onChange={handleChange}
+        />
+    )
+}
+
+export default ToggleStatusService

src/pages/service/hooks/useServiceData.ts

@@ -6,6 +6,20 @@ import {
   ToggleStatusCategoryType,
 } from "../types/ServiceTypes";
 
+export const useGetAllServices = (
+  search: string,
+  page: number,
+  category: string,
+  status: string,
+  isDanakSuggest: boolean
+) => {
+  return useQuery({
+    queryKey: ["services", search, page, category, status, isDanakSuggest],
+    queryFn: () =>
+      api.getAllServicess(search, page, category, status, isDanakSuggest),
+  });
+};
+
 export const useGetCategoryParents = () => {
   return useQuery({
     queryKey: ["service-category"],
@@ -60,3 +74,9 @@ export const useMultiUpload = () => {
     mutationFn: (variables: FormData) => api.uploadMultiple(variables),
   });
 };
+
+export const useToggleStatusService = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.toggleStatusService(id),
+  });
+};

src/pages/service/service/ServiceService.ts

@@ -5,6 +5,30 @@ import {
   ToggleStatusCategoryType,
 } from "../types/ServiceTypes";
 
+export const getAllServicess = async (
+  search: string,
+  page: number,
+  category: string,
+  status: string,
+  isDanakSuggest: boolean
+) => {
+  let query = `?page=${page}`;
+  if (status) {
+    query += `&isActive=${status === "ACTIVE" ? "1" : "0"}`;
+  }
+  if (category) {
+    query += `&categoryId=${category}`;
+  }
+  if (search) {
+    query += `&q=${search}`;
+  }
+
+  if (isDanakSuggest) {
+    query += `&isDanakSuggest=${isDanakSuggest}`;
+  }
+  const { data } = await axios.get(`/services/list${query}`);
+  return data;
+};
 export const getCategoryParent = async () => {
   const { data } = await axios.get(`/services/category`);
   return data;
@@ -53,3 +77,8 @@ export const uploadMultiple = async (params: FormData) => {
   const { data } = await axios.post(`/uploader/multi-file`, params);
   return data;
 };
+
+export const toggleStatusService = async (id: string) => {
+  const { data } = await axios.post(`/services/toggle-status/${id}`);
+  return data;
+};

src/pages/service/types/ServiceTypes.ts

@@ -41,3 +41,13 @@ export type CreateServiceType = {
   images?: string[];
   createDate: string;
 };
+
+export type ServiceItemType = {
+  id: string;
+  name: string;
+  author: string;
+  category: ServiceCategoryType;
+  createDate: string;
+  isActive: boolean;
+  icon: string;
+};