liaohui
/
book_manage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc

This commit is contained in:
Rao 2025-02-25 13:02:38 +08:00
parent 512b2420e3 33da2c8a72
commit 3a21c5bab0
8 changed files with 584 additions and 382 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
apps/server/src/models/term/term.service.ts
View File

@ -298,12 +298,12 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件
: {
// 当无全局权限时，添加域ID过滤
OR: [
{ domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录
],
}),
// 当无全局权限时，添加域ID过滤
OR: [
{ domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录
],
}),
},
ancestorId: parentId,
relDepth: 1,
@ -315,29 +315,29 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
}),
termIds
? db.term.findMany({
where: {
...(termIds && {
OR: [
...(validTermIds.length
? [{ id: { in: validTermIds } }]
: []),
],
}),
taxonomyId: taxonomyId,
// 动态权限控制条件
...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件
: {
// 当无全局权限时，添加域ID过滤
where: {
...(termIds && {
OR: [
{ domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录
...(validTermIds.length
? [{ id: { in: validTermIds } }]
: []),
],
}),
},
include: { children: true },
orderBy: { order: 'asc' },
})
taxonomyId: taxonomyId,
// 动态权限控制条件
...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件
: {
// 当无全局权限时，添加域ID过滤
OR: [
{ domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录
],
}),
},
include: { children: true },
orderBy: { order: 'asc' },
})
: [],
]);
const children = childrenData
@ -371,12 +371,12 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件
: {
// 当无全局权限时，添加域ID过滤
OR: [
{ domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录
],
}),
// 当无全局权限时，添加域ID过滤
OR: [
{ domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录
],
}),
},
},
include: {
@ -398,12 +398,12 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件
: {
// 当无全局权限时，添加域ID过滤
OR: [
{ domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录
],
}),
// 当无全局权限时，添加域ID过滤
OR: [
{ domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录
],
}),
},
include: { children: true }, // 包含子节点信息
orderBy: { order: 'asc' }, // 按顺序升序排序

180
apps/web/src/app/main/courses/components/FilterSection.tsx
View File

@ -1,10 +1,12 @@
import { Checkbox, Divider, Radio, Space , Spin} from 'antd';
import { categories, levels } from '../mockData';
import { TaxonomySlug, TermDto } from '@nice/common';
import { Checkbox, Divider, Radio, Space, Spin } from "antd";
import { categories, levels } from "../mockData";
import { TaxonomySlug, TermDto } from "@nice/common";
import { useEffect, useMemo } from 'react';
import { api } from '@nice/client';
import { useSearchParams } from 'react-router-dom';
import { useEffect, useMemo } from "react";
import { api } from "@nice/client";
import { useSearchParams } from "react-router-dom";
import TermTree from "@web/src/components/models/term/term-tree";
import TermSelect from "@web/src/components/models/term/term-select";
interface FilterSectionProps {
selectedCategory: string;
@ -14,105 +16,99 @@ interface FilterSectionProps {
}
interface GetTaxonomyProps {
categories: string[];
isLoading: boolean;
categories: string[];
isLoading: boolean;
}
function useGetTaxonomy({type}) : GetTaxonomyProps {
const {data,isLoading} :{data:TermDto[],isLoading:boolean}= api.term.findMany.useQuery({
where:{
taxonomy: {
//TaxonomySlug.CATEGORY
slug:type
}
},
include:{
children :true
},
take:20, // 只取前10个
orderBy: {
createdAt: 'desc', // 按创建时间降序排列
},
})
const categories = useMemo(() => {
const allCategories = isLoading ? [] : data?.map((course) => course.name);
return [...Array.from(new Set(allCategories))];
}, [data]);
return {categories,isLoading}
function useGetTaxonomy({ type }): GetTaxonomyProps {
const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
api.term.findMany.useQuery({
where: {
taxonomy: {
//TaxonomySlug.CATEGORY
slug: type,
},
},
include: {
children: true,
},
take: 10, // 只取前10个
orderBy: {
createdAt: "desc", // 按创建时间降序排列
},
});
const categories = useMemo(() => {
const allCategories = isLoading
? []
: data?.map((course) => course.name);
return [...Array.from(new Set(allCategories))];
}, [data]);
return { categories, isLoading };
}
export default function FilterSection({
selectedCategory,
selectedLevel,
onCategoryChange,
onLevelChange,
}: FilterSectionProps) {
const gateGory : GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.CATEGORY,
})
const levels : GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.LEVEL,
})
const gateGory: GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.CATEGORY,
});
const levels: GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.LEVEL,
});
const [searchParams,setSearchParams] = useSearchParams()
useEffect(() => {
if(searchParams.get('category')) onCategoryChange(searchParams.get('category'))
},[searchParams.get('category')])
const [searchParams, setSearchParams] = useSearchParams();
useEffect(() => {
if (searchParams.get("category"))
onCategoryChange(searchParams.get("category"));
}, [searchParams.get("category")]);
return (
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
<div>
<h3 className="text-lg font-medium mb-4">课程分类</h3>
<Radio.Group
value={selectedCategory}
onChange={(e) => onCategoryChange(e.target.value)}
className="flex flex-col space-y-3"
>
{
gateGory.isLoading?
(<Spin/>)
:
(
<>
<Radio value="" >全部课程</Radio>
{gateGory.categories.map(category => (
<Radio key={category} value={category}>
{category}
</Radio>
))}
</>)
}
</Radio.Group>
</div>
const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
return (
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
<Form>
</Form>
{taxonomies.map((tax) => {
return (
<>
<div>
<h3 className="text-lg font-medium mb-4">
{tax?.name}
</h3>
<TermSelect
multiple
taxonomyId={tax?.id}></TermSelect>
</div>
</>
);
})}
<Divider className="my-6" />
<div>
<h3 className="text-lg font-medium mb-4">难度等级</h3>
<Radio.Group
value={selectedLevel}
onChange={(e) => onLevelChange(e.target.value)}
className="flex flex-col space-y-3"
>
{
levels.isLoading ?
(<Spin/>)
:
(
<>
<Radio value="">全部难度</Radio>
{levels.categories.map(level => (
<Radio key={level} value={level}>
{level}
</Radio>
))}
</>)
}
</Radio.Group>
</div>
</div>
);
<div>
<h3 className="text-lg font-medium mb-4">难度等级</h3>
<Radio.Group
value={selectedLevel}
onChange={(e) => onLevelChange(e.target.value)}
className="flex flex-col space-y-3">
{levels.isLoading ? (
<Spin />
) : (
<>
<Radio value="">全部难度</Radio>
{levels.categories.map((level) => (
<Radio key={level} value={level}>
{level}
</Radio>
))}
</>
)}
</Radio.Group>
</div>
</div>
);
}

80
apps/web/src/app/main/courses/page.tsx
View File

@ -3,7 +3,12 @@ import { mockCourses } from "./mockData";
import FilterSection from "./components/FilterSection";
import CourseList from "./components/CourseList";
import { api } from "@nice/client";
import { courseDetailSelect, CourseDto, LectureType, PostType } from "@nice/common";
import {
courseDetailSelect,
CourseDto,
LectureType,
PostType,
} from "@nice/common";
import { useSearchParams } from "react-router-dom";
import { set } from "idb-keyval";
@ -27,15 +32,20 @@ export default function CoursesPage() {
const {data,isLoading} :{ data:paginationData,isLoading:boolean} = api.post.findManyWithPagination.useQuery({
where: {
type: PostType.COURSE,
terms:isAll?{}:{
some: {
OR : [
selectedCategory?{name:selectedCategory}:{},
selectedLevel?{name:selectedLevel}:{}
],
},
},
terms: isAll
? {}
: {
some: {
OR: [
selectedCategory
? { name: selectedCategory }
: {},
selectedLevel
? { name: selectedLevel }
: {},
],
},
},
},
pageSize,
page:currentPage,
@ -54,12 +64,26 @@ export default function CoursesPage() {
const {data,isLoading} :{ data:paginationData,isLoading:boolean}= api.post.findManyWithPagination.useQuery({
where: {
type: PostType.COURSE,
OR:[
{ title: { contains: searchValue, mode: 'insensitive' } },
{ subTitle: { contains: searchValue, mode: 'insensitive' } },
{ content: { contains: searchValue, mode: 'insensitive' } },
{ terms: { some: { name: { contains: searchValue, mode: 'insensitive' } } } }
]
OR: [
{ title: { contains: searchValue, mode: "insensitive" } },
{
subTitle: {
contains: searchValue,
mode: "insensitive",
},
},
{ content: { contains: searchValue, mode: "insensitive" } },
{
terms: {
some: {
name: {
contains: searchValue,
mode: "insensitive",
},
},
},
},
],
},
select:courseDetailSelect,
pageSize,
@ -72,28 +96,32 @@ export default function CoursesPage() {
},[currentPage])
}
useEffect(() => {
if(searchParams.get('searchValue')==''){
setSelectedCategory('');
setSelectedLevel('')
if (searchParams.get("searchValue") == "") {
setSelectedCategory("");
setSelectedLevel("");
}
}, [searchParams.get('searchValue')]);
}, [searchParams.get("searchValue")]);
const filteredCourses = useMemo(() => {
return isCourseLoading ? [] : coursesData;
}, [isCourseLoading, coursesData, selectedCategory, selectedLevel]);
const paginatedCourses :CourseDto[]= useMemo(() => {
const paginatedCourses: CourseDto[] = useMemo(() => {
const startIndex = (currentPage - 1) * pageSize;
return isCourseLoading ? [] : (filteredCourses.slice(startIndex, startIndex + pageSize) as any as CourseDto[]);
return isCourseLoading
? []
: (filteredCourses.slice(
startIndex,
startIndex + pageSize
) as any as CourseDto[]);
}, [filteredCourses, currentPage]);
const handlePageChange = (page: number) => {
setCurrentPage(page);
window.scrollTo({ top: 0, behavior: "smooth" });
};
useEffect(()=>{
setCurrentPage(1)
},[])
useEffect(() => {
setCurrentPage(1);
}, []);
return (
<div className="min-h-screen bg-gray-50">

104
apps/web/src/app/main/home/components/CoursesSection.tsx
View File

@ -39,28 +39,27 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
}, [data]);
return { categories, isLoading }
}
// 修改useGetName中的查询条件
// 不同分类跳转
function useFetchCoursesByCategory(category: string) {
const isAll = category === '全部';
const { data, isLoading}:{data:CourseDto[],isLoading:boolean} = api.post.findMany.useQuery({
where: isAll?{}:{
const { data, isLoading }: { data: CourseDto[], isLoading: boolean } = api.post.findMany.useQuery({
where: isAll ? {} : {
terms: {
some: {
name:category
name: category
},
},
},
take: 8,
include:{
terms:true
include: {
terms: true
}
});
console.log("ss",data)
return { data, isLoading};
return { data, isLoading };
}
// 不同分类跳转
const { Title, Text } = Typography;
@ -80,7 +79,7 @@ interface CoursesSectionProps {
title: string;
description: string;
courses: Course[];
isLoading:boolean
isLoading: boolean
initialVisibleCoursesCount?: number;
}
@ -98,38 +97,15 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
const gateGory: GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.CATEGORY,
})
const { data ,isLoading : isDataLoading} = useFetchCoursesByCategory(selectedCategory);
useEffect(()=>{
const { data, isLoading: isDataLoading } = useFetchCoursesByCategory(selectedCategory);
useEffect(() => {
console.log('data:', data)
})
// const { data } = api.post.findMany.useQuery({
// where: {}, // 必选参数
// include: { // 关联查询
// instructors: true
// },
// orderBy: { // 排序规则
// createdAt: 'desc'
// },
// take: 8
// })
// useEffect(() => {
// // 添加空值保护
// if (data && data.length > 0) {
// console.log('有效数据:', data)
// // 执行后续操作
// } else {
// console.log('无数据或加载中')
// }
// }, [data])
// const formatted = data?.map(course => ({
// id: course.id,
// title: course.title
// }));
const handleClick = (course: CourseDto) => {
navigate(`/course?courseId=${course.id}/detail`);
navigate(`/course/${course.id}/detail`);
}
useEffect(()=>{
useEffect(() => {
console.log('data:', data)
})
const filteredCourses = useMemo(() => {
@ -168,38 +144,37 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
: 'bg-white text-gray-600 hover:bg-gray-100'
}`}
>全部</Tag>
{gateGory.categories.length === 0 && (
<Empty
description="暂无课程分类"
image={Empty.PRESENTED_IMAGE_DEFAULT}
/>
)}:{
gateGory.categories.map((category) => (
<Tag
key={category}
color={selectedCategory === category ? 'blue' : 'default'}
onClick={() => {
setSelectedCategory(category)
console.log(category)
}}
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
? 'bg-blue-600 text-white shadow-lg'
: 'bg-white text-gray-600 hover:bg-gray-100'
}`}
>
{category}
</Tag>
))
{gateGory.categories.map((category) => (
<Tag
key={category}
color={selectedCategory === category ? 'blue' : 'default'}
onClick={() => {
setSelectedCategory(category)
console.log(category)
}}
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
? 'bg-blue-600 text-white shadow-lg'
: 'bg-white text-gray-600 hover:bg-gray-100'
}`}
>
{category}
</Tag>
))
}
</>
)
}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{displayedCourses?.map((course) => (
{displayedCourses.length=== 0 ? (
<div className="col-span-full">
<Empty description="暂无课程" image={Empty.PRESENTED_IMAGE_DEFAULT} />
</div>
) : displayedCourses?.map((course) => (
<Card
onClick={() => handleClick(course)}
key={course.id}
@ -249,7 +224,6 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
<div className="ml-2 flex items-center flex-grow">
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300">
{/* {course.} */}
</Text>
</div>
<span className="flex items-center bg-blue-100 px-2 py-1 rounded-full text-blue-600 hover:bg-blue-200 transition-colors duration-300">
@ -287,7 +261,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
</Button>
</div>
</div>
)}
)}
</div>
</section>
);

296
apps/web/src/app/main/home/page.tsx
View File

@ -1,161 +1,165 @@
import HeroSection from './components/HeroSection';
import CategorySection from './components/CategorySection';
import CoursesSection from './components/CoursesSection';
import FeaturedTeachersSection from './components/FeaturedTeachersSection';
import { api } from '@nice/client';
import { useEffect, useState } from 'react';
interface Courses{
id: number;
title: string;
instructor: string;
students: number;
rating: number;
level: string;
duration: string;
category: string;
progress: number;
thumbnail: string;
import HeroSection from "./components/HeroSection";
import CategorySection from "./components/CategorySection";
import CoursesSection from "./components/CoursesSection";
import FeaturedTeachersSection from "./components/FeaturedTeachersSection";
import { api } from "@nice/client";
import { useEffect, useState } from "react";
import TermTree from "@web/src/components/models/term/term-tree";
interface Courses {
id: number;
title: string;
instructor: string;
students: number;
rating: number;
level: string;
duration: string;
category: string;
progress: number;
thumbnail: string;
}
const HomePage = () => {
// const mockCourses = [
// {
// id: 1,
// title: 'Python 零基础入门',
// instructor: '张教授',
// students: 12000,
// rating: 4.8,
// level: '入门',
// duration: '36小时',
// category: '编程语言',
// progress: 16,
// thumbnail: '/images/course1.jpg',
// },
// {
// id: 2,
// title: '数据结构与算法',
// instructor: '李教授',
// students: 8500,
// rating: 4.9,
// level: '进阶',
// duration: '48小时',
// category: '计算机基础',
// progress: 35,
// thumbnail: '/images/course2.jpg',
// },
// {
// id: 3,
// title: '前端开发实战',
// instructor: '王教授',
// students: 10000,
// rating: 4.7,
// level: '中级',
// duration: '42小时',
// category: '前端开发',
// progress: 68,
// thumbnail: '/images/course3.jpg',
// },
// {
// id: 4,
// title: 'Java企业级开发',
// instructor: '刘教授',
// students: 9500,
// rating: 4.6,
// level: '高级',
// duration: '56小时',
// category: '编程语言',
// progress: 15,
// thumbnail: '/images/course4.jpg',
// },
// {
// id: 5,
// title: '人工智能基础',
// instructor: '陈教授',
// students: 11000,
// rating: 4.9,
// level: '中级',
// duration: '45小时',
// category: '人工智能',
// progress: 20,
// thumbnail: '/images/course5.jpg',
// },
// {
// id: 6,
// title: '大数据分析',
// instructor: '赵教授',
// students: 8000,
// rating: 4.8,
// level: '进阶',
// duration: '50小时',
// category: '数据科学',
// progress: 45,
// thumbnail: '/images/course6.jpg',
// },
// {
// id: 7,
// title: '云计算实践',
// instructor: '孙教授',
// students: 7500,
// rating: 4.7,
// level: '高级',
// duration: '48小时',
// category: '云计算',
// progress: 15,
// thumbnail: '/images/course7.jpg',
// },
// {
// id: 8,
// title: '移动应用开发',
// instructor: '周教授',
// students: 9000,
// rating: 4.8,
// level: '中级',
// duration: '40小时',
// category: '移动开发',
// progress: 70,
// thumbnail: '/images/course8.jpg',
// },
// ];
const { data ,isLoading}: { data: Courses[] , isLoading:boolean} = api.post.findMany.useQuery({
where: {},
include: {
instructors: true,
},
orderBy: {
createdAt: 'desc' // 按创建时间降序排列
},
take: 8 // 只获取前8个课程
});
useEffect(() => {
if (data) {
console.log('Courses data:', data);
}
}, [data]);
// {
// id: 1,
// title: 'Python 零基础入门',
// instructor: '张教授',
// students: 12000,
// rating: 4.8,
// level: '入门',
// duration: '36小时',
// category: '编程语言',
// progress: 16,
// thumbnail: '/images/course1.jpg',
// },
// {
// id: 2,
// title: '数据结构与算法',
// instructor: '李教授',
// students: 8500,
// rating: 4.9,
// level: '进阶',
// duration: '48小时',
// category: '计算机基础',
// progress: 35,
// thumbnail: '/images/course2.jpg',
// },
// {
// id: 3,
// title: '前端开发实战',
// instructor: '王教授',
// students: 10000,
// rating: 4.7,
// level: '中级',
// duration: '42小时',
// category: '前端开发',
// progress: 68,
// thumbnail: '/images/course3.jpg',
// },
// {
// id: 4,
// title: 'Java企业级开发',
// instructor: '刘教授',
// students: 9500,
// rating: 4.6,
// level: '高级',
// duration: '56小时',
// category: '编程语言',
// progress: 15,
// thumbnail: '/images/course4.jpg',
// },
// {
// id: 5,
// title: '人工智能基础',
// instructor: '陈教授',
// students: 11000,
// rating: 4.9,
// level: '中级',
// duration: '45小时',
// category: '人工智能',
// progress: 20,
// thumbnail: '/images/course5.jpg',
// },
// {
// id: 6,
// title: '大数据分析',
// instructor: '赵教授',
// students: 8000,
// rating: 4.8,
// level: '进阶',
// duration: '50小时',
// category: '数据科学',
// progress: 45,
// thumbnail: '/images/course6.jpg',
// },
// {
// id: 7,
// title: '云计算实践',
// instructor: '孙教授',
// students: 7500,
// rating: 4.7,
// level: '高级',
// duration: '48小时',
// category: '云计算',
// progress: 15,
// thumbnail: '/images/course7.jpg',
// },
// {
// id: 8,
// title: '移动应用开发',
// instructor: '周教授',
// students: 9000,
// rating: 4.8,
// level: '中级',
// duration: '40小时',
// category: '移动开发',
// progress: 70,
// thumbnail: '/images/course8.jpg',
// },
// ];
const { data, isLoading }: { data: Courses[]; isLoading: boolean } =
api.post.findMany.useQuery({
where: {},
include: {
instructors: true,
},
orderBy: {
createdAt: "desc", // 按创建时间降序排列
},
take: 8, // 只获取前8个课程
});
useEffect(() => {
if (data) {
console.log("mockCourses data:", data);
}
}, [data]);
return (
<div className="min-h-screen">
<HeroSection />
<CoursesSection
title="推荐课程"
description="最受欢迎的精品课程，助你快速成长"
courses={data}
isLoading={isLoading}
/>
{/* {formattedCourses.map((course)=>{
// 数据处理逻辑
// 修正依赖数组
return (
<div className="min-h-screen">
<HeroSection />
<CoursesSection
title="推荐课程"
description="最受欢迎的精品课程，助你快速成长"
courses={data}
isLoading={isLoading}
/>
{/* {formattedCourses.map((course)=>{
return (
<>
<span>course.title</span>
</>
)
})} */}
{/* <CoursesSection
{/* <CoursesSection
title="热门课程"
description="最受欢迎的精品课程，助你快速成长"
courses={mockCourses}
/> */}
<CategorySection />
{/* <FeaturedTeachersSection /> */}
</div>
);
<CategorySection />
{/* <FeaturedTeachersSection /> */}
</div>
);
};
export default HomePage;
export default HomePage;

4
apps/web/src/components/models/term/term-select.tsx
View File

@ -23,7 +23,7 @@ export default function TermSelect({
value,
onChange,
className,
placeholder = "选择单位",
placeholder = "选择分类",
multiple = false,
taxonomyId,
domainId,
@ -190,4 +190,4 @@ export default function TermSelect({
onDropdownVisibleChange={handleDropdownVisibleChange}
/>
);
}
}

199
apps/web/src/components/models/term/term-tree.tsx Normal file
View File

@ -0,0 +1,199 @@
import React, { useEffect, useState, useCallback } from "react";
import { Tree } from "antd";
import type { DataNode, TreeProps } from "antd/es/tree";
import { getUniqueItems } from "@nice/common";
import { api } from "@nice/client";
interface TermData {
value?: string;
children?: TermData[];
key?: string;
hasChildren?: boolean;
isLeaf?: boolean;
pId?: string;
title?: React.ReactNode;
data?: any;
order?: string;
id?: string;
}
interface TermTreeProps {
defaultValue?: string | string[];
value?: string | string[];
onChange?: (value: string | string[]) => void;
multiple?: boolean;
taxonomyId?: string;
disabled?: boolean;
className?: string;
domainId?: string;
style?: React.CSSProperties;
}
const TermTree: React.FC<TermTreeProps> = ({
defaultValue,
value,
onChange,
className,
multiple = false,
taxonomyId,
domainId,
disabled = false,
style,
}) => {
const utils = api.useUtils();
const [treeData, setTreeData] = useState<TermData[]>([]);
const processTermData = (terms: TermData[]): TermData[] => {
return terms.map((term) => ({
...term,
key: term.key || term.id || "",
title: term.title || term.value,
children: term.children
? processTermData(term.children)
: undefined,
}));
};
const fetchParentTerms = useCallback(
async (termIds: string | string[], taxonomyId?: string) => {
const idsArray = Array.isArray(termIds)
? termIds
: [termIds].filter(Boolean);
try {
const result = await utils.term.getParentSimpleTree.fetch({
termIds: idsArray,
taxonomyId,
domainId,
});
return processTermData(result);
} catch (error) {
console.error(
"Error fetching parent terms for termIds",
idsArray,
":",
error
);
throw error;
}
},
[utils, domainId]
);
const fetchTerms = useCallback(async () => {
try {
const rootTerms = await utils.term.getChildSimpleTree.fetch({
taxonomyId,
domainId,
});
let combinedTerms = processTermData(rootTerms);
if (defaultValue) {
const defaultTerms = await fetchParentTerms(
defaultValue,
taxonomyId
);
combinedTerms = getUniqueItems(
[...treeData, ...combinedTerms, ...defaultTerms],
"key"
);
}
if (value) {
const valueTerms = await fetchParentTerms(value, taxonomyId);
combinedTerms = getUniqueItems(
[...treeData, ...combinedTerms, ...valueTerms],
"key"
);
}
setTreeData(combinedTerms);
} catch (error) {
console.error("Error fetching terms:", error);
}
}, [
defaultValue,
value,
taxonomyId,
utils,
fetchParentTerms,
domainId,
treeData,
]);
useEffect(() => {
fetchTerms();
}, [fetchTerms]);
const onLoadData = async ({ key }: any) => {
try {
const result = await utils.term.getChildSimpleTree.fetch({
termIds: [key],
taxonomyId,
domainId,
});
const processedResult = processTermData(result);
const newItems = getUniqueItems(
[...treeData, ...processedResult],
"key"
);
setTreeData(newItems);
} catch (error) {
console.error(
"Error loading data for node with key",
key,
":",
error
);
}
};
const handleCheck: TreeProps["onCheck"] = (checkedKeys, info) => {
if (onChange) {
if (multiple) {
onChange(checkedKeys as string[]);
} else {
onChange((checkedKeys as string[])[0] || "");
}
}
};
const handleExpand = async (expandedKeys: React.Key[]) => {
try {
const allKeyIds = expandedKeys
.map((key) => key.toString())
.filter(Boolean);
const expandedNodes = await utils.term.getChildSimpleTree.fetch({
termIds: allKeyIds,
taxonomyId,
domainId,
});
const processedNodes = processTermData(expandedNodes);
const newItems = getUniqueItems(
[...treeData, ...processedNodes],
"key"
);
setTreeData(newItems);
} catch (error) {
console.error(
"Error expanding nodes with keys",
expandedKeys,
":",
error
);
}
};
return (
<Tree
checkable={multiple}
disabled={disabled}
className={className}
style={style}
treeData={treeData as DataNode[]}
checkedKeys={Array.isArray(value) ? value : value ? [value] : []}
onCheck={handleCheck}
loadData={onLoadData}
onExpand={handleExpand}
/>
);
};
export default TermTree;

27
apps/web/src/components/models/term/util.ts
View File

@ -1,15 +1,16 @@
import { TreeDataNode } from "@nice/common"
import { TreeDataNode } from "@nice/common";
import React from "react";
export const treeVisitor = (
data: TreeDataNode[],
key: React.Key,
callback: (node: TreeDataNode, i: number, data: TreeDataNode[]) => void
data: TreeDataNode[],
key: React.Key,
callback: (node: TreeDataNode, i: number, data: TreeDataNode[]) => void
) => {
for (let i = 0; i < data.length; i++) {
if (data[i].key === key) {
return callback(data[i], i, data);
}
if (data[i].children) {
treeVisitor(data[i].children!, key, callback);
}
}
};
for (let i = 0; i < data.length; i++) {
if (data[i].key === key) {
return callback(data[i], i, data);
}
if (data[i].children) {
treeVisitor(data[i].children!, key, callback);
}
}
};