remove unused code,
This commit is contained in:
@@ -1,80 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import Avatar from '@mui/material/Avatar';
|
|
||||||
import Card from '@mui/material/Card';
|
|
||||||
import CardHeader from '@mui/material/CardHeader';
|
|
||||||
import Chip from '@mui/material/Chip';
|
|
||||||
import Divider from '@mui/material/Divider';
|
|
||||||
import IconButton from '@mui/material/IconButton';
|
|
||||||
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
|
|
||||||
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { PropertyItem } from '@/components/core/property-item';
|
|
||||||
import { PropertyList } from '@/components/core/property-list';
|
|
||||||
// import { CrCategory } from '@/components/dashboard/cr/categories/type';
|
|
||||||
import type { Student } from '@/components/dashboard/student/type.d';
|
|
||||||
|
|
||||||
export default function BasicDetailCard({
|
|
||||||
lpModel: model,
|
|
||||||
handleEditClick,
|
|
||||||
}: {
|
|
||||||
lpModel: Student;
|
|
||||||
handleEditClick: () => void;
|
|
||||||
}): React.JSX.Element {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader
|
|
||||||
action={
|
|
||||||
<IconButton
|
|
||||||
onClick={() => {
|
|
||||||
handleEditClick();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<PencilSimpleIcon />
|
|
||||||
</IconButton>
|
|
||||||
}
|
|
||||||
avatar={
|
|
||||||
<Avatar>
|
|
||||||
<UserIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
}
|
|
||||||
title={t('list.basic-details')}
|
|
||||||
/>
|
|
||||||
<PropertyList
|
|
||||||
divider={<Divider />}
|
|
||||||
orientation="vertical"
|
|
||||||
sx={{ '--PropertyItem-padding': '12px 24px' }}
|
|
||||||
>
|
|
||||||
{(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
key: 'Customer ID',
|
|
||||||
value: (
|
|
||||||
<Chip
|
|
||||||
label={model.id}
|
|
||||||
size="small"
|
|
||||||
variant="soft"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{ key: 'Email', value: model.email },
|
|
||||||
{ key: 'Quota', value: model.quota },
|
|
||||||
{ key: 'Status', value: model.status },
|
|
||||||
] satisfies { key: string; value: React.ReactNode }[]
|
|
||||||
).map(
|
|
||||||
(item): React.JSX.Element => (
|
|
||||||
<PropertyItem
|
|
||||||
key={item.key}
|
|
||||||
name={item.key}
|
|
||||||
value={item.value}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</PropertyList>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import { Button } from '@mui/material';
|
|
||||||
import Avatar from '@mui/material/Avatar';
|
|
||||||
import Chip from '@mui/material/Chip';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
|
|
||||||
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import type { Student } from '@/components/dashboard/student/type.d';
|
|
||||||
|
|
||||||
// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
|
|
||||||
|
|
||||||
function getImageUrlFrRecord(record: Student): string {
|
|
||||||
// TODO: fix this
|
|
||||||
// `http://127.0.0.1:8090/api/files/${'record.collectionId'}/${'record.id'}/${'record.cat_image'}`;
|
|
||||||
return 'getImageUrlFrRecord(helloworld)';
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function SampleTitleCard({ lpModel }: { lpModel: Student }): React.JSX.Element {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Stack
|
|
||||||
direction="row"
|
|
||||||
spacing={2}
|
|
||||||
sx={{ alignItems: 'center', flex: '1 1 auto' }}
|
|
||||||
>
|
|
||||||
<Avatar
|
|
||||||
variant="rounded"
|
|
||||||
src={getImageUrlFrRecord(lpModel)}
|
|
||||||
sx={{ '--Avatar-size': '64px' }}
|
|
||||||
>
|
|
||||||
{t('empty')}
|
|
||||||
</Avatar>
|
|
||||||
<div>
|
|
||||||
<Stack
|
|
||||||
direction="row"
|
|
||||||
spacing={2}
|
|
||||||
sx={{ alignItems: 'center', flexWrap: 'wrap' }}
|
|
||||||
>
|
|
||||||
<Typography variant="h4">{lpModel.email}</Typography>
|
|
||||||
<Chip
|
|
||||||
icon={
|
|
||||||
<CheckCircleIcon
|
|
||||||
color="var(--mui-palette-success-main)"
|
|
||||||
weight="fill"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label={lpModel.quota}
|
|
||||||
size="small"
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
<Typography
|
|
||||||
color="text.secondary"
|
|
||||||
variant="body1"
|
|
||||||
>
|
|
||||||
{lpModel.status}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
endIcon={<CaretDownIcon />}
|
|
||||||
variant="contained"
|
|
||||||
>
|
|
||||||
{t('list.action')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
'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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user