update refactoring,

This commit is contained in:
louiscklaw
2025-04-22 04:18:53 +08:00
parent 1c3dccd68e
commit 0b38de74a2
36 changed files with 1833 additions and 119 deletions

View File

@@ -57,7 +57,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
try {
const models: ListResult<RecordModel> = await pb
.collection(COL_QUIZ_LP_CATEGORIES)
.getList(currentPage + 1, rowsPerPage, {});
.getList(currentPage + 1, rowsPerPage, listOption);
const { items, totalItems } = models;
const tempLessonTypes: LpCategory[] = items.map((lt) => {
return { ...defaultLpCategory, ...lt };

View File

@@ -13,13 +13,13 @@ import { useTranslation } from 'react-i18next';
import { PropertyItem } from '@/components/core/property-item';
import { PropertyList } from '@/components/core/property-list';
import { LpCategory } from '@/components/dashboard/lp/categories/type';
import type { MfCategory } from '@/components/dashboard/mf/categories/type';
export default function BasicDetailCard({
lpModel: model,
handleEditClick,
}: {
lpModel: LpCategory;
lpModel: MfCategory;
handleEditClick: () => void;
}): React.JSX.Element {
const { t } = useTranslation();

View File

@@ -10,13 +10,13 @@ import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/Caret
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
import { useTranslation } from 'react-i18next';
import { LpCategory } from '@/components/dashboard/lp/categories/type';
import type { MfCategory } from '@/components/dashboard/mf/categories/type';
function getImageUrlFrRecord(record: LpCategory): string {
function getImageUrlFrRecord(record: MfCategory): string {
return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
}
export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): React.JSX.Element {
export default function SampleTitleCard({ lpModel }: { lpModel: MfCategory }): React.JSX.Element {
const { t } = useTranslation();
return (

View File

@@ -7,7 +7,7 @@ import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
import SamplePaymentCard from '@/app/dashboard/Sample/SamplePaymentCard';
import SampleSecurityCard from '@/app/dashboard/Sample/SampleSecurityCard';
import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
import { COL_QUIZ_MF_CATEGORIES } from '@/constants';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
@@ -21,9 +21,9 @@ import { logger } from '@/lib/default-logger';
import { pb } from '@/lib/pb';
import { toast } from '@/components/core/toaster';
import ErrorDisplay from '@/components/dashboard/error';
import { defaultLpCategory } from '@/components/dashboard/lp/categories/_constants.ts';
import { Notifications } from '@/components/dashboard/lp/categories/notifications';
import type { LpCategory } from '@/components/dashboard/lp/categories/type';
import { defaultMfCategory } from '@/components/dashboard/mf/categories/_constants.ts';
import { Notifications } from '@/components/dashboard/mf/categories/notifications';
import type { MfCategory } from '@/components/dashboard/mf/categories/type';
import FormLoading from '@/components/loading';
import BasicDetailCard from './BasicDetailCard';
@@ -39,18 +39,18 @@ export default function Page(): React.JSX.Element {
const [showError, setShowError] = React.useState({ show: false, detail: '' });
//
const [showLessonCategory, setShowLessonCategory] = React.useState<LpCategory>(defaultLpCategory);
const [showLessonCategory, setShowLessonCategory] = React.useState<MfCategory>(defaultMfCategory);
function handleEditClick() {
router.push(paths.dashboard.lp_categories.edit(showLessonCategory.id));
router.push(paths.dashboard.mf_categories.edit(showLessonCategory.id));
}
React.useEffect(() => {
if (catId) {
pb.collection(COL_QUIZ_LP_CATEGORIES)
pb.collection(COL_QUIZ_MF_CATEGORIES)
.getOne(catId)
.then((model: RecordModel) => {
setShowLessonCategory({ ...defaultLpCategory, ...model });
setShowLessonCategory({ ...defaultMfCategory, ...model });
})
.catch((err) => {
logger.error(err);
@@ -89,7 +89,7 @@ export default function Page(): React.JSX.Element {
<Link
color="text.primary"
component={RouterLink}
href={paths.dashboard.lp_categories.list}
href={paths.dashboard.mf_categories.list}
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
variant="subtitle2"
>

View File

@@ -13,7 +13,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
import { LpCategoryCreateForm } from '@/components/dashboard/lp/categories/lp-category-create-form';
import { MfCategoryCreateForm } from '@/components/dashboard/mf/categories/lp-category-create-form';
export default function Page(): React.JSX.Element {
// RULES: follow the name of page directory
@@ -34,7 +34,7 @@ export default function Page(): React.JSX.Element {
<Link
color="text.primary"
component={RouterLink}
href={paths.dashboard.lp_categories.list}
href={paths.dashboard.mf_categories.list}
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
variant="subtitle2"
>
@@ -46,7 +46,7 @@ export default function Page(): React.JSX.Element {
<Typography variant="h4">{t('create.title')}</Typography>
</div>
</Stack>
<LpCategoryCreateForm />
<MfCategoryCreateForm />
</Stack>
</Box>
);

View File

@@ -10,7 +10,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
import { LpCategoryEditForm } from '@/components/dashboard/lp/categories/lp-category-edit-form';
import { MfCategoryEditForm } from '@/components/dashboard/mf/categories/mf-category-edit-form';
export default function Page(): React.JSX.Element {
const { t } = useTranslation(['lp_categories']);
@@ -34,7 +34,7 @@ export default function Page(): React.JSX.Element {
<Link
color="text.primary"
component={RouterLink}
href={paths.dashboard.lp_categories.list}
href={paths.dashboard.mf_categories.list}
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
variant="subtitle2"
>
@@ -46,7 +46,7 @@ export default function Page(): React.JSX.Element {
<Typography variant="h4">{t('edit.title')}</Typography>
</div>
</Stack>
<LpCategoryEditForm />
<MfCategoryEditForm />
</Stack>
</Box>
);

View File

@@ -6,7 +6,7 @@
//
import * as React from 'react';
import { useRouter } from 'next/navigation';
import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
import { COL_QUIZ_MF_CATEGORIES } from '@/constants';
import { LoadingButton } from '@mui/lab';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
@@ -22,20 +22,21 @@ import { logger } from '@/lib/default-logger';
import { pb } from '@/lib/pb';
import { toast } from '@/components/core/toaster';
import ErrorDisplay from '@/components/dashboard/error';
import { defaultLpCategory } from '@/components/dashboard/lp/categories/_constants';
import { LpCategoriesFilters } from '@/components/dashboard/lp/categories/lp-categories-filters';
import type { Filters } from '@/components/dashboard/lp/categories/lp-categories-filters';
import { LpCategoriesPagination } from '@/components/dashboard/lp/categories/lp-categories-pagination';
import { LpCategoriesSelectionProvider } from '@/components/dashboard/lp/categories/lp-categories-selection-context';
import { LpCategoriesTable } from '@/components/dashboard/lp/categories/lp-categories-table';
import type { LpCategory } from '@/components/dashboard/lp/categories/type';
import { defaultMfCategory } from '@/components/dashboard/mf/categories/_constants';
import { MfCategoriesFilters } from '@/components/dashboard/mf/categories/mf-categories-filters';
import type { Filters } from '@/components/dashboard/mf/categories/mf-categories-filters';
import { MfCategoriesPagination } from '@/components/dashboard/mf/categories/mf-categories-pagination';
import { MfCategoriesSelectionProvider } from '@/components/dashboard/mf/categories/mf-categories-selection-context';
import { MfCategoriesTable } from '@/components/dashboard/mf/categories/mf-categories-table';
import type { MfCategory } from '@/components/dashboard/mf/categories/type';
import FormLoading from '@/components/loading';
export default function Page({ searchParams }: PageProps): React.JSX.Element {
// TODO: modify from lp_categories to mf_categories
const { t } = useTranslation(['lp_categories']);
const { email, phone, sortDir, status, name, visible, type } = searchParams;
const router = useRouter();
const [lessonCategoriesData, setLessonCategoriesData] = React.useState<LpCategory[]>([]);
const [lessonCategoriesData, setLessonCategoriesData] = React.useState<MfCategory[]>([]);
//
const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
@@ -43,7 +44,7 @@ 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<LpCategory[]>([]);
const [f, setF] = React.useState<MfCategory[]>([]);
const [currentPage, setCurrentPage] = React.useState<number>(1);
const [recordCount, setRecordCount] = React.useState<number>(0);
const [listOption, setListOption] = React.useState({});
@@ -56,11 +57,11 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
const reloadRows = async (): Promise<void> => {
try {
const models: ListResult<RecordModel> = await pb
.collection(COL_QUIZ_LP_CATEGORIES)
.collection(COL_QUIZ_MF_CATEGORIES)
.getList(currentPage + 1, rowsPerPage, {});
const { items, totalItems } = models;
const tempLessonTypes: LpCategory[] = items.map((lt) => {
return { ...defaultLpCategory, ...lt };
const tempLessonTypes: MfCategory[] = items.map((lt) => {
return { ...defaultMfCategory, ...lt };
});
setLessonCategoriesData(tempLessonTypes);
@@ -113,7 +114,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
loading={isLoadingAddPage}
onClick={(): void => {
setIsLoadingAddPage(true);
router.push(paths.dashboard.lp_categories.create);
router.push(paths.dashboard.mf_categories.create);
}}
startIcon={<PlusIcon />}
variant="contained"
@@ -122,22 +123,22 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
</LoadingButton>
</Box>
</Stack>
<LpCategoriesSelectionProvider lessonCategories={f}>
<MfCategoriesSelectionProvider lessonCategories={f}>
<Card>
<LpCategoriesFilters
<MfCategoriesFilters
filters={{ email, phone, status, name, visible, type }}
fullData={lessonCategoriesData}
sortDir={sortDir}
/>
<Divider />
<Box sx={{ overflowX: 'auto' }}>
<LpCategoriesTable
<MfCategoriesTable
reloadRows={reloadRows}
rows={f}
/>
</Box>
<Divider />
<LpCategoriesPagination
<MfCategoriesPagination
count={recordCount}
page={currentPage}
rowsPerPage={rowsPerPage}
@@ -145,7 +146,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
setRowsPerPage={setRowsPerPage}
/>
</Card>
</LpCategoriesSelectionProvider>
</MfCategoriesSelectionProvider>
</Stack>
</Box>
);
@@ -153,7 +154,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
// Sorting and filtering has to be done on the server.
function applySort(row: LpCategory[], sortDir: 'asc' | 'desc' | undefined): LpCategory[] {
function applySort(row: MfCategory[], sortDir: 'asc' | 'desc' | undefined): MfCategory[] {
return row.sort((a, b) => {
if (sortDir === 'asc') {
return a.createdAt.getTime() - b.createdAt.getTime();
@@ -163,7 +164,7 @@ function applySort(row: LpCategory[], sortDir: 'asc' | 'desc' | undefined): LpCa
});
}
function applyFilters(row: LpCategory[], { email, phone, status, name, visible }: Filters): LpCategory[] {
function applyFilters(row: MfCategory[], { email, phone, status, name, visible }: Filters): MfCategory[] {
return row.filter((item) => {
if (email) {
if (!item.email?.toLowerCase().includes(email.toLowerCase())) {

View File

@@ -13,13 +13,13 @@ import { useTranslation } from 'react-i18next';
import { PropertyItem } from '@/components/core/property-item';
import { PropertyList } from '@/components/core/property-list';
import { LpCategory } from '@/components/dashboard/lp/categories/type';
import { MfCategory } from '@/components/dashboard/mf/categories/type';
export default function BasicDetailCard({
lpModel: model,
handleEditClick,
}: {
lpModel: LpCategory;
lpModel: MfCategory;
handleEditClick: () => void;
}): React.JSX.Element {
const { t } = useTranslation();

View File

@@ -10,13 +10,13 @@ import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/Caret
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
import { useTranslation } from 'react-i18next';
import { LpCategory } from '@/components/dashboard/lp/categories/type';
import type { MfCategory } from '@/components/dashboard/mf/categories/type';
function getImageUrlFrRecord(record: LpCategory): string {
function getImageUrlFrRecord(record: MfCategory): string {
return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
}
export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): React.JSX.Element {
export default function SampleTitleCard({ lpModel }: { lpModel: MfCategory }): React.JSX.Element {
const { t } = useTranslation();
return (

View File

@@ -7,7 +7,7 @@ import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
import SamplePaymentCard from '@/app/dashboard/Sample/SamplePaymentCard';
import SampleSecurityCard from '@/app/dashboard/Sample/SampleSecurityCard';
import { COL_QUIZ_LP_QUESTIONS } from '@/constants';
import { COL_QUIZ_MF_QUESTIONS } from '@/constants';
import { Grid } from '@mui/material';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
@@ -21,9 +21,9 @@ import { logger } from '@/lib/default-logger';
import { pb } from '@/lib/pb';
import { toast } from '@/components/core/toaster';
import ErrorDisplay from '@/components/dashboard/error';
import { defaultLpQuestion } from '@/components/dashboard/lp/questions/_constants.ts';
import { Notifications } from '@/components/dashboard/lp/questions/notifications';
import type { LpQuestion } from '@/components/dashboard/lp/questions/type';
import { defaultMfQuestion } from '@/components/dashboard/mf/questions/_constants.ts';
import { Notifications } from '@/components/dashboard/mf/questions/notifications';
import type { LpQuestion } from '@/components/dashboard/mf/questions/type';
import FormLoading from '@/components/loading';
import BasicDetailCard from './BasicDetailCard';
@@ -39,7 +39,7 @@ export default function Page(): React.JSX.Element {
const [showError, setShowError] = React.useState({ show: false, detail: '' });
//
const [showLessonQuestion, setShowLessonQuestion] = React.useState<LpQuestion>(defaultLpQuestion);
const [showLessonQuestion, setShowLessonQuestion] = React.useState<LpQuestion>(defaultMfQuestion);
function handleEditClick() {
router.push(paths.dashboard.lp_questions.edit(showLessonQuestion.id));
@@ -47,10 +47,10 @@ export default function Page(): React.JSX.Element {
React.useEffect(() => {
if (catId) {
pb.collection(COL_QUIZ_LP_QUESTIONS)
pb.collection(COL_QUIZ_MF_QUESTIONS)
.getOne(catId)
.then((model: RecordModel) => {
setShowLessonQuestion({ ...defaultLpQuestion, ...model });
setShowLessonQuestion({ ...defaultMfQuestion, ...model });
})
.catch((err) => {
logger.error(err);

View File

@@ -13,7 +13,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
import { LpQuestionCreateForm } from '@/components/dashboard/lp/questions/lp-question-create-form';
import { MfQuestionCreateForm } from '@/components/dashboard/mf/questions/mf-question-create-form';
export default function Page(): React.JSX.Element {
// RULES: follow the name of page directory
@@ -46,7 +46,7 @@ export default function Page(): React.JSX.Element {
<Typography variant="h4">{t('create.title')}</Typography>
</div>
</Stack>
<LpQuestionCreateForm />
<MfQuestionCreateForm />
</Stack>
</Box>
);

View File

@@ -10,7 +10,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
import { LpQuestionEditForm } from '@/components/dashboard/lp/questions/lp-question-edit-form';
import { MfQuestionEditForm } from '@/components/dashboard/mf/questions/mf-question-edit-form';
export default function Page(): React.JSX.Element {
const { t } = useTranslation(['lp_questions']);
@@ -46,7 +46,7 @@ export default function Page(): React.JSX.Element {
<Typography variant="h4">{t('edit.title')}</Typography>
</div>
</Stack>
<LpQuestionEditForm />
<MfQuestionEditForm />
</Stack>
</Box>
);

View File

@@ -6,7 +6,7 @@
//
import * as React from 'react';
import { useRouter } from 'next/navigation';
import { COL_QUIZ_LP_QUESTIONS } from '@/constants';
import { COL_QUIZ_MF_QUESTIONS } from '@/constants';
import { LoadingButton } from '@mui/lab';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
@@ -22,20 +22,20 @@ import { logger } from '@/lib/default-logger';
import { pb } from '@/lib/pb';
import { toast } from '@/components/core/toaster';
import ErrorDisplay from '@/components/dashboard/error';
import { defaultLpQuestion } from '@/components/dashboard/lp/questions/_constants';
import { LpQuestionsFilters } from '@/components/dashboard/lp/questions/lp-questions-filters';
import type { Filters } from '@/components/dashboard/lp/questions/lp-questions-filters';
import { LpQuestionsPagination } from '@/components/dashboard/lp/questions/lp-questions-pagination';
import { LpQuestionsSelectionProvider } from '@/components/dashboard/lp/questions/lp-questions-selection-context';
import { LpQuestionsTable } from '@/components/dashboard/lp/questions/lp-questions-table';
import type { LpQuestion } from '@/components/dashboard/lp/questions/type';
import { defaultMfQuestion } from '@/components/dashboard/mf/questions/_constants';
import { MfQuestionsFilters } from '@/components/dashboard/mf/questions/mf-questions-filters';
import type { Filters } from '@/components/dashboard/mf/questions/mf-questions-filters';
import { MfQuestionsPagination } from '@/components/dashboard/mf/questions/mf-questions-pagination';
import { MfQuestionsSelectionProvider } from '@/components/dashboard/mf/questions/mf-questions-selection-context';
import { MfQuestionsTable } from '@/components/dashboard/mf/questions/mf-questions-table';
import type { MfQuestion } from '@/components/dashboard/mf/questions/type';
import FormLoading from '@/components/loading';
export default function Page({ searchParams }: PageProps): React.JSX.Element {
const { t } = useTranslation(['lp_questions']);
const { email, phone, sortDir, status, name, visible, type } = searchParams;
const router = useRouter();
const [lessonQuestionsData, setLessonCategoriesData] = React.useState<LpQuestion[]>([]);
const [lessonQuestionsData, setLessonCategoriesData] = React.useState<MfQuestion[]>([]);
//
const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
@@ -43,7 +43,7 @@ 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<LpQuestion[]>([]);
const [f, setF] = React.useState<MfQuestion[]>([]);
const [currentPage, setCurrentPage] = React.useState<number>(0);
const [recordCount, setRecordCount] = React.useState<number>(0);
const [listOption, setListOption] = React.useState({});
@@ -56,11 +56,11 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
const reloadRows = async (): Promise<void> => {
try {
const models: ListResult<RecordModel> = await pb
.collection(COL_QUIZ_LP_QUESTIONS)
.collection(COL_QUIZ_MF_QUESTIONS)
.getList(currentPage + 1, rowsPerPage, listOption);
const { items, totalItems } = models;
const tempLessonTypes: LpQuestion[] = items.map((lt) => {
return { ...defaultLpQuestion, ...lt };
const tempLessonTypes: MfQuestion[] = items.map((lt) => {
return { ...defaultMfQuestion, ...lt };
});
setLessonCategoriesData(tempLessonTypes);
@@ -177,22 +177,22 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
</LoadingButton>
</Box>
</Stack>
<LpQuestionsSelectionProvider lessonQuestions={f}>
<MfQuestionsSelectionProvider lessonQuestions={f}>
<Card>
<LpQuestionsFilters
<MfQuestionsFilters
filters={{ email, phone, status, name, visible, type }}
fullData={lessonQuestionsData}
sortDir={sortDir}
/>
<Divider />
<Box sx={{ overflowX: 'auto' }}>
<LpQuestionsTable
<MfQuestionsTable
reloadRows={reloadRows}
rows={f}
/>
</Box>
<Divider />
<LpQuestionsPagination
<MfQuestionsPagination
count={recordCount}
page={currentPage}
rowsPerPage={rowsPerPage}
@@ -200,7 +200,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
setRowsPerPage={setRowsPerPage}
/>
</Card>
</LpQuestionsSelectionProvider>
</MfQuestionsSelectionProvider>
</Stack>
<pre>{JSON.stringify(f, null, 2)}</pre>
</Box>
@@ -209,7 +209,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
// Sorting and filtering has to be done on the server.
function applySort(row: LpQuestion[], sortDir: 'asc' | 'desc' | undefined): LpQuestion[] {
function applySort(row: MfQuestion[], sortDir: 'asc' | 'desc' | undefined): MfQuestion[] {
return row.sort((a, b) => {
if (sortDir === 'asc') {
return a.createdAt.getTime() - b.createdAt.getTime();
@@ -219,7 +219,7 @@ function applySort(row: LpQuestion[], sortDir: 'asc' | 'desc' | undefined): LpQu
});
}
function applyFilters(row: LpQuestion[], { email, phone, status, name, visible }: Filters): LpQuestion[] {
function applyFilters(row: MfQuestion[], { email, phone, status, name, visible }: Filters): MfQuestion[] {
return row.filter((item) => {
if (email) {
if (!item.email?.toLowerCase().includes(email.toLowerCase())) {