add pagination for last cases lists
This commit is contained in:
@@ -2579,7 +2579,7 @@
|
|||||||
.violations-my-cases-section {
|
.violations-my-cases-section {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 32px;
|
padding: 32px 32px 16px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1);
|
box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1);
|
||||||
max-width: calc(100vw - var(--side-bar-width) - 60px);
|
max-width: calc(100vw - var(--side-bar-width) - 60px);
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { useLastComplaints } from '@/app/hooks/react-query/useLastComplaints';
|
|||||||
import { useLastCases } from '@/app/hooks/react-query/useLastCases';
|
import { useLastCases } from '@/app/hooks/react-query/useLastCases';
|
||||||
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
|
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
|
||||||
import { useTranslations } from 'next-intl';
|
import { useTranslations } from 'next-intl';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState, useRef } from 'react';
|
||||||
|
|
||||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||||
import { Navigation, Pagination } from 'swiper/modules';
|
import { Navigation, Pagination } from 'swiper/modules';
|
||||||
@@ -17,6 +17,7 @@ type FilterState = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default function ViolationsLastCombinedCases() {
|
export default function ViolationsLastCombinedCases() {
|
||||||
|
const swiperRef = useRef(null);
|
||||||
const t = useTranslations('Global');
|
const t = useTranslations('Global');
|
||||||
const [filters, setFilters] = useState<FilterState>({
|
const [filters, setFilters] = useState<FilterState>({
|
||||||
complaints: true,
|
complaints: true,
|
||||||
@@ -123,6 +124,13 @@ export default function ViolationsLastCombinedCases() {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
loop: filteredItems.length > 3,
|
loop: filteredItems.length > 3,
|
||||||
|
pagination: {
|
||||||
|
el: '.custom-pagination-container', // Кастомный контейнер для пагинации
|
||||||
|
clickable: true,
|
||||||
|
},
|
||||||
|
onSwiper: (swiper: any) => {
|
||||||
|
swiperRef.current = swiper;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const isLoading = (!dataComplaint || !dataCases);
|
const isLoading = (!dataComplaint || !dataCases);
|
||||||
@@ -226,6 +234,9 @@ export default function ViolationsLastCombinedCases() {
|
|||||||
</Swiper>
|
</Swiper>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{!isNothingSelected && filteredItems.length > 0 && (
|
||||||
|
<div className="custom-pagination-container text-center"></div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user