update init student,

This commit is contained in:
louiscklaw
2025-04-24 12:40:42 +08:00
parent 90835a7fe3
commit a3d2ee57f7
19 changed files with 111 additions and 123 deletions

View File

@@ -14,13 +14,13 @@ 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 { Customer } from '@/components/dashboard/customer/type.d';
import type { Student } from '@/components/dashboard/student/type.d';
export default function BasicDetailCard({
lpModel: model,
handleEditClick,
}: {
lpModel: Customer;
lpModel: Student;
handleEditClick: () => void;
}): React.JSX.Element {
const { t } = useTranslation();

View File

@@ -9,17 +9,17 @@ 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 { Customer } from '@/components/dashboard/customer/type.d';
import type { Student } from '@/components/dashboard/student/type.d';
// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
function getImageUrlFrRecord(record: Customer): string {
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: Customer }): React.JSX.Element {
export default function SampleTitleCard({ lpModel }: { lpModel: Student }): React.JSX.Element {
const { t } = useTranslation();
return (

View File

@@ -24,13 +24,13 @@ import { toast } from '@/components/core/toaster';
import ErrorDisplay from '@/components/dashboard/error';
import { Notifications } from '@/components/dashboard/customer/notifications';
import { Notifications } from '@/components/dashboard/student/notifications';
import FormLoading from '@/components/loading';
import BasicDetailCard from './BasicDetailCard';
import TitleCard from './TitleCard';
import { defaultCustomer } from '@/components/dashboard/customer/_constants';
import type { Customer } from '@/components/dashboard/customer/type.d';
import { COL_CUSTOMERS } from '@/constants';
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();
@@ -41,18 +41,18 @@ export default function Page(): React.JSX.Element {
const [showLoading, setShowLoading] = React.useState<boolean>(true);
const [showError, setShowError] = React.useState({ show: false, detail: '' });
//
const [showLessonCategory, setShowLessonCategory] = React.useState<Customer>(defaultCustomer);
const [showLessonCategory, setShowLessonCategory] = React.useState<Student>(defaultStudent);
function handleEditClick(): void {
router.push(paths.dashboard.customers.edit(showLessonCategory.id));
router.push(paths.dashboard.students.edit(showLessonCategory.id));
}
React.useEffect(() => {
if (customerId) {
pb.collection(COL_CUSTOMERS)
pb.collection(COL_STUDENTS)
.getOne(customerId)
.then((model: RecordModel) => {
setShowLessonCategory({ ...defaultCustomer, ...model });
setShowLessonCategory({ ...defaultStudent, ...model });
})
.catch((err) => {
logger.error(err);
@@ -93,12 +93,12 @@ export default function Page(): React.JSX.Element {
<Link
color="text.primary"
component={RouterLink}
href={paths.dashboard.customers.list}
href={paths.dashboard.students.list}
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
variant="subtitle2"
>
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
Customers
Students
</Link>
</div>
<Stack

View File

@@ -9,7 +9,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
import { config } from '@/config';
import { paths } from '@/paths';
import { CustomerCreateForm } from '@/components/dashboard/customer/customer-create-form';
import { CustomerCreateForm } from '@/components/dashboard/student/student-create-form';
export const metadata = { title: `Create | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;

View File

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
import { CrCategoryEditForm } from '@/components/dashboard/cr/categories/cr-category-edit-form';
import { CustomerEditForm } from '@/components/dashboard/customer/customer-edit-form';
import { StudentEditForm } from '@/components/dashboard/student/student-edit-form';
export default function Page(): React.JSX.Element {
const { t } = useTranslation(['lp_categories']);
@@ -35,7 +35,7 @@ export default function Page(): React.JSX.Element {
<Link
color="text.primary"
component={RouterLink}
href={paths.dashboard.cr_categories.list}
href={paths.dashboard.students.list}
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
variant="subtitle2"
>
@@ -47,7 +47,7 @@ export default function Page(): React.JSX.Element {
<Typography variant="h4">{t('edit.title')}</Typography>
</div>
</Stack>
<CustomerEditForm />
<StudentEditForm />
</Stack>
</Box>
);

View File

@@ -19,12 +19,12 @@ import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import type { ListResult, RecordModel } from 'pocketbase';
import { config } from '@/config';
import { CustomersFilters } from '@/components/dashboard/customer/customers-filters';
// import type { Filters } from '@/components/dashboard/customer/customers-filters';
import { CustomersPagination } from '@/components/dashboard/customer/customers-pagination';
import { CustomersSelectionProvider } from '@/components/dashboard/customer/customers-selection-context';
import { CustomersTable } from '@/components/dashboard/customer/customers-table';
import type { Customer, Filters } from '@/components/dashboard/customer/type.d';
import { StudentsFilters } from '@/components/dashboard/student/students-filters';
// import type { Filters } from '@/components/dashboard/student/customers-filters';
import { StudentsPagination } from '@/components/dashboard/student/students-pagination';
import { StudentsSelectionProvider } from '@/components/dashboard/student/students-selection-context';
import { StudentsTable } from '@/components/dashboard/student/students-table';
import type { Student, Filters } from '@/components/dashboard/student/type.d';
import { SampleCustomers } from './SampleCustomers';
import { useTranslation } from 'react-i18next';
@@ -34,7 +34,7 @@ import { logger } from '@/lib/default-logger';
import { pb } from '@/lib/pb';
import { toast } from '@/components/core/toaster';
import ErrorDisplay from '@/components/dashboard/error';
import { defaultCustomer } from '@/components/dashboard/customer/_constants';
import { defaultStudent } from '@/components/dashboard/student/_constants';
import FormLoading from '@/components/loading';
export default function Page({ searchParams }: PageProps): React.JSX.Element {
@@ -43,7 +43,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
const { email, phone, sortDir, status } = searchParams;
const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Customer[]>([]);
const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Student[]>([]);
//
const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
@@ -52,7 +52,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
//
const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
//
const [f, setF] = React.useState<Customer[]>([]);
const [f, setF] = React.useState<Student[]>([]);
const [currentPage, setCurrentPage] = React.useState<number>(0);
//
const [recordCount, setRecordCount] = React.useState<number>(0);
@@ -70,8 +70,8 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
.collection(COL_CUSTOMERS)
.getList(currentPage + 1, rowsPerPage, listOption);
const { items, totalItems } = models;
const tempLessonTypes: Customer[] = items.map((lt) => {
return { ...defaultCustomer, ...lt };
const tempLessonTypes: Student[] = items.map((lt) => {
return { ...defaultStudent, ...lt };
});
setLessonCategoriesData(tempLessonTypes);
@@ -183,22 +183,22 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
</LoadingButton>
</Box>
</Stack>
<CustomersSelectionProvider customers={f}>
<StudentsSelectionProvider customers={f}>
<Card>
<CustomersFilters
<StudentsFilters
filters={{ email, phone, status }}
fullData={lessonCategoriesData}
sortDir={sortDir}
/>
<Divider />
<Box sx={{ overflowX: 'auto' }}>
<CustomersTable
<StudentsTable
reloadRows={reloadRows}
rows={f}
/>
</Box>
<Divider />
<CustomersPagination
<StudentsPagination
count={recordCount}
page={currentPage}
rowsPerPage={rowsPerPage}
@@ -206,7 +206,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
setRowsPerPage={setRowsPerPage}
/>
</Card>
</CustomersSelectionProvider>
</StudentsSelectionProvider>
</Stack>
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
<pre>{JSON.stringify(f, null, 2)}</pre>
@@ -217,7 +217,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
// Sorting and filtering has to be done on the server.
function applySort(row: Customer[], sortDir: 'asc' | 'desc' | undefined): Customer[] {
function applySort(row: Student[], sortDir: 'asc' | 'desc' | undefined): Student[] {
return row.sort((a, b) => {
if (sortDir === 'asc') {
return a.createdAt.getTime() - b.createdAt.getTime();
@@ -227,7 +227,7 @@ function applySort(row: Customer[], sortDir: 'asc' | 'desc' | undefined): Custom
});
}
function applyFilters(row: Customer[], { email, phone, status }: Filters): Customer[] {
function applyFilters(row: Student[], { email, phone, status }: Filters): Student[] {
return row.filter((item) => {
if (email) {
if (!item.email?.toLowerCase().includes(email.toLowerCase())) {

View File

@@ -35,7 +35,7 @@ export default function Page(): React.JSX.Element {
<Link
color="text.primary"
component={RouterLink}
href={paths.dashboard.cr_categories.list}
href={paths.dashboard.teachers.list}
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
variant="subtitle2"
>

View File

@@ -1,9 +1,6 @@
'use client';
import * as React from 'react';
import { useRouter } from 'next/navigation';
import { COL_LESSON_TYPES } from '@/constants';
import deleteQuizLPCategories from '@/db/QuizListenings/Delete';
import { LoadingButton } from '@mui/lab';
import { Button, Container, Modal, Paper } from '@mui/material';
import Avatar from '@mui/material/Avatar';
@@ -11,7 +8,6 @@ import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
import PocketBase from 'pocketbase';
import { useTranslation } from 'react-i18next';
import { logger } from '@/lib/default-logger';

View File

@@ -3,9 +3,9 @@
// empty valur for customer
import { dayjs } from '@/lib/dayjs';
import type { Customer } from './type.d';
import type { Student } from './type.d';
export const defaultCustomer: Customer = {
export const defaultStudent: Student = {
id: '',
name: '',
avatar: undefined,
@@ -16,6 +16,6 @@ export const defaultCustomer: Customer = {
createdAt: dayjs().toDate(),
};
export const emptyLpCategory: Customer = {
...defaultCustomer,
export const emptyLpCategory: Student = {
...defaultStudent,
};

View File

@@ -1,9 +1,6 @@
'use client';
import * as React from 'react';
import { useRouter } from 'next/navigation';
import { COL_LESSON_TYPES } from '@/constants';
import deleteQuizLPCategories from '@/db/QuizListenings/Delete';
import { LoadingButton } from '@mui/lab';
import { Button, Container, Modal, Paper } from '@mui/material';
import Avatar from '@mui/material/Avatar';
@@ -11,12 +8,11 @@ import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
import PocketBase from 'pocketbase';
import { useTranslation } from 'react-i18next';
import { logger } from '@/lib/default-logger';
import { toast } from '@/components/core/toaster';
import { deleteCustomer } from '@/db/Customers/Delete';
import { deleteStudent } from '@/db/Students/Delete';
export default function ConfirmDeleteModal({
open,
@@ -49,7 +45,7 @@ export default function ConfirmDeleteModal({
setIsDeleteing(true);
// RULES: delete<CollectionName>
deleteCustomer(idToDelete)
deleteStudent(idToDelete)
.then(() => {
reloadRows();
handleClose();

View File

@@ -1,43 +0,0 @@
'use client';
import * as React from 'react';
import { useSelection } from '@/hooks/use-selection';
import type { Selection } from '@/hooks/use-selection';
import type { Customer } from './type.d';
function noop(): void {
return undefined;
}
export interface CustomersSelectionContextValue extends Selection {}
export const CustomersSelectionContext = React.createContext<CustomersSelectionContextValue>({
deselectAll: noop,
deselectOne: noop,
selectAll: noop,
selectOne: noop,
selected: new Set(),
selectedAny: false,
selectedAll: false,
});
interface CustomersSelectionProviderProps {
children: React.ReactNode;
customers: Customer[];
}
export function CustomersSelectionProvider({
children,
customers = [],
}: CustomersSelectionProviderProps): React.JSX.Element {
const customerIds = React.useMemo(() => customers.map((customer) => customer.id), [customers]);
const selection = useSelection(customerIds);
return <CustomersSelectionContext.Provider value={{ ...selection }}>{children}</CustomersSelectionContext.Provider>;
}
export function useCustomersSelection(): CustomersSelectionContextValue {
return React.useContext(CustomersSelectionContext);
}

View File

@@ -104,7 +104,7 @@ export function CustomerCreateForm(): React.JSX.Element {
// Use standard create method from db/Customers/Create
const record = await createCustomer(values);
toast.success('Customer created');
router.push(paths.dashboard.customers.details(record.id));
router.push(paths.dashboard.students.details(record.id));
} catch (err) {
logger.error(err);
toast.error('Failed to create customer');
@@ -509,7 +509,7 @@ export function CustomerCreateForm(): React.JSX.Element {
<Button
color="secondary"
component={RouterLink}
href={paths.dashboard.customers.list}
href={paths.dashboard.students.list}
>
Cancel
</Button>

View File

@@ -85,7 +85,7 @@ const defaultValues = {
avatar: '',
} satisfies Values;
export function CustomerEditForm(): React.JSX.Element {
export function StudentEditForm(): React.JSX.Element {
const router = useRouter();
const { t } = useTranslation(['lp_categories']);
@@ -125,7 +125,7 @@ export function CustomerEditForm(): React.JSX.Element {
try {
await pb.collection(COL_CUSTOMERS).update(customerId, updateData);
toast.success('Customer updated successfully');
router.push(paths.dashboard.customers.list);
router.push(paths.dashboard.students.list);
} catch (error) {
logger.error(error);
toast.error('Failed to update customer');
@@ -581,7 +581,7 @@ export function CustomerEditForm(): React.JSX.Element {
<Button
color="secondary"
component={RouterLink}
href={paths.dashboard.customers.list}
href={paths.dashboard.students.list}
>
{t('edit.cancelButton')}
</Button>

View File

@@ -21,7 +21,7 @@ import { paths } from '@/paths';
import { FilterButton } from '@/components/core/filter-button';
import { Option } from '@/components/core/option';
import { useCustomersSelection } from './customers-selection-context';
import { useStudentsSelection } from './students-selection-context';
import GetBlockedCount from '@/db/Customers/GetBlockedCount';
import GetPendingCount from '@/db/Customers/GetPendingCount';
import GetActiveCount from '@/db/Customers/GetActiveCount';
@@ -29,7 +29,7 @@ import PhoneFilterPopover from './phone-filter-popover';
import EmailFilterPopover from './email-filter-popover';
import type { CustomersFiltersProps, Filters, SortDir } from './type.d';
export function CustomersFilters({
export function StudentsFilters({
filters = {},
sortDir = 'desc',
fullData,
@@ -45,7 +45,7 @@ export function CustomersFilters({
const router = useRouter();
const selection = useCustomersSelection();
const selection = useStudentsSelection();
// function getVisible(): number {
// return fullData.reduce((count, item: CrQuestion) => {
@@ -87,7 +87,7 @@ export function CustomersFilters({
searchParams.set('phone', newFilters.phone);
}
router.push(`${paths.dashboard.customers.list}?${searchParams.toString()}`);
router.push(`${paths.dashboard.students.list}?${searchParams.toString()}`);
},
[router]
);

View File

@@ -7,7 +7,7 @@ function noop(): void {
return undefined;
}
interface CustomersPaginationProps {
interface StudentsPaginationProps {
count: number;
page: number;
//
@@ -16,14 +16,14 @@ interface CustomersPaginationProps {
rowsPerPage: number;
}
export function CustomersPagination({
export function StudentsPagination({
count,
page,
//
setPage,
setRowsPerPage,
rowsPerPage,
}: CustomersPaginationProps): React.JSX.Element {
}: StudentsPaginationProps): React.JSX.Element {
// You should implement the pagination using a similar logic as the filters.
// Note that when page change, you should keep the filter search params.
const handleChangePage = (event: unknown, newPage: number) => {

View File

@@ -0,0 +1,43 @@
'use client';
import * as React from 'react';
import { useSelection } from '@/hooks/use-selection';
import type { Selection } from '@/hooks/use-selection';
import type { Student } from './type.d';
function noop(): void {
return undefined;
}
export interface StudentsSelectionContextValue extends Selection {}
export const StudentsSelectionContext = React.createContext<StudentsSelectionContextValue>({
deselectAll: noop,
deselectOne: noop,
selectAll: noop,
selectOne: noop,
selected: new Set(),
selectedAny: false,
selectedAll: false,
});
interface StudentsSelectionProviderProps {
children: React.ReactNode;
customers: Student[];
}
export function StudentsSelectionProvider({
children,
customers = [],
}: StudentsSelectionProviderProps): React.JSX.Element {
const customerIds = React.useMemo(() => customers.map((customer) => customer.id), [customers]);
const selection = useSelection(customerIds);
return <StudentsSelectionContext.Provider value={{ ...selection }}>{children}</StudentsSelectionContext.Provider>;
}
export function useStudentsSelection(): StudentsSelectionContextValue {
return React.useContext(StudentsSelectionContext);
}

View File

@@ -27,10 +27,10 @@ import { DataTable } from '@/components/core/data-table';
import type { ColumnDef } from '@/components/core/data-table';
import ConfirmDeleteModal from './confirm-delete-modal';
import { useCustomersSelection } from './customers-selection-context';
import type { Customer } from './type.d';
import { useStudentsSelection } from './students-selection-context';
import type { Student } from './type.d';
function columns(handleDeleteClick: (testId: string) => void): ColumnDef<Customer>[] {
function columns(handleDeleteClick: (testId: string) => void): ColumnDef<Student>[] {
return [
{
formatter: (row): React.JSX.Element => (
@@ -44,7 +44,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<Custome
<Link
color="inherit"
component={RouterLink}
href={paths.dashboard.customers.details(row.id)}
href={paths.dashboard.students.details(row.id)}
sx={{ whiteSpace: 'nowrap' }}
variant="subtitle2"
>
@@ -143,7 +143,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<Custome
//
color="secondary"
component={RouterLink}
href={paths.dashboard.customers.details(row.id)}
href={paths.dashboard.students.details(row.id)}
>
<PencilSimpleIcon size={24} />
</LoadingButton>
@@ -166,14 +166,14 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<Custome
];
}
export interface CustomersTableProps {
rows: Customer[];
export interface StudentsTableProps {
rows: Student[];
reloadRows: () => void;
}
export function CustomersTable({ rows, reloadRows }: CustomersTableProps): React.JSX.Element {
export function StudentsTable({ rows, reloadRows }: StudentsTableProps): React.JSX.Element {
const { t } = useTranslation(['customers']);
const { deselectAll, deselectOne, selectAll, selectOne, selected } = useCustomersSelection();
const { deselectAll, deselectOne, selectAll, selectOne, selected } = useStudentsSelection();
const [idToDelete, setIdToDelete] = React.useState('');
const [open, setOpen] = React.useState(false);
@@ -191,7 +191,7 @@ export function CustomersTable({ rows, reloadRows }: CustomersTableProps): React
reloadRows={reloadRows}
setOpen={setOpen}
/>
<DataTable<Customer>
<DataTable<Student>
columns={columns(handleDeleteClick)}
onDeselectAll={deselectAll}
onDeselectOne={(_, row) => {

View File

@@ -2,7 +2,7 @@
export type SortDir = 'asc' | 'desc';
export interface Customer {
export interface Student {
id: string;
name: string;
avatar?: string;
@@ -60,7 +60,7 @@ export interface EditFormProps {
export interface CustomersFiltersProps {
filters?: Filters;
sortDir?: SortDir;
fullData: Customer[];
fullData: Student[];
}
export interface Filters {
email?: string;

View File

@@ -1,9 +1,6 @@
'use client';
import * as React from 'react';
import { useRouter } from 'next/navigation';
import { COL_LESSON_TYPES } from '@/constants';
import deleteQuizLPCategories from '@/db/QuizListenings/Delete';
import { LoadingButton } from '@mui/lab';
import { Button, Container, Modal, Paper } from '@mui/material';
import Avatar from '@mui/material/Avatar';
@@ -11,7 +8,6 @@ import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
import PocketBase from 'pocketbase';
import { useTranslation } from 'react-i18next';
import { logger } from '@/lib/default-logger';