From 08e5677c0baa72511c050a201bbb5d8e52743a81 Mon Sep 17 00:00:00 2001 From: louiscklaw Date: Wed, 16 Apr 2025 12:22:39 +0800 Subject: [PATCH] updat build ok, --- 002_source/cms/TODO.md | 6 ++ .../app/dashboard/lesson_categories/page.tsx | 78 ++++++++++++++++--- .../src/app/dashboard/lesson_types/page.tsx | 20 +---- .../dashboard/lesson_category/interfaces.ts | 29 +++++++ .../lesson-categories-table.tsx | 3 +- 002_source/cms/src/constants.ts | 3 +- 6 files changed, 108 insertions(+), 31 deletions(-) diff --git a/002_source/cms/TODO.md b/002_source/cms/TODO.md index e6e32c5..19db964 100644 --- a/002_source/cms/TODO.md +++ b/002_source/cms/TODO.md @@ -1,3 +1,9 @@ need to fix local storage error page right (next page) button is not working +in the middle of clone lesson type to lesson category + - [ ] listing page + - [ ] delete button on each row + - [ ] create page + - [ ] edit + - [ ] delete 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 9d81658..0193343 100644 --- a/002_source/cms/src/app/dashboard/lesson_categories/page.tsx +++ b/002_source/cms/src/app/dashboard/lesson_categories/page.tsx @@ -1,6 +1,9 @@ 'use client'; import * as React from 'react'; +import { useRouter } from 'next/navigation'; +import { COL_LESSON_CATEGORIES } from '@/constants'; +import { LoadingButton } from '@mui/lab'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; @@ -8,13 +11,24 @@ import Divider from '@mui/material/Divider'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus'; +import type { ListResult, RecordModel } from 'pocketbase'; +import { useTranslation } from 'react-i18next'; -import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces'; +import { paths } from '@/paths'; +import { logger } from '@/lib/default-logger'; +import { pb } from '@/lib/pb'; +import { toast } from '@/components/core/toaster'; +import { + defaultLessonCategory, + type emptyLessonCategory, + type LessonCategory, +} from '@/components/dashboard/lesson_category/interfaces'; import { LessonCategoriesFilters } from '@/components/dashboard/lesson_category/lesson-categories-filters'; import type { Filters } from '@/components/dashboard/lesson_category/lesson-categories-filters'; 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 FormLoading from '@/components/loading'; import { lessonCategoriesSampleData } from './lesson-categories-sample-data'; @@ -23,19 +37,51 @@ interface PageProps { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; - status?: string; - name?: string; - visible?: string; - type?: string; + spStatus?: string; + spName?: string; + spVisible?: string; + spType?: string; // }; } export default function Page({ searchParams }: PageProps): React.JSX.Element { - const { email, phone, sortDir, status } = searchParams; + const { t } = useTranslation(); + const { email, phone, sortDir, spStatus } = searchParams; + const router = useRouter(); + const [recordCount, setRecordCount] = React.useState(0); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [currentPage, setCurrentPage] = React.useState(1); const sortedLessonCategories = applySort(lessonCategoriesSampleData, sortDir); - const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status }); + const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status: spStatus }); + // + const [isLoadingAddPage, setIsLoadingAddPage] = React.useState(false); + const [lessonCategoriesData, setLessonCategoriesData] = React.useState([]); + const reloadRows = () => { + pb.collection(COL_LESSON_CATEGORIES) + .getList(currentPage, rowsPerPage, {}) + .then((lessonCategories: ListResult) => { + // console.log(lessonTypes); + const { items, page, perPage, totalItems, totalPages } = lessonCategories; + const tempLessonCategories: LessonCategory[] = items.map((item) => { + return { ...defaultLessonCategory, ...item }; + }); + + setLessonCategoriesData(tempLessonCategories); + setRecordCount(totalItems); + }) + .catch((err) => { + logger.error(err); + toast(t('dashboard.lessonTypes.list.error')); + }); + }; + + React.useEffect(() => { + reloadRows(); + }, []); + + if (lessonCategoriesData.length < 1) return ; return ( - Lesson Categories + {t('Lesson Categories')} - + { + setIsLoadingAddPage(true); + router.push(paths.dashboard.lesson_categories.create); + }} + startIcon={} + variant="contained" + > + {t('dashboard.lessonCategories.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 6a78fd3..eb9a449 100644 --- a/002_source/cms/src/app/dashboard/lesson_types/page.tsx +++ b/002_source/cms/src/app/dashboard/lesson_types/page.tsx @@ -11,7 +11,6 @@ import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus'; import type { ListResult, RecordModel } from 'pocketbase'; -import PocketBase from 'pocketbase'; import { useTranslation } from 'react-i18next'; import { paths } from '@/paths'; @@ -88,19 +87,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element { logger.error(err); toast(t('dashboard.lessonTypes.list.error')); }); - - // pb.collection(COL_LESSON_TYPES) - // .getFullList() - // .then((lessonTypes: RecordModel[]) => { - // const tempLessonTypes: LessonType[] = lessonTypes.map((lt) => { - // return safeAssignment(lt); - // }); - // setLessonTypesData(tempLessonTypes); - // }) - // .catch((err) => { - // logger.error(err); - // toast(t('dashboard.lessonTypes.list.error')); - // }); }; React.useEffect(() => { @@ -178,7 +164,7 @@ function applySort(row: LessonType[], sortDir: 'asc' | 'desc' | undefined): Less function applyFilters( row: LessonType[], - { email, phone, spStatus: status, spName: name, spVisible: visible }: Filters + { email, phone, spStatus: status, spName: name, spVisible }: Filters ): LessonType[] { return row.filter((item) => { if (email) { @@ -205,8 +191,8 @@ function applyFilters( } } - if (visible) { - if (!item.visible?.toLowerCase().includes(visible.toLowerCase())) { + if (spVisible) { + if (!item.visible?.toLowerCase().includes(spVisible.toLowerCase())) { return false; } } diff --git a/002_source/cms/src/components/dashboard/lesson_category/interfaces.ts b/002_source/cms/src/components/dashboard/lesson_category/interfaces.ts index 72c8441..96e2c63 100644 --- a/002_source/cms/src/components/dashboard/lesson_category/interfaces.ts +++ b/002_source/cms/src/components/dashboard/lesson_category/interfaces.ts @@ -1,4 +1,18 @@ +import { dayjs } from '@/lib/dayjs'; + export interface LessonCategory { + id: string; + isEmpty?: boolean; + name: string; + avatar?: string; + email: string; + phone?: string; + quota: number; + status: 'pending' | 'active' | 'blocked' | 'NA'; + createdAt: Date; +} + +export interface DBLessonCategory { id: string; name: string; avatar?: string; @@ -8,3 +22,18 @@ export interface LessonCategory { status: 'pending' | 'active' | 'blocked'; createdAt: Date; } + +export const defaultLessonCategory: LessonCategory = { + isEmpty: true, + id: '', + name: '', + email: '', + quota: -Infinity, + status: 'NA', + createdAt: dayjs('2099-01-01').toDate(), +}; + +export const emptyLessonCategory: LessonCategory = { + ...defaultLessonCategory, + isEmpty: true, +}; diff --git a/002_source/cms/src/components/dashboard/lesson_category/lesson-categories-table.tsx b/002_source/cms/src/components/dashboard/lesson_category/lesson-categories-table.tsx index 12fdaed..cd9ad47 100644 --- a/002_source/cms/src/components/dashboard/lesson_category/lesson-categories-table.tsx +++ b/002_source/cms/src/components/dashboard/lesson_category/lesson-categories-table.tsx @@ -20,7 +20,7 @@ import { dayjs } from '@/lib/dayjs'; import { DataTable } from '@/components/core/data-table'; import type { ColumnDef } from '@/components/core/data-table'; -import { LessonCategory } from './interfaces'; +import type { LessonCategory } from './interfaces'; import { useLessonCategoriesSelection } from './lesson-categories-selection-context'; const columns = [ @@ -73,6 +73,7 @@ const columns = [ active: { label: 'Active', icon: }, blocked: { label: 'Blocked', icon: }, pending: { label: 'Pending', icon: }, + NA: { label: 'NA', icon: }, } as const; const { label, icon } = mapping[row.status] ?? { label: 'Unknown', icon: null }; diff --git a/002_source/cms/src/constants.ts b/002_source/cms/src/constants.ts index 23cd528..4f8cbb9 100644 --- a/002_source/cms/src/constants.ts +++ b/002_source/cms/src/constants.ts @@ -1,5 +1,6 @@ const COL_LESSON_TYPES = 'LessonsTypes'; +const COL_LESSON_CATEGORIES = 'LessonsCategories'; const NO_VALUE = 'NO_VALUE'; const NO_NUM = -Infinity; -export { COL_LESSON_TYPES, NO_VALUE, NO_NUM }; +export { COL_LESSON_TYPES, NO_VALUE, NO_NUM, COL_LESSON_CATEGORIES };