143 lines
4.3 KiB
TypeScript
143 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import RouterLink from 'next/link';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
|
|
import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
|
|
import SamplePaymentCard from '@/app/dashboard/Sample/PaymentCard';
|
|
import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
|
|
|
|
import Box from '@mui/material/Box';
|
|
import Link from '@mui/material/Link';
|
|
import Stack from '@mui/material/Stack';
|
|
import Grid from '@mui/material/Unstable_Grid2';
|
|
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
|
|
import type { RecordModel } from 'pocketbase';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { config } from '@/config';
|
|
import { paths } from '@/paths';
|
|
import { logger } from '@/lib/default-logger';
|
|
import { pb } from '@/lib/pb';
|
|
import { toast } from '@/components/core/toaster';
|
|
|
|
import ErrorDisplay from '@/components/dashboard/error';
|
|
|
|
import { Notifications } from '@/components/dashboard/student/notifications';
|
|
import FormLoading from '@/components/loading';
|
|
import BasicDetailCard from './BasicDetailCard';
|
|
import TitleCard from './TitleCard';
|
|
import { defaultStudent } from '@/components/dashboard/student/_constants';
|
|
import type { Student } from '@/components/dashboard/student/type.d';
|
|
import { COL_STUDENTS } from '@/constants';
|
|
|
|
export default function Page(): React.JSX.Element {
|
|
const { t } = useTranslation();
|
|
const router = useRouter();
|
|
//
|
|
const { customerId } = useParams<{ customerId: string }>();
|
|
//
|
|
const [showLoading, setShowLoading] = React.useState<boolean>(true);
|
|
const [showError, setShowError] = React.useState({ show: false, detail: '' });
|
|
//
|
|
const [showLessonCategory, setShowLessonCategory] = React.useState<Student>(defaultStudent);
|
|
|
|
function handleEditClick(): void {
|
|
router.push(paths.dashboard.students.edit(showLessonCategory.id));
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
if (customerId) {
|
|
pb.collection(COL_STUDENTS)
|
|
.getOne(customerId)
|
|
.then((model: RecordModel) => {
|
|
setShowLessonCategory({ ...defaultStudent, ...model });
|
|
})
|
|
.catch((err) => {
|
|
logger.error(err);
|
|
toast(t('list.error'));
|
|
|
|
setShowError({ show: true, detail: JSON.stringify(err) });
|
|
})
|
|
.finally(() => {
|
|
setShowLoading(false);
|
|
});
|
|
}
|
|
}, [customerId]);
|
|
|
|
// return <>{JSON.stringify({ showError, showLessonCategory }, null, 2)}</>;
|
|
|
|
if (showLoading) return <FormLoading />;
|
|
if (showError.show)
|
|
return (
|
|
<ErrorDisplay
|
|
message={t('error.unable-to-process-request')}
|
|
code="500"
|
|
details={showError.detail}
|
|
/>
|
|
);
|
|
|
|
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.students.list}
|
|
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
|
variant="subtitle2"
|
|
>
|
|
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
|
Students
|
|
</Link>
|
|
</div>
|
|
<Stack
|
|
direction={{ xs: 'column', sm: 'row' }}
|
|
spacing={3}
|
|
sx={{ alignItems: 'flex-start' }}
|
|
>
|
|
<TitleCard lpModel={showLessonCategory} />
|
|
</Stack>
|
|
</Stack>
|
|
<Grid
|
|
container
|
|
spacing={4}
|
|
>
|
|
<Grid
|
|
lg={4}
|
|
xs={12}
|
|
>
|
|
<Stack spacing={4}>
|
|
<BasicDetailCard
|
|
lpModel={showLessonCategory}
|
|
handleEditClick={handleEditClick}
|
|
/>
|
|
<SampleSecurityCard />
|
|
</Stack>
|
|
</Grid>
|
|
<Grid
|
|
lg={8}
|
|
xs={12}
|
|
>
|
|
<Stack spacing={4}>
|
|
<SamplePaymentCard />
|
|
<SampleAddressCard />
|
|
<Notifications notifications={SampleNotifications} />
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|