tjdify/web/app/components/datasets/rename-modal/index.tsx

'use client'

import type { MouseEventHandler } from 'react'
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import { RiCloseLine } from '@remixicon/react'
import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
import Button from '@/app/components/base/button'
import Input from '@/app/components/base/input'
import Textarea from '@/app/components/base/textarea'
import { SimpleSelect } from '@/app/components/base/select'
import Modal from '@/app/components/base/modal'
import { ToastContext } from '@/app/components/base/toast'
import type { DataSet } from '@/models/datasets'
import { tagBindingsCreate, tagBindingsRemove, updateDatasetSetting } from '@/service/datasets'
import { useModalContext } from '@/context/modal-context'
import { fetchDeptUsers, fetchTypes } from '@/service/common'
import { TreeSelect as AntdTreeSelect } from 'antd'

type RenameDatasetModalProps = {
  show: boolean
  dataset: DataSet
  onSuccess?: () => void
  onClose: () => void
}

const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDatasetModalProps) => {
  const { t } = useTranslation()
  const { notify } = useContext(ToastContext)
  const [loading, setLoading] = useState(false)
  const [name, setName] = useState<string>(dataset.name)
  const [description, setDescription] = useState<string>(dataset.description)
  const [externalKnowledgeId, setExternalKnowledgeId] = useState<string>(dataset.external_knowledge_info.external_knowledge_id)
  const [externalKnowledgeApiId, setExternalKnowledgeApiId] = useState<string>(dataset.external_knowledge_info.external_knowledge_api_id)
  const [type, setType] = useState<any>(dataset.categories[0]?.id)
  const [options, setOptions] = useState<any>([])
  useEffect(() => {
    fetchTypes({
      url: '/tags/page',
      params: {
        page: 1,
        limit: 99999,
        tag_type: 'knowledge_category',
      },
    }).then((res: any) => {
      setOptions(res.data.map((v: any) => ({ name: v.name, value: v.id })) || [])
    })
  }, [])

  const onConfirm: MouseEventHandler = async () => {
    if (!name.trim()) {
      notify({ type: 'error', message: t('datasetSettings.form.nameError') })
      return
    }
    try {
      setLoading(true)
      const body: Partial<DataSet> & { external_knowledge_id?: string; external_knowledge_api_id?: string } = {
        name,
        description,
      }
      if (externalKnowledgeId && externalKnowledgeApiId) {
        body.external_knowledge_id = externalKnowledgeId
        body.external_knowledge_api_id = externalKnowledgeApiId
      }
      await updateDatasetSetting({
        datasetId: dataset.id,
        body,
      })
      if (type) {
        if (dataset.categories[0]) {
          await tagBindingsRemove({
            body: {
              tag_id: dataset.categories[0].id,
              target_id: dataset.id,
              type: 'knowledge_category',
            },
          })
        }
        await tagBindingsCreate({
          body: {
            tag_ids: [type],
            target_id: dataset.id,
            type: 'knowledge_category',
          },
        })
      }
      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
      if (onSuccess)
        onSuccess()
      onClose()
    }
    catch (e) {
      notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
    }
    finally {
      setLoading(false)
    }
  }
  const { setShowAccountSettingModal } = useModalContext()
  const optionsEditAuth = [
    { name: '本账号', value: 1 },
    { name: '本部门', value: 2 },
  ]
  const [editAuth, setEditAuth] = useState()
  const [editUserIds, setEditUserIds] = useState([])
  const [lookUserIds, setLookUserIds] = useState([])
  const [optionsDeptUser, setOptionsDeptUser] = useState<any>([])
  const [optionsDeptUserEdit, setOptionsDeptUserEdit] = useState<any>([])
  useEffect(() => {
    fetchDeptUsers({
      url: '/xxx',
      params: {
        page: 1,
        limit: 99999,
      },
    }).then((res: any) => {
      setOptionsDeptUser(res.data || [])
    })
  }, [])
  useEffect(() => {
    fetchDeptUsers({
      url: '/xxx',
      params: {
        page: 1,
        limit: 99999,
      },
    }).then((res: any) => {
      setOptionsDeptUserEdit(res.data || [])
    })
  }, [])
  return (
    <Modal
      className='w-[520px] max-w-[520px] rounded-xl px-8 py-6'
      isShow={show}
      onClose={() => { }}
    >
      <div className='relative pb-2 text-xl font-medium leading-[30px] text-text-primary'>{t('datasetSettings.title')}</div>
      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onClose}>
        <RiCloseLine className='h-4 w-4 text-text-tertiary' />
      </div>
      <div>
        <div className={cn('flex flex-wrap items-center justify-between py-4')}>
          <div className='flex shrink-0 items-center py-2 text-sm font-medium leading-[20px] text-text-primary'>
            分类管理
            <div style={{
              color: '#1E98D7',
            }} className='ml-3 cursor-pointer hover:opacity-75'
            onClick={() => setShowAccountSettingModal({ payload: 'type' })}>设置</div>
          </div>
          <div className='w-full'>
            <SimpleSelect
              defaultValue={type}
              onSelect={(i) => { setType(i.value) }}
              items={options}
              allowSearch={false}
            />
          </div>
        </div>
        <div className={cn('flex flex-wrap items-center justify-between py-4')}>
          <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
            {t('datasetSettings.form.name')}
          </div>
          <Input
            value={name}
            onChange={e => setName(e.target.value)}
            className='h-9'
            placeholder={t('datasetSettings.form.namePlaceholder') || ''}
          />
        </div>
        <div className={cn('flex flex-wrap items-center justify-between py-4')}>
          <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
            {t('datasetSettings.form.desc')}
          </div>
          <div className='w-full'>
            <Textarea
              value={description}
              onChange={e => setDescription(e.target.value)}
              className='resize-none'
              placeholder={t('datasetSettings.form.descPlaceholder') || ''}
            />
          </div>
        </div>
        <div className='pt-2'>
          <div className='py-2 text-sm font-medium leading-[20px] text-text-primary'>编辑权限</div>
          <div className="h-[32px]">
            <SimpleSelect
              className="h-[32px]"
              defaultValue={editAuth}
              onSelect={(i) => {
                setEditAuth(i.value)
              }}
              items={optionsEditAuth}
              allowSearch={false}
              placeholder="请选择编辑权限"
            />
          </div>
        </div>
        <div className='pt-2'>
          <div className='py-2 text-sm font-medium leading-[20px] text-text-primary'>编辑授权</div>
          <AntdTreeSelect
            showSearch
            style={{ width: '100%' }}
            value={editUserIds}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            placeholder="请选择编辑授权"
            allowClear
            treeDefaultExpandAll
            onChange={v => setEditUserIds(v)}
            treeData={optionsDeptUserEdit}
            fieldNames={{ label: 'name', value: 'id' }}
            multiple={true}
            treeCheckable={true}
          />
        </div>
        <div className='pt-2'>
          <div className='py-2 text-sm font-medium leading-[20px] text-text-primary'>可见授权</div>
          <AntdTreeSelect
            showSearch
            style={{ width: '100%' }}
            value={lookUserIds}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            placeholder="请选择可见授权"
            allowClear
            treeDefaultExpandAll
            onChange={v => setLookUserIds(v)}
            treeData={optionsDeptUser}
            fieldNames={{ label: 'name', value: 'id' }}
            multiple={true}
            treeCheckable={true}
          />
        </div>
      </div>
      <div className='flex justify-end pt-6'>
        <Button className='mr-2' onClick={onClose}>{t('common.operation.cancel')}</Button>
        <Button disabled={loading} variant="primary" onClick={onConfirm}>{t('common.operation.save')}</Button>
      </div>
    </Modal>
  )
}

export default RenameDatasetModal