update build ok,
This commit is contained in:
louiscklaw
@@ -2,7 +2,47 @@
|
||||
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import Box from '@mui/material/Box';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { paths } from '@/paths';
|
||||
import { LessonTypeEditForm } from '@/components/dashboard/lesson_type/lesson-type-edit-form';
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
return <>helloworld</>;
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: 'var(--Content-maxWidth)',
|
||||
m: 'var(--Content-margin)',
|
||||
p: 'var(--Content-padding)',
|
||||
width: 'var(--Content-width)',
|
||||
}}
|
||||
>
|
||||
<Stack spacing={4}>
|
||||
<Stack spacing={3}>
|
||||
<div>
|
||||
<Link
|
||||
color="text.primary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.lesson_types.list}
|
||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
||||
{t('dashboard.lessonTypes.title')}
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="h4">{t('dashboard.lessonTypes.edit.title')}</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
<LessonTypeEditForm />
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
export interface LessonTypeEditFormProps {
|
||||
name: string;
|
||||
type: string;
|
||||
pos: number;
|
||||
visible: string;
|
||||
}
|
||||
|
||||
export interface RestLessonTypeUpdateForm {
|
||||
id: string;
|
||||
data: LessonTypeEditFormProps;
|
||||
}
|
||||
|
||||
export interface LessonTypeCreateForm {
|
||||
name: string;
|
||||
type: string;
|
||||
pos: number;
|
||||
visible: string;
|
||||
}
|
||||
|
||||
export const LessonTypeCreateFormDefault: LessonTypeCreateForm = {
|
||||
name: '',
|
||||
type: '',
|
||||
pos: 1,
|
||||
visible: 'visible',
|
||||
};
|
||||
@@ -0,0 +1,266 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import { MenuItem } from '@mui/material';
|
||||
// import Avatar from '@mui/material/Avatar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardActions from '@mui/material/CardActions';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
// import Checkbox from '@mui/material/Checkbox';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
// import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
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 { 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';
|
||||
|
||||
import { paths } from '@/paths';
|
||||
import { logger } from '@/lib/default-logger';
|
||||
// import { Option } from '@/components/core/option';
|
||||
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';
|
||||
|
||||
// function fileToBase64(file: Blob): Promise<string> {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// const reader = new FileReader();
|
||||
// reader.readAsDataURL(file);
|
||||
// reader.onload = () => {
|
||||
// resolve(reader.result as string);
|
||||
// };
|
||||
// reader.onerror = () => {
|
||||
// reject(new Error('Error converting file to base64'));
|
||||
// };
|
||||
// });
|
||||
// }
|
||||
|
||||
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.number().min(1, 'Phone is required').max(15),
|
||||
visible_to_user: zod.string().max(255),
|
||||
});
|
||||
|
||||
type Values = zod.infer<typeof schema>;
|
||||
|
||||
const defaultValues = {
|
||||
name: '',
|
||||
type: '',
|
||||
pos: 1,
|
||||
visible_to_user: 'visible',
|
||||
} satisfies Values;
|
||||
|
||||
export function LessonTypeEditForm(): React.JSX.Element {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const { typeId } = useParams<{ typeId: string }>();
|
||||
const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
reset,
|
||||
// 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',
|
||||
};
|
||||
|
||||
// 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]
|
||||
);
|
||||
|
||||
const avatarInputRef = React.useRef<HTMLInputElement>(null);
|
||||
// const avatar = watch('avatar');
|
||||
|
||||
const handleAvatarChange = React.useCallback(
|
||||
async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
|
||||
if (file) {
|
||||
// const url = await fileToBase64(file);
|
||||
// setValue('avatar', url);
|
||||
}
|
||||
},
|
||||
[setValue]
|
||||
);
|
||||
|
||||
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);
|
||||
// });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Stack divider={<Divider />} spacing={4}>
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('dashboard.lessonTypes.edit.typeInformation')}</Typography>
|
||||
<Grid container spacing={3}>
|
||||
<Grid xs={12}>
|
||||
<Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px dashed var(--mui-palette-divider)',
|
||||
borderRadius: '50%',
|
||||
display: 'inline-flex',
|
||||
p: '4px',
|
||||
}}
|
||||
>
|
||||
{/*
|
||||
<Avatar
|
||||
src={avatar}
|
||||
sx={{
|
||||
'--Avatar-size': '100px',
|
||||
'--Icon-fontSize': 'var(--icon-fontSize-lg)',
|
||||
alignItems: 'center',
|
||||
bgcolor: 'var(--mui-palette-background-level1)',
|
||||
color: 'var(--mui-palette-text-primary)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<CameraIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
*/}
|
||||
</Box>
|
||||
<Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
|
||||
<Typography variant="subtitle1">{t('dashboard.lessonTypes.edit.avatar')}</Typography>
|
||||
<Typography variant="caption">{t('dashboard.lessonTypes.edit.avatarRequirements')}</Typography>
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={() => {
|
||||
avatarInputRef.current?.click();
|
||||
}}
|
||||
variant="outlined"
|
||||
>
|
||||
{t('dashboard.lessonTypes.edit.select')}
|
||||
</Button>
|
||||
<input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormControl error={Boolean(errors.name)} fullWidth>
|
||||
<InputLabel required>{t('dashboard.lessonTypes.edit.name')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<FormControl error={Boolean(errors.type)} fullWidth>
|
||||
<InputLabel required>{t('dashboard.lessonTypes.edit.type')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.type ? <FormHelperText>{errors.type.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="pos"
|
||||
render={({ field }) => (
|
||||
<FormControl error={Boolean(errors.pos)} fullWidth>
|
||||
<InputLabel required>{t('dashboard.lessonTypes.edit.position')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="visible_to_user"
|
||||
render={({ field }) => (
|
||||
<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>
|
||||
</Select>
|
||||
|
||||
{errors.visible_to_user ? (
|
||||
<FormHelperText>{errors.visible_to_user.message}</FormHelperText>
|
||||
) : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
||||
<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}>
|
||||
{t('dashboard.lessonTypes.edit.updateButton')}
|
||||
</LoadingButton>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user