This commit is contained in:
louiscklaw
2025-04-16 07:46:18 +08:00
parent 7c63b9d0d9
commit 9b39e82488
7 changed files with 107 additions and 55 deletions

View File

@@ -26,19 +26,26 @@ import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
import type { RecordModel } from 'pocketbase';
import PocketBase from 'pocketbase';
import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
import { dayjs } from '@/lib/dayjs';
import { logger } from '@/lib/default-logger';
import { PropertyItem } from '@/components/core/property-item';
import { PropertyList } from '@/components/core/property-list';
import { toast } from '@/components/core/toaster';
// import { getLessonTypeById } from '@/components/dashboard/lesson_type/http-actions';
import { LessonTypeDefaultValue, type LessonType } from '@/components/dashboard/lesson_type/ILessonType';
import { defaultLessonType } from '@/components/dashboard/lesson_type/interfaces';
import { Notifications } from '@/components/dashboard/lesson_type/notifications';
import { Payments } from '@/components/dashboard/lesson_type/payments';
import type { Address } from '@/components/dashboard/lesson_type/shipping-address';
import { ShippingAddress } from '@/components/dashboard/lesson_type/shipping-address';
const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
export default function Page(): React.JSX.Element {
const { t } = useTranslation();
const { typeId } = useParams<{ typeId: string }>();
@@ -51,17 +58,20 @@ export default function Page(): React.JSX.Element {
}
React.useEffect(() => {
// getLessonTypeById(typeId)
// .then((lessonType: LessonType) => {
// setIsLoading(false);
// setShowLessonType(lessonType);
// })
// .catch((err) => {
// // console.error(err);
// console.error(t('lessonType.load_error'));
// });
// console.log('hello');
}, []);
if (typeId) {
pb.collection('LessonsTypes')
.getOne(typeId)
.then((lessonType: RecordModel) => {
setShowLessonType({ ...defaultLessonType, ...lessonType });
setIsLoading(false);
})
.catch((err) => {
logger.error(err);
toast(t('dashboard.lessonTypes.list.error'));
});
}
}, [typeId]);
if (isLoading) return <div>{t('common.loading')}</div>;
return (

View File

@@ -14,6 +14,11 @@ import { LessonTypeEditForm } from '@/components/dashboard/lesson_type/lesson-ty
export default function Page(): React.JSX.Element {
const { t } = useTranslation();
React.useEffect(() => {
console.log('helloworld');
}, []);
return (
<Box
sx={{

View File

@@ -0,0 +1,14 @@
'use client';
import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
function Page(): React.JSX.Element {
React.useLayoutEffect(() => {
console.log('helloworld');
}, []);
return <>helloworld</>;
}
export default Page;

View File

@@ -16,7 +16,6 @@ export function I18nProvider({ children, language = 'en' }: I18nProviderProps):
const { i18n } = useTranslation();
React.useEffect(() => {
console.log(`find me ? I18nProvider ${language}`);
// i18n
// .changeLanguage(language)
// .then(() => {

View File

@@ -3,6 +3,7 @@
import * as React from 'react';
import RouterLink from 'next/link';
import { useParams, 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';
@@ -37,7 +40,9 @@ import { toast } from '@/components/core/toaster';
// import { getLessonTypeById, updateLessonType } from './http-actions';
// TODO: this may be wrong
import type { LessonType } from './ILessonType';
import type { LessonTypeEditFormProps } from './interfaces';
import { defaultLessonType, type LessonTypeEditFormProps } from './interfaces';
const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
// function fileToBase64(file: Blob): Promise<string> {
// return new Promise((resolve, reject) => {
@@ -73,6 +78,7 @@ export function LessonTypeEditForm(): React.JSX.Element {
const { t } = useTranslation();
const { typeId } = useParams<{ typeId: string }>();
const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
const [isLoading, setIsLoading] = React.useState<boolean>(false);
const {
control,
@@ -83,31 +89,29 @@ export function LessonTypeEditForm(): React.JSX.Element {
// watch,
} = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
const onSubmit = React.useCallback(
async (values: Values): Promise<void> => {
setIsUpdating(true);
const tempUpdate: LessonTypeEditFormProps = {
name: values.name,
type: values.type,
pos: values.pos,
visible: values.visible_to_user ? 'visible' : 'hidden',
};
const onSubmit = React.useCallback(async (values: Values): Promise<void> => {
setIsUpdating(true);
const tempUpdate: LessonTypeEditFormProps = {
name: values.name,
type: values.type,
pos: values.pos,
visible: values.visible_to_user ? 'visible' : 'hidden',
};
// updateLessonType(tempUpdate, typeId)
// .then((res) => {
// logger.debug(res);
// toast.success(t('dashboard.lessonTypes.update.success'));
// setIsUpdating(false);
// router.push(paths.dashboard.lesson_types.list);
// })
// .catch((err) => {
// logger.error(err);
// toast.error('Something went wrong!');
// setIsUpdating(false);
// });
},
[router]
);
pb.collection(COL_LESSON_TYPES)
.update(typeId, tempUpdate)
.then((res) => {
logger.debug(res);
toast.success(t('dashboard.lessonTypes.update.success'));
setIsUpdating(false);
router.push(paths.dashboard.lesson_types.list);
})
.catch((err) => {
logger.error(err);
toast.error('Something went wrong!');
setIsUpdating(false);
});
}, []);
const avatarInputRef = React.useRef<HTMLInputElement>(null);
// const avatar = watch('avatar');
@@ -124,20 +128,30 @@ export function LessonTypeEditForm(): React.JSX.Element {
[setValue]
);
const handleLoad = React.useCallback(
(id: string) => {
pb.collection(COL_LESSON_TYPES)
.getOne(id)
.then((lessonType: RecordModel) => {
reset({ ...defaultLessonType, ...lessonType });
setIsLoading(false);
})
.catch((err) => {
logger.error(err);
toast(t('dashboard.lessonTypes.list.error'));
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[typeId]
);
React.useEffect(() => {
// getLessonTypeById(typeId)
// .then((lessonType: LessonType) => {
// reset({
// name: lessonType.name,
// type: lessonType.type,
// pos: lessonType.pos,
// visible_to_user: lessonType.visible,
// });
// })
// .catch((err) => {
// // console.error(err);
// });
}, []);
handleLoad(typeId);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [typeId]);
if (isLoading) return <>loading</>;
return (
<form onSubmit={handleSubmit(onSubmit)}>
@@ -223,7 +237,14 @@ export function LessonTypeEditForm(): React.JSX.Element {
render={({ field }) => (
<FormControl error={Boolean(errors.pos)} fullWidth>
<InputLabel required>{t('dashboard.lessonTypes.edit.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>
)}
@@ -237,8 +258,8 @@ export function LessonTypeEditForm(): React.JSX.Element {
<FormControl error={Boolean(errors.visible_to_user)} fullWidth>
<InputLabel>{t('dashboard.lessonTypes.edit.visibleToUser')}</InputLabel>
<Select {...field}>
<MenuItem value={'visible'}>{t('dashboard.lessonTypes.edit.visible')}</MenuItem>
<MenuItem value={'hidden'}>{t('dashboard.lessonTypes.edit.hidden')}</MenuItem>
<MenuItem value="visible">{t('dashboard.lessonTypes.edit.visible')}</MenuItem>
<MenuItem value="hidden">{t('dashboard.lessonTypes.edit.hidden')}</MenuItem>
</Select>
{errors.visible_to_user ? (
@@ -256,7 +277,7 @@ export function LessonTypeEditForm(): React.JSX.Element {
<Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_types.list}>
{t('dashboard.lessonTypes.edit.cancelButton')}
</Button>
<LoadingButton disabled={isUpdating} type="submit" variant="contained" loading={isUpdating}>
<LoadingButton disabled={isUpdating} loading={isUpdating} type="submit" variant="contained">
{t('dashboard.lessonTypes.edit.updateButton')}
</LoadingButton>
</CardActions>

View File

@@ -36,7 +36,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonT
<Link
color="inherit"
component={RouterLink}
href={paths.dashboard.lesson_types.details('1')}
href={paths.dashboard.lesson_types.details(row.id)}
sx={{ whiteSpace: 'nowrap' }}
variant="subtitle2"
>

View File

@@ -0,0 +1,3 @@
const COL_LESSON_TYPES = 'LessonsTypes';
export { COL_LESSON_TYPES };