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

update edit lesson categories,

Browse Source
This commit is contained in:
louiscklaw
2025-04-17 13:26:30 +08:00
parent 6b97358f50
commit ed0d058d04
29 changed files with 1255 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
002_source/cms/src/app/dashboard/lesson_categories/.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"git.ignoreLimitWarning": true
}

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

@@ -38,24 +38,25 @@ 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 ErrorDisplay from '@/components/dashboard/error';
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 type { LessonCategory } from '@/components/dashboard/lesson_category/types';
import FormLoading from '@/components/loading';
// export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
export default function Page(): React.JSX.Element {
const { t } = useTranslation();
const { t } = useTranslation(['common']);
const router = useRouter();
//
const { cat_id: catId } = useParams<{ cat_id: string }>();
//
const [showLoadin, setIsLoading] = React.useState<boolean>(true);
const [showLoading, setShowLoading] = React.useState<boolean>(true);
const [showError, setShowError] = React.useState<boolean>(false);
//
const [showLessonCategory, setShowLessonCategory] = React.useState<LessonCategory>(defaultLessonCategory);
@@ -70,16 +71,29 @@ export default function Page(): React.JSX.Element {
.getOne(catId)
.then((model: RecordModel) => {
setShowLessonCategory({ ...defaultLessonCategory, ...model });
setIsLoading(false);
})
.catch((err) => {
logger.error(err);
toast(t('dashboard.lessonTypes.list.error'));
setShowError(true);
})
.finally(() => {
setShowLoading(false);
});
}
}, [catId]);
if (showLoadin) return <FormLoading />;
if (showLoading) return <FormLoading />;
if (showError)
return (
<ErrorDisplay
message={t('error.unable-to-process-request', { ns: 'common' })}
code="500"
details={t('error.detailed-error-information', { ns: 'common' })}
/>
);
return (
<Box
@@ -106,8 +120,12 @@ export default function Page(): React.JSX.Element {
</div>
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
<Avatar src="/assets/avatar-1.png" sx={{ '--Avatar-size': '64px' }}>
MV
<Avatar
src={`http://127.0.0.1:8090/api/files/${showLessonCategory.collectionId}/${showLessonCategory.id}/${showLessonCategory.cat_image}`}
sx={{ '--Avatar-size': '64px' }}
variant="rounded"
>
empty
</Avatar>
<div>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
@@ -150,7 +168,7 @@ export default function Page(): React.JSX.Element {
<UserIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title="Basic details"
title={t('basic-details', { ns: 'lesson_category' })}
/>
<PropertyList
divider={<Divider />}
@@ -199,7 +217,7 @@ export default function Page(): React.JSX.Element {
<ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title="Security"
title={t('security', { ns: 'lesson_category' })}
/>
<CardContent>
<Stack spacing={1}>
@@ -272,7 +290,7 @@ export default function Page(): React.JSX.Element {
<CreditCardIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title="Billing details"
title={t('billing-details', { ns: 'lesson_category' })}
/>
<CardContent>
<Card sx={{ borderRadius: 1 }} variant="outlined">
@@ -307,7 +325,7 @@ export default function Page(): React.JSX.Element {
<HouseIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title="Shipping addresses"
title={t('shipping-addresses', { ns: 'lesson_category' })}
/>
<CardContent>
<Grid container spacing={3}>

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

@@ -34,11 +34,11 @@ export default function Page(): React.JSX.Element {
variant="subtitle2"
>
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
{t('dashboard.lessonCategories.title')}
{t('title', { ns: 'lesson_category' })}
</Link>
</div>
<div>
<Typography variant="h4">{t('dashboard.lessonCategories.create.title')}</Typography>
<Typography variant="h4">{t('create.title', { ns: 'lesson_category' })}</Typography>
</div>
</Stack>
<LessonCategoryCreateForm />

11
002_source/cms/src/app/dashboard/lesson_categories/edit/[cat_id]/_PROMPT.md Normal file
View File

@@ -0,0 +1,11 @@
# task
## instruction
with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/_helloworld/page.tsx`
with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_types/edit/[typeId]/page.tsx`
please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_categories/edit/page.tsx`
please draft a tsx for showing error to user thanks,

55
002_source/cms/src/app/dashboard/lesson_categories/edit/[cat_id]/page.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client';
import * as React from 'react';
import RouterLink from 'next/link';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
import { LessonCategoryEditForm } from '@/components/dashboard/lesson_category/lesson-category-edit-form';
// import { LessonCategoryEditForm } from '@/components/dashboard/lesson_category/lesson-category-edit-form';
export default function Page(): React.JSX.Element {
const { t } = useTranslation(['common', 'lesson_category']);
React.useEffect(() => {
console.log('helloworld');
}, []);
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.lesson_categories.list}
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
variant="subtitle2"
>
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
{t('edit.title', { ns: 'lesson_category' })}
</Link>
</div>
<div>
<Typography variant="h4">{t('edit.title', { ns: 'lesson_category' })}</Typography>
</div>
</Stack>
<LessonCategoryEditForm />
</Stack>
</Box>
);
}

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

@@ -1,5 +1,5 @@
import { dayjs } from '@/lib/dayjs';
import { LessonCategory } from '@/components/dashboard/lesson_category/type';
import { LessonCategory } from '@/components/dashboard/lesson_category/types';
// import type { LessonCategory } from '@/components/dashboard/lesson_category/lesson-categories-table';
// import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
@@ -14,6 +14,7 @@ export const lessonCategoriesSampleData = [
quota: 50,
status: 'active',
createdAt: dayjs().subtract(1, 'hour').toDate(),
collectionId: '0000000001',
cat_name: '',
pos: 99,
visible: 'visible',
@@ -30,6 +31,7 @@ export const lessonCategoriesSampleData = [
quota: 100,
status: 'active',
createdAt: dayjs().subtract(3, 'hour').toDate(),
collectionId: '0000000001',
cat_name: '',
pos: 99,
visible: 'visible',
@@ -46,6 +48,7 @@ export const lessonCategoriesSampleData = [
quota: 10,
status: 'blocked',
createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
collectionId: '0000000001',
cat_name: '',
pos: 99,
visible: 'visible',
@@ -62,6 +65,7 @@ export const lessonCategoriesSampleData = [
quota: 0,
status: 'pending',
createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
collectionId: '0000000001',
cat_name: '',
pos: 99,
visible: 'visible',
@@ -78,6 +82,7 @@ export const lessonCategoriesSampleData = [
quota: 50,
status: 'active',
createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
collectionId: '0000000001',
cat_name: '',
pos: 99,
visible: 'visible',

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

@@ -25,7 +25,7 @@ import type { Filters } from '@/components/dashboard/lesson_category/lesson-cate
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 type { LessonCategory } from '@/components/dashboard/lesson_category/types';
import FormLoading from '@/components/loading';
// import { lessonCategoriesSampleData } from './lesson-categories-sample-data';
@@ -44,7 +44,7 @@ interface PageProps {
}
export default function Page({ searchParams }: PageProps): React.JSX.Element {
const { t } = useTranslation();
const { t } = useTranslation(['common']);
const { email, phone, sortDir, spStatus } = searchParams;
const router = useRouter();
@@ -96,9 +96,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
if (showError)
return (
<ErrorDisplay
message={t('"Unable to process request"')}
message={t('error.unable-to-process-request', { ns: 'common' })}
code="500"
details={t('Detailed error information...')}
details={t('error.detailed-error-information', { ns: 'common' })}
/>
);

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

@@ -36,6 +36,7 @@ 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 ErrorDisplay from '@/components/dashboard/error';
// import { getLessonTypeById } from '@/components/dashboard/lesson_type/http-actions';
import { LessonTypeDefaultValue, type LessonType } from '@/components/dashboard/lesson_type/ILessonType';
import { defaultLessonType } from '@/components/dashboard/lesson_type/interfaces';
@@ -43,14 +44,15 @@ import { Notifications } from '@/components/dashboard/lesson_type/notifications'
import { Payments } from '@/components/dashboard/lesson_type/payments';
import type { Address } from '@/components/dashboard/lesson_type/shipping-address';
import { ShippingAddress } from '@/components/dashboard/lesson_type/shipping-address';
import FormLoading from '@/components/loading';
export default function Page(): React.JSX.Element {
const { t } = useTranslation();
const { t } = useTranslation(['common']);
const router = useRouter();
//
const { type_id: typeId } = useParams<{ type_id: string }>();
//
const [showLoading, setIsLoading] = React.useState<boolean>(true);
const [showLoading, setShowLoading] = React.useState<boolean>(true);
const [showError, setShowError] = React.useState<boolean>(false);
//
const [showLessonType, setShowLessonType] = React.useState<LessonType>(LessonTypeDefaultValue);
@@ -63,18 +65,31 @@ export default function Page(): React.JSX.Element {
if (typeId) {
pb.collection('LessonsTypes')
.getOne(typeId)
.then((lessonType: RecordModel) => {
setShowLessonType({ ...defaultLessonType, ...lessonType });
setIsLoading(false);
.then((model: RecordModel) => {
setShowLessonType({ ...defaultLessonType, ...model });
})
.catch((err) => {
logger.error(err);
toast(t('dashboard.lessonTypes.list.error'));
setShowError(true);
})
.finally(() => {
setShowLoading(false);
});
}
}, [typeId]);
if (showLoading) return <div>{t('common.loading')}</div>;
if (showLoading) return <FormLoading />;
if (showError)
return (
<ErrorDisplay
message={t('error.unable-to-process-request', { ns: 'common' })}
code="500"
details={t('error.detailed-error-information', { ns: 'common' })}
/>
);
return (
<Box
@@ -96,13 +111,13 @@ export default function Page(): React.JSX.Element {
variant="subtitle2"
>
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
{t('Lesson Types')}
{t('list.title', { ns: 'lesson_type' })}
</Link>
</div>
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
<Avatar src="/assets/avatar-1.png" sx={{ '--Avatar-size': '64px' }}>
MV
empty
</Avatar>
<div>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
@@ -145,7 +160,7 @@ export default function Page(): React.JSX.Element {
<UserIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title="Basic details"
title={t('basic-details', { ns: 'lesson_type' })}
/>
<PropertyList
divider={<Divider />}
@@ -195,7 +210,7 @@ export default function Page(): React.JSX.Element {
<ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title="Security"
title={t('security', { ns: 'lesson_type' })}
/>
<CardContent>
<Stack spacing={1}>
@@ -268,7 +283,7 @@ export default function Page(): React.JSX.Element {
<CreditCardIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title="Billing details"
title={t('billing-details', { ns: 'lesson_type' })}
/>
<CardContent>
<Card sx={{ borderRadius: 1 }} variant="outlined">
@@ -303,7 +318,7 @@ export default function Page(): React.JSX.Element {
<HouseIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title="Shipping addresses"
title={t('shipping-addresses', { ns: 'lesson_type' })}
/>
<CardContent>
<Grid container spacing={3}>

15
002_source/cms/src/app/dashboard/lesson_types/page.tsx
View File

@@ -17,6 +17,7 @@ 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 type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
import { emptyLessonType, safeAssignment } from '@/components/dashboard/lesson_type/interfaces';
import { LessonTypesFilters } from '@/components/dashboard/lesson_type/lesson-types-filters';
@@ -50,6 +51,8 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
//
const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
const [showLoading, setShowLoading] = React.useState<boolean>(true);
const [showError, setShowError] = React.useState<boolean>(false);
const [lessonTypesData, setLessonTypesData] = React.useState<LessonType[]>([]);
// const [recordModel, setRecordModel] = React.useState<RecordModel[]>([]);
const sortedLessonTypes = applySort(lessonTypesData, sortDir);
@@ -86,6 +89,11 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
.catch((err) => {
logger.error(err);
toast(t('dashboard.lessonTypes.list.error'));
setShowError(true);
})
.finally(() => {
setShowLoading(false);
});
};
@@ -93,7 +101,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
reloadRows();
}, []);
if (lessonTypesData.length < 1) return <FormLoading />;
if (showLoading) return <FormLoading />;
if (showError)
return (
<ErrorDisplay message={t('unable-to-process-request')} code="500" details={t('detailed-error-information')} />
);
return (
<Box