linfeng
/
training_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
ditiqi 2025-02-25 12:31:37 +08:00
parent d5aa2f02d1
commit b36d90d011
7 changed files with 567 additions and 342 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 ...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件 ? {} // 当有全局权限时，不添加任何额外条件
: { : {
// 当无全局权限时，添加域ID过滤 // 当无全局权限时，添加域ID过滤
OR: [ OR: [
{ domainId: null }, // 通用记录 { domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录 { domainId: domainId }, // 特定域记录
], ],
}), }),
}, },
ancestorId: parentId, ancestorId: parentId,
relDepth: 1, relDepth: 1,
@ -315,29 +315,29 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
}), }),
termIds termIds
? db.term.findMany({ ? db.term.findMany({
where: { where: {
...(termIds && { ...(termIds && {
OR: [
...(validTermIds.length
? [{ id: { in: validTermIds } }]
: []),
],
}),
taxonomyId: taxonomyId,
// 动态权限控制条件
...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件
: {
// 当无全局权限时，添加域ID过滤
OR: [ OR: [
{ domainId: null }, // 通用记录 ...(validTermIds.length
{ domainId: domainId }, // 特定域记录 ? [{ id: { in: validTermIds } }]
: []),
], ],
}), }),
}, taxonomyId: taxonomyId,
include: { children: true }, // 动态权限控制条件
orderBy: { order: 'asc' }, ...(hasAnyPerms
}) ? {} // 当有全局权限时，不添加任何额外条件
: {
// 当无全局权限时，添加域ID过滤
OR: [
{ domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录
],
}),
},
include: { children: true },
orderBy: { order: 'asc' },
})
: [], : [],
]); ]);
const children = childrenData const children = childrenData
@ -371,12 +371,12 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
...(hasAnyPerms ...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件 ? {} // 当有全局权限时，不添加任何额外条件
: { : {
// 当无全局权限时，添加域ID过滤 // 当无全局权限时，添加域ID过滤
OR: [ OR: [
{ domainId: null }, // 通用记录 { domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录 { domainId: domainId }, // 特定域记录
], ],
}), }),
}, },
}, },
include: { include: {
@ -398,12 +398,12 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
...(hasAnyPerms ...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件 ? {} // 当有全局权限时，不添加任何额外条件
: { : {
// 当无全局权限时，添加域ID过滤 // 当无全局权限时，添加域ID过滤
OR: [ OR: [
{ domainId: null }, // 通用记录 { domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录 { domainId: domainId }, // 特定域记录
], ],
}), }),
}, },
include: { children: true }, // 包含子节点信息 include: { children: true }, // 包含子节点信息
orderBy: { order: 'asc' }, // 按顺序升序排序 orderBy: { order: 'asc' }, // 按顺序升序排序

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

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

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

@ -3,80 +3,107 @@ import { mockCourses } from "./mockData";
import FilterSection from "./components/FilterSection"; import FilterSection from "./components/FilterSection";
import CourseList from "./components/CourseList"; import CourseList from "./components/CourseList";
import { api } from "@nice/client"; 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 { useSearchParams } from "react-router-dom";
import { set } from "idb-keyval"; import { set } from "idb-keyval";
export default function CoursesPage() { export default function CoursesPage() {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [selectedCategory, setSelectedCategory] = useState(""); const [selectedCategory, setSelectedCategory] = useState("");
const [selectedLevel, setSelectedLevel] = useState(""); const [selectedLevel, setSelectedLevel] = useState("");
const pageSize = 9; const pageSize = 9;
const [isAll,setIsAll] = useState(true) const [isAll, setIsAll] = useState(true);
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
let coursesData = [] let coursesData = [];
let isCourseLoading = false let isCourseLoading = false;
if(!searchParams.get('searchValue')){ if (!searchParams.get("searchValue")) {
console.log('no category') console.log("no category");
const {data,isLoading} = api.post.findManyWithPagination.useQuery({ const { data, isLoading } = api.post.findManyWithPagination.useQuery({
where: { where: {
type: PostType.COURSE, type: PostType.COURSE,
terms:isAll?{}:{ terms: isAll
some: { ? {}
OR : [ : {
selectedCategory?{name:selectedCategory}:{}, some: {
selectedLevel?{name:selectedLevel}:{} OR: [
], selectedCategory
}, ? { name: selectedCategory }
}, : {},
selectedLevel
? { name: selectedLevel }
: {},
],
},
},
}, },
select:courseDetailSelect select: courseDetailSelect,
}); });
coursesData = data?.items coursesData = data?.items;
isCourseLoading = isLoading isCourseLoading = isLoading;
}else{ } else {
console.log('searchValue:'+searchParams.get('searchValue')) console.log("searchValue:" + searchParams.get("searchValue"));
const searchValue = searchParams.get('searchValue') const searchValue = searchParams.get("searchValue");
const {data,isLoading} = api.post.findManyWithPagination.useQuery({ const { data, isLoading } = api.post.findManyWithPagination.useQuery({
where: { where: {
type: PostType.COURSE, type: PostType.COURSE,
OR:[ OR: [
{ title: { contains: searchValue, mode: 'insensitive' } }, { title: { contains: searchValue, mode: "insensitive" } },
{ subTitle: { contains: searchValue, mode: 'insensitive' } }, {
{ content: { contains: searchValue, mode: 'insensitive' } }, subTitle: {
{ terms: { some: { name: { contains: searchValue, mode: 'insensitive' } } } } contains: searchValue,
] mode: "insensitive",
},
},
{ content: { contains: searchValue, mode: "insensitive" } },
{
terms: {
some: {
name: {
contains: searchValue,
mode: "insensitive",
},
},
},
},
],
}, },
select:courseDetailSelect select: courseDetailSelect,
}) });
coursesData = data?.items coursesData = data?.items;
isCourseLoading = isLoading isCourseLoading = isLoading;
} }
useEffect(() => { useEffect(() => {
if(searchParams.get('searchValue')==''){ if (searchParams.get("searchValue") == "") {
setSelectedCategory(''); setSelectedCategory("");
setSelectedLevel('') setSelectedLevel("");
} }
}, [searchParams.get('searchValue')]); }, [searchParams.get("searchValue")]);
const filteredCourses = useMemo(() => { const filteredCourses = useMemo(() => {
return isCourseLoading ? [] : coursesData; return isCourseLoading ? [] : coursesData;
}, [isCourseLoading, coursesData, selectedCategory, selectedLevel]); }, [isCourseLoading, coursesData, selectedCategory, selectedLevel]);
const paginatedCourses :CourseDto[]= useMemo(() => { const paginatedCourses: CourseDto[] = useMemo(() => {
const startIndex = (currentPage - 1) * pageSize; 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]); }, [filteredCourses, currentPage]);
const handlePageChange = (page: number) => { const handlePageChange = (page: number) => {
setCurrentPage(page); setCurrentPage(page);
window.scrollTo({ top: 0, behavior: "smooth" }); window.scrollTo({ top: 0, behavior: "smooth" });
}; };
useEffect(()=>{ useEffect(() => {
setCurrentPage(1) setCurrentPage(1);
},[]) }, []);
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
@ -92,14 +119,14 @@ export default function CoursesPage() {
console.log(category); console.log(category);
setSelectedCategory(category); setSelectedCategory(category);
setCurrentPage(1); setCurrentPage(1);
setIsAll(!category) setIsAll(!category);
setSearchParams({ searchValue: ''}); setSearchParams({ searchValue: "" });
}} }}
onLevelChange={(level) => { onLevelChange={(level) => {
setSelectedLevel(level); setSelectedLevel(level);
setCurrentPage(1); setCurrentPage(1);
setIsAll(!level) setIsAll(!level);
setSearchParams({ searchValue: ''}); setSearchParams({ searchValue: "" });
}} }}
/> />
</div> </div>

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

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

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

@ -23,7 +23,7 @@ export default function TermSelect({
value, value,
onChange, onChange,
className, className,
placeholder = "选择单位", placeholder = "选择分类",
multiple = false, multiple = false,
taxonomyId, taxonomyId,
domainId, domainId,

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;

25
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 = ( export const treeVisitor = (
data: TreeDataNode[], data: TreeDataNode[],
key: React.Key, key: React.Key,
callback: (node: TreeDataNode, i: number, data: TreeDataNode[]) => void callback: (node: TreeDataNode, i: number, data: TreeDataNode[]) => void
) => { ) => {
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (data[i].key === key) { if (data[i].key === key) {
return callback(data[i], i, data); return callback(data[i], i, data);
} }
if (data[i].children) { if (data[i].children) {
treeVisitor(data[i].children!, key, callback); treeVisitor(data[i].children!, key, callback);
} }
} }
}; };