From d45edc5f88c8857c3516860c2223e9b9cd164076 Mon Sep 17 00:00:00 2001 From: Indigo Tang Date: Mon, 9 Jun 2025 08:11:54 +0000 Subject: [PATCH] site setting add toy category setup --- src/app/[locale]/admin/site-settings/page.tsx | 175 +++++++++++++++--- src/locales/en.ts | 16 +- src/locales/zh-TW.ts | 16 +- 3 files changed, 177 insertions(+), 30 deletions(-) diff --git a/src/app/[locale]/admin/site-settings/page.tsx b/src/app/[locale]/admin/site-settings/page.tsx index 6e67267..58b8d49 100644 --- a/src/app/[locale]/admin/site-settings/page.tsx +++ b/src/app/[locale]/admin/site-settings/page.tsx @@ -1,16 +1,70 @@ +'use client'; + +import { useState } from 'react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; -import { getI18n } from "@/locales/server"; -import { Save } from "lucide-react"; +import { useI18n } from "@/locales/client"; // Changed from getI18n +import { Save, PlusCircle, Trash2 } from "lucide-react"; +import { Separator } from '@/components/ui/separator'; +import { useToast } from '@/hooks/use-toast'; -// This is a placeholder page. Actual functionality would require state management and API calls. +// Initial categories, mimicking what's in AddToyForm for demonstration +const initialToyCategoryValues = [ + 'Educational', 'Vehicles', 'Electronics', 'Plush Toys', 'Musical', + 'Outdoor', 'Board Games', 'Action Figures', 'Dolls', 'Puzzles', + 'Arts & Crafts', 'Building Blocks' +]; -export default async function AdminSiteSettingsPage() { - const t = await getI18n(); - const currentSiteTitle = "ToyShare"; // Mock current site title +export default function AdminSiteSettingsPage() { + const t = useI18n(); + const { toast } = useToast(); + + // State for site title + const [currentSiteTitle, setCurrentSiteTitle] = useState("ToyShare"); // Mock current site title + const [newSiteTitle, setNewSiteTitle] = useState(""); + const [isTitleSaving, setIsTitleSaving] = useState(false); + + // State for toy categories + const [categories, setCategories] = useState(initialToyCategoryValues); + const [newCategoryName, setNewCategoryName] = useState(""); + const [isCategoriesSaving, setIsCategoriesSaving] = useState(false); + + const handleSiteTitleSave = async (e: React.FormEvent) => { + e.preventDefault(); + setIsTitleSaving(true); + // Mock API call + await new Promise(resolve => setTimeout(resolve, 700)); + setCurrentSiteTitle(newSiteTitle || currentSiteTitle); // Update mock current title + setNewSiteTitle(""); // Clear input + toast({ title: t('admin.site_settings.title_saved_toast') }); + setIsTitleSaving(false); + }; + + const handleAddCategory = () => { + if (newCategoryName.trim() && !categories.includes(newCategoryName.trim())) { + setCategories([...categories, newCategoryName.trim()]); + setNewCategoryName(""); + } else if (categories.includes(newCategoryName.trim())) { + toast({ title: "Category exists", description: "This category name already exists.", variant: "destructive" }); + } + }; + + const handleRemoveCategory = (categoryToRemove: string) => { + setCategories(categories.filter(cat => cat !== categoryToRemove)); + }; + + const handleSaveCategories = async (e: React.FormEvent) => { + e.preventDefault(); + setIsCategoriesSaving(true); + // Mock API call to save categories + await new Promise(resolve => setTimeout(resolve, 700)); + console.log("Categories saved (mock):", categories); + toast({ title: t('admin.site_settings.categories_saved_toast') }); + setIsCategoriesSaving(false); + }; return (
@@ -19,27 +73,100 @@ export default async function AdminSiteSettingsPage() {

{t('admin.site_settings.description')}

- + - {t('admin.site_settings.title')} + {t('admin.site_settings.general_settings_card_title')} - -
- - -
-
- - -
- - - - +
+ +
+ + +
+
+ + setNewSiteTitle(e.target.value)} + placeholder="Enter new site title" + disabled={isTitleSaving} + /> +
+ + + + +
+ + + + + + {t('admin.site_settings.toy_category_card_title')} + +
+ +
+ + {categories.length > 0 ? ( +
    + {categories.map((cat, index) => ( +
  • + {cat} + +
    • + ))} +
+ ) : ( +

{t('admin.site_settings.no_categories_yet')}

+ )} +
+ + + +
+ +
+ setNewCategoryName(e.target.value)} + placeholder={t('admin.site_settings.category_name_placeholder')} + disabled={isCategoriesSaving} + /> + +
+
+ + + + +
+ +

+ Note: Category management is currently for UI demonstration. Changes here do not dynamically update the Add Toy form's categories. +

); } diff --git a/src/locales/en.ts b/src/locales/en.ts index f473557..8ab0bb5 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -199,10 +199,21 @@ export default { 'admin.overview.manage_toys_button': 'Manage Toys', 'admin.overview.go_to_site_settings_button': 'Go to Site Settings', 'admin.site_settings.title': 'Site Settings', - 'admin.site_settings.description': 'Manage global site settings.', + 'admin.site_settings.description': 'Manage global site settings and toy categories.', + 'admin.site_settings.general_settings_card_title': 'General Settings', 'admin.site_settings.current_title_label': 'Current Site Title', 'admin.site_settings.new_title_label': 'New Site Title', - 'admin.site_settings.save_button': 'Save Site Title', + 'admin.site_settings.save_title_button': 'Save Site Title', + 'admin.site_settings.toy_category_card_title': 'Toy Category Management', + 'admin.site_settings.current_categories_label': 'Current Categories', + 'admin.site_settings.no_categories_yet': 'No categories defined yet.', + 'admin.site_settings.remove_category_button': 'Remove', + 'admin.site_settings.new_category_label': 'New Category Name', + 'admin.site_settings.add_category_button': 'Add Category', + 'admin.site_settings.category_name_placeholder': 'Enter category name', + 'admin.site_settings.save_categories_button': 'Save Categories', + 'admin.site_settings.categories_saved_toast': 'Toy categories (mock) saved!', + 'admin.site_settings.title_saved_toast': 'Site title (mock) saved!', 'admin.users.title': 'User Management', 'admin.users.description': 'View and manage user accounts and permissions.', 'admin.users.table_header_name': 'Name', @@ -219,7 +230,6 @@ export default { 'admin.toys.table_header_actions': 'Actions', 'admin.toys.edit_button': 'Edit Toy', 'admin.toys.no_toys_found': 'No toys found.', - 'dashboard.rental_history.title': 'My Rental History', 'dashboard.rental_history.description': 'View your past toy rentals.', 'dashboard.rental_history.no_history_title': 'No Rental History Yet', diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts index 3956a3f..53c3539 100644 --- a/src/locales/zh-TW.ts +++ b/src/locales/zh-TW.ts @@ -199,10 +199,21 @@ export default { 'admin.overview.manage_toys_button': '管理玩具', 'admin.overview.go_to_site_settings_button': '前往網站設定', 'admin.site_settings.title': '網站設定', - 'admin.site_settings.description': '管理全域網站設定。', + 'admin.site_settings.description': '管理全域網站設定和玩具分類。', + 'admin.site_settings.general_settings_card_title': '一般設定', 'admin.site_settings.current_title_label': '目前網站標題', 'admin.site_settings.new_title_label': '新網站標題', - 'admin.site_settings.save_button': '儲存網站標題', + 'admin.site_settings.save_title_button': '儲存網站標題', + 'admin.site_settings.toy_category_card_title': '玩具分類管理', + 'admin.site_settings.current_categories_label': '目前分類', + 'admin.site_settings.no_categories_yet': '尚未定義分類。', + 'admin.site_settings.remove_category_button': '移除', + 'admin.site_settings.new_category_label': '新分類名稱', + 'admin.site_settings.add_category_button': '新增分類', + 'admin.site_settings.category_name_placeholder': '輸入分類名稱', + 'admin.site_settings.save_categories_button': '儲存分類', + 'admin.site_settings.categories_saved_toast': '玩具分類（模擬）已儲存！', + 'admin.site_settings.title_saved_toast': '網站標題（模擬）已儲存！', 'admin.users.title': '使用者管理', 'admin.users.description': '查看和管理使用者帳戶及權限。', 'admin.users.table_header_name': '名稱', @@ -219,7 +230,6 @@ export default { 'admin.toys.table_header_actions': '操作', 'admin.toys.edit_button': '編輯玩具', 'admin.toys.no_toys_found': '找不到玩具。', - 'dashboard.rental_history.title': '我的租借歷史', 'dashboard.rental_history.description': '查看您過去的玩具租借記錄。', 'dashboard.rental_history.no_history_title': '尚無租借歷史',