Commit 65f0378e authored by Joel's avatar Joel

feat: classlist crud

parent f7a90f26
...@@ -11,6 +11,7 @@ type Props = { ...@@ -11,6 +11,7 @@ type Props = {
headerRight?: JSX.Element headerRight?: JSX.Element
minHeight?: number minHeight?: number
onBlur?: () => void onBlur?: () => void
placeholder?: string
} }
const TextEditor: FC<Props> = ({ const TextEditor: FC<Props> = ({
...@@ -20,6 +21,7 @@ const TextEditor: FC<Props> = ({ ...@@ -20,6 +21,7 @@ const TextEditor: FC<Props> = ({
headerRight, headerRight,
minHeight, minHeight,
onBlur, onBlur,
placeholder,
}) => { }) => {
const [isFocus, { const [isFocus, {
setTrue: setIsFocus, setTrue: setIsFocus,
...@@ -45,7 +47,8 @@ const TextEditor: FC<Props> = ({ ...@@ -45,7 +47,8 @@ const TextEditor: FC<Props> = ({
onChange={e => onChange(e.target.value)} onChange={e => onChange(e.target.value)}
onFocus={setIsFocus} onFocus={setIsFocus}
onBlur={handleBlur} onBlur={handleBlur}
className='w-full h-full p-3 resize-none bg-transparent' className='w-full h-full px-3 resize-none bg-transparent border-none focus:outline-none leading-[18px] text-[13px] font-normal text-gray-900 placeholder:text-gray-300'
placeholder={placeholder}
/> />
</Base> </Base>
</div> </div>
......
'use client'
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import type { Topic } from '../types'
import TextEditor from '../../_base/components/editor/text-editor'
import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
const i18nPrefix = 'workflow.nodes.questionClassifiers'
type Props = {
payload: Topic
onChange: (payload: Topic) => void
onRemove: () => void
}
const ClassItem: FC<Props> = ({
payload,
onChange,
onRemove,
}) => {
const { t } = useTranslation()
const [isEdit, {
setTrue: setIsEditTrue,
setFalse: setIsEditFalse,
}] = useBoolean(false)
const handleTopicChange = useCallback((value: string) => {
onChange({ ...payload, topic: value })
}, [onChange, payload])
const handleClassNameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
onChange({ ...payload, name: e.target.value })
}, [onChange, payload])
return (
<TextEditor
title={<div>
<div className='w-[200px]'>
{isEdit
? (
<input
type='text'
className='w-full h-4 leading-4 text-gray-900 text-xs font-normal placeholder:text-gray-300 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
value={payload.name}
onChange={handleClassNameChange}
onBlur={setIsEditFalse}
autoFocus
placeholder={t(`${i18nPrefix}.classNamePlaceholder`)!}
/>
)
: <div
className='leading-4 text-xs font-semibold text-gray-700'
onClick={setIsEditTrue}
>
{payload.name}
</div>}
</div>
</div>}
value={payload.topic}
onChange={handleTopicChange}
placeholder={t(`${i18nPrefix}.topicPlaceholder`)!}
headerRight={(
<div className='flex items-center h-full'>
<div className='text-xs font-medium text-gray-500'>{payload.topic.length}</div>
<div className='mx-3 h-3 w-px bg-gray-200'></div>
<Trash03
className='mr-1 w-3.5 h-3.5 text-gray-500 cursor-pointer'
onClick={onRemove}
/>
</div>
)}
minHeight={64}
/>
)
}
export default React.memo(ClassItem)
...@@ -2,9 +2,13 @@ ...@@ -2,9 +2,13 @@
import type { FC } from 'react' import type { FC } from 'react'
import React, { useCallback } from 'react' import React, { useCallback } from 'react'
import produce from 'immer' import produce from 'immer'
import TextEditor from '../../_base/components/editor/text-editor' import { useTranslation } from 'react-i18next'
import AddButton from '../../_base/components/add-button' import AddButton from '../../_base/components/add-button'
import Item from './class-item'
import type { Topic } from '@/app/components/workflow/nodes/question-classifier/types' import type { Topic } from '@/app/components/workflow/nodes/question-classifier/types'
const i18nPrefix = 'workflow.nodes.questionClassifiers'
type Props = { type Props = {
list: Topic[] list: Topic[]
onChange: (list: Topic[]) => void onChange: (list: Topic[]) => void
...@@ -14,43 +18,51 @@ const ClassList: FC<Props> = ({ ...@@ -14,43 +18,51 @@ const ClassList: FC<Props> = ({
list, list,
onChange, onChange,
}) => { }) => {
const handleTopicChange = useCallback((index: number) => { const { t } = useTranslation()
return (value: string) => {
const handleClassChange = useCallback((index: number) => {
return (value: Topic) => {
const newList = produce(list, (draft) => { const newList = produce(list, (draft) => {
draft[index].topic = value draft[index] = value
}) })
onChange(newList) onChange(newList)
} }
}, [list, onChange]) }, [list, onChange])
const handleAddTopic = useCallback(() => { const handleAddClass = useCallback(() => {
const newList = produce(list, (draft) => { const newList = produce(list, (draft) => {
draft.push({ id: '', name: 'topic aaa', topic: 'aaa' }) draft.push({ id: '', name: t(`${i18nPrefix}.class`) + (list.length + 1), topic: '' })
}) })
onChange(newList) onChange(newList)
}, [list, onChange]) }, [list, onChange])
const handleRemoveClass = useCallback((index: number) => {
return () => {
const newList = produce(list, (draft) => {
draft.splice(index, 1)
})
onChange(newList)
}
}, [list, onChange])
// Todo Remove; edit topic name // Todo Remove; edit topic name
return ( return (
<div className='space-y-2'> <div className='space-y-2'>
{ {
list.map((item, index) => { list.map((item, index) => {
return ( return (
<TextEditor <Item
title={<div>
{/* can edit */}
<div>{item.name}</div>
</div>}
key={index} key={index}
value={item.topic} payload={item}
onChange={handleTopicChange(index)} onChange={handleClassChange(index)}
onRemove={handleRemoveClass(index)}
/> />
) )
}) })
} }
<AddButton <AddButton
onClick={handleAddTopic} onClick={handleAddClass}
text='Add Class' text={t(`${i18nPrefix}.addClass`)}
/> />
</div> </div>
) )
......
...@@ -129,7 +129,10 @@ const translation = { ...@@ -129,7 +129,10 @@ const translation = {
model: 'model', model: 'model',
inputVars: 'Input Variables', inputVars: 'Input Variables',
class: 'Class', class: 'Class',
classNamePlaceholder: 'Write your class name',
advancedSetting: 'Advanced Setting', advancedSetting: 'Advanced Setting',
topicPlaceholder: 'Write your topic name',
addClass: 'Add Class',
}, },
}, },
} }
......
...@@ -127,8 +127,11 @@ const translation = { ...@@ -127,8 +127,11 @@ const translation = {
questionClassifiers: { questionClassifiers: {
model: '模型', model: '模型',
inputVars: '输入变量', inputVars: '输入变量',
class: '类别', class: '分类',
classNamePlaceholder: '输入你的分类名称',
advancedSetting: '高级设置', advancedSetting: '高级设置',
topicPlaceholder: '在这里输入你的主题内容',
addClass: '添加分类',
}, },
}, },
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment