update,
This commit is contained in:
louiscklaw
20
002_source/cms/_AI_WORKSPACE/code/002_update_app_page.md
Normal file
20
002_source/cms/_AI_WORKSPACE/code/002_update_app_page.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# task
|
||||
|
||||
update app page to cover `vocabulary`
|
||||
|
||||
## steps
|
||||
|
||||
1. read `tsx` from folder: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/vocabularies.draft`
|
||||
1. fix the paths, variable, function names, class etc from `lesson-categories` to `vocabularies`.
|
||||
|
||||
thanks
|
||||
|
||||
## FAQ
|
||||
|
||||
1. 在 `constants.ts` 中是否已定义 `COL_VOCABULARIES` 常量？没有，需要先定义它。
|
||||
2. Vocabulary 相关的类型定义在哪里？是在现有文件中还是需要新建？ 需要新建
|
||||
3. 是否需要保留原始 `lessonCategories` 驱动文件? 不需要
|
||||
|
||||
- `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/vocabularies.draft`
|
||||
|
||||
- `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/vocabulary.draft`
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
tags: update-constants-file
|
||||
---
|
||||
|
||||
# task
|
||||
|
||||
update constants file
|
||||
|
||||
## steps
|
||||
|
||||
- have a look to `_constants.ts` files in slibing directory
|
||||
- get the convention
|
||||
- update `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/vocabulary/_constants.ts` according to dbml thanks
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
tags: review-function-names
|
||||
---
|
||||
|
||||
# task
|
||||
|
||||
review function names
|
||||
|
||||
## steps
|
||||
|
||||
- have a look to `tsx` files in slibing directory `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Vocabularies`
|
||||
- get the convention
|
||||
- update the function name of `tsx` file in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Vocabularies`
|
||||
@@ -16,7 +16,8 @@ they will:
|
||||
|
||||
## project background and initial setup
|
||||
|
||||
- No need to reply me what you are going on and your digest in this phase.
|
||||
- **IMPORTANT**: No need to reply me what you are going on and your digest in this phase.
|
||||
No need to show me your code plan
|
||||
Just reply me "OK" when done
|
||||
|
||||
- base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project`
|
||||
@@ -36,9 +37,13 @@ they will:
|
||||
|
||||
- look into the md files in folder `<base_dir>/002_source/cms/_AI_WORKSPACE/001_guideline`
|
||||
|
||||
- directory may contain `repomix-output.xml` file, that is a simple summary of all files inside the directory
|
||||
|
||||
- if the directory user provided contins `_GUIDELINES.md`, please read the file
|
||||
|
||||
- read the files, remember and link up the ideas in file stated above,
|
||||
i will tell them the task afterwards
|
||||
- read the files, remember and link up the ideas in file stated above, i will tell them the task afterwards
|
||||
|
||||
- please review at least 3 times after you modified the code
|
||||
|
||||
## frameworks documentation and samples
|
||||
|
||||
- `MUI`
|
||||
- `<base_dir>/002_source/cms/src/components/widgets/forms` contains sample forms,
|
||||
|
||||
@@ -5,16 +5,15 @@ tags: db, driver
|
||||
# clone db driver
|
||||
|
||||
please understand the tsx files in folder
|
||||
`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications`
|
||||
`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/vocabularies.draft`
|
||||
|
||||
change all occurrence of `customer` to `notification` thanks.
|
||||
change all occurrence of `lessonCategories` to `vocabularies` thanks.
|
||||
|
||||
## FAQ
|
||||
|
||||
1. 在constants.ts中是否已定义COL_NOTIFICATIONS常量？没有，需要先定义它。
|
||||
2. Notification相关的类型定义在哪里？是在现有文件中还是需要新建？ 需要新建
|
||||
3. 是否需要保留原始Customer驱动文件，还是完全替换为Notification驱动？
|
||||
用 `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications` 中的 code
|
||||
1. 在 `constants.ts` 中是否已定义 `COL_VOCABULARIES` 常量？没有，需要先定义它。
|
||||
2. Vocabulary 相关的类型定义在哪里？是在现有文件中还是需要新建？ 需要新建
|
||||
3. 是否需要保留原始 `lessonCategories` 驱动文件? 不需要
|
||||
|
||||
请确认这些信息，以便我制定完整的修改方案。
|
||||
|
||||
|
||||
0
002_source/cms/autogen_config.py
Normal file
0
002_source/cms/autogen_config.py
Normal file
@@ -1,39 +0,0 @@
|
||||
# PROMPT
|
||||
|
||||
please update `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/public/locales/dev/translation.json`
|
||||
to add below translations, thanks.
|
||||
|
||||
```
|
||||
dashboard.lessonCategories.edit.title
|
||||
dashboard.lessonCategories.edit.avatar
|
||||
dashboard.lessonCategories.edit.avatarRequirements
|
||||
dashboard.lessonCategories.edit.name
|
||||
dashboard.lessonCategories.edit.type
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
please read `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lesson_category/lesson-category-edit-form.tsx`
|
||||
and update `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/public/locales/dev/translation.json` the missing translations, thanks.
|
||||
|
||||
---
|
||||
|
||||
please refactor `common.json` to smaller translation files, thanks
|
||||
e.g. `lessonTypes` -> `lesson_type`
|
||||
|
||||
---
|
||||
|
||||
Hi, i want you to help merge two translation files.
|
||||
|
||||
base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/public/locales/dev`
|
||||
|
||||
I want you to merge the content
|
||||
|
||||
from `<base_dir>/lesson_type.json` (source file)
|
||||
to `<base_dir>/listening_practice.json` (dest file)
|
||||
|
||||
please extract , link up and remember the document properties
|
||||
(e.g. types, functions, variables, constants, etc)
|
||||
|
||||
update the variables and properties of dest file to reflect `listening practice categories`/`lp_categories`
|
||||
@@ -1,135 +1 @@
|
||||
{
|
||||
"languageChanged": "語言已更改",
|
||||
"type": "類型",
|
||||
"helloworld": "你好，世界",
|
||||
"Add": "新增項目",
|
||||
"visible": "可視",
|
||||
"hidden": "屏閉",
|
||||
"Hidden": "屏閉",
|
||||
"Newest": "最新",
|
||||
"Oldest": "最舊",
|
||||
"Lesson position": "位置",
|
||||
"Lesson type": "種類",
|
||||
"Type": "種類",
|
||||
"Name": "名稱",
|
||||
"Filter by name": "依名稱過濾",
|
||||
"Filter by type": "依類型過濾",
|
||||
"Actions": "動作",
|
||||
"Created at": "建立時間",
|
||||
"Updated at": "更新時間",
|
||||
"Position": "位置",
|
||||
"Visible": "顯示",
|
||||
"Apply": "套用",
|
||||
"Overview": "概觀",
|
||||
"Dashboard": "儀表板",
|
||||
"Tickets": "票券",
|
||||
"Sign ups": "註冊",
|
||||
"Open issues": "開啟問題",
|
||||
"Closed issues": "關閉問題",
|
||||
"increase": "增加",
|
||||
"decrease": "減少",
|
||||
"common.loading": "載入中",
|
||||
"vs last month": "與上個月相比",
|
||||
"Dashboards": "儀表板",
|
||||
"App usage": "應用程式使用情況",
|
||||
"Find your dream job": "找到你的夢想工作",
|
||||
"Need help figuring things out?": "需要幫助嗎?",
|
||||
"Search for jobs that match your skills and apply to them directly": "搜索符合你技能的工作,直接申請",
|
||||
"Find answers to your questions and get in touch with our team.": "找到你的問題並與我們的團隊聯繫",
|
||||
"Explore documentation": "探索文件",
|
||||
"Learn how to get started with our product and make the most of it.": "學習如何開始使用我們的產品並充分利用它",
|
||||
"Search Jobs": "搜索工作",
|
||||
"Help Center": "幫助中心",
|
||||
"Documentation": "文件",
|
||||
"increase_in_app_usage_with": "使用者量增加",
|
||||
"new_products_purchased": "新產品購買",
|
||||
"Our subscriptions": "我們的訂閱",
|
||||
"this_year": "今年",
|
||||
"is_forecasted_to_increase_in_your_traffic_by_the_end_of_the_current_month": "今年預計增加你的流量",
|
||||
"Jan": "一月",
|
||||
"Feb": "二月",
|
||||
"Mar": "三月",
|
||||
"Apr": "四月",
|
||||
"May": "五月",
|
||||
"Jun": "六月",
|
||||
"Jul": "七月",
|
||||
"Aug": "八月",
|
||||
"Sep": "九月",
|
||||
"Oct": "十月",
|
||||
"Nov": "十一月",
|
||||
"Dec": "十二月",
|
||||
"See all subscriptions": "查看所有訂閱",
|
||||
"app_chat": "應用程式聊天",
|
||||
"Upcoming events": "即將發生的事件",
|
||||
"Based on the linked bank accounts": "基於連結的銀行帳戶",
|
||||
"App limits": "應用程式限制",
|
||||
"You have used {percentage} of your available spots.": "您已使用 {percentage} 的可用座位。升級計劃以建立更多專案",
|
||||
"userMessagesUnread": "hello userMessagesUnread",
|
||||
"Upgrade plan to create more projects": "升級計劃以建立更多專案",
|
||||
"You have almost reached your limit": "您已接近您的限制",
|
||||
"Upgrade plan": "升級計劃",
|
||||
"Help center": "幫助中心",
|
||||
"Jobs": "工作",
|
||||
"go_to_chat": "前往聊天",
|
||||
"See all events": "查看所有事件",
|
||||
"You have used": "您已使用",
|
||||
"of your available spots": "的可用座位",
|
||||
"Paid": "已付款",
|
||||
"Canceled": "已取消",
|
||||
"Pending": "待付款",
|
||||
"Expiring": "已過期",
|
||||
"Refunded": "已退款",
|
||||
"Total": "總計",
|
||||
"Total paid": "已付款",
|
||||
"Total cancelled": "已取消",
|
||||
"Total pending": "待付款",
|
||||
"year": "年",
|
||||
"month": "月",
|
||||
"week": "週",
|
||||
"day": "日",
|
||||
"hour": "小時",
|
||||
"minute": "分鐘",
|
||||
"second": "秒",
|
||||
"ago": "前",
|
||||
"remaining": "剩下",
|
||||
"days": "天",
|
||||
"hours": "小時",
|
||||
"minutes": "分鐘",
|
||||
"seconds": "秒",
|
||||
"Clear filters": "清除篩選",
|
||||
"Type information": "輸入資訊",
|
||||
"Cancel": "取消",
|
||||
"Delete": "刪除",
|
||||
"All": "全部",
|
||||
"categories": "課程分類",
|
||||
"loading": "載入中",
|
||||
"Notifications": "通知",
|
||||
"Mark all as read": "標記所有為已讀",
|
||||
"There are no notifications": "沒有通知",
|
||||
"listenings": "聽講 (Listenings)",
|
||||
"question_category": "問題分類",
|
||||
"question_list": "問題",
|
||||
"matching_frenzy": "配對 (Matching Frenzy)",
|
||||
"connective_revision": "連接詞 (Connective Revision)",
|
||||
"settings": "設定",
|
||||
"students": "學生",
|
||||
"dashboard.lessonCategories.title": "課程分類",
|
||||
"dashboard.lessonCategorys.edit.name": "課程分類名稱",
|
||||
"dashboard.lessonCategorys.edit.position": "課程分類順序",
|
||||
"dashboard.lessonCategorys.edit.title": "編輯課程分類",
|
||||
"dashboard.lessonCategorys.edit.visibleToUser": "顯示給使用者",
|
||||
"dashboard.lessonCategorys.edit.visible": "顯示",
|
||||
"dashboard.lessonCategorys.edit.hidden": "隱藏",
|
||||
"dashboard.lessonCategorys.edit.cancelButton": "取消",
|
||||
"dashboard.lessonCategorys.edit.updateButton": "更新",
|
||||
"dashboard.lessonCategorys.list.title": "課堂種類",
|
||||
"word-count": "字數",
|
||||
"unable-to-process-request": "無法處理請求",
|
||||
"detailed-error-information": "詳細錯誤資訊",
|
||||
"error": {
|
||||
"unable-to-process-request": "無法處理您的請求",
|
||||
"detailed-error-information": "詳細錯誤資訊"
|
||||
},
|
||||
"name-is-required": "名稱為必填",
|
||||
"listening-practice": "聽講練習"
|
||||
}
|
||||
{}
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
{
|
||||
"add": "新增課程分類",
|
||||
"title": "課程分類",
|
||||
"basic_info": "基本資訊",
|
||||
"error": {
|
||||
"unable-to-process-request": "無法處理您的請求",
|
||||
"detailed-error-information": "詳細錯誤資訊"
|
||||
},
|
||||
"create": {
|
||||
"title": "建立課程類型",
|
||||
"createButton": "建立",
|
||||
"cancelButton": "取消",
|
||||
"message": "請輸入課程類型名稱",
|
||||
"success": "課程類型建立成功",
|
||||
"error": "課程類型建立失敗",
|
||||
"typeInformation": "輸入課程類型資訊",
|
||||
"avatar": "上傳課程類型圖片",
|
||||
"avatar_select": "選擇圖片",
|
||||
"avatarRequirements": "最小 400x400 像素，PNG 或 JPEG",
|
||||
"select": "請選擇",
|
||||
"name": "課程類型名稱",
|
||||
"position": "課程類型順序",
|
||||
"visibleToUser": "顯示給使用者",
|
||||
"detail-information": "詳細資訊",
|
||||
"description": "課程類型描述",
|
||||
"remarks": "備註"
|
||||
},
|
||||
"edit": {
|
||||
"avatar": "上傳圖片",
|
||||
"avatarRequirements": "最小 400x400 像素，PNG 或 JPEG",
|
||||
"cancelButton": "取消",
|
||||
"error": "課程類型更新失敗",
|
||||
"hidden": "隱藏",
|
||||
"name": "課程分類名稱",
|
||||
"position": "課程分類順序",
|
||||
"select": "請選擇",
|
||||
"success": "課程類型更新成功",
|
||||
"title": "編輯課程分類",
|
||||
"basic-info": "基本資訊",
|
||||
"type": "類型",
|
||||
"updateButton": "更新",
|
||||
"visible": "顯示",
|
||||
"visibleToUser": "顯示給使用者",
|
||||
"write-something": "輸入一些內容"
|
||||
},
|
||||
"delete": {
|
||||
"title": "刪除課程類型",
|
||||
"message": "確定要刪除課程類型嗎？",
|
||||
"success": "課程類型刪除成功",
|
||||
"error": "課程類型刪除失敗",
|
||||
"cancelButton": "取消",
|
||||
"deleteButton": "刪除"
|
||||
},
|
||||
"list": {
|
||||
"title": "課堂種類",
|
||||
"message": "請選擇課程類型",
|
||||
"empty": {
|
||||
"title": "目前沒有課程類型",
|
||||
"message": "請建立課程類型",
|
||||
"create": "建立課程類型"
|
||||
},
|
||||
"error": "課程類型載入失敗",
|
||||
"add": "新增課程分類"
|
||||
},
|
||||
"view": {
|
||||
"basic-details": "基本資訊"
|
||||
},
|
||||
"Delete Lesson Type ?": "刪除課程類型?",
|
||||
"Are you sure you want to delete lesson type ?": "確定要刪除課程類型嗎?"
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
{
|
||||
"add": "新增課程類型",
|
||||
"title": "課程類型",
|
||||
"type": "類型",
|
||||
"error": {
|
||||
"unable-to-process-request": "無法處理您的請求",
|
||||
"detailed-error-information": "詳細錯誤資訊"
|
||||
},
|
||||
"create": {
|
||||
"title": "建立課程類型",
|
||||
"createButton": "建立",
|
||||
"cancelButton": "取消",
|
||||
"message": "請輸入課程類型名稱",
|
||||
"success": "課程類型建立成功",
|
||||
"error": "課程類型建立失敗",
|
||||
"typeInformation": "輸入課程類型資訊",
|
||||
"avatar": "上傳課程類型圖片",
|
||||
"avatarRequirements": "上傳課程類型圖片",
|
||||
"select": "請選擇",
|
||||
"name": "課程類型名稱",
|
||||
"position": "課程類型順序",
|
||||
"visibleToUser": "顯示給使用者"
|
||||
},
|
||||
"edit": {
|
||||
"avatar": "上傳課程類型圖片",
|
||||
"avatarRequirements": "上傳課程類型圖片",
|
||||
"cancelButton": "取消",
|
||||
"error": "課程類型更新失敗",
|
||||
"hidden": "隱藏",
|
||||
"name": "課程類型名稱",
|
||||
"position": "課程類型順序",
|
||||
"select": "請選擇",
|
||||
"success": "課程類型更新成功",
|
||||
"title": "編輯課程類型",
|
||||
"typeInformation": "輸入課程類型資訊",
|
||||
"updateButton": "更新",
|
||||
"visible": "顯示",
|
||||
"visibleToUser": "顯示給使用者"
|
||||
},
|
||||
"delete": {
|
||||
"title": "刪除課程類型",
|
||||
"message": "確定要刪除課程類型嗎？",
|
||||
"success": "課程類型刪除成功",
|
||||
"error": "課程類型刪除失敗",
|
||||
"cancelButton": "取消",
|
||||
"deleteButton": "刪除"
|
||||
},
|
||||
"list": {
|
||||
"title": "課程類型列表1",
|
||||
"message": "請選擇課程類型",
|
||||
"empty": {
|
||||
"title": "目前沒有課程類型",
|
||||
"message": "請建立課程類型",
|
||||
"create": "建立課程類型"
|
||||
},
|
||||
"error": "課程類型載入失敗"
|
||||
},
|
||||
"view": {
|
||||
"basic-details": "基本資訊"
|
||||
},
|
||||
"Lesson Type": "課程類型",
|
||||
"Lesson Types": "課程類型",
|
||||
"Delete Lesson Type ?": "刪除課程類型?",
|
||||
"Are you sure you want to delete lesson type ?": "確定要刪除課程類型嗎?"
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
{
|
||||
"add": "新增",
|
||||
"listening-practice": "聽力練習",
|
||||
"list": {
|
||||
"title": "聽力練習分類列表",
|
||||
"empty": "沒有找到聽力練習分類",
|
||||
"action": "動作?",
|
||||
"basic-details": "基本資料"
|
||||
},
|
||||
"helloworld": "listening_practice",
|
||||
"title": "聽力練習分類",
|
||||
"type": "聽力練習分類",
|
||||
"error": {
|
||||
"invalid": "無效的聽力練習分類",
|
||||
"not_found": "未找到聽力練習分類"
|
||||
},
|
||||
"create": {
|
||||
"title": "創建聽力練習分類",
|
||||
"success": "聽力練習分類創建成功",
|
||||
"error": "創建聽力練習分類時出錯"
|
||||
},
|
||||
"edit": {
|
||||
"title": "編輯聽力練習分類",
|
||||
"success": "聽力練習分類更新成功",
|
||||
"error": "更新聽力練習分類時出錯"
|
||||
},
|
||||
"delete": {
|
||||
"title": "刪除聽力練習分類",
|
||||
"confirm": "確定要刪除聽力練習分類嗎？",
|
||||
"success": "聽力練習分類刪除成功",
|
||||
"error": "刪除聽力練習分類時出錯"
|
||||
},
|
||||
"view": {
|
||||
"title": "查看聽力練習分類詳情"
|
||||
}
|
||||
}
|
||||
@@ -1,203 +0,0 @@
|
||||
{
|
||||
"languageChanged": "語言已更改",
|
||||
"type": "類型",
|
||||
"helloworld": "你好，世界",
|
||||
"Add": "新增項目",
|
||||
"visible": "可視",
|
||||
"hidden": "屏閉",
|
||||
"Hidden": "屏閉",
|
||||
"Newest": "最新",
|
||||
"Oldest": "最舊",
|
||||
"Lesson position": "位置",
|
||||
"Lesson type": "種類",
|
||||
"Type": "種類",
|
||||
"Name": "名稱",
|
||||
"Filter by name": "依名稱過濾",
|
||||
"Filter by type": "依類型過濾",
|
||||
"dashboard.lessonTypes.add": "新增課程類型",
|
||||
"dashboard.lessonTypes.title": "課程類型",
|
||||
"dashboard.lessonTypes.type": "類型",
|
||||
"dashboard.lessonTypes.create.title": "建立課程類型",
|
||||
"dashboard.lessonTypes.create.createButton": "建立",
|
||||
"dashboard.lessonTypes.create.cancelButton": "取消",
|
||||
"dashboard.lessonTypes.edit.title": "編輯課程類型",
|
||||
"Actions": "動作",
|
||||
"Created at": "建立時間",
|
||||
"Updated at": "更新時間",
|
||||
"dashboard.lessonTypes.edit": "編輯課程類型",
|
||||
"dashboard.lessonTypes.delete": "刪除課程類型",
|
||||
"dashboard.lessonTypes.delete.title": "刪除課程類型",
|
||||
"dashboard.lessonTypes.delete.message": "確定要刪除課程類型嗎？",
|
||||
"Lesson Type": "課程類型",
|
||||
"dashboard.lessonTypes.create": "建立課程類型",
|
||||
"dashboard.lessonTypes.create.message": "請輸入課程類型名稱",
|
||||
"dashboard.lessonTypes.create.success": "課程類型建立成功",
|
||||
"dashboard.lessonTypes.create.error": "課程類型建立失敗",
|
||||
"dashboard.lessonTypes.edit.success": "課程類型更新成功",
|
||||
"dashboard.lessonTypes.edit.error": "課程類型更新失敗",
|
||||
"dashboard.lessonTypes.delete.success": "課程類型刪除成功",
|
||||
"dashboard.lessonTypes.delete.error": "課程類型刪除失敗",
|
||||
"dashboard.lessonTypes.list": "課程類型",
|
||||
"dashboard.lessonCategories.list": "詞語種類",
|
||||
"dashboard.vocabulary.list": "詞語種類",
|
||||
"dashboard.connective.list": "詞語種類",
|
||||
"dashboard.lessonTypes.list.title": "課程類型列表3",
|
||||
"dashboard.lessonTypes.list.message": "請選擇課程類型",
|
||||
"dashboard.lessonTypes.list.empty": "目前沒有課程類型",
|
||||
"dashboard.lessonTypes.list.empty.title": "目前沒有課程類型",
|
||||
"dashboard.lessonTypes.list.empty.message": "請建立課程類型",
|
||||
"dashboard.lessonTypes.list.empty.create": "建立課程類型",
|
||||
"Lesson Name": "課程名稱",
|
||||
"dashboard.lessonTypes.list.empty.create.title": "建立課程類型",
|
||||
"dashboard.lessonTypes.list.empty.create.message": "請輸入課程名稱",
|
||||
"dashboard.lessonTypes.list.empty.create.success": "課程建立成功",
|
||||
"dashboard.lessonTypes.list.empty.create.error": "課程建立失敗",
|
||||
"dashboard.lessonTypes.list.empty.create.name": "課程名稱",
|
||||
"dashboard.lessonTypes.list.empty.create.type": "課程類型",
|
||||
"dashboard.lessonTypes.list.empty.create.type.placeholder": "請選擇課程類型",
|
||||
"dashboard.lessonTypes.list.empty.create.type.title": "課程類型",
|
||||
"dashboard.lessonTypes.list.empty.create.type.message": "請選擇課程類型",
|
||||
"dashboard.lessonTypes.list.empty.create.type.empty": "目前沒有課程類型",
|
||||
"dashboard.lessonTypes.list.empty.create.type.empty.title": "目前沒有課程類型",
|
||||
"dashboard.lessonTypes.list.empty.create.type.empty.message": "請建立課程類型",
|
||||
"dashboard.lessonTypes.list.empty.create.type.empty.create": "建立課程類型",
|
||||
"Position": "位置",
|
||||
"Visible": "顯示",
|
||||
"Lesson Types": "課程類型",
|
||||
"Apply": "套用",
|
||||
"Overview": "概觀",
|
||||
"Dashboard": "儀表板",
|
||||
"Tickets": "票券",
|
||||
"Sign ups": "註冊",
|
||||
"Open issues": "開啟問題",
|
||||
"Closed issues": "關閉問題",
|
||||
"increase": "增加",
|
||||
"decrease": "減少",
|
||||
"common.loading": "載入中",
|
||||
"vs last month": "與上個月相比",
|
||||
"Dashboards": "儀表板",
|
||||
"App usage": "應用程式使用情況",
|
||||
"Find your dream job": "找到你的夢想工作",
|
||||
"Need help figuring things out?": "需要幫助嗎?",
|
||||
"Search for jobs that match your skills and apply to them directly": "搜索符合你技能的工作,直接申請",
|
||||
"Find answers to your questions and get in touch with our team.": "找到你的問題並與我們的團隊聯繫",
|
||||
"Explore documentation": "探索文件",
|
||||
"Learn how to get started with our product and make the most of it.": "學習如何開始使用我們的產品並充分利用它",
|
||||
"Search Jobs": "搜索工作",
|
||||
"Help Center": "幫助中心",
|
||||
"Documentation": "文件",
|
||||
"increase_in_app_usage_with": "使用者量增加",
|
||||
"new_products_purchased": "新產品購買",
|
||||
"Our subscriptions": "我們的訂閱",
|
||||
"this_year": "今年",
|
||||
"is_forecasted_to_increase_in_your_traffic_by_the_end_of_the_current_month": "今年預計增加你的流量",
|
||||
"Jan": "一月",
|
||||
"Feb": "二月",
|
||||
"Mar": "三月",
|
||||
"Apr": "四月",
|
||||
"May": "五月",
|
||||
"Jun": "六月",
|
||||
"Jul": "七月",
|
||||
"Aug": "八月",
|
||||
"Sep": "九月",
|
||||
"Oct": "十月",
|
||||
"Nov": "十一月",
|
||||
"Dec": "十二月",
|
||||
"See all subscriptions": "查看所有訂閱",
|
||||
"app_chat": "應用程式聊天",
|
||||
"Upcoming events": "即將發生的事件",
|
||||
"Based on the linked bank accounts": "基於連結的銀行帳戶",
|
||||
"App limits": "應用程式限制",
|
||||
"You have used {percentage} of your available spots.": "您已使用 {percentage} 的可用座位。升級計劃以建立更多專案",
|
||||
"userMessagesUnread": "hello userMessagesUnread",
|
||||
"Upgrade plan to create more projects": "升級計劃以建立更多專案",
|
||||
"You have almost reached your limit": "您已接近您的限制",
|
||||
"Upgrade plan": "升級計劃",
|
||||
"Help center": "幫助中心",
|
||||
"Jobs": "工作",
|
||||
"go_to_chat": "前往聊天",
|
||||
"See all events": "查看所有事件",
|
||||
"You have used": "您已使用",
|
||||
"of your available spots": "的可用座位",
|
||||
"Paid": "已付款",
|
||||
"Canceled": "已取消",
|
||||
"Pending": "待付款",
|
||||
"Expiring": "已過期",
|
||||
"Refunded": "已退款",
|
||||
"Total": "總計",
|
||||
"Total paid": "已付款",
|
||||
"Total cancelled": "已取消",
|
||||
"Total pending": "待付款",
|
||||
"year": "年",
|
||||
"month": "月",
|
||||
"week": "週",
|
||||
"day": "日",
|
||||
"hour": "小時",
|
||||
"minute": "分鐘",
|
||||
"second": "秒",
|
||||
"ago": "前",
|
||||
"remaining": "剩下",
|
||||
"days": "天",
|
||||
"hours": "小時",
|
||||
"minutes": "分鐘",
|
||||
"seconds": "秒",
|
||||
"Clear filters": "清除篩選",
|
||||
"Type information": "輸入資訊",
|
||||
"dashboard.lessonTypes.create.typeInformation": "輸入課程類型資訊",
|
||||
"dashboard.lessonTypes.create.avatar": "上傳課程類型圖片",
|
||||
"dashboard.lessonTypes.create.avatarRequirements": "上傳課程類型圖片",
|
||||
"dashboard.lessonTypes.create.select": "請選擇",
|
||||
"dashboard.lessonTypes.create.name": "課程類型名稱",
|
||||
"dashboard.lessonTypes.create.type": "課程類型",
|
||||
"dashboard.lessonTypes.create.position": "課程類型順序",
|
||||
"dashboard.lessonTypes.create.visibleToUser": "顯示給使用者",
|
||||
"dashboard.lessonTypes.edit.typeInformation": "輸入課程類型資訊",
|
||||
"dashboard.lessonTypes.edit.avatar": "上傳課程類型圖片",
|
||||
"dashboard.lessonTypes.edit.avatarRequirements": "上傳課程類型圖片",
|
||||
"dashboard.lessonTypes.edit.select": "請選擇",
|
||||
"dashboard.lessonTypes.edit.name": "課程類型名稱",
|
||||
"dashboard.lessonTypes.edit.type": "課程類型",
|
||||
"dashboard.lessonTypes.edit.position": "課程類型順序",
|
||||
"dashboard.lessonTypes.edit.visibleToUser": "顯示給使用者",
|
||||
"dashboard.lessonTypes.edit.visible": "顯示",
|
||||
"dashboard.lessonTypes.edit.hidden": "隱藏",
|
||||
"dashboard.lessonTypes.edit.cancelButton": "取消",
|
||||
"dashboard.lessonTypes.edit.updateButton": "更新",
|
||||
"Delete Lesson Type ?": "刪除課程類型?",
|
||||
"Are you sure you want to delete lesson type ?": "確定要刪除課程類型嗎?",
|
||||
"Cancel": "取消",
|
||||
"Delete": "刪除",
|
||||
"All": "全部",
|
||||
"categories": "問題分類",
|
||||
"listening-practice": "聽講練習 (LP)",
|
||||
"matching-frenzy": "配對練習 (MF)",
|
||||
"connective-revision": "連接詞練習 (CR)",
|
||||
"teachers": "導師",
|
||||
"questions": "題目",
|
||||
"loading": "載入中",
|
||||
"Notifications": "通知",
|
||||
"Mark all as read": "標記所有為已讀",
|
||||
"There are no notifications": "沒有通知",
|
||||
"listenings": "聽講 (Listenings)",
|
||||
"question_category": "問題分類",
|
||||
"question_list": "問題",
|
||||
"matching_frenzy": "配對 (Matching Frenzy)",
|
||||
"connective_revision": "連接詞 (Connective Revision)",
|
||||
"settings": "設定",
|
||||
"students": "學生",
|
||||
"dashboard.lessonCategories.add": "新增課程分類",
|
||||
"dashboard.lessonCategories.title": "課程分類",
|
||||
"dashboard.lessonCategorys.edit.name": "課程分類名稱",
|
||||
"dashboard.lessonCategorys.edit.position": "課程分類順序",
|
||||
"dashboard.lessonCategorys.edit.title": "編輯課程分類",
|
||||
"dashboard.lessonCategorys.edit.visibleToUser": "顯示給使用者",
|
||||
"dashboard.lessonCategorys.edit.visible": "顯示",
|
||||
"dashboard.lessonCategorys.edit.hidden": "隱藏",
|
||||
"dashboard.lessonCategorys.edit.cancelButton": "取消",
|
||||
"dashboard.lessonCategorys.edit.updateButton": "更新",
|
||||
"dashboard.lessonCategorys.list.title": "課堂種類",
|
||||
"word-count": "字數",
|
||||
"dashboard.lessonTypes.list.error": "課程類型載入失敗",
|
||||
"unable-to-process-request": "無法處理請求",
|
||||
"detailed-error-information": "詳細錯誤資訊"
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
# 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,
|
||||
@@ -44,7 +44,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
const { email, phone, sortDir, status } = searchParams;
|
||||
|
||||
const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Teacher[]>([]);
|
||||
//
|
||||
|
||||
const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
|
||||
const [showLoading, setShowLoading] = React.useState<boolean>(true);
|
||||
@@ -73,12 +72,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
setLessonCategoriesData(tempLessonTypes);
|
||||
setRecordCount(totalItems);
|
||||
setF(tempLessonTypes);
|
||||
// console.log({ currentPage, f });
|
||||
} catch (error) {
|
||||
//
|
||||
logger.error(error);
|
||||
setShowError({
|
||||
//
|
||||
show: true,
|
||||
detail: JSON.stringify(error, null, 2),
|
||||
});
|
||||
@@ -129,11 +125,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
|
||||
}
|
||||
setListOption(preFinalListOption);
|
||||
// setListOption({
|
||||
// filter: tempFilter.join(' && '),
|
||||
// sort: tempSortDir,
|
||||
// //
|
||||
// });
|
||||
}, [sortDir, email, phone, status]);
|
||||
|
||||
if (showLoading) return <FormLoading />;
|
||||
@@ -211,42 +202,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
);
|
||||
}
|
||||
|
||||
// Sorting and filtering has to be done on the server.
|
||||
|
||||
function applySort(row: Teacher[], sortDir: 'asc' | 'desc' | undefined): Teacher[] {
|
||||
return row.sort((a, b) => {
|
||||
if (sortDir === 'asc') {
|
||||
return a.createdAt.getTime() - b.createdAt.getTime();
|
||||
}
|
||||
|
||||
return b.createdAt.getTime() - a.createdAt.getTime();
|
||||
});
|
||||
}
|
||||
|
||||
function applyFilters(row: Teacher[], { email, phone, status }: Filters): Teacher[] {
|
||||
return row.filter((item) => {
|
||||
if (email) {
|
||||
if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (phone) {
|
||||
if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (status) {
|
||||
if (item.status !== status) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
interface PageProps {
|
||||
searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { paths } from '@/paths';
|
||||
import { LessonCategoryCreateForm } from '@/components/dashboard/lesson_category/lesson-category-create-form';
|
||||
import { VocabularyCreateForm } from '@/components/dashboard/vocabulary/vocabulary-create-form';
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
@@ -29,19 +29,19 @@ export default function Page(): React.JSX.Element {
|
||||
<Link
|
||||
color="text.primary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.lesson_categories.list}
|
||||
href={paths.dashboard.vocabularies.list}
|
||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
||||
{t('title', { ns: 'lesson_category' })}
|
||||
{t('title',)}
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="h4">{t('create.title', { ns: 'lesson_category' })}</Typography>
|
||||
<Typography variant="h4">{t('create.title', )}</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
<LessonCategoryCreateForm />
|
||||
<VocabularyCreateForm />
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
# 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,
|
||||
@@ -10,10 +10,10 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { paths } from '@/paths';
|
||||
import { LessonCategoryEditForm } from '@/components/dashboard/lesson_category/lesson-category-edit-form';
|
||||
import { VocabularyEditForm } from '@/components/dashboard/vocabulary/vocabulary-edit-form';
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
const { t } = useTranslation(['lesson_category']);
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Box
|
||||
@@ -30,19 +30,19 @@ export default function Page(): React.JSX.Element {
|
||||
<Link
|
||||
color="text.primary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.lesson_categories.list}
|
||||
href={paths.dashboard.vocabularies.list}
|
||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
||||
{t('edit.title', { ns: 'lesson_category' })}
|
||||
{t('edit.title')}
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="h4">{t('edit.title', { ns: 'lesson_category' })}</Typography>
|
||||
<Typography variant="h4">{t('edit.title')}</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
<LessonCategoryEditForm />
|
||||
<VocabularyEditForm />
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
'use client';
|
||||
|
||||
// RULES:
|
||||
// contains list page for lesson_categories (LessonCategories)
|
||||
// contain definition to collection only
|
||||
// contains list page for vocabularies (Vocabularies)
|
||||
//
|
||||
import * as React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { COL_LESSON_CATEGORIES } from '@/constants';
|
||||
import { COL_VOCABULARIES } from '@/constants';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import Box from '@mui/material/Box';
|
||||
import Card from '@mui/material/Card';
|
||||
@@ -21,25 +20,25 @@ import { paths } from '@/paths';
|
||||
import isDevelopment from '@/lib/check-is-development';
|
||||
import { logger } from '@/lib/default-logger';
|
||||
import { pb } from '@/lib/pb';
|
||||
import { toast } from '@/components/core/toaster';
|
||||
// import { toast } from '@/components/core/toaster';
|
||||
import ErrorDisplay from '@/components/dashboard/error';
|
||||
import { defaultLessonCategory } from '@/components/dashboard/lesson_category/_constants';
|
||||
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 type { LessonCategory } from '@/components/dashboard/lp_categories/type';
|
||||
import { defaultVocabulary } from '@/components/dashboard/vocabulary/_constants';
|
||||
import { VocabulariesFilters } from '@/components/dashboard/vocabulary/vocabularies-filters';
|
||||
import type { Filters } from '@/components/dashboard/vocabulary/vocabularies-filters';
|
||||
import { VocabulariesPagination } from '@/components/dashboard/vocabulary/vocabularies-pagination';
|
||||
import { VocabulariesSelectionProvider } from '@/components/dashboard/vocabulary/vocabularies-selection-context';
|
||||
import { VocabulariesTable } from '@/components/dashboard/vocabulary/vocabularies-table';
|
||||
import type { Vocabulary } from '@/components/dashboard/vocabulary/type';
|
||||
// import type { Vocabulary } from '@/components/dashboard/lp_categories/type';
|
||||
import FormLoading from '@/components/loading';
|
||||
|
||||
// import { lessonCategoriesSampleData } from './lesson-categories-sample-data';
|
||||
|
||||
export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
const { t } = useTranslation(['lesson_category']);
|
||||
const { t } = useTranslation();
|
||||
const { email, phone, sortDir, status, name, visible, type } = searchParams;
|
||||
const router = useRouter();
|
||||
const [lessonCategoriesData, setLessonCategoriesData] = React.useState<LessonCategory[]>([]);
|
||||
const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Vocabulary[]>([]);
|
||||
//
|
||||
|
||||
const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
|
||||
@@ -48,69 +47,39 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
//
|
||||
const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
|
||||
//
|
||||
const [f, setF] = React.useState<LessonCategory[]>([]);
|
||||
const [f, setF] = React.useState<Vocabulary[]>([]);
|
||||
const [currentPage, setCurrentPage] = React.useState<number>(1);
|
||||
//
|
||||
const [recordCount, setRecordCount] = React.useState<number>(0);
|
||||
const [listOption, setListOption] = React.useState({});
|
||||
const [listSort, setListSort] = React.useState({});
|
||||
|
||||
//
|
||||
const sortedLessonCategories = applySort(lessonCategoriesData, sortDir);
|
||||
const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status });
|
||||
|
||||
//
|
||||
const reloadRows = async (): Promise<void> => {
|
||||
try {
|
||||
const models: ListResult<RecordModel> = await pb
|
||||
.collection(COL_LESSON_CATEGORIES)
|
||||
.getList(currentPage + 1, rowsPerPage, listOption);
|
||||
const { items, totalItems } = models;
|
||||
const tempLessonTypes: LessonCategory[] = items.map((lt) => {
|
||||
return { ...defaultLessonCategory, ...lt };
|
||||
const models: ListResult<RecordModel> = await pb.collection(COL_VOCABULARIES).getList(1, 5, {
|
||||
expand: 'cat_id',
|
||||
});
|
||||
|
||||
setLessonCategoriesData(tempLessonTypes);
|
||||
const { items, totalItems } = models;
|
||||
|
||||
const tempVocabularies: Vocabulary[] = items.map((v) => {
|
||||
return { ...defaultVocabulary, ...v };
|
||||
});
|
||||
|
||||
setLessonCategoriesData(tempVocabularies);
|
||||
setRecordCount(totalItems);
|
||||
setF(tempLessonTypes);
|
||||
setF(tempVocabularies);
|
||||
// console.log({ currentPage, f });
|
||||
} catch (error) {
|
||||
//
|
||||
logger.error(error);
|
||||
setShowError({
|
||||
//
|
||||
show: true,
|
||||
detail: JSON.stringify(error, null, 2),
|
||||
});
|
||||
} finally {
|
||||
setShowLoading(false);
|
||||
}
|
||||
|
||||
// pb.collection(COL_LESSON_CATEGORIES)
|
||||
// .getList(currentPage, rowsPerPage, listOption)
|
||||
// .then((lessonCategories: ListResult<RecordModel>) => {
|
||||
// // console.log(lessonTypes);
|
||||
// const { items, page, perPage, totalItems, totalPages } = lessonCategories;
|
||||
// const tempLessonCategories: LessonCategory[] = items.map((item) => {
|
||||
// return { ...defaultLessonCategory, ...item };
|
||||
// });
|
||||
|
||||
// setLessonCategoriesData(tempLessonCategories);
|
||||
// setRecordCount(totalItems);
|
||||
// setF(tempLessonCategories);
|
||||
// // console.log({ currentPage, f });
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// logger.error(error);
|
||||
// setShowError({
|
||||
// //
|
||||
// show: true,
|
||||
// detail: JSON.stringify(error, null, 2),
|
||||
// });
|
||||
// })
|
||||
// .finally(() => {
|
||||
// setShowLoading(false);
|
||||
// });
|
||||
};
|
||||
|
||||
const [lastListOption, setLastListOption] = React.useState({});
|
||||
@@ -156,11 +125,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
|
||||
}
|
||||
setListOption(preFinalListOption);
|
||||
// setListOption({
|
||||
// filter: tempFilter.join(' && '),
|
||||
// sort: tempSortDir,
|
||||
// //
|
||||
// });
|
||||
}, [visible, sortDir, name, type]);
|
||||
|
||||
// return <>helloworld</>;
|
||||
@@ -199,7 +163,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
loading={isLoadingAddPage}
|
||||
onClick={(): void => {
|
||||
setIsLoadingAddPage(true);
|
||||
router.push(paths.dashboard.lesson_categories.create);
|
||||
router.push(paths.dashboard.vocabularies.create);
|
||||
}}
|
||||
startIcon={<PlusIcon />}
|
||||
variant="contained"
|
||||
@@ -209,22 +173,22 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
</LoadingButton>
|
||||
</Box>
|
||||
</Stack>
|
||||
<LessonCategoriesSelectionProvider lessonCategories={f}>
|
||||
<VocabulariesSelectionProvider lessonCategories={f}>
|
||||
<Card>
|
||||
<LessonCategoriesFilters
|
||||
<VocabulariesFilters
|
||||
filters={{ email, phone, status, name, visible, type }}
|
||||
fullData={lessonCategoriesData}
|
||||
sortDir={sortDir}
|
||||
/>
|
||||
<Divider />
|
||||
<Box sx={{ overflowX: 'auto' }}>
|
||||
<LessonCategoriesTable
|
||||
<VocabulariesTable
|
||||
reloadRows={reloadRows}
|
||||
rows={f}
|
||||
/>
|
||||
</Box>
|
||||
<Divider />
|
||||
<LessonCategoriesPagination
|
||||
<VocabulariesPagination
|
||||
count={recordCount}
|
||||
page={currentPage}
|
||||
rowsPerPage={rowsPerPage}
|
||||
@@ -232,7 +196,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
setRowsPerPage={setRowsPerPage}
|
||||
/>
|
||||
</Card>
|
||||
</LessonCategoriesSelectionProvider>
|
||||
</VocabulariesSelectionProvider>
|
||||
</Stack>
|
||||
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
|
||||
<pre>{JSON.stringify(f, null, 2)}</pre>
|
||||
@@ -243,51 +207,51 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
|
||||
// Sorting and filtering has to be done on the server.
|
||||
|
||||
function applySort(row: LessonCategory[], sortDir: 'asc' | 'desc' | undefined): LessonCategory[] {
|
||||
return row.sort((a, b) => {
|
||||
if (sortDir === 'asc') {
|
||||
return a.createdAt.getTime() - b.createdAt.getTime();
|
||||
}
|
||||
// function applySort(row: Vocabulary[], sortDir: 'asc' | 'desc' | undefined): Vocabulary[] {
|
||||
// return row.sort((a, b) => {
|
||||
// if (sortDir === 'asc') {
|
||||
// return a.createdAt.getTime() - b.createdAt.getTime();
|
||||
// }
|
||||
|
||||
return b.createdAt.getTime() - a.createdAt.getTime();
|
||||
});
|
||||
}
|
||||
// return b.createdAt.getTime() - a.createdAt.getTime();
|
||||
// });
|
||||
// }
|
||||
|
||||
function applyFilters(row: LessonCategory[], { email, phone, status, name, visible }: Filters): LessonCategory[] {
|
||||
return row.filter((item) => {
|
||||
if (email) {
|
||||
if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// function applyFilters(row: Vocabulary[], { email, phone, status, name, visible }: Filters): Vocabulary[] {
|
||||
// return row.filter((item) => {
|
||||
// if (email) {
|
||||
// if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
|
||||
if (phone) {
|
||||
if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// if (phone) {
|
||||
// if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
|
||||
if (status) {
|
||||
if (item.status !== status) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// if (status) {
|
||||
// if (item.status !== status) {
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
|
||||
if (name) {
|
||||
if (!item.name?.toLowerCase().includes(name.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// if (name) {
|
||||
// if (!item.name?.toLowerCase().includes(name.toLowerCase())) {
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
|
||||
if (visible) {
|
||||
if (!item.visible?.toLowerCase().includes(visible.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// if (visible) {
|
||||
// if (!item.visible?.toLowerCase().includes(visible.toLowerCase())) {
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
// return true;
|
||||
// });
|
||||
// }
|
||||
|
||||
interface PageProps {
|
||||
searchParams: {
|
||||
|
||||
@@ -4,7 +4,7 @@ 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 { COL_VOCABULARIES } from '@/constants';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
@@ -28,7 +28,7 @@ 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 type { RecordModel } from 'pocketbase';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { paths } from '@/paths';
|
||||
@@ -39,14 +39,12 @@ 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 { LessonCategory } from '@/components/dashboard/lesson_category/type';
|
||||
// import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
|
||||
import { defaultVocabulary } from '@/components/dashboard/vocabulary/_constants.ts';
|
||||
import { Notifications } from '@/components/dashboard/vocabulary/notifications';
|
||||
import { Payments } from '@/components/dashboard/vocabulary/payments';
|
||||
import type { Address } from '@/components/dashboard/vocabulary/shipping-address';
|
||||
import { ShippingAddress } from '@/components/dashboard/vocabulary/shipping-address';
|
||||
import type { Vocabulary } from '@/components/dashboard/vocabulary/type';
|
||||
import FormLoading from '@/components/loading';
|
||||
|
||||
// export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
|
||||
@@ -60,18 +58,18 @@ export default function Page(): React.JSX.Element {
|
||||
const [showLoading, setShowLoading] = React.useState<boolean>(true);
|
||||
const [showError, setShowError] = React.useState<boolean>(false);
|
||||
//
|
||||
const [showLessonCategory, setShowLessonCategory] = React.useState<LessonCategory>(defaultLessonCategory);
|
||||
const [showLessonCategory, setShowLessonCategory] = React.useState<Vocabulary>(defaultVocabulary);
|
||||
|
||||
function handleEditClick() {
|
||||
router.push(paths.dashboard.lesson_categories.edit(showLessonCategory.id));
|
||||
router.push(paths.dashboard.vocabularies.edit(showLessonCategory.id));
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (catId) {
|
||||
pb.collection(COL_LESSON_CATEGORIES)
|
||||
pb.collection(COL_VOCABULARIES)
|
||||
.getOne(catId)
|
||||
.then((model: RecordModel) => {
|
||||
setShowLessonCategory({ ...defaultLessonCategory, ...model });
|
||||
setShowLessonCategory({ ...defaultVocabulary, ...model });
|
||||
})
|
||||
.catch((err) => {
|
||||
logger.error(err);
|
||||
@@ -111,7 +109,7 @@ export default function Page(): React.JSX.Element {
|
||||
<Link
|
||||
color="text.primary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.lesson_categories.list}
|
||||
href={paths.dashboard.vocabularies.list}
|
||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
@@ -119,8 +117,16 @@ export default function Page(): React.JSX.Element {
|
||||
{t('dashboard.lessonCategorys.list.title')}
|
||||
</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' }}>
|
||||
<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={`http://127.0.0.1:8090/api/files/${showLessonCategory.collectionId}/${showLessonCategory.id}/${showLessonCategory.cat_image}`}
|
||||
sx={{ '--Avatar-size': '64px' }}
|
||||
@@ -129,29 +135,50 @@ export default function Page(): React.JSX.Element {
|
||||
empty
|
||||
</Avatar>
|
||||
<div>
|
||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center', flexWrap: 'wrap' }}
|
||||
>
|
||||
<Typography variant="h4">{showLessonCategory.name}</Typography>
|
||||
<Chip
|
||||
icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
|
||||
icon={
|
||||
<CheckCircleIcon
|
||||
color="var(--mui-palette-success-main)"
|
||||
weight="fill"
|
||||
/>
|
||||
}
|
||||
label={showLessonCategory.visible}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
<Typography color="text.secondary" variant="body1">
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body1"
|
||||
>
|
||||
{showLessonCategory.id}
|
||||
</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
<div>
|
||||
<Button endIcon={<CaretDownIcon />} variant="contained">
|
||||
<Button
|
||||
endIcon={<CaretDownIcon />}
|
||||
variant="contained"
|
||||
>
|
||||
Action
|
||||
</Button>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Grid container spacing={4}>
|
||||
<Grid lg={4} xs={12}>
|
||||
<Grid
|
||||
container
|
||||
spacing={4}
|
||||
>
|
||||
<Grid
|
||||
lg={4}
|
||||
xs={12}
|
||||
>
|
||||
<Stack spacing={4}>
|
||||
<Card>
|
||||
<CardHeader
|
||||
@@ -169,7 +196,7 @@ export default function Page(): React.JSX.Element {
|
||||
<UserIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title={t('basic-details', { ns: 'lesson_category' })}
|
||||
title={t('basic-details')}
|
||||
/>
|
||||
<PropertyList
|
||||
divider={<Divider />}
|
||||
@@ -178,8 +205,17 @@ export default function Page(): React.JSX.Element {
|
||||
>
|
||||
{(
|
||||
[
|
||||
{ key: 'Customer ID', value: <Chip label={showLessonCategory.id} size="small" variant="soft" /> },
|
||||
{ key: 'Name', value: showLessonCategory.name },
|
||||
{
|
||||
key: 'word',
|
||||
value: (
|
||||
<Chip
|
||||
label={showLessonCategory.word}
|
||||
size="small"
|
||||
variant="soft"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ key: 'word_c', value: showLessonCategory.word_c },
|
||||
{ key: 'Pos', value: showLessonCategory.pos },
|
||||
{
|
||||
key: 'Visible',
|
||||
@@ -195,9 +231,20 @@ export default function Page(): React.JSX.Element {
|
||||
{
|
||||
key: 'Quota',
|
||||
value: (
|
||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
||||
<LinearProgress sx={{ flex: '1 1 auto' }} value={50} variant="determinate" />
|
||||
<Typography color="text.secondary" variant="body2">
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center' }}
|
||||
>
|
||||
<LinearProgress
|
||||
sx={{ flex: '1 1 auto' }}
|
||||
value={50}
|
||||
variant="determinate"
|
||||
/>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
>
|
||||
50%
|
||||
</Typography>
|
||||
</Stack>
|
||||
@@ -206,7 +253,11 @@ export default function Page(): React.JSX.Element {
|
||||
] satisfies { key: string; value: React.ReactNode }[]
|
||||
).map(
|
||||
(item): React.JSX.Element => (
|
||||
<PropertyItem key={item.key} name={item.key} value={item.value} />
|
||||
<PropertyItem
|
||||
key={item.key}
|
||||
name={item.key}
|
||||
value={item.value}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</PropertyList>
|
||||
@@ -218,16 +269,22 @@ export default function Page(): React.JSX.Element {
|
||||
<ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title={t('security', { ns: 'lesson_category' })}
|
||||
title={t('security')}
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={1}>
|
||||
<div>
|
||||
<Button color="error" variant="contained">
|
||||
<Button
|
||||
color="error"
|
||||
variant="contained"
|
||||
>
|
||||
Delete account
|
||||
</Button>
|
||||
</div>
|
||||
<Typography color="text.secondary" variant="body2">
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
>
|
||||
A deleted lesson category cannot be restored. All data will be permanently removed.
|
||||
</Typography>
|
||||
</Stack>
|
||||
@@ -235,7 +292,10 @@ export default function Page(): React.JSX.Element {
|
||||
</Card>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid lg={8} xs={12}>
|
||||
<Grid
|
||||
lg={8}
|
||||
xs={12}
|
||||
>
|
||||
<Stack spacing={4}>
|
||||
<Payments
|
||||
ordersValue={2069.48}
|
||||
@@ -282,7 +342,10 @@ export default function Page(): React.JSX.Element {
|
||||
<Card>
|
||||
<CardHeader
|
||||
action={
|
||||
<Button color="secondary" startIcon={<PencilSimpleIcon />}>
|
||||
<Button
|
||||
color="secondary"
|
||||
startIcon={<PencilSimpleIcon />}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
}
|
||||
@@ -291,11 +354,17 @@ export default function Page(): React.JSX.Element {
|
||||
<CreditCardIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title={t('billing-details', { ns: 'lesson_category' })}
|
||||
title={t('billing-details')}
|
||||
/>
|
||||
<CardContent>
|
||||
<Card sx={{ borderRadius: 1 }} variant="outlined">
|
||||
<PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px' }}>
|
||||
<Card
|
||||
sx={{ borderRadius: 1 }}
|
||||
variant="outlined"
|
||||
>
|
||||
<PropertyList
|
||||
divider={<Divider />}
|
||||
sx={{ '--PropertyItem-padding': '16px' }}
|
||||
>
|
||||
{(
|
||||
[
|
||||
{ key: 'Credit card', value: '**** 4142' },
|
||||
@@ -307,7 +376,11 @@ export default function Page(): React.JSX.Element {
|
||||
] satisfies { key: string; value: React.ReactNode }[]
|
||||
).map(
|
||||
(item): React.JSX.Element => (
|
||||
<PropertyItem key={item.key} name={item.key} value={item.value} />
|
||||
<PropertyItem
|
||||
key={item.key}
|
||||
name={item.key}
|
||||
value={item.value}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</PropertyList>
|
||||
@@ -317,7 +390,10 @@ export default function Page(): React.JSX.Element {
|
||||
<Card>
|
||||
<CardHeader
|
||||
action={
|
||||
<Button color="secondary" startIcon={<PlusIcon />}>
|
||||
<Button
|
||||
color="secondary"
|
||||
startIcon={<PlusIcon />}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
}
|
||||
@@ -326,10 +402,13 @@ export default function Page(): React.JSX.Element {
|
||||
<HouseIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title={t('shipping-addresses', { ns: 'lesson_category' })}
|
||||
title={t('shipping-addresses')}
|
||||
/>
|
||||
<CardContent>
|
||||
<Grid container spacing={3}>
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
>
|
||||
{(
|
||||
[
|
||||
{
|
||||
@@ -351,7 +430,11 @@ export default function Page(): React.JSX.Element {
|
||||
},
|
||||
] satisfies Address[]
|
||||
).map((address) => (
|
||||
<Grid key={address.id} md={6} xs={12}>
|
||||
<Grid
|
||||
key={address.id}
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<ShippingAddress address={address} />
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
@@ -127,7 +127,7 @@ export function CrCategoryEditForm(): React.JSX.Element {
|
||||
// TODO: remove below
|
||||
type: '',
|
||||
};
|
||||
|
||||
//
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).update(catId, tempUpdate);
|
||||
logger.debug(result);
|
||||
|
||||
@@ -28,27 +28,27 @@ export const layoutConfig = {
|
||||
items: [
|
||||
{
|
||||
key: 'lesson-types',
|
||||
title: 'type',
|
||||
title: 'lesson-types',
|
||||
icon: 'users',
|
||||
items: [
|
||||
{
|
||||
key: 'lesson-types',
|
||||
title: 'dashboard.lessonTypes.list',
|
||||
title: 'lessonTypes.list',
|
||||
href: paths.dashboard.lesson_types.list,
|
||||
},
|
||||
{
|
||||
key: 'lesson-categories',
|
||||
title: 'dashboard.lessonCategories.list',
|
||||
title: 'lessonCategories.list',
|
||||
href: paths.dashboard.lesson_categories.list,
|
||||
},
|
||||
{
|
||||
key: 'vocabulary',
|
||||
title: 'dashboard.vocabularies.list',
|
||||
title: 'vocabularies.list',
|
||||
href: paths.dashboard.vocabularies.list,
|
||||
},
|
||||
{
|
||||
key: 'connective',
|
||||
title: 'dashboard.connectives.list',
|
||||
title: 'connectives.list',
|
||||
href: paths.dashboard.connectives.list,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
// RULES: obsoleted
|
||||
// please use `./cms/src/db/LessonCategories/type.d.ts`
|
||||
export interface LessonCategory {
|
||||
isEmpty?: boolean;
|
||||
//
|
||||
|
||||
@@ -127,7 +127,7 @@ export function MfCategoryEditForm(): React.JSX.Element {
|
||||
// TODO: remove below
|
||||
type: '',
|
||||
};
|
||||
|
||||
//
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_MF_CATEGORIES).update(catId, tempUpdate);
|
||||
logger.debug(result);
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
'use client';
|
||||
|
||||
// RULES: sorting direction for student lists
|
||||
export type SortDir = 'asc' | 'desc';
|
||||
|
||||
// RULES: core student data structure
|
||||
export interface Student {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -14,6 +16,7 @@ export interface Student {
|
||||
updatedAt?: Date;
|
||||
}
|
||||
|
||||
// RULES: form data structure for creating new student
|
||||
export interface CreateFormProps {
|
||||
name: string;
|
||||
email: string;
|
||||
@@ -36,6 +39,7 @@ export interface CreateFormProps {
|
||||
// status?: 'pending' | 'active' | 'blocked';
|
||||
}
|
||||
|
||||
// RULES: form data structure for editing existing student
|
||||
export interface EditFormProps {
|
||||
name: string;
|
||||
email: string;
|
||||
@@ -57,11 +61,14 @@ export interface EditFormProps {
|
||||
// quota?: number;
|
||||
// status?: 'pending' | 'active' | 'blocked';
|
||||
}
|
||||
// RULES: filter props for student search and filtering
|
||||
export interface CustomersFiltersProps {
|
||||
filters?: Filters;
|
||||
sortDir?: SortDir;
|
||||
fullData: Student[];
|
||||
}
|
||||
|
||||
// RULES: available filter options for student data
|
||||
export interface Filters {
|
||||
email?: string;
|
||||
phone?: string;
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
'use client';
|
||||
|
||||
// RULES: sorting direction for teacher lists
|
||||
export type SortDir = 'asc' | 'desc';
|
||||
|
||||
// RULES: core teacher data structure
|
||||
export interface Teacher {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -14,6 +16,7 @@ export interface Teacher {
|
||||
updatedAt?: Date;
|
||||
}
|
||||
|
||||
// RULES: form data structure for creating new teacher
|
||||
export interface CreateFormProps {
|
||||
name: string;
|
||||
email: string;
|
||||
@@ -36,6 +39,7 @@ export interface CreateFormProps {
|
||||
// status?: 'pending' | 'active' | 'blocked';
|
||||
}
|
||||
|
||||
// RULES: form data structure for editing existing teacher
|
||||
export interface EditFormProps {
|
||||
name: string;
|
||||
email: string;
|
||||
@@ -57,6 +61,8 @@ export interface EditFormProps {
|
||||
// quota?: number;
|
||||
// status?: 'pending' | 'active' | 'blocked';
|
||||
}
|
||||
|
||||
// RULES: filter props for teacher search and filtering
|
||||
export interface CustomersFiltersProps {
|
||||
filters?: Filters;
|
||||
sortDir?: SortDir;
|
||||
|
||||
@@ -1,44 +1,40 @@
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
import { Vocabulary, CreateForm } from './type';
|
||||
|
||||
import { CreateForm, LessonCategory } from './type';
|
||||
|
||||
// import type { CreateForm, LessonCategory } from '../lp_categories/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',
|
||||
//
|
||||
collectionId: '0000000000',
|
||||
createdAt: dayjs('2099-01-01').toDate(),
|
||||
//
|
||||
name: '',
|
||||
avatar: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
quota: 0,
|
||||
status: 'NA',
|
||||
export const defaultVocabulary: Vocabulary = {
|
||||
id: 'default-vocabulary-id',
|
||||
image: undefined,
|
||||
sound: undefined,
|
||||
word: '',
|
||||
word_c: '',
|
||||
sample_e: '',
|
||||
sample_c: '',
|
||||
cat_id: 'default-category-id',
|
||||
category: 'default-category',
|
||||
lesson_type_id: 'default-lesson-type-id',
|
||||
};
|
||||
|
||||
export const LessonCategoryCreateFormDefault: CreateForm = {
|
||||
name: '',
|
||||
type: '',
|
||||
pos: 1,
|
||||
visible: 'visible',
|
||||
description: '',
|
||||
isActive: true,
|
||||
order: 1,
|
||||
imageUrl: '',
|
||||
export const VocabularyCreateFormDefault: CreateForm = {
|
||||
image: undefined,
|
||||
sound: undefined,
|
||||
word: '',
|
||||
word_c: '',
|
||||
sample_e: '',
|
||||
sample_c: '',
|
||||
cat_id: '',
|
||||
category: '',
|
||||
lesson_type_id: '',
|
||||
};
|
||||
|
||||
export const emptyLessonCategory: LessonCategory = {
|
||||
...defaultLessonCategory,
|
||||
export const emptyVocabulary: Vocabulary = {
|
||||
...defaultVocabulary,
|
||||
id: '',
|
||||
word: '',
|
||||
word_c: '',
|
||||
sample_e: '',
|
||||
sample_c: '',
|
||||
cat_id: '',
|
||||
category: '',
|
||||
lesson_type_id: '',
|
||||
isEmpty: true,
|
||||
};
|
||||
|
||||
@@ -15,6 +15,7 @@ import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { logger } from '@/lib/default-logger';
|
||||
import { toast } from '@/components/core/toaster';
|
||||
import deleteVocabulary from '@/db/Vocabularies/Delete';
|
||||
|
||||
const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
|
||||
|
||||
@@ -44,33 +45,24 @@ export default function ConfirmDeleteModal({
|
||||
transform: 'translate(-50%, -50%)',
|
||||
};
|
||||
|
||||
function performDelete(id: string): Promise<void> {
|
||||
return pb
|
||||
.collection(COL_LESSON_TYPES)
|
||||
.delete(id)
|
||||
.then(() => {
|
||||
toast(t('dashboard.lessonTypes.delete.success'));
|
||||
reloadRows();
|
||||
})
|
||||
.catch((err) => {
|
||||
logger.error(err);
|
||||
toast(t('dashboard.lessonTypes.delete.error'));
|
||||
})
|
||||
.finally(() => {});
|
||||
}
|
||||
|
||||
function handleUserConfirmDelete(): void {
|
||||
if (idToDelete) {
|
||||
setIsDeleteing(true);
|
||||
performDelete(idToDelete)
|
||||
|
||||
// RULES: Vocabulary -> deleteVocabulary
|
||||
deleteVocabulary(idToDelete)
|
||||
.then(() => {
|
||||
reloadRows();
|
||||
handleClose();
|
||||
setIsDeleteing(false);
|
||||
toast(t('delete.success'));
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.error(err)
|
||||
logger.error(err);
|
||||
toast(t('dashboard.lessonTypes.delete.error'));
|
||||
toast(t('delete.error'));
|
||||
})
|
||||
.finally(() => {
|
||||
setIsDeleteing(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -86,19 +78,33 @@ export default function ConfirmDeleteModal({
|
||||
<Box sx={style}>
|
||||
<Container maxWidth="sm">
|
||||
<Paper sx={{ border: '1px solid var(--mui-palette-divider)', boxShadow: 'var(--mui-shadows-16)' }}>
|
||||
<Stack direction="row" spacing={2} sx={{ display: 'flex', p: 3 }}>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ display: 'flex', p: 3 }}
|
||||
>
|
||||
<Avatar sx={{ bgcolor: 'var(--mui-palette-error-50)', color: 'var(--mui-palette-error-main)' }}>
|
||||
<NoteIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
<Stack spacing={3}>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="h5">{t('Delete Lesson Type ?')}</Typography>
|
||||
<Typography color="text.secondary" variant="body2">
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
>
|
||||
{t('Are you sure you want to delete lesson type ?')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-end' }}>
|
||||
<Button color="secondary" onClick={handleClose}>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ justifyContent: 'flex-end' }}
|
||||
>
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={handleClose}
|
||||
>
|
||||
{t('Cancel')}
|
||||
</Button>
|
||||
<LoadingButton
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
|
||||
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 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 emptyLessonCategory: LessonCategory = {
|
||||
...defaultLessonCategory,
|
||||
isEmpty: true,
|
||||
};
|
||||
|
||||
export interface CreateForm {
|
||||
name: string;
|
||||
type: string;
|
||||
pos: number;
|
||||
visible: string;
|
||||
}
|
||||
|
||||
export const LessonCategoryCreateFormDefault: CreateForm = {
|
||||
name: '',
|
||||
type: '',
|
||||
pos: 1,
|
||||
visible: 'visible',
|
||||
};
|
||||
@@ -1,53 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
// import type { LessonCategory } from '@/types/lesson-type';
|
||||
import { useSelection } from '@/hooks/use-selection';
|
||||
import type { Selection } from '@/hooks/use-selection';
|
||||
|
||||
import { LessonCategory } from './type';
|
||||
|
||||
// import type { LessonCategory } from '../lp_categories/type';
|
||||
|
||||
// import type { LessonCategory } from './lesson-categories-table';
|
||||
// import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
|
||||
|
||||
function noop(): void {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export interface LessonCategoriesSelectionContextValue extends Selection {}
|
||||
|
||||
export const LessonCategoriesSelectionContext = React.createContext<LessonCategoriesSelectionContextValue>({
|
||||
deselectAll: noop,
|
||||
deselectOne: noop,
|
||||
selectAll: noop,
|
||||
selectOne: noop,
|
||||
selected: new Set(),
|
||||
selectedAny: false,
|
||||
selectedAll: false,
|
||||
});
|
||||
|
||||
interface LessonCategoriesSelectionProviderProps {
|
||||
children: React.ReactNode;
|
||||
lessonCategories: LessonCategory[];
|
||||
}
|
||||
|
||||
export function LessonCategoriesSelectionProvider({
|
||||
children,
|
||||
lessonCategories = [],
|
||||
}: LessonCategoriesSelectionProviderProps): React.JSX.Element {
|
||||
const customerIds = React.useMemo(() => lessonCategories.map((customer) => customer.id), [lessonCategories]);
|
||||
const selection = useSelection(customerIds);
|
||||
|
||||
return (
|
||||
<LessonCategoriesSelectionContext.Provider value={{ ...selection }}>
|
||||
{children}
|
||||
</LessonCategoriesSelectionContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useLessonCategoriesSelection(): LessonCategoriesSelectionContextValue {
|
||||
return React.useContext(LessonCategoriesSelectionContext);
|
||||
}
|
||||
@@ -1,353 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { COL_LESSON_CATEGORIES, NS_LESSON_CATEGORY } from '@/constants';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import { Avatar, Divider, MenuItem } from '@mui/material';
|
||||
// import Avatar from '@mui/material/Avatar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardActions from '@mui/material/CardActions';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
// import Checkbox from '@mui/material/Checkbox';
|
||||
|
||||
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 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 type { RecordModel } from 'pocketbase';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z as zod } from 'zod';
|
||||
|
||||
import { paths } from '@/paths';
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
import { logger } from '@/lib/default-logger';
|
||||
import { fileToBase64 } from '@/lib/file-to-base64';
|
||||
import { pb } from '@/lib/pb';
|
||||
import { Option } from '@/components/core/option';
|
||||
import { TextEditor } from '@/components/core/text-editor/text-editor';
|
||||
import { toast } from '@/components/core/toaster';
|
||||
import FormLoading from '@/components/loading';
|
||||
|
||||
import ErrorDisplay from '../error';
|
||||
import { defaultLessonCategory } from './_constants';
|
||||
import type { EditFormProps, LessonCategory } from './type';
|
||||
|
||||
// TODO: review this
|
||||
const schema = zod.object({
|
||||
cat_name: zod.string().min(1, 'name-is-required').max(255),
|
||||
//
|
||||
pos: zod.number().min(1, 'Phone is required').max(99),
|
||||
visible: zod.string().max(255),
|
||||
//
|
||||
description: zod.string().optional(),
|
||||
remarks: zod.string().optional(),
|
||||
});
|
||||
|
||||
type Values = zod.infer<typeof schema>;
|
||||
|
||||
const defaultValues = {
|
||||
cat_name: '',
|
||||
// cat_image: undefined,
|
||||
pos: 0,
|
||||
visible: 'hidden',
|
||||
// lesson_id: 'default-lesson-id',
|
||||
description: 'default-description',
|
||||
remarks: 'default-remarks',
|
||||
//
|
||||
} satisfies Values;
|
||||
|
||||
export function LessonCategoryEditForm(): React.JSX.Element {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation(['common', 'lesson_category']);
|
||||
|
||||
const NS_DEFAULT = { ns: 'lesson_category' };
|
||||
|
||||
const { cat_id: catId } = useParams<{ cat_id: string }>();
|
||||
//
|
||||
const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
|
||||
const [showLoading, setShowLoading] = React.useState<boolean>(false);
|
||||
const [showError, setShowError] = React.useState<boolean>(false);
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
reset,
|
||||
watch,
|
||||
} = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
|
||||
|
||||
const onSubmit = React.useCallback(async (values: Values): Promise<void> => {
|
||||
setIsUpdating(true);
|
||||
const tempUpdate: EditFormProps = {
|
||||
cat_name: values.cat_name,
|
||||
pos: values.pos,
|
||||
visible: values.visible,
|
||||
description: values.description,
|
||||
remarks: values.remarks,
|
||||
type: '',
|
||||
};
|
||||
|
||||
pb.collection(COL_LESSON_CATEGORIES)
|
||||
.update(catId, tempUpdate)
|
||||
.then((res) => {
|
||||
logger.debug(res);
|
||||
toast.success(t('update.success', NS_DEFAULT));
|
||||
router.push(paths.dashboard.lesson_categories.list);
|
||||
})
|
||||
.catch((err) => {
|
||||
logger.error(err);
|
||||
toast.error('Something went wrong!');
|
||||
})
|
||||
.finally(() => {
|
||||
//
|
||||
setIsUpdating(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const avatarInputRef = React.useRef<HTMLInputElement>(null);
|
||||
// const avatar = watch('avatar');
|
||||
|
||||
const handleAvatarChange = React.useCallback(
|
||||
async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
|
||||
if (file) {
|
||||
const url = await fileToBase64(file);
|
||||
// setValue('avatar', url);
|
||||
}
|
||||
},
|
||||
[setValue]
|
||||
);
|
||||
|
||||
const [textDescription, setTextDescription] = React.useState<string>('loading');
|
||||
const [textRemarks, setTextRemarks] = React.useState<string>('loading');
|
||||
const handleLoad = React.useCallback(
|
||||
(id: string) => {
|
||||
setShowLoading(true);
|
||||
pb.collection(COL_LESSON_CATEGORIES)
|
||||
.getOne(id)
|
||||
.then((model: RecordModel) => {
|
||||
const temp: LessonCategory = { ...defaultLessonCategory, ...model };
|
||||
reset(temp);
|
||||
setTextDescription(temp.description);
|
||||
setTextRemarks(temp.remarks);
|
||||
})
|
||||
.catch((err) => {
|
||||
logger.error(err);
|
||||
toast(t('list.error', NS_DEFAULT));
|
||||
})
|
||||
.finally(() => {
|
||||
setShowLoading(false);
|
||||
});
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[catId]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
handleLoad(catId);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [catId]);
|
||||
|
||||
if (showLoading) return <FormLoading />;
|
||||
if (showError)
|
||||
return (
|
||||
<ErrorDisplay
|
||||
message={t('error.unable-to-process-request', NS_DEFAULT)}
|
||||
code="500"
|
||||
details={t('error.detailed-error-information', NS_DEFAULT)}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Stack divider={<Divider />} spacing={4}>
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('edit.basic-info', NS_DEFAULT)}</Typography>
|
||||
<Grid container spacing={3}>
|
||||
<Grid xs={12}>
|
||||
<Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px dashed var(--mui-palette-divider)',
|
||||
borderRadius: '5%',
|
||||
display: 'inline-flex',
|
||||
p: '4px',
|
||||
}}
|
||||
>
|
||||
{/*
|
||||
<Avatar
|
||||
src={avatar}
|
||||
sx={{
|
||||
'--Avatar-size': '100px',
|
||||
'--Icon-fontSize': 'var(--icon-fontSize-lg)',
|
||||
alignItems: 'center',
|
||||
bgcolor: 'var(--mui-palette-background-level1)',
|
||||
color: 'var(--mui-palette-text-primary)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
// TODO: resume me
|
||||
<CameraIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
*/}
|
||||
</Box>
|
||||
<Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
|
||||
<Typography variant="subtitle1">{t('edit.avatar', NS_DEFAULT)}</Typography>
|
||||
<Typography variant="caption">{t('edit.avatarRequirements', NS_DEFAULT)}</Typography>
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={() => {
|
||||
avatarInputRef.current?.click();
|
||||
}}
|
||||
variant="outlined"
|
||||
>
|
||||
{t('edit.select', NS_DEFAULT)}
|
||||
</Button>
|
||||
<input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="cat_name"
|
||||
render={({ field }) => (
|
||||
<FormControl disabled={isUpdating} error={Boolean(errors.cat_name)} fullWidth>
|
||||
<InputLabel required>{t('edit.name', NS_DEFAULT)}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.cat_name ? <FormHelperText>{errors.cat_name.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="pos"
|
||||
render={({ field }) => (
|
||||
<FormControl error={Boolean(errors.pos)} fullWidth>
|
||||
<InputLabel required>{t('edit.position', NS_DEFAULT)}</InputLabel>
|
||||
<OutlinedInput
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
field.onChange(parseInt(e.target.value));
|
||||
}}
|
||||
type="number"
|
||||
/>
|
||||
|
||||
{errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="visible"
|
||||
render={({ field }) => (
|
||||
<FormControl error={Boolean(errors.visible)} fullWidth>
|
||||
<InputLabel>{t('edit.visible', NS_DEFAULT)}</InputLabel>
|
||||
<Select {...field}>
|
||||
<MenuItem value="visible">{t('edit.visible', NS_DEFAULT)}</MenuItem>
|
||||
<MenuItem value="hidden">{t('edit.hidden', NS_DEFAULT)}</MenuItem>
|
||||
</Select>
|
||||
|
||||
{errors.visible ? <FormHelperText>{errors.visible.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('create.detail-information', NS_DEFAULT)}</Typography>
|
||||
<Grid container spacing={3}>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="description"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="subtitle1" color="text-secondary">
|
||||
{t('create.description', NS_DEFAULT)}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
|
||||
<TextEditor
|
||||
{...field}
|
||||
content={textDescription}
|
||||
onUpdate={({ editor }) => {
|
||||
field.onChange({ target: { value: editor.getHTML() } });
|
||||
}}
|
||||
placeholder={t('edit.write-something', NS_DEFAULT)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="remarks"
|
||||
render={({ field }) => (
|
||||
<Box>
|
||||
<Typography variant="subtitle1" color="text.secondary">
|
||||
{t('create.remarks', NS_DEFAULT)}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
|
||||
<TextEditor
|
||||
content={textRemarks}
|
||||
onUpdate={({ editor }) => {
|
||||
field.onChange({ target: { value: editor.getText() } });
|
||||
}}
|
||||
hideToolbar
|
||||
placeholder={t('edit.write-something', NS_DEFAULT)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
||||
<Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_types.list}>
|
||||
{t('edit.cancelButton', NS_DEFAULT)}
|
||||
</Button>
|
||||
|
||||
<LoadingButton disabled={isUpdating} loading={isUpdating} type="submit" variant="contained">
|
||||
{t('edit.updateButton', NS_DEFAULT)}
|
||||
</LoadingButton>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
export interface Vocabulary {
|
||||
id: string;
|
||||
created?: string;
|
||||
updated?: string;
|
||||
image?: string;
|
||||
sound?: string;
|
||||
word?: string;
|
||||
word_c?: string;
|
||||
sample_e?: string;
|
||||
sample_c?: string;
|
||||
cat_id?: string;
|
||||
category?: string;
|
||||
lesson_type_id?: string;
|
||||
}
|
||||
|
||||
export interface CreateForm {
|
||||
image?: string;
|
||||
sound?: string;
|
||||
word?: string;
|
||||
word_c?: string;
|
||||
sample_e?: string;
|
||||
sample_c?: string;
|
||||
cat_id?: string;
|
||||
category?: string;
|
||||
lesson_type_id?: string;
|
||||
}
|
||||
|
||||
export interface EditFormProps {
|
||||
id: string;
|
||||
defaultValues: Vocabulary;
|
||||
onDone: () => void;
|
||||
}
|
||||
|
||||
export interface Helloworld {
|
||||
helloworld: string;
|
||||
}
|
||||
@@ -1,47 +1,60 @@
|
||||
export interface LessonCategory {
|
||||
isEmpty?: boolean;
|
||||
//
|
||||
// RULES:
|
||||
// should match the collection `Vocabularies` from `schema.dbml`
|
||||
export interface Vocabulary {
|
||||
id: string;
|
||||
collectionId: string;
|
||||
//
|
||||
cat_name: string;
|
||||
cat_image_url?: string;
|
||||
cat_image?: string;
|
||||
pos: number;
|
||||
created?: string;
|
||||
updated?: string;
|
||||
image?: string;
|
||||
sound?: string;
|
||||
word?: string;
|
||||
word_c?: string;
|
||||
sample_e?: string;
|
||||
sample_c?: string;
|
||||
cat_id: string;
|
||||
category?: string;
|
||||
lesson_type_id?: string;
|
||||
visible: string;
|
||||
lesson_id: string;
|
||||
description: string;
|
||||
remarks: string;
|
||||
createdAt: Date;
|
||||
//
|
||||
name: string;
|
||||
avatar: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
quota: number;
|
||||
status: 'pending' | 'active' | 'blocked' | 'NA';
|
||||
expand?: {
|
||||
cat_id?: {
|
||||
collectionId: string;
|
||||
id: string;
|
||||
cat_image: string;
|
||||
cat_name: string;
|
||||
//
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
// RULES: for use with vocabulary-create-form.tsx
|
||||
// when you update, please take a look into `vocabulary-create-form.tsx`
|
||||
export interface CreateForm {
|
||||
name: string;
|
||||
type: string;
|
||||
pos: number;
|
||||
visible: string;
|
||||
description: string;
|
||||
isActive: boolean;
|
||||
order: number;
|
||||
imageUrl: string;
|
||||
image?: string;
|
||||
sound?: string;
|
||||
word?: string;
|
||||
word_c?: string;
|
||||
sample_e?: string;
|
||||
sample_c?: string;
|
||||
cat_id?: string;
|
||||
category?: string;
|
||||
lesson_type_id?: string;
|
||||
}
|
||||
|
||||
// RULES: for use with vocabulary-edit-form.tsx
|
||||
// when you update, please take a look into `vocabulary-edit-form.tsx`
|
||||
export interface EditFormProps {
|
||||
cat_name: string;
|
||||
pos: number;
|
||||
visible: string;
|
||||
description?: string;
|
||||
remarks?: string;
|
||||
type: string;
|
||||
image: File[] | null;
|
||||
sound: string;
|
||||
word: string;
|
||||
word_c: string;
|
||||
sample_e: string;
|
||||
sample_c: string;
|
||||
cat_id: string;
|
||||
category: string;
|
||||
lesson_type_id: string;
|
||||
}
|
||||
|
||||
// RULES:
|
||||
// helloworld example, should not modify
|
||||
export interface Helloworld {
|
||||
helloworld: string;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
|
||||
import * as React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { COL_LESSON_CATEGORIES } from '@/constants';
|
||||
import GetAllCount from '@/db/LessonCategories/GetAllCount';
|
||||
import GetHiddenCount from '@/db/LessonCategories/GetHiddenCount';
|
||||
import GetVisibleCount from '@/db/LessonCategories/GetVisibleCount';
|
||||
@@ -20,13 +19,11 @@ import Typography from '@mui/material/Typography';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { paths } from '@/paths';
|
||||
import { pb } from '@/lib/pb';
|
||||
import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
|
||||
import { Option } from '@/components/core/option';
|
||||
|
||||
// import { LessonCategory } from '../lp_categories/type';
|
||||
import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
|
||||
import { LessonCategory } from './type';
|
||||
import { useVocabulariesSelection } from './vocabularies-selection-context';
|
||||
import type { Vocabulary } from './type';
|
||||
|
||||
export interface Filters {
|
||||
email?: string;
|
||||
@@ -39,17 +36,17 @@ export interface Filters {
|
||||
|
||||
export type SortDir = 'asc' | 'desc';
|
||||
|
||||
export interface LessonCategoriesFiltersProps {
|
||||
export interface VocabulariesFiltersProps {
|
||||
filters?: Filters;
|
||||
sortDir?: SortDir;
|
||||
fullData: LessonCategory[];
|
||||
fullData: Vocabulary[];
|
||||
}
|
||||
|
||||
export function LessonCategoriesFilters({
|
||||
export function VocabulariesFilters({
|
||||
filters = {},
|
||||
sortDir = 'desc',
|
||||
fullData,
|
||||
}: LessonCategoriesFiltersProps): React.JSX.Element {
|
||||
}: VocabulariesFiltersProps): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
const { email, phone, status, name, visible, type } = filters;
|
||||
|
||||
@@ -59,16 +56,16 @@ export function LessonCategoriesFilters({
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const selection = useLessonCategoriesSelection();
|
||||
const selection = useVocabulariesSelection();
|
||||
|
||||
function getVisible(): number {
|
||||
return fullData.reduce((count, item: LessonCategory) => {
|
||||
return fullData.reduce((count, item: Vocabulary) => {
|
||||
return item.visible === 'visible' ? count + 1 : count;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function getHidden(): number {
|
||||
return fullData.reduce((count, item: LessonCategory) => {
|
||||
return fullData.reduce((count, item: Vocabulary) => {
|
||||
return item.visible === 'hidden' ? count + 1 : count;
|
||||
}, 0);
|
||||
}
|
||||
@@ -115,7 +112,7 @@ export function LessonCategoriesFilters({
|
||||
searchParams.set('visible', newFilters.visible);
|
||||
}
|
||||
|
||||
router.push(`${paths.dashboard.lesson_categories.list}?${searchParams.toString()}`);
|
||||
router.push(`${paths.dashboard.vocabularies.list}?${searchParams.toString()}`);
|
||||
},
|
||||
[router]
|
||||
);
|
||||
@@ -195,10 +192,21 @@ export function LessonCategoriesFilters({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Tabs onChange={handleVisibleChange} sx={{ px: 3 }} value={visible ?? ''} variant="scrollable">
|
||||
<Tabs
|
||||
onChange={handleVisibleChange}
|
||||
sx={{ px: 3 }}
|
||||
value={visible ?? ''}
|
||||
variant="scrollable"
|
||||
>
|
||||
{tabs.map((tab) => (
|
||||
<Tab
|
||||
icon={<Chip label={tab.count} size="small" variant="soft" />}
|
||||
icon={
|
||||
<Chip
|
||||
label={tab.count}
|
||||
size="small"
|
||||
variant="soft"
|
||||
/>
|
||||
}
|
||||
iconPosition="end"
|
||||
key={tab.value}
|
||||
label={tab.label}
|
||||
@@ -209,8 +217,16 @@ export function LessonCategoriesFilters({
|
||||
))}
|
||||
</Tabs>
|
||||
<Divider />
|
||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}>
|
||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}
|
||||
>
|
||||
<FilterButton
|
||||
displayValue={name}
|
||||
label={t('Name')}
|
||||
@@ -240,16 +256,31 @@ export function LessonCategoriesFilters({
|
||||
{hasFilters ? <Button onClick={handleClearFilters}>{t('Clear filters')}</Button> : null}
|
||||
</Stack>
|
||||
{selection.selectedAny ? (
|
||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
||||
<Typography color="text.secondary" variant="body2">
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center' }}
|
||||
>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
>
|
||||
{selection.selected.size} {t('selected')}
|
||||
</Typography>
|
||||
<Button color="error" variant="contained">
|
||||
<Button
|
||||
color="error"
|
||||
variant="contained"
|
||||
>
|
||||
{t('Delete')}
|
||||
</Button>
|
||||
</Stack>
|
||||
) : null}
|
||||
<Select name="sort" onChange={handleSortChange} sx={{ maxWidth: '100%', width: '120px' }} value={sortDir}>
|
||||
<Select
|
||||
name="sort"
|
||||
onChange={handleSortChange}
|
||||
sx={{ maxWidth: '100%', width: '120px' }}
|
||||
value={sortDir}
|
||||
>
|
||||
<Option value="desc">{t('Newest')}</Option>
|
||||
<Option value="asc">{t('Oldest')}</Option>
|
||||
</Select>
|
||||
@@ -268,7 +299,12 @@ function TypeFilterPopover(): React.JSX.Element {
|
||||
}, [initialValue]);
|
||||
|
||||
return (
|
||||
<FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title={t('Filter by type')}>
|
||||
<FilterPopover
|
||||
anchorEl={anchorEl}
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
title={t('Filter by type')}
|
||||
>
|
||||
<FormControl>
|
||||
<OutlinedInput
|
||||
onChange={(event) => {
|
||||
@@ -304,7 +340,12 @@ function NameFilterPopover(): React.JSX.Element {
|
||||
}, [initialValue]);
|
||||
|
||||
return (
|
||||
<FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title={t('Filter by name')}>
|
||||
<FilterPopover
|
||||
anchorEl={anchorEl}
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
title={t('Filter by name')}
|
||||
>
|
||||
<FormControl>
|
||||
<OutlinedInput
|
||||
onChange={(event) => {
|
||||
@@ -339,7 +380,12 @@ function EmailFilterPopover(): React.JSX.Element {
|
||||
}, [initialValue]);
|
||||
|
||||
return (
|
||||
<FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by email">
|
||||
<FilterPopover
|
||||
anchorEl={anchorEl}
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
title="Filter by email"
|
||||
>
|
||||
<FormControl>
|
||||
<OutlinedInput
|
||||
onChange={(event) => {
|
||||
@@ -374,7 +420,12 @@ function PhoneFilterPopover(): React.JSX.Element {
|
||||
}, [initialValue]);
|
||||
|
||||
return (
|
||||
<FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by phone number">
|
||||
<FilterPopover
|
||||
anchorEl={anchorEl}
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
title="Filter by phone number"
|
||||
>
|
||||
<FormControl>
|
||||
<OutlinedInput
|
||||
onChange={(event) => {
|
||||
@@ -10,7 +10,7 @@ function noop(): void {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
interface LessonCategoriesPaginationProps {
|
||||
interface VocabulariesPaginationProps {
|
||||
count: number;
|
||||
page: number;
|
||||
//
|
||||
@@ -19,14 +19,14 @@ interface LessonCategoriesPaginationProps {
|
||||
rowsPerPage: number;
|
||||
}
|
||||
|
||||
export function LessonCategoriesPagination({
|
||||
export function VocabulariesPagination({
|
||||
count,
|
||||
page,
|
||||
//
|
||||
setPage,
|
||||
setRowsPerPage,
|
||||
rowsPerPage,
|
||||
}: LessonCategoriesPaginationProps): React.JSX.Element {
|
||||
}: VocabulariesPaginationProps): 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) => {
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
import { useSelection } from '@/hooks/use-selection';
|
||||
import type { Selection } from '@/hooks/use-selection';
|
||||
|
||||
import { Vocabulary } from './type';
|
||||
|
||||
|
||||
function noop(): void {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export interface VocabulariesSelectionContextValue extends Selection {}
|
||||
|
||||
export const VocabulariesSelectionContext = React.createContext<VocabulariesSelectionContextValue>({
|
||||
deselectAll: noop,
|
||||
deselectOne: noop,
|
||||
selectAll: noop,
|
||||
selectOne: noop,
|
||||
selected: new Set(),
|
||||
selectedAny: false,
|
||||
selectedAll: false,
|
||||
});
|
||||
|
||||
interface VocabulariesSelectionProviderProps {
|
||||
children: React.ReactNode;
|
||||
lessonCategories: Vocabulary[];
|
||||
}
|
||||
|
||||
export function VocabulariesSelectionProvider({
|
||||
children,
|
||||
lessonCategories = [],
|
||||
}: VocabulariesSelectionProviderProps): React.JSX.Element {
|
||||
const customerIds = React.useMemo(() => lessonCategories.map((customer) => customer.id), [lessonCategories]);
|
||||
const selection = useSelection(customerIds);
|
||||
|
||||
return (
|
||||
<VocabulariesSelectionContext.Provider value={{ ...selection }}>{children}</VocabulariesSelectionContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useVocabulariesSelection(): VocabulariesSelectionContextValue {
|
||||
return React.useContext(VocabulariesSelectionContext);
|
||||
}
|
||||
@@ -27,10 +27,18 @@ import { DataTable } from '@/components/core/data-table';
|
||||
import type { ColumnDef } from '@/components/core/data-table';
|
||||
|
||||
import ConfirmDeleteModal from './confirm-delete-modal';
|
||||
import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
|
||||
import type { LessonCategory } from './type';
|
||||
import { useVocabulariesSelection } from './vocabularies-selection-context';
|
||||
import type { Vocabulary } from './type';
|
||||
import { listLessonCategories } from '@/db/LessonCategories/listLessonCategories';
|
||||
import { LessonCategory } from '@/db/LessonCategories/type';
|
||||
import { Logger } from '@/lib/logger';
|
||||
import { logger } from '@/lib/default-logger';
|
||||
import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
|
||||
|
||||
function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonCategory>[] {
|
||||
function columns(
|
||||
handleDeleteClick: (testId: string) => void,
|
||||
lessonCategories: { id: string; label: string }[]
|
||||
): ColumnDef<Vocabulary>[] {
|
||||
return [
|
||||
{
|
||||
formatter: (row): React.JSX.Element => (
|
||||
@@ -42,7 +50,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonC
|
||||
<Link
|
||||
color="inherit"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.lesson_categories.details(row.id)}
|
||||
href={paths.dashboard.vocabularies.details(row.id)}
|
||||
sx={{ whiteSpace: 'nowrap' }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
@@ -58,12 +66,12 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonC
|
||||
<ImagesIcon size={32} />
|
||||
</Avatar>{' '}
|
||||
<div>
|
||||
<Box sx={{ whiteSpace: 'nowrap' }}>{row.cat_name}</Box>
|
||||
<Box sx={{ whiteSpace: 'nowrap' }}>{row.word}</Box>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
>
|
||||
slug: {row.cat_name}
|
||||
slug: {row.word_c}
|
||||
</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
@@ -74,78 +82,39 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonC
|
||||
width: '200px',
|
||||
},
|
||||
{
|
||||
formatter: (row): React.JSX.Element => (
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center' }}
|
||||
>
|
||||
<LinearProgress
|
||||
sx={{ flex: '1 1 auto' }}
|
||||
value={row.quota}
|
||||
variant="determinate"
|
||||
/>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
formatter: (row): React.JSX.Element => {
|
||||
const { cat_name: catName } = row?.expand?.cat_id ?? { cat_name: '--' };
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center' }}
|
||||
>
|
||||
{new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(row.quota / 100)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
),
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
>
|
||||
{catName}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
},
|
||||
// NOTE: please refer to translation.json here
|
||||
name: 'word-count',
|
||||
name: 'category',
|
||||
width: '100px',
|
||||
},
|
||||
{
|
||||
formatter: (row): React.JSX.Element => {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
|
||||
const mapping = {
|
||||
active: {
|
||||
label: 'Active',
|
||||
icon: (
|
||||
<CheckCircleIcon
|
||||
color="var(--mui-palette-success-main)"
|
||||
weight="fill"
|
||||
/>
|
||||
),
|
||||
},
|
||||
blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
|
||||
pending: {
|
||||
label: 'Pending',
|
||||
icon: (
|
||||
<ClockIcon
|
||||
color="var(--mui-palette-warning-main)"
|
||||
weight="fill"
|
||||
/>
|
||||
),
|
||||
},
|
||||
NA: {
|
||||
label: 'NA',
|
||||
icon: (
|
||||
<ClockIcon
|
||||
color="var(--mui-palette-warning-main)"
|
||||
weight="fill"
|
||||
/>
|
||||
),
|
||||
},
|
||||
} as const;
|
||||
const { label, icon } = mapping[row.status] ?? { label: 'Unknown', icon: null };
|
||||
|
||||
return (
|
||||
<Button
|
||||
onClick={() => {
|
||||
toast.error('sorry but not implementd');
|
||||
}}
|
||||
style={{ backgroundColor: 'transparent' }}
|
||||
>
|
||||
{/* <Chip icon={icon} label={label} size="small" variant="outlined" /> */}
|
||||
{label}
|
||||
</Button>
|
||||
<Chip
|
||||
label={row.visible}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
/>
|
||||
);
|
||||
},
|
||||
name: 'Status',
|
||||
name: 'visible',
|
||||
width: '150px',
|
||||
},
|
||||
{
|
||||
@@ -165,13 +134,12 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonC
|
||||
//
|
||||
color="secondary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.lesson_categories.details(row.id)}
|
||||
href={paths.dashboard.vocabularies.details(row.id)}
|
||||
>
|
||||
<PencilSimpleIcon size={24} />
|
||||
</LoadingButton>
|
||||
<LoadingButton
|
||||
color="error"
|
||||
disabled={row.isEmpty}
|
||||
onClick={() => {
|
||||
handleDeleteClick(row.id);
|
||||
}}
|
||||
@@ -188,14 +156,14 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonC
|
||||
];
|
||||
}
|
||||
|
||||
export interface LessonCategoriesTableProps {
|
||||
rows: LessonCategory[];
|
||||
export interface VocabulariesTableProps {
|
||||
rows: Vocabulary[];
|
||||
reloadRows: () => void;
|
||||
}
|
||||
|
||||
export function LessonCategoriesTable({ rows, reloadRows }: LessonCategoriesTableProps): React.JSX.Element {
|
||||
const { t } = useTranslation(['lesson_category']);
|
||||
const { deselectAll, deselectOne, selectAll, selectOne, selected } = useLessonCategoriesSelection();
|
||||
export function VocabulariesTable({ rows, reloadRows }: VocabulariesTableProps): React.JSX.Element {
|
||||
const { t } = useTranslation(['vocabulary']);
|
||||
const { deselectAll, deselectOne, selectAll, selectOne, selected } = useVocabulariesSelection();
|
||||
|
||||
const [idToDelete, setIdToDelete] = React.useState('');
|
||||
const [open, setOpen] = React.useState(false);
|
||||
@@ -205,6 +173,20 @@ export function LessonCategoriesTable({ rows, reloadRows }: LessonCategoriesTabl
|
||||
setIdToDelete(testId);
|
||||
}
|
||||
|
||||
let [lessonCategories, setLessonCategories] = React.useState<{}>({});
|
||||
|
||||
async function tempFunc(): Promise<void> {
|
||||
try {
|
||||
const tempCategories = await listLessonCategories();
|
||||
console.log(tempCategories);
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
}
|
||||
}
|
||||
React.useEffect(() => {
|
||||
void tempFunc;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ConfirmDeleteModal
|
||||
@@ -213,7 +195,7 @@ export function LessonCategoriesTable({ rows, reloadRows }: LessonCategoriesTabl
|
||||
reloadRows={reloadRows}
|
||||
setOpen={setOpen}
|
||||
/>
|
||||
<DataTable<LessonCategory>
|
||||
<DataTable<Vocabulary>
|
||||
columns={columns(handleDeleteClick)}
|
||||
onDeselectAll={deselectAll}
|
||||
onDeselectOne={(_, row) => {
|
||||
@@ -3,23 +3,19 @@
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { COL_LESSON_CATEGORIES, NS_LESSON_CATEGORY } from '@/constants';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import { Avatar, Divider, MenuItem } from '@mui/material';
|
||||
import { Avatar, Divider } from '@mui/material';
|
||||
// import Avatar from '@mui/material/Avatar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardActions from '@mui/material/CardActions';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
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 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';
|
||||
@@ -32,7 +28,6 @@ import { z as zod } from 'zod';
|
||||
import { paths } from '@/paths';
|
||||
import { logger } from '@/lib/default-logger';
|
||||
import { fileToBase64 } from '@/lib/file-to-base64';
|
||||
import { Option } from '@/components/core/option';
|
||||
import { TextEditor } from '@/components/core/text-editor/text-editor';
|
||||
import { toast } from '@/components/core/toaster';
|
||||
|
||||
@@ -71,12 +66,10 @@ const defaultValues = {
|
||||
currency: 'USD',
|
||||
} satisfies Values;
|
||||
|
||||
export function LessonCategoryCreateForm(): React.JSX.Element {
|
||||
export function VocabularyCreateForm(): React.JSX.Element {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation(['common', 'lesson_category']);
|
||||
|
||||
const NS_DEFAULT = { ns: 'lesson_category' };
|
||||
|
||||
const [isCreating, setIsCreating] = React.useState<boolean>(false);
|
||||
|
||||
const {
|
||||
@@ -121,12 +114,22 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Stack divider={<Divider />} spacing={4}>
|
||||
<Stack
|
||||
divider={<Divider />}
|
||||
spacing={4}
|
||||
>
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('create.typeInformation', NS_DEFAULT)}</Typography>
|
||||
<Grid container spacing={3}>
|
||||
<Typography variant="h6">{t('create.typeInformation')}</Typography>
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
>
|
||||
<Grid xs={12}>
|
||||
<Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={3}
|
||||
sx={{ alignItems: 'center' }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px dashed var(--mui-palette-divider)',
|
||||
@@ -151,9 +154,12 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
|
||||
<CameraIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
</Box>
|
||||
<Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
|
||||
<Typography variant="subtitle1">{t('create.avatar', NS_DEFAULT)}</Typography>
|
||||
<Typography variant="caption">{t('create.avatarRequirements', NS_DEFAULT)}</Typography>
|
||||
<Stack
|
||||
spacing={1}
|
||||
sx={{ alignItems: 'flex-start' }}
|
||||
>
|
||||
<Typography variant="subtitle1">{t('create.avatar')}</Typography>
|
||||
<Typography variant="caption">{t('create.avatarRequirements')}</Typography>
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={() => {
|
||||
@@ -161,44 +167,70 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
|
||||
}}
|
||||
variant="outlined"
|
||||
>
|
||||
{t('create.avatar_select', NS_DEFAULT)}
|
||||
{t('create.avatar_select')}
|
||||
</Button>
|
||||
<input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
|
||||
<input
|
||||
hidden
|
||||
onChange={handleAvatarChange}
|
||||
ref={avatarInputRef}
|
||||
type="file"
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
control={control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormControl error={Boolean(errors.name)} fullWidth>
|
||||
<InputLabel required>{t('create.name', NS_DEFAULT)}</InputLabel>
|
||||
<FormControl
|
||||
error={Boolean(errors.name)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('create.name')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormControl error={Boolean(errors.email)} fullWidth>
|
||||
<FormControl
|
||||
error={Boolean(errors.email)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>Email address</InputLabel>
|
||||
<OutlinedInput {...field} type="email" />
|
||||
<OutlinedInput
|
||||
{...field}
|
||||
type="email"
|
||||
/>
|
||||
{errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
control={control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormControl error={Boolean(errors.phone)} fullWidth>
|
||||
<FormControl
|
||||
error={Boolean(errors.phone)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>Phone number</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
|
||||
@@ -206,12 +238,18 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
control={control}
|
||||
name="company"
|
||||
render={({ field }) => (
|
||||
<FormControl error={Boolean(errors.company)} fullWidth>
|
||||
<FormControl
|
||||
error={Boolean(errors.company)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel>Company</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
|
||||
@@ -222,35 +260,56 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('create.detail-information', NS_DEFAULT)}</Typography>
|
||||
<Grid container spacing={3}>
|
||||
<Grid md={6} xs={12}>
|
||||
<Typography variant="h6">{t('create.detail-information')}</Typography>
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
>
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
control={control}
|
||||
name="billingAddress.country"
|
||||
render={({ field }) => (
|
||||
<Box>
|
||||
<Typography variant="subtitle1" color="text-secondary">
|
||||
{t('create.description', NS_DEFAULT)}
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
color="text-secondary"
|
||||
>
|
||||
{t('create.description')}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
|
||||
<TextEditor content="" placeholder="Write something" />
|
||||
<TextEditor
|
||||
content=""
|
||||
placeholder="Write something"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid md={6} xs={12}>
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
control={control}
|
||||
name="billingAddress.state"
|
||||
render={({ field }) => (
|
||||
<Box>
|
||||
<Typography variant="subtitle1" color="text.secondary">
|
||||
{t('create.remarks', NS_DEFAULT)}
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
color="text.secondary"
|
||||
>
|
||||
{t('create.remarks')}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
|
||||
<TextEditor content="" placeholder="Write something" />
|
||||
<TextEditor
|
||||
content=""
|
||||
placeholder="Write something"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
@@ -261,12 +320,21 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
|
||||
</Stack>
|
||||
</CardContent>
|
||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
||||
<Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_categories.list}>
|
||||
{t('create.cancelButton', NS_DEFAULT)}
|
||||
<Button
|
||||
color="secondary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.lesson_categories.list}
|
||||
>
|
||||
{t('create.cancelButton')}
|
||||
</Button>
|
||||
|
||||
<LoadingButton disabled={isCreating} loading={isCreating} type="submit" variant="contained">
|
||||
{t('create.createButton', NS_DEFAULT)}
|
||||
<LoadingButton
|
||||
disabled={isCreating}
|
||||
loading={isCreating}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
>
|
||||
{t('create.createButton')}
|
||||
</LoadingButton>
|
||||
</CardActions>
|
||||
</Card>
|
||||
@@ -0,0 +1,462 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { COL_VOCABULARIES } from '@/constants';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import { Avatar, Divider, MenuItem } from '@mui/material';
|
||||
// import Avatar from '@mui/material/Avatar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardActions from '@mui/material/CardActions';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
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 type { RecordModel } from 'pocketbase';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z as zod } from 'zod';
|
||||
|
||||
import { paths } from '@/paths';
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
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 { TextEditor } from '@/components/core/text-editor/text-editor';
|
||||
import { toast } from '@/components/core/toaster';
|
||||
import FormLoading from '@/components/loading';
|
||||
|
||||
import ErrorDisplay from '../error';
|
||||
import { defaultLessonCategory } from './_constants';
|
||||
import type { EditFormProps } from './type';
|
||||
import getVocabularyById from '@/db/Vocabularies/GetById';
|
||||
import getAllLessonCategories from '@/db/LessonCategories/GetAll';
|
||||
import { listLessonCategories } from '@/db/LessonCategories/listLessonCategories';
|
||||
import isDevelopment from '@/lib/check-is-development';
|
||||
|
||||
const schema = zod.object({
|
||||
image: zod.union([zod.array(zod.any()), zod.string()]).optional(),
|
||||
sound: zod.union([zod.array(zod.any()), zod.string()]).optional(),
|
||||
word: zod.string().min(1, 'Word is required').max(255),
|
||||
word_c: zod.string().min(1, 'Chinese word is required').max(255),
|
||||
sample_e: zod.string().optional(),
|
||||
sample_c: zod.string().optional(),
|
||||
cat_id: zod.string().min(1, 'Category ID is required'),
|
||||
category: zod.string().optional(),
|
||||
lesson_type_id: zod.string().min(1, 'Lesson type ID is required'),
|
||||
// NOTE: for image handling
|
||||
avatar: zod.string().optional(),
|
||||
});
|
||||
|
||||
type Values = zod.infer<typeof schema>;
|
||||
|
||||
const defaultValues = {
|
||||
image: undefined,
|
||||
sound: undefined,
|
||||
word: '',
|
||||
word_c: '',
|
||||
sample_e: '',
|
||||
sample_c: '',
|
||||
cat_id: '',
|
||||
category: '',
|
||||
lesson_type_id: '',
|
||||
} satisfies Values;
|
||||
|
||||
export function VocabularyEditForm(): React.JSX.Element {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { cat_id: catId } = useParams<{ cat_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 {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
reset,
|
||||
watch,
|
||||
} = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
|
||||
|
||||
const onSubmit = React.useCallback(
|
||||
async (values: Values): Promise<void> => {
|
||||
setIsUpdating(true);
|
||||
|
||||
const tempUpdate: EditFormProps = {
|
||||
image: values.avatar ? [await base64ToFile(values.avatar)] : null,
|
||||
sound: '',
|
||||
word: values.word,
|
||||
word_c: values.word_c,
|
||||
sample_e: values.sample_e || '',
|
||||
sample_c: values.sample_c || '',
|
||||
cat_id: values.cat_id,
|
||||
category: '',
|
||||
lesson_type_id: '',
|
||||
};
|
||||
//
|
||||
try {
|
||||
console.log({ tempUpdate });
|
||||
const result = await pb.collection(COL_VOCABULARIES).update(catId, tempUpdate);
|
||||
logger.debug(result);
|
||||
toast.success(t('edit.success'));
|
||||
router.push(paths.dashboard.vocabularies.list);
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
toast.error(t('update.failed'));
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
},
|
||||
// t is not necessary here
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[router]
|
||||
);
|
||||
|
||||
const avatarInputRef = React.useRef<HTMLInputElement>(null);
|
||||
const avatar = watch('avatar');
|
||||
|
||||
const handleAvatarChange = React.useCallback(
|
||||
async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
|
||||
if (file) {
|
||||
const url = await fileToBase64(file);
|
||||
setValue('avatar', url);
|
||||
}
|
||||
},
|
||||
[setValue]
|
||||
);
|
||||
|
||||
// load existing data when user arrive
|
||||
const loadExistingData = React.useCallback(
|
||||
async (id: string) => {
|
||||
try {
|
||||
const result = await pb.collection(COL_VOCABULARIES).getOne(id);
|
||||
reset({ ...defaultValues, ...result });
|
||||
|
||||
if (result.image !== '') {
|
||||
const fetchResult = await fetch(
|
||||
`http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.image}`
|
||||
);
|
||||
|
||||
const blob = await fetchResult.blob();
|
||||
const url = await fileToBase64(blob);
|
||||
|
||||
setValue('avatar', url);
|
||||
} else {
|
||||
setValue('avatar', '');
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
toast(t('list.error'));
|
||||
|
||||
setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
|
||||
}
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[catId]
|
||||
);
|
||||
|
||||
let [categoriesOption, setCategoriesOption] = React.useState<{ value: string; label: string }[]>([]);
|
||||
const loadCategories = React.useCallback(async () => {
|
||||
try {
|
||||
const categories = await listLessonCategories();
|
||||
|
||||
logger.debug(categories);
|
||||
|
||||
setCategoriesOption(
|
||||
categories.map((c) => {
|
||||
return { label: c.cat_name || '??', value: c.id };
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
toast.error(t('list.error'));
|
||||
}
|
||||
}, [catId]);
|
||||
|
||||
React.useEffect(() => {
|
||||
setShowLoading(true);
|
||||
|
||||
void loadCategories();
|
||||
void loadExistingData(catId);
|
||||
|
||||
setShowLoading(false);
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [catId]);
|
||||
|
||||
if (showLoading) return <FormLoading />;
|
||||
if (showError.show)
|
||||
return (
|
||||
<ErrorDisplay
|
||||
message={t('error.unable-to-process-request')}
|
||||
code="500"
|
||||
details={showError.detail}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Stack
|
||||
divider={<Divider />}
|
||||
spacing={4}
|
||||
>
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('edit.basic-info')}</Typography>
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
>
|
||||
<Grid xs={12}>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={3}
|
||||
sx={{ alignItems: 'center' }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px dashed var(--mui-palette-divider)',
|
||||
borderRadius: '5%',
|
||||
display: 'inline-flex',
|
||||
p: '4px',
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
src={avatar}
|
||||
sx={{
|
||||
'--Avatar-size': '100px',
|
||||
'--Icon-fontSize': 'var(--icon-fontSize-lg)',
|
||||
alignItems: 'center',
|
||||
bgcolor: 'var(--mui-palette-background-level1)',
|
||||
color: 'var(--mui-palette-text-primary)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<CameraIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
</Box>
|
||||
<Stack
|
||||
spacing={1}
|
||||
sx={{ alignItems: 'flex-start' }}
|
||||
>
|
||||
<Typography variant="subtitle1">{t('edit.avatar')}</Typography>
|
||||
<Typography variant="caption">{t('edit.avatarRequirements')}</Typography>
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={() => {
|
||||
avatarInputRef.current?.click();
|
||||
}}
|
||||
variant="outlined"
|
||||
>
|
||||
{t('edit.avatar_select')}
|
||||
</Button>
|
||||
<input
|
||||
hidden
|
||||
onChange={handleAvatarChange}
|
||||
ref={avatarInputRef}
|
||||
type="file"
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="word"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
disabled={isUpdating}
|
||||
error={Boolean(errors.word)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('edit.word')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.word ? <FormHelperText>{errors.word.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
{/* */}
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="word_c"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.word_c)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('edit.word_c')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.word_c ? <FormHelperText>{errors.word_c.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
{/* */}
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="cat_id"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.cat_id)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel>{t('edit.cat_id')}</InputLabel>
|
||||
<Select {...field}>
|
||||
{categoriesOption.map((co, i) => (
|
||||
<Option
|
||||
key={i}
|
||||
value={co.value}
|
||||
>
|
||||
{co.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
{/* */}
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="sound"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.sound)}
|
||||
fullWidth
|
||||
>
|
||||
{/* TODO: sound file selection is not implemented */}
|
||||
<InputLabel required>{t('edit.sound_file')} - (Not implemented)</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.sound ? <FormHelperText>{errors.sound.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
{/* */}
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('edit.sample-sentence')}</Typography>
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
>
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="sample_e"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.sample_e)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel>{t('edit.sample_e')}</InputLabel>
|
||||
<OutlinedInput
|
||||
{...field}
|
||||
multiline
|
||||
rows={4}
|
||||
/>
|
||||
{errors.sample_e ? <FormHelperText>{errors.sample_e.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="sample_c"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.sample_c)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel>{t('edit.sample_c')}</InputLabel>
|
||||
<OutlinedInput
|
||||
{...field}
|
||||
multiline
|
||||
rows={4}
|
||||
/>
|
||||
{errors.sample_c ? <FormHelperText>{errors.sample_c.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
{/* */}
|
||||
</Stack>
|
||||
</CardContent>
|
||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
||||
<Button
|
||||
color="secondary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.vocabularies.list}
|
||||
>
|
||||
{t('edit.cancelButton')}
|
||||
</Button>
|
||||
|
||||
<LoadingButton
|
||||
disabled={isUpdating}
|
||||
loading={isUpdating}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
>
|
||||
1{t('edit.updateButton')}2
|
||||
</LoadingButton>
|
||||
</CardActions>
|
||||
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
|
||||
<pre>{JSON.stringify(errors, null, 2)}</pre>
|
||||
</Box>
|
||||
</Card>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -23,11 +23,13 @@ const COL_CUSTOMERS = 'Customers';
|
||||
const COL_NOTIFICATIONS = 'Notifications';
|
||||
const COL_TEACHERS = 'Teachers';
|
||||
const COL_STUDENTS = 'Students';
|
||||
const COL_VOCABULARIES = 'Vocabularies';
|
||||
|
||||
// FOR page display
|
||||
const NO_VALUE = 'NO_VALUE';
|
||||
const NO_NUM = -Infinity;
|
||||
const NS_LESSON_CATEGORY = 'lesson_category';
|
||||
const NS_VOCABULARY = 'vocabulary';
|
||||
|
||||
export {
|
||||
COL_LESSON_TYPES,
|
||||
@@ -51,5 +53,7 @@ export {
|
||||
COL_NOTIFICATIONS,
|
||||
COL_TEACHERS,
|
||||
COL_STUDENTS,
|
||||
COL_VOCABULARIES,
|
||||
NS_VOCABULARY,
|
||||
//
|
||||
};
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
//
|
||||
// RULES:
|
||||
import { COL_LESSON_CATEGORIES } from '@/constants';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
import type { LessonCategory } from './type';
|
||||
|
||||
export async function listLessonCategories(): Promise<LessonCategory[]> {
|
||||
const records = await pb.collection(COL_LESSON_CATEGORIES).getFullList({
|
||||
expand: 'cat_id',
|
||||
});
|
||||
return records as unknown as LessonCategory[];
|
||||
}
|
||||
23
002_source/cms/src/db/LessonCategories/type.d.ts
vendored
Normal file
23
002_source/cms/src/db/LessonCategories/type.d.ts
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
export interface LessonCategory {
|
||||
isEmpty?: boolean;
|
||||
//
|
||||
id: string;
|
||||
collectionId: string;
|
||||
//
|
||||
cat_name: string;
|
||||
cat_image_url?: string;
|
||||
cat_image?: string;
|
||||
pos: number;
|
||||
visible: string;
|
||||
lesson_id: string;
|
||||
description: string;
|
||||
remarks: string;
|
||||
createdAt: Date;
|
||||
//
|
||||
name: string;
|
||||
avatar: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
quota: number;
|
||||
status: 'pending' | 'active' | 'blocked' | 'NA';
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
//
|
||||
// RULES:
|
||||
// api method for get notifications by user id
|
||||
import { pb } from '@/lib/pb';
|
||||
import { COL_NOTIFICATIONS } from '@/constants';
|
||||
|
||||
8
002_source/cms/src/db/Vocabularies/Create.tsx
Normal file
8
002_source/cms/src/db/Vocabularies/Create.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { COL_VOCABULARIES } from '@/constants';
|
||||
import type { Vocabulary, VocabularyCreate } from './type';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function createVocabulary(data: VocabularyCreate): Promise<Vocabulary> {
|
||||
return pb.collection(COL_VOCABULARIES).create(data);
|
||||
}
|
||||
6
002_source/cms/src/db/Vocabularies/Delete.tsx
Normal file
6
002_source/cms/src/db/Vocabularies/Delete.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import { COL_VOCABULARIES } from '@/constants';
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function deleteVocabulary(id: string): Promise<boolean> {
|
||||
return pb.collection(COL_VOCABULARIES).delete(id);
|
||||
}
|
||||
8
002_source/cms/src/db/Vocabularies/GetAll.tsx
Normal file
8
002_source/cms/src/db/Vocabularies/GetAll.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { COL_VOCABULARIES } from '@/constants';
|
||||
import type { Vocabularies } from './type';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function getAllVocabularies(): Promise<Vocabularies> {
|
||||
return pb.collection(COL_VOCABULARIES).getFullList();
|
||||
}
|
||||
14
002_source/cms/src/db/Vocabularies/GetAllCount.tsx
Normal file
14
002_source/cms/src/db/Vocabularies/GetAllCount.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
// RULES:
|
||||
// error handled by caller
|
||||
// contain definition to collection only
|
||||
|
||||
import { COL_VOCABULARIES } from '@/constants';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function getAllVocabulariesCount(): Promise<number> {
|
||||
return pb
|
||||
.collection(COL_VOCABULARIES)
|
||||
.getList(1, 9999)
|
||||
.then((res) => res.totalItems);
|
||||
}
|
||||
8
002_source/cms/src/db/Vocabularies/GetById.tsx
Normal file
8
002_source/cms/src/db/Vocabularies/GetById.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { COL_VOCABULARIES } from '@/constants';
|
||||
import type { Vocabulary } from './type';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function getVocabularyById(id: string): Promise<Vocabulary> {
|
||||
return pb.collection(COL_VOCABULARIES).getOne(id);
|
||||
}
|
||||
9
002_source/cms/src/db/Vocabularies/GetHiddenCount.tsx
Normal file
9
002_source/cms/src/db/Vocabularies/GetHiddenCount.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { COL_VOCABULARIES } from '@/constants';
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function getHiddenVocabulariesCount(): Promise<number> {
|
||||
return pb
|
||||
.collection(COL_VOCABULARIES)
|
||||
.getList(1, 9999, { filter: 'status = "hidden"' })
|
||||
.then((res) => res.totalItems);
|
||||
}
|
||||
9
002_source/cms/src/db/Vocabularies/GetVisibleCount.tsx
Normal file
9
002_source/cms/src/db/Vocabularies/GetVisibleCount.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { COL_VOCABULARIES } from '@/constants';
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function getVisibleVocabulariesCount(): Promise<number> {
|
||||
return pb
|
||||
.collection(COL_VOCABULARIES)
|
||||
.getList(1, 9999, { filter: 'status = "visible"' })
|
||||
.then((res) => res.totalItems);
|
||||
}
|
||||
5
002_source/cms/src/db/Vocabularies/Helloworld.tsx
Normal file
5
002_source/cms/src/db/Vocabularies/Helloworld.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
function helloWorld(): string {
|
||||
return 'helloworld';
|
||||
}
|
||||
|
||||
export { helloWorld };
|
||||
8
002_source/cms/src/db/Vocabularies/Update.tsx
Normal file
8
002_source/cms/src/db/Vocabularies/Update.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { COL_VOCABULARIES } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
import { pb } from '@/lib/pb';
|
||||
import type { EditFormProps } from './type';
|
||||
|
||||
export default function updateVocabulary(id: string, data: EditFormProps): Promise<RecordModel> {
|
||||
return pb.collection(COL_VOCABULARIES).update(id, data);
|
||||
}
|
||||
30
002_source/cms/src/db/Vocabularies/_GUIDELINES.md
Normal file
30
002_source/cms/src/db/Vocabularies/_GUIDELINES.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# GUIDELINES
|
||||
|
||||
This folder contains drivers for `LessonCategory`/`LessonCategories` records using PocketBase:
|
||||
|
||||
- create (Create.tsx)
|
||||
- read (GetById.tsx)
|
||||
- write (Update.tsx)
|
||||
- count (GetAllCount.tsx)
|
||||
- delete (Delete.tsx)
|
||||
- list (GetAll.tsx)
|
||||
|
||||
the `@` sign refer to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src`
|
||||
|
||||
## Assumption and Requirements
|
||||
|
||||
- assume `pb` is located in `@/lib/pb`
|
||||
- no need to handle error in this function, i'll handle it in the caller
|
||||
- type information defined in `@/db/LessonCategories/type.d.tsx`
|
||||
|
||||
simple template:
|
||||
|
||||
```typescript
|
||||
import { pb } from '@/lib/pb';
|
||||
import { COL_LESSON_CATEGORIES } from '@/constants';
|
||||
|
||||
export async function createLessonCategory(data: CreateFormProps) {
|
||||
// ...content
|
||||
// use direct return of pb.collection (e.g. return pb.collection(xxx))
|
||||
}
|
||||
```
|
||||
53
002_source/cms/src/db/Vocabularies/type.d.tsx
Normal file
53
002_source/cms/src/db/Vocabularies/type.d.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
// RULES: interface for handling vocabulary record
|
||||
export interface Vocabulary {
|
||||
//
|
||||
id: string;
|
||||
collectionId: string;
|
||||
//
|
||||
word: string;
|
||||
word_c: string;
|
||||
sample_e: string;
|
||||
sample_c: string;
|
||||
cat_id: string;
|
||||
category: string;
|
||||
lesson_type_id: string;
|
||||
image: File[];
|
||||
sound: File[];
|
||||
}
|
||||
|
||||
// RULES: interface for handling create form
|
||||
export interface CreateForm {
|
||||
word: string;
|
||||
word_c: string;
|
||||
sample_e: string;
|
||||
sample_c: string;
|
||||
cat_id: string;
|
||||
category: string;
|
||||
lesson_type_id: string;
|
||||
image: File[];
|
||||
sound: File[];
|
||||
isActive: boolean;
|
||||
order: number;
|
||||
}
|
||||
|
||||
// RULES: interface for handling edit form
|
||||
export interface EditFormProps {
|
||||
id: string;
|
||||
collectionId: string;
|
||||
word: string;
|
||||
word_c: string;
|
||||
sample_e: string;
|
||||
sample_c: string;
|
||||
cat_id: string;
|
||||
category: string;
|
||||
lesson_type_id: string;
|
||||
image: File[];
|
||||
sound: File[];
|
||||
isActive: boolean;
|
||||
order: number;
|
||||
}
|
||||
|
||||
// RULES: helloworld self test
|
||||
export interface Helloworld {
|
||||
helloworld: string;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
3
002_source/cms/src/lib/get-image-url-from-file.ts.ts
Normal file
3
002_source/cms/src/lib/get-image-url-from-file.ts.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default function getImageUrlFromFile(collectionId: string, id: string, catImage: string): string {
|
||||
return `http://127.0.0.1:8090/api/files/${collectionId}/${id}/${catImage}`;
|
||||
}
|
||||
@@ -20,13 +20,7 @@
|
||||
"plugins": [{ "name": "next" }],
|
||||
"paths": { "@/*": ["./src/*"] }
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts"
|
||||
//
|
||||
],
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
".next",
|
||||
|
||||
Reference in New Issue
Block a user