KLC/KLC-Admin-Panel-Frontend-Figmamake
Archived
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added pagination in content all pages

Browse Source
This commit is contained in:
priyanshuvish
2025-10-30 13:23:09 +05:30
parent 729d1d8f50
commit a574f8a40e
7 changed files with 300 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/pages/tabs/CaseStudiesTab.tsx
View File

@@ -4,10 +4,10 @@ import { Input } from "../../ui/input";
import { Search, Upload, Loader2 } from "lucide-react";
import { ContentTable } from "../shared/ContentTable";
import { UploadDrawer, UploadFormData } from "../shared/UploadDrawer";
import {
useGetCaseStudiesQuery,
import {
useGetCaseStudiesQuery,
useDeleteCaseStudyMutation,
useCreateCaseStudyMutation
useCreateCaseStudyMutation
} from "../../../store/services/contentManager.service";
import { toast } from "sonner";
@@ -22,20 +22,26 @@ export function CaseStudiesTab({ onNavigate, user }: CaseStudiesTabProps) {
const [searchTerm, setSearchTerm] = useState("");
const [selectedItems, setSelectedItems] = useState<string[]>([]);
const [isUploadDrawerOpen, setIsUploadDrawerOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [limit] = useState(10);
// Use the case studies API
const {
data: caseStudiesResponse,
isLoading,
error,
refetch
} = useGetCaseStudiesQuery({});
const {
data: caseStudiesResponse,
isLoading,
error,
refetch
} = useGetCaseStudiesQuery({
page: currentPage,
limit: limit
});
const [deleteCaseStudy, { isLoading: isDeleting }] = useDeleteCaseStudyMutation();
const [createCaseStudy, { isLoading: isCreating }] = useCreateCaseStudyMutation();
// Transform API data to match table structure
const caseStudies = caseStudiesResponse?.data || caseStudiesResponse || [];
const paginationMeta = caseStudiesResponse?.meta;
const handleUploadComplete = async (data: UploadFormData) => {
try {
@@ -60,6 +66,15 @@ export function CaseStudiesTab({ onNavigate, user }: CaseStudiesTabProps) {
onNavigate(`/content/case-studies/edit/${caseStudy.id}`);
};
const handlePageChange = (page: number) => {
setCurrentPage(page);
setSelectedItems([]); // Clear selection when page changes
};
useEffect(() => {
setCurrentPage(1);
}, [searchTerm]);
const filteredCaseStudies = caseStudies.filter((caseStudy: any) =>
caseStudy.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
caseStudy.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -84,6 +99,14 @@ export function CaseStudiesTab({ onNavigate, user }: CaseStudiesTabProps) {
client: caseStudy.client || "Confidential"
}));
const pagination = paginationMeta ? {
currentPage: paginationMeta.page,
totalPages: paginationMeta.totalPages,
hasNext: paginationMeta.hasNext,
hasPrev: paginationMeta.hasPrev,
onPageChange: handlePageChange
} : undefined;
if (error) {
return (
<div className="text-center py-12">
@@ -111,6 +134,15 @@ export function CaseStudiesTab({ onNavigate, user }: CaseStudiesTabProps) {
</div>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span>
Showing {enhancedCaseStudies.length} of {paginationMeta?.total || 0} items
{paginationMeta && paginationMeta.totalPages > 1 && (
<span> (Page {currentPage} of {paginationMeta.totalPages})</span>
)}
</span>
</div>
<div className="ml-auto flex gap-2">
<Button
onClick={() => setIsUploadDrawerOpen(true)}
@@ -143,6 +175,7 @@ export function CaseStudiesTab({ onNavigate, user }: CaseStudiesTabProps) {
onNavigate={onNavigate}
user={user}
onItemDeleted={refetch}
pagination={pagination}
/>
)}

43
src/components/pages/tabs/KLCContentArchiveTab.tsx
View File

@@ -37,6 +37,8 @@ export function KLCContentArchiveTab({
const [searchTerm, setSearchTerm] = useState("");
const [selectedItems, setSelectedItems] = useState<string[]>([]);
const [isUploadDrawerOpen, setIsUploadDrawerOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [limit] = useState(10);
const innerTabs: ArchiveCategory[] = [
"Leadership Lego Blocks",
@@ -55,12 +57,16 @@ export function KLCContentArchiveTab({
isLoading,
error,
refetch
} = useGetKlcArchivesQuery({});
} = useGetKlcArchivesQuery({
page: currentPage,
limit: limit
});
const [createKlcArchive, { isLoading: isCreating }] = useCreateKlcArchiveMutation();
// Transform API data to match table structure
const archiveContent = archiveResponse?.data || archiveResponse || [];
const paginationMeta = archiveResponse?.meta;
// Ensure activeInnerTab is a valid key
const currentCategory = (activeInnerTab["klc-content-archive"] as ArchiveCategory) || innerTabs[0];
@@ -88,6 +94,15 @@ export function KLCContentArchiveTab({
onNavigate(`/content/klc-archive/edit/${archive.id}`);
};
const handlePageChange = (page: number) => {
setCurrentPage(page);
setSelectedItems([]); // Clear selection when page changes
};
useEffect(() => {
setCurrentPage(1);
}, [searchTerm]);
const handleTabChange = (tab: ArchiveCategory) => {
setActiveInnerTab((prev: any) => ({
...prev,
@@ -122,6 +137,14 @@ export function KLCContentArchiveTab({
category: archive.category || currentCategory // Add category for display
}));
const pagination = paginationMeta ? {
currentPage: paginationMeta.page,
totalPages: paginationMeta.totalPages,
hasNext: paginationMeta.hasNext,
hasPrev: paginationMeta.hasPrev,
onPageChange: handlePageChange
} : undefined;
if (error) {
return (
<div className="text-center py-12">
@@ -143,8 +166,8 @@ export function KLCContentArchiveTab({
key={innerTab}
onClick={() => handleTabChange(innerTab)}
className={`py-2 px-1 border-b-2 transition-colors text-sm whitespace-nowrap ${currentCategory === innerTab
? "border-[var(--color-brand-primary)] text-[var(--color-brand-primary)] font-medium"
: "border-transparent text-muted-foreground hover:text-foreground"
? "border-[var(--color-brand-primary)] text-[var(--color-brand-primary)] font-medium"
: "border-transparent text-muted-foreground hover:text-foreground"
}`}
>
{innerTab}
@@ -167,10 +190,19 @@ export function KLCContentArchiveTab({
</div>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span>{filteredArchive.length} items</span>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span>
Showing {enhancedArchive.length} of {paginationMeta?.total || 0} items
{paginationMeta && paginationMeta.totalPages > 1 && (
<span> (Page {currentPage} of {paginationMeta.totalPages})</span>
)}
</span>
</div>
{/* <div className="flex items-center gap-2 text-sm text-muted-foreground">
<span>{filteredArchive.length} items</span>
</div> */}
<div className="ml-auto flex gap-2">
<Button
onClick={() => setIsUploadDrawerOpen(true)}
@@ -203,6 +235,7 @@ export function KLCContentArchiveTab({
onNavigate={onNavigate}
user={user}
onItemDeleted={refetch}
pagination={pagination}
/>
)}

55
src/components/pages/tabs/PodcastsTab.tsx
View File

@@ -4,10 +4,10 @@ import { Input } from "../../ui/input";
import { Search, Upload, Loader2 } from "lucide-react";
import { ContentTable } from "../shared/ContentTable";
import { UploadDrawer, UploadFormData } from "../shared/UploadDrawer";
import {
useGetPodcastsQuery,
import {
useGetPodcastsQuery,
useDeletePodcastMutation,
useCreatePodcastMutation
useCreatePodcastMutation
} from "../../../store/services/contentManager.service";
import { toast } from "sonner";
@@ -22,20 +22,26 @@ export function PodcastsTab({ onNavigate, user }: PodcastsTabProps) {
const [searchTerm, setSearchTerm] = useState("");
const [selectedItems, setSelectedItems] = useState<string[]>([]);
const [isUploadDrawerOpen, setIsUploadDrawerOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [limit] = useState(10);
// Use the podcasts API
const {
data: podcastsResponse,
isLoading,
error,
refetch
} = useGetPodcastsQuery({});
const {
data: podcastsResponse,
isLoading,
error,
refetch
} = useGetPodcastsQuery({
page: currentPage,
limit: limit
});
const [deletePodcast, { isLoading: isDeleting }] = useDeletePodcastMutation();
const [createPodcast, { isLoading: isCreating }] = useCreatePodcastMutation();
// Transform API data to match table structure
const podcasts = podcastsResponse?.data || podcastsResponse || [];
const paginationMeta = podcastsResponse?.meta;
const handleUploadComplete = async (data: UploadFormData) => {
try {
@@ -60,6 +66,16 @@ export function PodcastsTab({ onNavigate, user }: PodcastsTabProps) {
onNavigate(`/content/podcasts/edit/${podcast.id}`);
};
const handlePageChange = (page: number) => {
setCurrentPage(page);
setSelectedItems([]); // Clear selection when page changes
};
// Reset to page 1 when search term changes
useEffect(() => {
setCurrentPage(1);
}, [searchTerm]);
const filteredPodcasts = podcasts.filter((podcast: any) =>
podcast.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
podcast.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -82,6 +98,15 @@ export function PodcastsTab({ onNavigate, user }: PodcastsTabProps) {
listens: podcast.listens || 0
}));
// Prepare pagination object for ContentTable
const pagination = paginationMeta ? {
currentPage: paginationMeta.page,
totalPages: paginationMeta.totalPages,
hasNext: paginationMeta.hasNext,
hasPrev: paginationMeta.hasPrev,
onPageChange: handlePageChange
} : undefined;
if (error) {
return (
<div className="text-center py-12">
@@ -109,6 +134,15 @@ export function PodcastsTab({ onNavigate, user }: PodcastsTabProps) {
</div>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span>
Showing {enhancedPodcasts.length} of {paginationMeta?.total || 0} items
{paginationMeta && paginationMeta.totalPages > 1 && (
<span> (Page {currentPage} of {paginationMeta.totalPages})</span>
)}
</span>
</div>
<div className="ml-auto flex gap-2">
<Button
onClick={() => setIsUploadDrawerOpen(true)}
@@ -141,6 +175,7 @@ export function PodcastsTab({ onNavigate, user }: PodcastsTabProps) {
onNavigate={onNavigate}
user={user}
onItemDeleted={refetch}
pagination={pagination}
/>
)}

39
src/components/pages/tabs/ReadingMaterialsTab.tsx
View File

@@ -22,18 +22,24 @@ export function ReadingMaterialsTab({ onNavigate, user }: ReadingMaterialsTabPro
const [searchTerm, setSearchTerm] = useState("");
const [selectedItems, setSelectedItems] = useState<string[]>([]);
const [isUploadDrawerOpen, setIsUploadDrawerOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [limit] = useState(10);
const {
data: readingMaterialsResponse,
isLoading,
error,
refetch
} = useGetReadingMaterialsQuery({});
} = useGetReadingMaterialsQuery({
page: currentPage,
limit: limit
});
const [deleteReadingMaterial, { isLoading: isDeleting }] = useDeleteReadingMaterialMutation();
const [createReadingMaterial, { isLoading: isCreating }] = useCreateReadingMaterialMutation();
const readingMaterials = readingMaterialsResponse?.data || readingMaterialsResponse || [];
const readingMaterials = readingMaterialsResponse?.data || [];
const paginationMeta = readingMaterialsResponse?.meta;
const handleUploadComplete = async (data: UploadFormData) => {
try {
@@ -58,6 +64,16 @@ export function ReadingMaterialsTab({ onNavigate, user }: ReadingMaterialsTabPro
onNavigate(`/content/reading-materials/edit/${readingMaterial.id}`);
};
const handlePageChange = (page: number) => {
setCurrentPage(page);
setSelectedItems([]); // Clear selection when page changes
};
// Reset to page 1 when search term changes
useEffect(() => {
setCurrentPage(1);
}, [searchTerm]);
const filteredReadingMaterials = readingMaterials.filter((material: any) =>
material.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
material.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -79,6 +95,15 @@ export function ReadingMaterialsTab({ onNavigate, user }: ReadingMaterialsTabPro
category: material.category || "Uncategorized"
}));
// Prepare pagination object for ContentTable
const pagination = paginationMeta ? {
currentPage: paginationMeta.page,
totalPages: paginationMeta.totalPages,
hasNext: paginationMeta.hasNext,
hasPrev: paginationMeta.hasPrev,
onPageChange: handlePageChange
} : undefined;
if (error) {
return (
<div className="text-center py-12">
@@ -106,6 +131,15 @@ export function ReadingMaterialsTab({ onNavigate, user }: ReadingMaterialsTabPro
</div>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span>
Showing {enhancedReadingMaterials.length} of {paginationMeta?.total || 0} items
{paginationMeta && paginationMeta.totalPages > 1 && (
<span> (Page {currentPage} of {paginationMeta.totalPages})</span>
)}
</span>
</div>
<div className="ml-auto flex gap-2">
<Button
onClick={() => setIsUploadDrawerOpen(true)}
@@ -138,6 +172,7 @@ export function ReadingMaterialsTab({ onNavigate, user }: ReadingMaterialsTabPro
onNavigate={onNavigate}
user={user}
onItemDeleted={refetch}
pagination={pagination}
/>
)}

46
src/components/pages/tabs/TrainingMaterialsTab.tsx
View File

@@ -30,14 +30,19 @@ export function TrainingMaterialsTab({
const [searchTerm, setSearchTerm] = useState("");
const [selectedItems, setSelectedItems] = useState<string[]>([]);
const [isUploadDrawerOpen, setIsUploadDrawerOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [limit] = useState(10);
// Use the training materials API
// Use the training materials API with pagination
const {
data: trainingMaterialsResponse,
isLoading,
error,
refetch
} = useGetTrainingMaterialsQuery({});
} = useGetTrainingMaterialsQuery({
page: currentPage,
limit: limit
});
const [deleteTrainingMaterial, { isLoading: isDeleting }] = useDeleteTrainingMaterialMutation();
const [createTrainingMaterial, { isLoading: isCreating }] = useCreateTrainingMaterialMutation();
@@ -85,11 +90,28 @@ export function TrainingMaterialsTab({
}
};
const handlePageChange = (page: number) => {
setCurrentPage(page);
setSelectedItems([]); // Clear selection when page changes
};
// Reset to page 1 when search term changes
useEffect(() => {
setCurrentPage(1);
}, [searchTerm]);
// Reset to page 1 when inner tab changes
useEffect(() => {
setCurrentPage(1);
}, [currentCategory]);
// CORRECTED: Properly access the data from API response
const allTrainingMaterials = trainingMaterialsResponse?.data || [];
const paginationMeta = trainingMaterialsResponse?.meta;
console.log("API Response:", trainingMaterialsResponse);
console.log("All Training Materials:", allTrainingMaterials);
console.log("Pagination Meta:", paginationMeta);
// TEMPORARY FIX: Show all materials without category filtering
// Since your API doesn't have categories yet, we'll show all data in all tabs
@@ -117,6 +139,15 @@ export function TrainingMaterialsTab({
owner: "System",
}));
// Prepare pagination object for ContentTable
const pagination = paginationMeta ? {
currentPage: paginationMeta.page,
totalPages: paginationMeta.totalPages,
hasNext: paginationMeta.hasNext,
hasPrev: paginationMeta.hasPrev,
onPageChange: handlePageChange
} : undefined;
const handleTabChange = (tab: TrainingMaterialCategory) => {
setActiveInnerTab((prev: any) => ({
...prev,
@@ -179,10 +210,12 @@ export function TrainingMaterialsTab({
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span>{enhancedMaterials.length} items</span>
{allTrainingMaterials.length > 0 && (
<span className="text-xs">(Total: {allTrainingMaterials.length})</span>
)}
<span>
Showing {enhancedMaterials.length} of {paginationMeta?.total || 0} items
{paginationMeta && paginationMeta.totalPages > 1 && (
<span> (Page {currentPage} of {paginationMeta.totalPages})</span>
)}
</span>
</div>
<div className="ml-auto flex gap-2">
@@ -238,6 +271,7 @@ export function TrainingMaterialsTab({
onNavigate={onNavigate}
user={user}
onItemDeleted={refetch}
pagination={pagination}
/>
)}
</>

45
src/components/pages/tabs/WebcastsTab.tsx
View File

@@ -22,27 +22,33 @@ export function WebcastsTab({ onNavigate, user }: WebcastsTabProps) {
const [searchTerm, setSearchTerm] = useState("");
const [selectedItems, setSelectedItems] = useState<string[]>([]);
const [isUploadDrawerOpen, setIsUploadDrawerOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [limit] = useState(10); // You can make this configurable
// Use the webcast API
// Use the webcast API with pagination
const {
data: webcastsData,
data: webcastsResponse,
isLoading,
error,
refetch
} = useGetWebcastsQuery({});
} = useGetWebcastsQuery({
page: currentPage,
limit: limit
});
const [deleteWebcast, { isLoading: isDeleting }] = useDeleteWebcastMutation();
const [createWebcast, { isLoading: isCreating }] = useCreateWebcastMutation();
// Transform API data to match table structure
const webcasts = webcastsData?.data || webcastsData || [];
// Extract data and pagination info from response
const webcasts = webcastsResponse?.data || [];
const paginationMeta = webcastsResponse?.meta;
const handleUploadComplete = async (data: UploadFormData) => {
try {
const webcastData = {
title: data.title,
description: data.description,
fileUrl: data.fileUrl, // This should come from your file upload process
fileUrl: data.fileUrl,
tags: data.tags || [],
};
@@ -71,19 +77,40 @@ export function WebcastsTab({ onNavigate, user }: WebcastsTabProps) {
}
};
const handlePageChange = (page: number) => {
setCurrentPage(page);
setSelectedItems([]); // Clear selection when page changes
};
// Reset to page 1 when search term changes
useEffect(() => {
setCurrentPage(1);
}, [searchTerm]);
const filteredWebcasts = webcasts.filter((webcast: any) =>
webcast.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
webcast.tags.some((tag: string) => tag.toLowerCase().includes(searchTerm.toLowerCase()))
(webcast.tags && webcast.tags.some((tag: string) =>
tag.toLowerCase().includes(searchTerm.toLowerCase())
))
);
// Add status and other fields for table display
const enhancedWebcasts = filteredWebcasts.map((webcast: any) => ({
...webcast,
status: "Published", // You might want to add this field to your API
status: "Published",
updated: new Date(webcast.updatedAt).toLocaleDateString(),
type: "Webcast",
}));
// Prepare pagination object for ContentTable
const pagination = paginationMeta ? {
currentPage: paginationMeta.page,
totalPages: paginationMeta.totalPages,
hasNext: paginationMeta.hasNext,
hasPrev: paginationMeta.hasPrev,
onPageChange: handlePageChange
} : undefined;
if (error) {
return (
<div className="text-center py-12">
@@ -140,10 +167,10 @@ export function WebcastsTab({ onNavigate, user }: WebcastsTabProps) {
selectedItems={selectedItems}
onSelectionChange={setSelectedItems}
onEdit={handleEditWebcast}
onDelete={handleDeleteWebcast}
onNavigate={onNavigate}
user={user}
onItemDeleted={refetch}
pagination={pagination}
/>
)}