louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update,

Browse Source
This commit is contained in:
louiscklaw
2025-04-22 13:30:02 +08:00
parent 2f28d71060
commit 73a2b2dfb9
5 changed files with 84 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
002_source/cms/src/app/dashboard/lesson_categories/page.tsx
View File

@@ -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<void> => {
setShowLoading(true);
try {
const models: ListResult<RecordModel> = await pb
.collection(COL_LESSON_CATEGORIES)
@@ -120,8 +118,7 @@ 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)) {
} else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
// reset page number as tab changes
setLastListOption(listOption);
setCurrentPage(0);
@@ -129,7 +126,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
} else {
void reloadRows();
}
}
}, [currentPage, rowsPerPage, listOption]);
React.useEffect(() => {
@@ -180,8 +176,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
/>
);
// return <pre>{JSON.stringify(lessonCategoriesData, null, 2)}</pre>;
return (
<Box
sx={{
@@ -210,6 +204,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
startIcon={<PlusIcon />}
variant="contained"
>
{/* add new lesson type */}
{t('list.add')}
</LoadingButton>
</Box>

54
002_source/cms/src/app/dashboard/lesson_types/page.tsx
View File

@@ -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<number>(5);
//
const [f, setF] = React.useState<LessonType[]>([]);
const [currentPage, setCurrentPage] = React.useState<number>(0);
//
const [recordCount, setRecordCount] = React.useState<number>(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(() => {
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 <FormLoading />;
// return <>helloworld</>;
if (showError)
if (showLoading) return <FormLoading />;
if (showError.show)
return (
<ErrorDisplay
message={t('error.unable-to-process-request')}
@@ -143,6 +172,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
variant="contained"
>
{/* add new lesson type */}
{/* TODO: refactor translations.json */}
{t('dashboard.lessonTypes.add')}
</LoadingButton>
</Box>
@@ -153,14 +183,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
filters={{ email, phone, status, name, visible, type }}
fullData={lessonTypesData}
sortDir={sortDir}
//
/>
<Divider />
<Box sx={{ overflowX: 'auto' }}>
<LessonTypesTable
reloadRows={reloadRows}
rows={f}
//
/>
</Box>
<Divider />
@@ -174,6 +202,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
</Card>
</LessonTypesSelectionProvider>
</Stack>
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
<pre>{JSON.stringify(f, null, 2)}</pre>
</Box>
</Box>
);
}
@@ -235,6 +266,5 @@ interface PageProps {
name?: string;
visible?: string;
type?: string;
//
};
}

1
002_source/cms/src/app/dashboard/lp/categories/page.tsx
View File

@@ -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<void> => {
try {
const models: ListResult<RecordModel> = await pb

30
002_source/cms/src/components/dashboard/lesson_category/lesson-categories-pagination.tsx
View File

@@ -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<HTMLInputElement>) => {
setRowsPerPage(parseInt(event.target.value));
// console.log(parseInt(event.target.value));
};
return (
<TablePagination
component="div"
count={count}
onPageChange={noop}
onRowsPerPageChange={noop}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
page={page}
rowsPerPage={5}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[5, 10, 25]}
/>
);

7
002_source/cms/src/components/dashboard/lp/categories/lp-categories-pagination.tsx
View File

@@ -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) => {