louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"``refactor student create and edit forms with translation support, update schema validation, and use new database operations for student management``"

Browse Source
This commit is contained in:
louiscklaw
2025-05-13 13:26:58 +08:00
parent 64ca29cf60
commit 8a094afdd2
3 changed files with 163 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
002_source/cms/src/components/dashboard/student/student-create-form.tsx
View File

@@ -1,9 +1,17 @@
'use client';
// src/components/dashboard/student/student-create-form.tsx
//
import * as React from 'react';
import RouterLink from 'next/link';
import { useRouter } from 'next/navigation';
import { UpdateBillingAddressById } from '@/db/billingAddress/UpdateById';
import { createStudent } from '@/db/Students/Create';
import { getStudentById } from '@/db/Students/GetById';
import { UpdateStudentById } from '@/db/Students/UpdateById';
import { zodResolver } from '@hookform/resolvers/zod';
import { LoadingButton } from '@mui/lab';
//
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
@@ -16,41 +24,38 @@ 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 MenuItem from '@mui/material/MenuItem';
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 { Controller, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { z as zod } from 'zod';
import { paths } from '@/paths';
import isDevelopment from '@/lib/check-is-development';
import { logger } from '@/lib/default-logger';
import { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
import { pb } from '@/lib/pb';
import { Option } from '@/components/core/option';
import { toast } from '@/components/core/toaster';
import { createCustomer } from '@/db/Customers/Create';
import isDevelopment from '@/lib/check-is-development';
import FormLoading from '@/components/loading';
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'));
};
});
}
// import ErrorDisplay from '../../error';
import ErrorDisplay from '../error';
import { CreateFormProps, Student } from './type.d';
// TODO: review schema
const schema = zod.object({
avatar: zod.string().optional(),
name: zod.string().min(1, 'Name is required').max(255),
email: zod.string().email('Must be a valid email').min(1, 'Email is required').max(255),
phone: zod.string().min(1, 'Phone is required').max(15),
company: zod.string().max(255),
phone: zod.string().min(1, 'Phone is required').max(25),
company: zod.string().max(255).optional(),
billingAddress: zod.object({
country: zod.string().min(1, 'Country is required').max(255),
state: zod.string().min(1, 'State is required').max(255),
@@ -63,12 +68,12 @@ const schema = zod.object({
timezone: zod.string().min(1, 'Timezone is required').max(255),
language: zod.string().min(1, 'Language is required').max(255),
currency: zod.string().min(1, 'Currency is required').max(255),
avatar: zod.string().optional(),
});
type Values = zod.infer<typeof schema>;
const defaultValues = {
avatar: '',
name: 'new name',
email: '123@123.com',
phone: '91234567',
@@ -85,10 +90,18 @@ const defaultValues = {
timezone: 'new_york',
language: 'en',
currency: 'USD',
avatar: '',
} satisfies Values;
export function CustomerCreateForm(): React.JSX.Element {
export function StudentCreateForm(): React.JSX.Element {
const router = useRouter();
const { t } = useTranslation(['students']);
//
const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
const [showLoading, setShowLoading] = React.useState<boolean>(false);
//
const [showError, setShowError] = React.useState({ show: false, detail: '' });
const {
control,
@@ -100,14 +113,35 @@ export function CustomerCreateForm(): React.JSX.Element {
const onSubmit = React.useCallback(
async (values: Values): Promise<void> => {
// Use standard create method from db/Customers/Create
const tempCreate: CreateFormProps = {
avatar: values.avatar ? await base64ToFile(values.avatar) : null,
//
name: values.name,
email: values.email,
phone: values.phone,
company: values.company,
timezone: values.timezone,
language: values.language,
currency: values.currency,
taxId: values.taxId,
state: 'pending',
meta: {},
};
try {
// Use standard create method from db/Customers/Create
const record = await createCustomer(values);
toast.success('Customer created');
router.push(paths.dashboard.students.view(record.id));
// if (billingAddressId) {
// await UpdateBillingAddressById(billingAddressId, values.billingAddress);
// }
const record = await createStudent(tempCreate);
toast.success('Student created');
// router.push(paths.dashboard.students.view(record.id));
} catch (err) {
logger.error(err);
toast.error('Failed to create customer');
toast.error('Failed to create Student');
} finally {
setIsUpdating(false);
}
},
[router]
@@ -137,7 +171,7 @@ export function CustomerCreateForm(): React.JSX.Element {
spacing={4}
>
<Stack spacing={3}>
<Typography variant="h6">Account information</Typography>
<Typography variant="h6">{t('create.basic-info')}</Typography>
<Grid
container
spacing={3}
@@ -151,12 +185,13 @@ export function CustomerCreateForm(): React.JSX.Element {
<Box
sx={{
border: '1px dashed var(--mui-palette-divider)',
borderRadius: '50%',
borderRadius: '5%',
display: 'inline-flex',
p: '4px',
}}
>
<Avatar
variant="rounded"
src={avatar}
sx={{
'--Avatar-size': '100px',
@@ -175,8 +210,8 @@ export function CustomerCreateForm(): React.JSX.Element {
spacing={1}
sx={{ alignItems: 'flex-start' }}
>
<Typography variant="subtitle1">Avatar</Typography>
<Typography variant="caption">Min 400x400px, PNG or JPEG</Typography>
<Typography variant="subtitle1">{t('create.avatar')}</Typography>
<Typography variant="caption">{t('create.avatarRequirements')}</Typography>
<Button
color="secondary"
onClick={() => {
@@ -184,7 +219,7 @@ export function CustomerCreateForm(): React.JSX.Element {
}}
variant="outlined"
>
Select
{t('create.avatar_select')}
</Button>
<input
hidden
@@ -226,7 +261,7 @@ export function CustomerCreateForm(): React.JSX.Element {
error={Boolean(errors.email)}
fullWidth
>
<InputLabel required>Email address</InputLabel>
<InputLabel required>{t('create.email-address')}</InputLabel>
<OutlinedInput
{...field}
type="email"
@@ -248,7 +283,7 @@ export function CustomerCreateForm(): React.JSX.Element {
error={Boolean(errors.phone)}
fullWidth
>
<InputLabel required>Phone number</InputLabel>
<InputLabel required>{t('create.phone-number')}</InputLabel>
<OutlinedInput {...field} />
{errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
</FormControl>
@@ -268,7 +303,10 @@ export function CustomerCreateForm(): React.JSX.Element {
fullWidth
>
<InputLabel>Company</InputLabel>
<OutlinedInput {...field} />
<OutlinedInput
{...field}
placeholder="no company name"
/>
{errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
</FormControl>
)}
@@ -276,8 +314,9 @@ export function CustomerCreateForm(): React.JSX.Element {
</Grid>
</Grid>
</Stack>
{/* */}
<Stack spacing={3}>
<Typography variant="h6">Billing information</Typography>
<Typography variant="h6">{t('create.billing-information')}</Typography>
<Grid
container
spacing={3}
@@ -296,10 +335,12 @@ export function CustomerCreateForm(): React.JSX.Element {
>
<InputLabel required>Country</InputLabel>
<Select {...field}>
<Option value="">Choose a country</Option>
<Option value="us">United States</Option>
<Option value="de">Germany</Option>
<Option value="es">Spain</Option>
<MenuItem value="">Choose a country</MenuItem>
<MenuItem value="US">United States</MenuItem>
<MenuItem value="UK">United Kingdom</MenuItem>
<MenuItem value="CA">Canada</MenuItem>
<MenuItem value="DE">Germany</MenuItem>
<MenuItem value="ES">Spain</MenuItem>
</Select>
{errors.billingAddress?.country ? (
<FormHelperText>{errors.billingAddress?.country?.message}</FormHelperText>
@@ -362,7 +403,7 @@ export function CustomerCreateForm(): React.JSX.Element {
error={Boolean(errors.billingAddress?.zipCode)}
fullWidth
>
<InputLabel required>Zip code</InputLabel>
<InputLabel required>{t('create.zip-code')}</InputLabel>
<OutlinedInput {...field} />
{errors.billingAddress?.zipCode ? (
<FormHelperText>{errors.billingAddress?.zipCode?.message}</FormHelperText>
@@ -383,7 +424,7 @@ export function CustomerCreateForm(): React.JSX.Element {
error={Boolean(errors.billingAddress?.line1)}
fullWidth
>
<InputLabel required>Address</InputLabel>
<InputLabel required>{t('create.address-line-1')}</InputLabel>
<OutlinedInput {...field} />
{errors.billingAddress?.line1 ? (
<FormHelperText>{errors.billingAddress?.line1?.message}</FormHelperText>
@@ -424,7 +465,7 @@ export function CustomerCreateForm(): React.JSX.Element {
/>
</Stack>
<Stack spacing={3}>
<Typography variant="h6">Additional information</Typography>
<Typography variant="h6">{t('create.additional-information')}</Typography>
<Grid
container
spacing={3}
@@ -443,10 +484,14 @@ export function CustomerCreateForm(): React.JSX.Element {
>
<InputLabel required>Timezone</InputLabel>
<Select {...field}>
<Option value="">Select a timezone</Option>
<Option value="new_york">US - New York</Option>
<Option value="california">US - California</Option>
<Option value="london">UK - London</Option>
<MenuItem value="">Select a timezone</MenuItem>
<MenuItem value="Europe/London">London</MenuItem>
<MenuItem value="Asia/Tokyo">Tokyo</MenuItem>
<MenuItem value="America/Boa_Vista">Boa Vista</MenuItem>
<MenuItem value="America/Grand_Turk">Grand Turk</MenuItem>
<MenuItem value="Asia/Manila">Manila</MenuItem>
<MenuItem value="Asia/Urumqi">Urumqi</MenuItem>
<MenuItem value="Africa/Tunis">Tunis</MenuItem>
</Select>
{errors.timezone ? <FormHelperText>{errors.timezone.message}</FormHelperText> : null}
</FormControl>
@@ -467,10 +512,11 @@ export function CustomerCreateForm(): React.JSX.Element {
>
<InputLabel required>Language</InputLabel>
<Select {...field}>
<Option value="">Select a language</Option>
<Option value="en">English</Option>
<Option value="es">Spanish</Option>
<Option value="de">German</Option>
<MenuItem value="">Select a language</MenuItem>
<MenuItem value="en">English</MenuItem>
<MenuItem value="es">Spanish</MenuItem>
<MenuItem value="de">German</MenuItem>
<MenuItem value="fr">French</MenuItem>
</Select>
{errors.language ? <FormHelperText>{errors.language.message}</FormHelperText> : null}
</FormControl>
@@ -489,12 +535,12 @@ export function CustomerCreateForm(): React.JSX.Element {
error={Boolean(errors.currency)}
fullWidth
>
<InputLabel>Currency</InputLabel>
<InputLabel required>{t('create.currency')}</InputLabel>
<Select {...field}>
<Option value="">Select a currency</Option>
<Option value="USD">USD</Option>
<Option value="EUR">EUR</Option>
<Option value="RON">RON</Option>
<MenuItem value="">no currency selected</MenuItem>
<MenuItem value="USD">USD</MenuItem>
<MenuItem value="EUR">EUR</MenuItem>
<MenuItem value="GBP">GBP</MenuItem>
</Select>
{errors.currency ? <FormHelperText>{errors.currency.message}</FormHelperText> : null}
</FormControl>
@@ -511,14 +557,17 @@ export function CustomerCreateForm(): React.JSX.Element {
component={RouterLink}
href={paths.dashboard.students.list}
>
Cancel
{t('create.cancelButton')}
</Button>
<Button
<LoadingButton
disabled={isUpdating}
loading={isUpdating}
type="submit"
variant="contained"
>
Create customer
</Button>
{t('create.updateButton')}
</LoadingButton>
</CardActions>
</Card>
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>

69
002_source/cms/src/components/dashboard/student/student-edit-form.tsx
View File

@@ -1,10 +1,15 @@
'use client';
// src/components/dashboard/student/student-edit-form.tsx
//
import * as React from 'react';
import RouterLink from 'next/link';
import { useParams, useRouter } from 'next/navigation';
//
import { COL_CUSTOMERS } from '@/constants';
import { COL_CUSTOMERS, COL_USER_METAS } from '@/constants';
import { UpdateBillingAddressById } from '@/db/billingAddress/UpdateById';
import { getStudentById } from '@/db/Students/GetById';
import { UpdateStudentById } from '@/db/Students/UpdateById';
import { zodResolver } from '@hookform/resolvers/zod';
import { LoadingButton } from '@mui/lab';
//
@@ -87,14 +92,15 @@ const defaultValues = {
export function StudentEditForm(): React.JSX.Element {
const router = useRouter();
const { t } = useTranslation(['lp_categories']);
const { t } = useTranslation(['students']);
const { customerId } = useParams<{ customerId: string }>();
const { id: studentId } = useParams<{ id: string }>();
//
const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
const [showLoading, setShowLoading] = React.useState<boolean>(false);
//
const [showError, setShowError] = React.useState({ show: false, detail: '' });
const [billingAddressId, setBillingAddressId] = React.useState<string | null>(null);
const {
control,
@@ -110,30 +116,38 @@ export function StudentEditForm(): React.JSX.Element {
setIsUpdating(true);
const updateData = {
avatar: values.avatar ? await base64ToFile(values.avatar) : null,
//
name: values.name,
email: values.email,
phone: values.phone,
company: values.company,
billingAddress: values.billingAddress,
taxId: values.taxId,
//
// billingAddress: values.billingAddress,
//
timezone: values.timezone,
language: values.language,
currency: values.currency,
avatar: values.avatar ? await base64ToFile(values.avatar) : null,
taxId: values.taxId,
};
try {
await pb.collection(COL_CUSTOMERS).update(customerId, updateData);
toast.success('Customer updated successfully');
// await pb.collection(COL_USER_METAS).update(studentId, updateData);
await UpdateStudentById(studentId, updateData);
toast.success('Student updated successfully');
router.push(paths.dashboard.students.list);
if (billingAddressId) {
await UpdateBillingAddressById(billingAddressId, values.billingAddress);
}
} catch (error) {
logger.error(error);
toast.error('Failed to update customer');
toast.error('Failed to update student');
} finally {
setIsUpdating(false);
}
},
[customerId, router]
[studentId, router]
);
const avatarInputRef = React.useRef<HTMLInputElement>(null);
@@ -162,13 +176,14 @@ export function StudentEditForm(): React.JSX.Element {
setShowLoading(true);
try {
const result = await pb.collection(COL_CUSTOMERS).getOne(id);
const result = await getStudentById(id);
reset({ ...defaultValues, ...result });
console.log({ result });
if (result.avatar_file) {
setBillingAddressId(result.billingAddress.id);
if (result.avatar) {
const fetchResult = await fetch(
`http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.avatar_file}`
`http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.avatar}`
);
const blob = await fetchResult.blob();
const url = await fileToBase64(blob);
@@ -176,7 +191,7 @@ export function StudentEditForm(): React.JSX.Element {
}
} catch (error) {
logger.error(error);
toast.error('Failed to load customer data');
toast.error('Failed to load student data');
setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
} finally {
setShowLoading(false);
@@ -186,9 +201,9 @@ export function StudentEditForm(): React.JSX.Element {
);
React.useEffect(() => {
void loadExistingData(customerId);
void loadExistingData(studentId);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [customerId]);
}, [studentId]);
if (showLoading) return <FormLoading />;
if (showError.show)
@@ -299,7 +314,7 @@ export function StudentEditForm(): React.JSX.Element {
error={Boolean(errors.email)}
fullWidth
>
<InputLabel required>Email</InputLabel>
<InputLabel required>{t('edit.email-address')}</InputLabel>
<OutlinedInput
{...field}
type="email"
@@ -321,7 +336,7 @@ export function StudentEditForm(): React.JSX.Element {
error={Boolean(errors.phone)}
fullWidth
>
<InputLabel required>Phone</InputLabel>
<InputLabel required>{t('edit.phone-number')}</InputLabel>
<OutlinedInput {...field} />
{errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
</FormControl>
@@ -354,7 +369,7 @@ export function StudentEditForm(): React.JSX.Element {
</Stack>
{/* */}
<Stack spacing={3}>
<Typography variant="h6">Billing Information</Typography>
<Typography variant="h6">{t('edit.billing-information')}</Typography>
<Grid
container
spacing={3}
@@ -373,9 +388,12 @@ export function StudentEditForm(): React.JSX.Element {
>
<InputLabel required>Country</InputLabel>
<Select {...field}>
<MenuItem value="">No Country selected</MenuItem>
<MenuItem value="US">United States</MenuItem>
<MenuItem value="UK">United Kingdom</MenuItem>
<MenuItem value="CA">Canada</MenuItem>
<MenuItem value="DE">Germany</MenuItem>
<MenuItem value="ES">Spain</MenuItem>
</Select>
{errors.billingAddress?.country ? (
<FormHelperText>{errors.billingAddress.country.message}</FormHelperText>
@@ -438,7 +456,7 @@ export function StudentEditForm(): React.JSX.Element {
error={Boolean(errors.billingAddress?.zipCode)}
fullWidth
>
<InputLabel required>Zip Code</InputLabel>
<InputLabel required>{t('edit.zip-code')}</InputLabel>
<OutlinedInput {...field} />
{errors.billingAddress?.zipCode ? (
<FormHelperText>{errors.billingAddress.zipCode.message}</FormHelperText>
@@ -459,7 +477,7 @@ export function StudentEditForm(): React.JSX.Element {
error={Boolean(errors.billingAddress?.line1)}
fullWidth
>
<InputLabel required>Address Line 1</InputLabel>
<InputLabel required>{t('edit.address-line-1')}</InputLabel>
<OutlinedInput {...field} />
{errors.billingAddress?.line1 ? (
<FormHelperText>{errors.billingAddress.line1.message}</FormHelperText>
@@ -494,7 +512,7 @@ export function StudentEditForm(): React.JSX.Element {
</Stack>
<Stack spacing={3}>
<Typography variant="h6">Additional Information</Typography>
<Typography variant="h6">{t('edit.additional-information')}</Typography>
<Grid
container
spacing={3}
@@ -541,8 +559,10 @@ export function StudentEditForm(): React.JSX.Element {
>
<InputLabel required>Language</InputLabel>
<Select {...field}>
<MenuItem value="">no language selected</MenuItem>
<MenuItem value="en">English</MenuItem>
<MenuItem value="es">Spanish</MenuItem>
<MenuItem value="de">German</MenuItem>
<MenuItem value="fr">French</MenuItem>
</Select>
{errors.language ? <FormHelperText>{errors.language.message}</FormHelperText> : null}
@@ -562,8 +582,9 @@ export function StudentEditForm(): React.JSX.Element {
error={Boolean(errors.currency)}
fullWidth
>
<InputLabel required>Currency</InputLabel>
<InputLabel required>{t('edit.currency')}</InputLabel>
<Select {...field}>
<MenuItem value="">no currency selected</MenuItem>
<MenuItem value="USD">USD</MenuItem>
<MenuItem value="EUR">EUR</MenuItem>
<MenuItem value="GBP">GBP</MenuItem>

22
002_source/cms/src/components/dashboard/student/type.d.tsx
View File

@@ -23,21 +23,23 @@ export interface CreateFormProps {
email: string;
phone?: string;
company?: string;
billingAddress?: {
country: string;
state: string;
city: string;
zipCode: string;
line1: string;
line2?: string;
};
// handle seperately
// billingAddress?: {
// country: string;
// state: string;
// city: string;
// zipCode: string;
// line1: string;
// line2?: string;
// };
taxId?: string;
timezone: string;
language: string;
currency: string;
avatar?: string;
avatar?: File | null;
// quota?: number;
// status?: 'pending' | 'active' | 'blocked';
state?: 'pending' | 'active' | 'blocked';
meta: Record<string, null>;
}
// RULES: form data structure for editing existing student