diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 78fddf8..e70c0de 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -31,7 +31,7 @@ const Select: FC = (props: Props) => { )}> { props.placeholder && - + } { props.items?.map((item) => { diff --git a/src/pages/subscriptions/List.tsx b/src/pages/subscriptions/List.tsx index bfdfe76..42eb774 100644 --- a/src/pages/subscriptions/List.tsx +++ b/src/pages/subscriptions/List.tsx @@ -6,11 +6,20 @@ import Td from '../../components/Td' import Pagination from '../../components/Pagination' import { UserSubscriptionsResponse, UserSubscription } from './types/SubscriptionTypes' import moment from 'moment-jalaali' +import Select from '../../components/Select' +import Input from '../../components/Input' +import { useGetAllServices } from '../service/hooks/useServiceData' +import { ServiceItemType } from '../service/types/ServiceTypes' const SubscriptionsList: FC = () => { const { t } = useTranslation('global') const [page, setPage] = useState(1) - const { data: subscriptionsResponse, isLoading } = useGetUserSubscriptions(page) + const [status, setStatus] = useState('') + const [serviceId, setServiceId] = useState('') + const [search, setSearch] = useState('') + + const { data: subscriptionsResponse, isLoading } = useGetUserSubscriptions(page, status, serviceId, search) + const getServices = useGetAllServices('', 1, '', '', false, 50) const subscriptionsData = (subscriptionsResponse as UserSubscriptionsResponse | undefined)?.data const subscriptionsList = subscriptionsData?.userSubscriptions || [] @@ -37,6 +46,7 @@ const SubscriptionsList: FC = () => { case 'EXPIRED': return 'bg-red-100 text-red-700' case 'CANCELLED': + case 'CANCELED': return 'bg-gray-100 text-gray-700' case 'INACTIVE': return 'bg-yellow-100 text-yellow-700' @@ -52,6 +62,7 @@ const SubscriptionsList: FC = () => { case 'EXPIRED': return t('subscription.expired') case 'CANCELLED': + case 'CANCELED': return t('subscription.cancelled') case 'INACTIVE': return t('subscription.inactive') @@ -68,6 +79,54 @@ const SubscriptionsList: FC = () => { +
+
+ ({ + label: item.name, + value: item.id, + })) || [] + } + placeholder={t('subscription.service')} + value={serviceId} + onChange={(e) => { + setServiceId(e.target.value) + setPage(1) + }} + /> +
+
+ setSearch(e.target.value)} + onChangeSearchFinal={(value) => { + setSearch(value) + setPage(1) + }} + /> +
+
+ {isLoading ? ( ) : ( @@ -79,6 +138,8 @@ const SubscriptionsList: FC = () => { + + @@ -94,6 +155,8 @@ const SubscriptionsList: FC = () => { + + diff --git a/src/pages/subscriptions/hooks/useSucscriptionData.ts b/src/pages/subscriptions/hooks/useSucscriptionData.ts index 9736393..bd48a1b 100644 --- a/src/pages/subscriptions/hooks/useSucscriptionData.ts +++ b/src/pages/subscriptions/hooks/useSucscriptionData.ts @@ -1,9 +1,14 @@ import { useQuery } from "@tanstack/react-query"; import * as api from "../service/SubscriptionService"; -export const useGetUserSubscriptions = (page: number) => { +export const useGetUserSubscriptions = ( + page: number, + status?: string, + serviceId?: string, + q?: string +) => { return useQuery({ - queryKey: ["user-subscriptions", page], - queryFn: () => api.getUserSubscriptions(page), + queryKey: ["user-subscriptions", page, status, serviceId, q], + queryFn: () => api.getUserSubscriptions(page, status, serviceId, q), }); }; diff --git a/src/pages/subscriptions/service/SubscriptionService.ts b/src/pages/subscriptions/service/SubscriptionService.ts index f6452b8..471bc4b 100644 --- a/src/pages/subscriptions/service/SubscriptionService.ts +++ b/src/pages/subscriptions/service/SubscriptionService.ts @@ -1,8 +1,23 @@ import axios from "../../../config/axios"; -export const getUserSubscriptions = async (page: number) => { +export const getUserSubscriptions = async ( + page: number, + status?: string, + serviceId?: string, + q?: string +) => { + let query = `?page=${page}`; + if (status) { + query += `&status=${status}`; + } + if (serviceId) { + query += `&serviceId=${serviceId}`; + } + if (q) { + query += `&q=${q}`; + } const { data } = await axios.get( - `/subscriptions/admin/user-subscriptions/all?page=${page}` + `/subscriptions/admin/user-subscriptions/all${query}` ); return data; };