From 7cc81b42691e7d5faf5c5bd8c652471826e07843 Mon Sep 17 00:00:00 2001 From: Joel Date: Tue, 15 Aug 2023 09:51:43 +0800 Subject: [PATCH] fix: var config content can not be saved (#841) --- .../config-var/config-model/index.tsx | 37 +++++++++++-------- .../app/configuration/config-var/index.tsx | 20 +++++----- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/web/app/components/app/configuration/config-var/config-model/index.tsx b/web/app/components/app/configuration/config-var/config-model/index.tsx index 8d70148992..086721ae4d 100644 --- a/web/app/components/app/configuration/config-var/config-model/index.tsx +++ b/web/app/components/app/configuration/config-var/config-model/index.tsx @@ -1,30 +1,32 @@ 'use client' -import React, { FC, useState, useEffect } from 'react' +import type { FC } from 'react' +import React, { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' -import Modal from '@/app/components/base/modal' import ModalFoot from '../modal-foot' -import ConfigSelect, { Options } from '../config-select' +import type { Options } from '../config-select' +import ConfigSelect from '../config-select' import ConfigString from '../config-string' +import SelectTypeItem from '../select-type-item' +import s from './style.module.css' import Toast from '@/app/components/base/toast' import type { PromptVariable } from '@/models/debug' -import SelectTypeItem from '../select-type-item' import { getNewVar } from '@/utils/var' -import s from './style.module.css' +import Modal from '@/app/components/base/modal' -export interface IConfigModalProps { +export type IConfigModalProps = { payload: PromptVariable type?: string isShow: boolean onClose: () => void - onConfirm: (newValue: { type: string, value: any }) => void + onConfirm: (newValue: { type: string; value: any }) => void } const ConfigModal: FC = ({ payload, isShow, onClose, - onConfirm + onConfirm, }) => { const { t } = useTranslation() const { type, name, key, options, max_length } = payload || getNewVar('') @@ -42,7 +44,7 @@ const ConfigModal: FC = ({ const isStringInput = tempType === 'string' const title = isStringInput ? t('appDebug.variableConig.maxLength') : t('appDebug.variableConig.options') - // string type + // string type const [tempMaxLength, setTempMaxValue] = useState(max_length) useEffect(() => { setTempMaxValue(max_length) @@ -57,14 +59,15 @@ const ConfigModal: FC = ({ const handleConfirm = () => { if (isStringInput) { onConfirm({ type: tempType, value: tempMaxLength }) - } else { + } + else { if (tempOptions.length === 0) { Toast.notify({ type: 'error', message: 'At least one option requied' }) return } const obj: Record = {} let hasRepeatedItem = false - tempOptions.forEach(o => { + tempOptions.forEach((o) => { if (obj[o]) { hasRepeatedItem = true return @@ -97,11 +100,13 @@ const ConfigModal: FC = ({
{title}
- {isStringInput ? ( - - ) : ( - - )} + {isStringInput + ? ( + + ) + : ( + + )}
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx index ad6ce48c0d..edbab2fafb 100644 --- a/web/app/components/app/configuration/config-var/index.tsx +++ b/web/app/components/app/configuration/config-var/index.tsx @@ -4,6 +4,7 @@ import React, { useState } from 'react' import { useTranslation } from 'react-i18next' import { Cog8ToothIcon, TrashIcon } from '@heroicons/react/24/outline' import { useBoolean } from 'ahooks' +import type { Timeout } from 'ahooks/lib/useRequest/src/types' import Panel from '../base/feature-panel' import OperationBtn from '../base/operation-btn' import VarIcon from '../base/icons/var-icon' @@ -16,7 +17,6 @@ import { DEFAULT_VALUE_MAX_LEN, getMaxVarNameLength } from '@/config' import { checkKeys, getNewVar } from '@/utils/var' import Switch from '@/app/components/base/switch' import Toast from '@/app/components/base/toast' -import { Timeout } from 'ahooks/lib/useRequest/src/types' export type IConfigVarProps = { promptVariables: PromptVariable[] @@ -37,9 +37,9 @@ const ConfigVar: FC = ({ promptVariables, readonly, onPromptVar return obj })() - const updatePromptVariable = (index: number, updateKey: string, newValue: any) => { + const updatePromptVariable = (key: string, updateKey: string, newValue: any) => { const newPromptVariables = promptVariables.map((item, i) => { - if (i === index) { + if (item.key === key) { return { ...item, [updateKey]: newValue, @@ -48,13 +48,12 @@ const ConfigVar: FC = ({ promptVariables, readonly, onPromptVar return item }) - onPromptVariablesChange?.(newPromptVariables) } - const batchUpdatePromptVariable = (index: number, updateKeys: string[], newValues: any[]) => { - const newPromptVariables = promptVariables.map((item, i) => { - if (i === index) { + const batchUpdatePromptVariable = (key: string, updateKeys: string[], newValues: any[]) => { + const newPromptVariables = promptVariables.map((item) => { + if (item.key === key) { const newItem: any = { ...item } updateKeys.forEach((updateKey, i) => { newItem[updateKey] = newValues[i] @@ -93,11 +92,10 @@ const ConfigVar: FC = ({ promptVariables, readonly, onPromptVar if (isKeyExists) { Toast.notify({ type: 'error', - message: t(`appDebug.varKeyError.keyAlreadyExists`, { key: newKey }), + message: t('appDebug.varKeyError.keyAlreadyExists', { key: newKey }), }) - return } - },1000) + }, 1000) onPromptVariablesChange?.(newPromptVariables) } @@ -206,7 +204,7 @@ const ConfigVar: FC = ({ promptVariables, readonly, onPromptVar type="text" placeholder={key} value={name} - onChange={e => updatePromptVariable(index, 'name', e.target.value)} + onChange={e => updatePromptVariable(key, 'name', e.target.value)} maxLength={getMaxVarNameLength(name)} className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" />)