update,
This commit is contained in:
louiscklaw
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user