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

update categories,

Browse Source
This commit is contained in:
louiscklaw
2025-04-17 07:09:02 +08:00
parent c4c392b91b
commit 36cc5b9095
11 changed files with 165 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
002_source/cms/src/app/dashboard/lesson_categories/[customerId]/page.tsx → 002_source/cms/src/app/dashboard/lesson_categories/[cat_id]/page.tsx
View File

@@ -3,6 +3,8 @@
import * as React from 'react';
// import type { Metadata } from 'next';
import RouterLink from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import { COL_LESSON_CATEGORIES } from '@/constants';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
@@ -26,22 +28,58 @@ import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
import { RecordModel } from 'pocketbase';
import { useTranslation } from 'react-i18next';
import { config } from '@/config';
import { paths } from '@/paths';
import { dayjs } from '@/lib/dayjs';
import { logger } from '@/lib/default-logger';
import { pb } from '@/lib/pb';
import { PropertyItem } from '@/components/core/property-item';
import { PropertyList } from '@/components/core/property-list';
import { toast } from '@/components/core/toaster';
import { defaultLessonCategory } from '@/components/dashboard/lesson_category/_constants.ts';
// import { defaultLessonCategory } from '@/components/dashboard/lesson_category/defaultLessonCategory';
import { Notifications } from '@/components/dashboard/lesson_category/notifications';
import { Payments } from '@/components/dashboard/lesson_category/payments';
import type { Address } from '@/components/dashboard/lesson_category/shipping-address';
import { ShippingAddress } from '@/components/dashboard/lesson_category/shipping-address';
import type { LessonCategory } from '@/components/dashboard/lesson_category/type.d.ts';
import FormLoading from '@/components/loading';
// export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
export default function Page(): React.JSX.Element {
let { t } = useTranslation();
const { t } = useTranslation();
const router = useRouter();
//
const { cat_id: catId } = useParams<{ cat_id: string }>();
//
const [showLoadin, setIsLoading] = React.useState<boolean>(true);
const [showError, setShowError] = React.useState<boolean>(false);
//
const [showLessonCategory, setShowLessonCategory] = React.useState<LessonCategory>(defaultLessonCategory);
function handleEditClick() {
router.push(paths.dashboard.lesson_categories.edit(showLessonCategory.id));
}
React.useEffect(() => {
if (catId) {
pb.collection(COL_LESSON_CATEGORIES)
.getOne(catId)
.then((model: RecordModel) => {
setShowLessonCategory({ ...defaultLessonCategory, ...model });
setIsLoading(false);
})
.catch((err) => {
logger.error(err);
toast(t('dashboard.lessonTypes.list.error'));
});
}
}, [catId]);
if (showLoadin) return <FormLoading />;
return (
<Box
@@ -73,16 +111,16 @@ export default function Page(): React.JSX.Element {
</Avatar>
<div>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
<Typography variant="h4">Miron Vitold</Typography>
<Typography variant="h4">{showLessonCategory.name}</Typography>
<Chip
icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
label="Active"
label={showLessonCategory.visible}
size="small"
variant="outlined"
/>
</Stack>
<Typography color="text.secondary" variant="body1">
miron.vitold@domain.com
{showLessonCategory.id}
</Typography>
</div>
</Stack>
@@ -99,7 +137,11 @@ export default function Page(): React.JSX.Element {
<Card>
<CardHeader
action={
<IconButton>
<IconButton
onClick={() => {
handleEditClick();
}}
>
<PencilSimpleIcon />
</IconButton>
}
@@ -117,11 +159,20 @@ export default function Page(): React.JSX.Element {
>
{(
[
{ key: 'Customer ID', value: <Chip label="USR-001" size="small" variant="soft" /> },
{ key: 'Name', value: 'Miron Vitold' },
{ key: 'Email', value: 'miron.vitold@domain.com' },
{ key: 'Phone', value: '(425) 434-5535' },
{ key: 'Company', value: 'Devias IO' },
{ key: 'Customer ID', value: <Chip label={showLessonCategory.id} size="small" variant="soft" /> },
{ key: 'Name', value: showLessonCategory.name },
{ key: 'Pos', value: showLessonCategory.pos },
{
key: 'Visible',
value: (
<Chip
//
label={showLessonCategory.visible}
size="small"
variant="soft"
/>
),
},
{
key: 'Quota',
value: (
@@ -158,7 +209,7 @@ export default function Page(): React.JSX.Element {
</Button>
</div>
<Typography color="text.secondary" variant="body2">
A deleted customer cannot be restored. All data will be permanently removed.
A deleted lesson category cannot be restored. All data will be permanently removed.
</Typography>
</Stack>
</CardContent>

4
002_source/cms/src/app/dashboard/lesson_categories/lesson-categories-sample-data.tsx
View File

@@ -1,6 +1,8 @@
import { dayjs } from '@/lib/dayjs';
import { LessonCategory } from '@/components/dashboard/lesson_category/type';
// import type { LessonCategory } from '@/components/dashboard/lesson_category/lesson-categories-table';
import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
// import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
export const lessonCategoriesSampleData = [
{

6
002_source/cms/src/app/dashboard/lesson_categories/page.tsx
View File

@@ -18,15 +18,17 @@ import { logger } from '@/lib/default-logger';
import { pb } from '@/lib/pb';
import { toast } from '@/components/core/toaster';
import ErrorDisplay from '@/components/dashboard/error';
import { defaultLessonCategory, type LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
import { defaultLessonCategory } from '@/components/dashboard/lesson_category/_constants';
// import { defaultLessonCategory, type LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
import { LessonCategoriesFilters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
import type { Filters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
import { LessonCategoriesPagination } from '@/components/dashboard/lesson_category/lesson-categories-pagination';
import { LessonCategoriesSelectionProvider } from '@/components/dashboard/lesson_category/lesson-categories-selection-context';
import { LessonCategoriesTable } from '@/components/dashboard/lesson_category/lesson-categories-table';
import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
import FormLoading from '@/components/loading';
import { lessonCategoriesSampleData } from './lesson-categories-sample-data';
// import { lessonCategoriesSampleData } from './lesson-categories-sample-data';
interface PageProps {
searchParams: {

25
002_source/cms/src/app/dashboard/lesson_types/[typeId]/page.tsx → 002_source/cms/src/app/dashboard/lesson_types/[type_id]/page.tsx
View File

@@ -27,7 +27,6 @@ import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
import type { RecordModel } from 'pocketbase';
import PocketBase from 'pocketbase';
import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
@@ -47,11 +46,15 @@ import { ShippingAddress } from '@/components/dashboard/lesson_type/shipping-add
export default function Page(): React.JSX.Element {
const { t } = useTranslation();
const { typeId } = useParams<{ typeId: string }>();
const [isLoading, setIsLoading] = React.useState<boolean>(true);
const [showLessonType, setShowLessonType] = React.useState<LessonType>(LessonTypeDefaultValue);
const router = useRouter();
const { type_id: typeId } = useParams<{ type_id: string }>();
//
const [showLoading, setIsLoading] = React.useState<boolean>(true);
const [showError, setShowError] = React.useState<boolean>(false);
//
const [showLessonType, setShowLessonType] = React.useState<LessonType>(LessonTypeDefaultValue);
function handleEditClick() {
router.push(paths.dashboard.lesson_types.edit(showLessonType.id));
}
@@ -71,7 +74,7 @@ export default function Page(): React.JSX.Element {
}
}, [typeId]);
if (isLoading) return <div>{t('common.loading')}</div>;
if (showLoading) return <div>{t('common.loading')}</div>;
return (
<Box
@@ -155,7 +158,17 @@ export default function Page(): React.JSX.Element {
{ key: 'Name', value: showLessonType.name },
{ key: 'Type', value: showLessonType.type },
{ key: 'Pos', value: showLessonType.pos },
{ key: 'Visible', value: <Chip label={showLessonType.visible} size="small" variant="soft" /> },
{
key: 'Visible',
value: (
<Chip
//
label={showLessonType.visible}
size="small"
variant="soft"
/>
),
},
{
key: 'Quota',
value: (

37
002_source/cms/src/components/dashboard/lesson_category/_constants.ts Normal file
View File

@@ -0,0 +1,37 @@
import { dayjs } from '@/lib/dayjs';
import type { CreateForm, LessonCategory } from './type';
export const defaultLessonCategory: LessonCategory = {
isEmpty: false,
id: 'default-id',
cat_name: 'default-category-name',
cat_image_url: undefined,
cat_image: undefined,
pos: 0,
visible: 'hidden',
lesson_id: 'default-lesson-id',
description: 'default-description',
remarks: 'default-remarks',
//
createdAt: dayjs('2099-01-01').toDate(),
//
name: '',
avatar: '',
email: '',
phone: '',
quota: 0,
status: 'NA',
};
export const LessonCategoryCreateFormDefault: CreateForm = {
name: '',
type: '',
pos: 1,
visible: 'visible',
};
export const emptyLessonCategory: LessonCategory = {
...defaultLessonCategory,
isEmpty: true,
};

0
002_source/cms/src/components/dashboard/lesson_category/interfaces.ts → 002_source/cms/src/components/dashboard/lesson_category/interfaces.1ts
View File

5
002_source/cms/src/components/dashboard/lesson_category/lesson-categories-selection-context.tsx
View File

@@ -4,8 +4,11 @@ import * as React from 'react';
import { useSelection } from '@/hooks/use-selection';
import type { Selection } from '@/hooks/use-selection';
import type { LessonCategory } from './type';
// import type { LessonCategory } from './lesson-categories-table';
import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
// import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
function noop(): void {
return undefined;

3
002_source/cms/src/components/dashboard/lesson_category/lesson-categories-table.tsx
View File

@@ -26,8 +26,9 @@ import { DataTable } from '@/components/core/data-table';
import type { ColumnDef } from '@/components/core/data-table';
import ConfirmDeleteModal from './confirm-delete-modal';
import type { LessonCategory } from './interfaces';
// import type { LessonCategory } from './interfaces.1ts';
import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
import { LessonCategory } from './type';
function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonCategory>[] {
return [

28
002_source/cms/src/components/dashboard/lesson_category/type.d.ts vendored Normal file
View File

@@ -0,0 +1,28 @@
export interface LessonCategory {
isEmpty?: boolean;
//
id: string;
cat_name: string;
cat_image_url?: string;
cat_image?: string;
pos: number;
visible: string;
lesson_id: string;
description: string;
remarks: string;
//
name: string;
avatar: string;
email: string;
phone: string;
quota: number;
status: 'pending' | 'active' | 'blocked' | 'NA';
createdAt: Date;
}
export interface CreateForm {
name: string;
type: string;
pos: number;
visible: string;
}

7
002_source/cms/src/paths.ts
View File

@@ -79,13 +79,14 @@ export const paths = {
lesson_types: {
list: '/dashboard/lesson_types',
create: '/dashboard/lesson_types/create',
details: (lessonTypeId: string) => `/dashboard/lesson_types/${lessonTypeId}`,
edit: (lessonTypeId: string) => `/dashboard/lesson_types/edit/${lessonTypeId}`,
details: (typeId: string) => `/dashboard/lesson_types/${typeId}`,
edit: (typeId: string) => `/dashboard/lesson_types/edit/${typeId}`,
},
lesson_categories: {
list: '/dashboard/lesson_categories',
create: '/dashboard/lesson_categories/create',
details: (lessonTypeId: string) => `/dashboard/lesson_categories/${lessonTypeId}`,
details: (catId: string) => `/dashboard/lesson_categories/${catId}`,
edit: (catId: string) => `/dashboard/lesson_categories/edit/${catId}`,
},
customers: {
list: '/dashboard/customers',