From 73a2b2dfb96ecc15fb4652c24d2072d190debbbe Mon Sep 17 00:00:00 2001 From: louiscklaw Date: Tue, 22 Apr 2025 13:30:02 +0800 Subject: [PATCH] update, --- .../app/dashboard/lesson_categories/page.tsx | 23 +++----- .../src/app/dashboard/lesson_types/page.tsx | 56 ++++++++++++++----- .../src/app/dashboard/lp/categories/page.tsx | 1 + .../lesson-categories-pagination.tsx | 30 ++++++++-- .../categories/lp-categories-pagination.tsx | 7 ++- 5 files changed, 84 insertions(+), 33 deletions(-) diff --git a/002_source/cms/src/app/dashboard/lesson_categories/page.tsx b/002_source/cms/src/app/dashboard/lesson_categories/page.tsx index 0c3e363..375b163 100644 --- a/002_source/cms/src/app/dashboard/lesson_categories/page.tsx +++ b/002_source/cms/src/app/dashboard/lesson_categories/page.tsx @@ -1,7 +1,7 @@ 'use client'; // RULES: -// contains list page for lesson_categories (LessonsCategories) +// contains list page for lesson_categories (LessonCategories) // contain definition to collection only // import * as React from 'react'; @@ -29,7 +29,7 @@ import type { Filters } from '@/components/dashboard/lesson_category/lesson-cate import { LessonCategoriesPagination } from '@/components/dashboard/lesson_category/lesson-categories-pagination'; import { LessonCategoriesSelectionProvider } from '@/components/dashboard/lesson_category/lesson-categories-selection-context'; import { LessonCategoriesTable } from '@/components/dashboard/lesson_category/lesson-categories-table'; -import { LessonCategory } from '@/components/dashboard/lesson_category/type'; +import type { LessonCategory } from '@/components/dashboard/lesson_category/type'; // import type { LessonCategory } from '@/components/dashboard/lp_categories/type'; import FormLoading from '@/components/loading'; @@ -61,8 +61,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element { // const reloadRows = async (): Promise => { - setShowLoading(true); - try { const models: ListResult = await pb .collection(COL_LESSON_CATEGORIES) @@ -120,15 +118,13 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element { React.useEffect(() => { if (!isFirstRun.current) { isFirstRun.current = true; + } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) { + // reset page number as tab changes + setLastListOption(listOption); + setCurrentPage(0); + void reloadRows(); } else { - if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) { - // reset page number as tab changes - setLastListOption(listOption); - setCurrentPage(0); - void reloadRows(); - } else { - void reloadRows(); - } + void reloadRows(); } }, [currentPage, rowsPerPage, listOption]); @@ -180,8 +176,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element { /> ); - // return 
{JSON.stringify(lessonCategoriesData, null, 2)}
; - return ( } variant="contained" > + {/* add new lesson type */} {t('list.add')} diff --git a/002_source/cms/src/app/dashboard/lesson_types/page.tsx b/002_source/cms/src/app/dashboard/lesson_types/page.tsx index 97fc0ac..8139cb1 100644 --- a/002_source/cms/src/app/dashboard/lesson_types/page.tsx +++ b/002_source/cms/src/app/dashboard/lesson_types/page.tsx @@ -1,7 +1,7 @@ 'use client'; // RULES: -// contains list page for lp_categories (QuizLPCategories) +// contains list page for lesson_types (LessonTypes) // contain definition to collection only // import * as React from 'react'; @@ -18,6 +18,7 @@ import type { ListResult, RecordModel } from 'pocketbase'; import { useTranslation } from 'react-i18next'; import { paths } from '@/paths'; +import isDevelopment from '@/lib/check-is-development'; import { logger } from '@/lib/default-logger'; import { pb } from '@/lib/pb'; import { toast } from '@/components/core/toaster'; @@ -43,8 +44,10 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element { const [showError, setShowError] = React.useState({ show: false, detail: '' }); // const [rowsPerPage, setRowsPerPage] = React.useState(5); + // const [f, setF] = React.useState([]); const [currentPage, setCurrentPage] = React.useState(0); + // const [recordCount, setRecordCount] = React.useState(0); const [listOption, setListOption] = React.useState({}); const [listSort, setListSort] = React.useState({}); @@ -63,17 +66,33 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element { setLessonTypesData(tempLessonTypes); setRecordCount(totalItems); setF(tempLessonTypes); + // console.log({ currentPage, f }); } catch (error) { // logger.error(error); - setShowError({ show: true, detail: JSON.stringify(error, null, 2) }); + setShowError({ + // + show: true, + detail: JSON.stringify(error, null, 2), + }); } finally { setShowLoading(false); } }; + const [lastListOption, setLastListOption] = React.useState({}); + const isFirstRun = React.useRef(false); React.useEffect(() => { - void reloadRows(); + if (!isFirstRun.current) { + isFirstRun.current = true; + } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) { + // reset page number as tab changes + setLastListOption(listOption); + setCurrentPage(0); + void reloadRows(); + } else { + void reloadRows(); + } }, [currentPage, rowsPerPage, listOption]); React.useEffect(() => { @@ -96,16 +115,26 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element { tempFilter.push(`type ~ "%${type}%"`); } - setListOption({ - filter: tempFilter.join(' && '), - sort: tempSortDir, - // - }); + let preFinalListOption = {}; + if (tempFilter.length > 0) { + preFinalListOption = { filter: tempFilter.join(' && ') }; + } + if (tempSortDir.length > 0) { + preFinalListOption = { ...preFinalListOption, sort: tempSortDir }; + } + setListOption(preFinalListOption); + // setListOption({ + // filter: tempFilter.join(' && '), + // sort: tempSortDir, + // // + // }); }, [visible, sortDir, name, type]); - if (f.length === 0 || showLoading) return ; + // return <>helloworld; - if (showError) + if (showLoading) return ; + + if (showError.show) return ( {/* add new lesson type */} + {/* TODO: refactor translations.json */} {t('dashboard.lessonTypes.add')} @@ -153,14 +183,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element { filters={{ email, phone, status, name, visible, type }} fullData={lessonTypesData} sortDir={sortDir} - // /> @@ -174,6 +202,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element { + + 
{JSON.stringify(f, null, 2)}
+ ); } @@ -235,6 +266,5 @@ interface PageProps { name?: string; visible?: string; type?: string; - // }; } diff --git a/002_source/cms/src/app/dashboard/lp/categories/page.tsx b/002_source/cms/src/app/dashboard/lp/categories/page.tsx index 50f7b5e..93bb730 100644 --- a/002_source/cms/src/app/dashboard/lp/categories/page.tsx +++ b/002_source/cms/src/app/dashboard/lp/categories/page.tsx @@ -56,6 +56,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element { const sortedLessonCategories = applySort(lessonCategoriesData, sortDir); const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status }); + // const reloadRows = async (): Promise => { try { const models: ListResult = await pb diff --git a/002_source/cms/src/components/dashboard/lesson_category/lesson-categories-pagination.tsx b/002_source/cms/src/components/dashboard/lesson_category/lesson-categories-pagination.tsx index a78bea3..7a344d5 100644 --- a/002_source/cms/src/components/dashboard/lesson_category/lesson-categories-pagination.tsx +++ b/002_source/cms/src/components/dashboard/lesson_category/lesson-categories-pagination.tsx @@ -1,5 +1,8 @@ 'use client'; +// lesson-categories-pagination.tsx +// RULES: +// T.B.A. import * as React from 'react'; import TablePagination from '@mui/material/TablePagination'; @@ -10,20 +13,39 @@ function noop(): void { interface LessonCategoriesPaginationProps { count: number; page: number; + // + setPage: (page: number) => void; + setRowsPerPage: (page: number) => void; + rowsPerPage: number; } -export function LessonCategoriesPagination({ count, page }: LessonCategoriesPaginationProps): React.JSX.Element { +export function LessonCategoriesPagination({ + count, + page, + // + setPage, + setRowsPerPage, + rowsPerPage, +}: LessonCategoriesPaginationProps): React.JSX.Element { // You should implement the pagination using a similar logic as the filters. // Note that when page change, you should keep the filter search params. + const handleChangePage = (event: unknown, newPage: number) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event: React.ChangeEvent) => { + setRowsPerPage(parseInt(event.target.value)); + // console.log(parseInt(event.target.value)); + }; return ( ); diff --git a/002_source/cms/src/components/dashboard/lp/categories/lp-categories-pagination.tsx b/002_source/cms/src/components/dashboard/lp/categories/lp-categories-pagination.tsx index bf40481..21bdbef 100644 --- a/002_source/cms/src/components/dashboard/lp/categories/lp-categories-pagination.tsx +++ b/002_source/cms/src/components/dashboard/lp/categories/lp-categories-pagination.tsx @@ -1,5 +1,8 @@ 'use client'; +// lp-categories-pagination.tsx +// RULES: +// T.B.A. import * as React from 'react'; import TablePagination from '@mui/material/TablePagination'; @@ -7,7 +10,7 @@ function noop(): void { return undefined; } -interface LessonCategoriesPaginationProps { +interface LpCategoriesPaginationProps { count: number; page: number; // @@ -23,7 +26,7 @@ export function LpCategoriesPagination({ setPage, setRowsPerPage, rowsPerPage, -}: LessonCategoriesPaginationProps): React.JSX.Element { +}: LpCategoriesPaginationProps): React.JSX.Element { // You should implement the pagination using a similar logic as the filters. // Note that when page change, you should keep the filter search params. const handleChangePage = (event: unknown, newPage: number) => {