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

update build ok,

Browse Source
This commit is contained in:
louiscklaw
2025-04-16 10:55:48 +08:00
parent 9b39e82488
commit b4fed69da6
9 changed files with 197 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
002_source/cms/src/components/dashboard/lesson_type/ILessonType.tsx
View File

@@ -4,6 +4,7 @@ import { dayjs } from '@/lib/dayjs';
export interface LessonType {
id: string;
isEmpty?: boolean;
name: string;
type: string;
pos: number;

49
002_source/cms/src/components/dashboard/lesson_type/confirm-delete-modal.tsx
View File

@@ -1,6 +1,8 @@
'use client';
import * as React from 'react';
import { useRouter } from 'next/navigation';
import { COL_LESSON_TYPES } from '@/constants';
import { LoadingButton } from '@mui/lab';
import { Button, Container, Modal, Paper } from '@mui/material';
import Avatar from '@mui/material/Avatar';
@@ -8,9 +10,13 @@ import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
import PocketBase from 'pocketbase';
import { useTranslation } from 'react-i18next';
// import { deleteLessonType } from './http-actions';
import { logger } from '@/lib/default-logger';
import { toast } from '@/components/core/toaster';
const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
export default function ConfirmDeleteModal({
open,
@@ -38,23 +44,36 @@ export default function ConfirmDeleteModal({
transform: 'translate(-50%, -50%)',
};
const handleUserConfirmDelete = (): void => {
function performDelete(id: string): Promise<void> {
return pb
.collection(COL_LESSON_TYPES)
.delete(id)
.then(() => {
toast(t('dashboard.lessonTypes.delete.success'));
reloadRows();
})
.catch((err) => {
logger.error(err);
toast(t('dashboard.lessonTypes.delete.error'));
})
.finally(() => {});
}
function handleUserConfirmDelete(): void {
if (idToDelete) {
setIsDeleteing(true);
// deleteLessonType(idToDelete)
// .then(() => {
// reloadRows();
// handleClose();
// })
// .catch((err) => {
// // console.error(err);
// setIsDeleteing(false);
// })
// .finally(() => {
// setIsDeleteing(false);
// });
performDelete(idToDelete)
.then(() => {
handleClose();
setIsDeleteing(false);
})
.catch((err) => {
// console.error(err)
logger.error(err);
toast(t('dashboard.lessonTypes.delete.error'));
});
}
};
}
return (
<div>

6
002_source/cms/src/components/dashboard/lesson_type/interfaces.ts
View File

@@ -1,3 +1,4 @@
import { NO_NUM, NO_VALUE } from '@/constants';
import type { RecordModel } from 'pocketbase';
import { dayjs } from '@/lib/dayjs';
@@ -50,6 +51,11 @@ export const defaultLessonType: LessonType = {
// createdAt: Date;
};
export const emptyLessonType: LessonType = {
...defaultLessonType,
isEmpty: true,
};
export function safeAssignment(inTemp: LessonType | RecordModel): LessonType {
const { id, name, type, pos, visible, createdAt, email, quota, status } = { ...defaultLessonType, ...inTemp };
const oCreatedAt = dayjs(createdAt).toDate();

30
002_source/cms/src/components/dashboard/lesson_type/lesson-type-create-form.tsx
View File

@@ -3,6 +3,7 @@
import * as React from 'react';
import RouterLink from 'next/link';
import { useRouter } from 'next/navigation';
import { COL_LESSON_TYPES } from '@/constants';
import { zodResolver } from '@hookform/resolvers/zod';
import { LoadingButton } from '@mui/lab';
import { MenuItem } from '@mui/material';
@@ -23,6 +24,8 @@ import Select from '@mui/material/Select';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Unstable_Grid2';
import type { RecordModel } from 'pocketbase';
import PocketBase from 'pocketbase';
// import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
// import axios from 'axios';
import { Controller, useForm } from 'react-hook-form';
@@ -33,6 +36,10 @@ import { paths } from '@/paths';
import { logger } from '@/lib/default-logger';
// import { Option } from '@/components/core/option';
import { toast } from '@/components/core/toaster';
import { defaultLessonType, LessonTypeCreateForm, LessonTypeCreateFormDefault } from './interfaces';
import type { LessonType } from './ILessonType';
const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
// import { createLessonType } from './http-actions';
// import { LessonTypeCreateForm, LessonTypeCreateFormDefault } from './interfaces';
@@ -55,7 +62,7 @@ import { toast } from '@/components/core/toaster';
const schema = zod.object({
name: zod.string().min(1, 'Name is required').max(255),
type: zod.string().min(1, 'Name is required').max(255),
pos: zod.string().min(1, 'Phone is required').max(15),
pos: zod.number().min(1, 'Phone is required').max(15),
visible_to_user: zod.string().max(255),
});
@@ -64,7 +71,7 @@ type Values = zod.infer<typeof schema>;
const defaultValues = {
name: '',
type: '',
pos: '1',
pos: 1,
visible_to_user: 'visible',
} satisfies Values;
@@ -84,6 +91,21 @@ export function LessonTypeCreateForm(): React.JSX.Element {
const onSubmit = React.useCallback(
async (values: Values): Promise<void> => {
setIsCreating(true);
const data: LessonTypeCreateForm = {...LessonTypeCreateFormDefault, ...values}
pb.collection(COL_LESSON_TYPES).create(data).then((res)=>{
console.log(res)
logger.debug(res);
toast.success(t('dashboard.lessonTypes.update.success'));
setIsCreating(false);
router.push(paths.dashboard.lesson_types.list);
}).catch((err) => {
logger.error(err);
toast.error('Something went wrong!');
setIsCreating(false);})
// const tempCreate: LessonTypeCreateForm = LessonTypeCreateFormDefault;
// tempCreate.name = values.name;
// tempCreate.type = values.type;
@@ -136,7 +158,7 @@ export function LessonTypeCreateForm(): React.JSX.Element {
display: 'inline-flex',
p: '4px',
}}
></Box>
/>
<Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
<Typography variant="subtitle1">{t('dashboard.lessonTypes.create.avatar')}</Typography>
<Typography variant="caption">{t('dashboard.lessonTypes.create.avatarRequirements')}</Typography>
@@ -186,7 +208,7 @@ export function LessonTypeCreateForm(): React.JSX.Element {
render={({ field }) => (
<FormControl error={Boolean(errors.pos)} fullWidth>
<InputLabel required>{t('dashboard.lessonTypes.create.position')}</InputLabel>
<OutlinedInput {...field} />
<OutlinedInput {...field} onChange={e => {field.onChange(parseInt(e.target.value))} } type="number"/>
{errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
</FormControl>
)}

2
002_source/cms/src/components/dashboard/lesson_type/lesson-type-edit-form.tsx
View File

@@ -26,8 +26,6 @@ import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Unstable_Grid2';
import type { RecordModel } from 'pocketbase';
import PocketBase from 'pocketbase';
// import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
// import axios from 'axios';
import { Controller, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { z as zod } from 'zod';

35
002_source/cms/src/components/dashboard/lesson_type/lesson-types-pagination.tsx
View File

@@ -10,21 +10,48 @@ function noop(): void {
interface LessonTypesPaginationProps {
count: number;
page: number;
rowsPerPage: number;
setRowsPerPage: React.Dispatch<React.SetStateAction<number>>;
setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
}
export function LessonTypesPagination({ count, page }: LessonTypesPaginationProps): React.JSX.Element {
export function LessonTypesPagination({
count,
page,
rowsPerPage,
setRowsPerPage,
setCurrentPage,
}: LessonTypesPaginationProps): 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.
function handleRowsPerPageChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void {
console.log(e.target.value);
console.log(parseInt(e.target.value));
setRowsPerPage(parseInt(e.target.value));
}
function handlePageChange(e: React.MouseEvent<HTMLButtonElement> | null): void {
// console.log(e.target.value);
// console.log(parseInt(e.target.value));
// setCurrentPage(parseInt(e.target.value));
}
return (
<TablePagination
component="div"
count={count}
onPageChange={noop}
onRowsPerPageChange={noop}
page={page}
rowsPerPage={5}
//
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[5, 10, 25]}
//
onPageChange={(e) => {
handlePageChange(e);
}}
onRowsPerPageChange={(e) => {
handleRowsPerPageChange(e);
}}
/>
);
}

61
002_source/cms/src/components/dashboard/lesson_type/lesson-types-table.tsx
View File

@@ -2,6 +2,7 @@
import * as React from 'react';
import RouterLink from 'next/link';
import { NO_NUM, NO_VALUE } from '@/constants';
import { Button } from '@mui/material';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
@@ -34,22 +35,58 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonT
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
<div>
<Link
color="inherit"
color={row.isEmpty ? 'disabled' : 'inherit'}
component={RouterLink}
href={paths.dashboard.lesson_types.details(row.id)}
sx={{ whiteSpace: 'nowrap' }}
variant="subtitle2"
>
{row.name}
{row.isEmpty ? '--' : row.name}
</Link>
</div>
</Stack>
),
name: 'Name',
width: '250px',
width: '150px',
},
{
formatter: (row): React.JSX.Element => (
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
<div>
<Link
color={row.isEmpty ? 'disabled' : 'inherit'}
component={RouterLink}
href={paths.dashboard.lesson_types.details(row.id)}
sx={{ whiteSpace: 'nowrap' }}
variant="subtitle2"
>
{row.isEmpty ? '--' : row.type}
</Link>
</div>
</Stack>
),
name: 'Lesson type',
width: '150px',
},
{
formatter: (row): React.JSX.Element => (
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
<div>
<Link
color={row.isEmpty ? 'disabled' : 'inherit'}
component={RouterLink}
href={paths.dashboard.lesson_types.details(row.id)}
sx={{ whiteSpace: 'nowrap' }}
variant="subtitle2"
>
{row.isEmpty ? '--' : row.pos}
</Link>
</div>
</Stack>
),
name: 'Lesson position',
width: '150px',
},
{ field: 'type', name: 'Lesson type', width: '150px' },
{ field: 'pos', name: 'Lesson position', width: '150px' },
{
formatter: (row): React.JSX.Element => {
// eslint-disable-next-line react-hooks/rules-of-hooks
@@ -67,9 +104,13 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonT
label: t('hidden'),
icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" />,
},
no_value: {
label: t('no_value'),
icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" />,
},
} as const;
const { label, icon } = mapping[row.visible] ?? { label: 'Unknown', icon: null };
const { label, icon } = row.isEmpty ? { label: '--', icon: null } : mapping[row.visible];
return (
<Button
@@ -78,7 +119,8 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonT
}}
style={{ backgroundColor: 'transparent' }}
>
<Chip icon={icon} label={label} size="small" variant="outlined" />
{/* <Chip icon={icon} label={label} size="small" variant="outlined" /> */}
{label}
</Button>
);
},
@@ -87,7 +129,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonT
},
{
formatter(row) {
return dayjs(row.createdAt).format('MMM D, YYYY h:mm A');
return row.isEmpty ? '--' : dayjs(row.createdAt).format('MMM D, YYYY h:mm A');
},
name: 'Created at',
width: '200px',
@@ -96,11 +138,12 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonT
{
formatter: (row): React.JSX.Element => (
<Stack direction="row" spacing={1}>
<IconButton component={RouterLink} href={paths.dashboard.lesson_types.details(row.id)}>
<IconButton disabled={row.isEmpty} component={RouterLink} href={paths.dashboard.lesson_types.details(row.id)}>
<PencilSimpleIcon />
</IconButton>
<IconButton
color="error"
disabled={row.isEmpty}
onClick={() => {
handleDeleteClick(row.id);
}}