update to remove temporary files,
This commit is contained in:
louiscklaw
@@ -1,334 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { COL_LESSON_CATEGORIES, NS_LESSON_CATEGORY } from '@/constants';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import { Avatar, Divider, 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 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 type { RecordModel } from 'pocketbase';
|
||||
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 { pb } from '@/lib/pb';
|
||||
import { Option } from '@/components/core/option';
|
||||
import { TextEditor } from '@/components/core/text-editor/text-editor';
|
||||
import { toast } from '@/components/core/toaster';
|
||||
import FormLoading from '@/components/loading';
|
||||
|
||||
import ErrorDisplay from '../error';
|
||||
import { defaultLessonCategory } from './_constants';
|
||||
import { fileToBase64 } from './file-to-base64';
|
||||
import { LessonCategory, EditFormProps } from './types';
|
||||
|
||||
const schema = zod.object({
|
||||
cat_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: zod.string().max(255),
|
||||
description: zod.string().optional(),
|
||||
remarks: zod.string().optional(),
|
||||
});
|
||||
|
||||
type Values = zod.infer<typeof schema>;
|
||||
|
||||
const defaultValues = {
|
||||
cat_name: '',
|
||||
type: '',
|
||||
pos: 1,
|
||||
visible: 'visible',
|
||||
} satisfies Values;
|
||||
|
||||
export function LessonCategoryEditForm(): React.JSX.Element {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation(['common', 'lesson_category']);
|
||||
|
||||
const NS_DEFAULT = { ns: 'lesson_category' };
|
||||
const { cat_id: catId } = useParams<{ cat_id: string }>();
|
||||
//
|
||||
const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
|
||||
const [showLoading, setShowLoading] = React.useState<boolean>(false);
|
||||
const [showError, setShowError] = 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: LessonCategoryEditFormProps = {
|
||||
// name: values.cat_name,
|
||||
// type: values.type,
|
||||
// pos: values.pos,
|
||||
// visible: values.visible ? 'visible' : 'hidden',
|
||||
// };
|
||||
|
||||
|
||||
// pb.collection(COL_LESSON_CATEGORIES)
|
||||
// .update(catId, tempUpdate)
|
||||
// .then((res) => {
|
||||
// logger.debug(res);
|
||||
// toast.success(t('update.success', NS_DEFAULT));
|
||||
// setIsUpdating(false);
|
||||
// router.push(paths.dashboard.lesson_categories.list);
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// logger.error(err);
|
||||
// toast.error('Something went wrong!');
|
||||
// })
|
||||
// .finally(() => {
|
||||
// //
|
||||
// setIsUpdating(false);
|
||||
// });
|
||||
}, []);
|
||||
|
||||
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]
|
||||
);
|
||||
|
||||
const [textDescription, setTextDescription] = React.useState<string>('loading');
|
||||
const handleLoad = React.useCallback(
|
||||
(id: string) => {
|
||||
setShowLoading(true);
|
||||
pb.collection(COL_LESSON_CATEGORIES)
|
||||
.getOne(id)
|
||||
.then((model: RecordModel) => {
|
||||
const temp: LessonCategory = { ...defaultLessonCategory, ...model };
|
||||
reset(temp);
|
||||
setTextDescription(temp.description);
|
||||
})
|
||||
.catch((err) => {
|
||||
logger.error(err);
|
||||
toast(t('list.error', NS_DEFAULT));
|
||||
})
|
||||
.finally(() => {
|
||||
setShowLoading(false);
|
||||
});
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[catId]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
handleLoad(catId);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [catId]);
|
||||
|
||||
if (showLoading) return <FormLoading />;
|
||||
if (showError)
|
||||
return (
|
||||
<ErrorDisplay
|
||||
message={t('error.unable-to-process-request', NS_DEFAULT)}
|
||||
code="500"
|
||||
details={t('error.detailed-error-information', NS_DEFAULT)}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Stack divider={<Divider />} spacing={4}>
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('edit.basic-info', NS_DEFAULT)}</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: '5%',
|
||||
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',
|
||||
}}
|
||||
>
|
||||
// TODO: resume me
|
||||
<CameraIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
*/}
|
||||
</Box>
|
||||
<Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
|
||||
<Typography variant="subtitle1">{t('edit.avatar', NS_DEFAULT)}</Typography>
|
||||
<Typography variant="caption">{t('edit.avatarRequirements', NS_DEFAULT)}</Typography>
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={() => {
|
||||
avatarInputRef.current?.click();
|
||||
}}
|
||||
variant="outlined"
|
||||
>
|
||||
{t('edit.select', NS_DEFAULT)}
|
||||
</Button>
|
||||
<input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="cat_name"
|
||||
render={({ field }) => (
|
||||
<FormControl error={Boolean(errors.cat_name)} fullWidth>
|
||||
<InputLabel required>{t('edit.name', NS_DEFAULT)}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.cat_name ? <FormHelperText>{errors.cat_name.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('edit.position', NS_DEFAULT)}</InputLabel>
|
||||
<OutlinedInput
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
field.onChange(parseInt(e.target.value));
|
||||
}}
|
||||
type="number"
|
||||
/>
|
||||
|
||||
{errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="visible"
|
||||
render={({ field }) => (
|
||||
<FormControl error={Boolean(errors.visible)} fullWidth>
|
||||
<InputLabel>{t('edit.visible', NS_DEFAULT)}</InputLabel>
|
||||
<Select {...field}>
|
||||
<MenuItem value="visible">{t('edit.visible', NS_DEFAULT)}</MenuItem>
|
||||
<MenuItem value="hidden">{t('edit.hidden', NS_DEFAULT)}</MenuItem>
|
||||
</Select>
|
||||
|
||||
{errors.visible ? <FormHelperText>{errors.visible.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('create.detail-information', NS_DEFAULT)}</Typography>
|
||||
<Grid container spacing={3}>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
render={({ field }) => {
|
||||
console.log({ field });
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="subtitle1" color="text-secondary">
|
||||
{t('create.description', NS_DEFAULT)}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
|
||||
{JSON.stringify({ field })}
|
||||
<TextEditor
|
||||
{...field}
|
||||
content={textDescription}
|
||||
onUpdate={({ editor }) => {
|
||||
console.log(editor.getHTML());
|
||||
field.onChange({ target: { value: editor.getHTML() } });
|
||||
}}
|
||||
placeholder={t('edit.write-something', NS_DEFAULT)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="billingAddress.state"
|
||||
render={({ field }) => (
|
||||
<Box>
|
||||
<Typography variant="subtitle1" color="text.secondary">
|
||||
{t('create.remarks', NS_DEFAULT)}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
|
||||
<TextEditor content="" placeholder="Write something" />
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
||||
<Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_types.list}>
|
||||
{t('edit.cancelButton', NS_DEFAULT)}
|
||||
</Button>
|
||||
|
||||
<LoadingButton disabled={isUpdating} loading={isUpdating} type="submit" variant="contained">
|
||||
{t('edit.updateButton', NS_DEFAULT)}
|
||||
</LoadingButton>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user