!2496 功能:配置列表界面新增模糊查询

src/UI/Components/Board/ConfigList.tsx

@@ -4,11 +4,13 @@ import { observer } from "mobx-react";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
+import { CompareIsEqual } from "../../../Add-on/BoardFindModify";
 import { CustomNumContainer, CustomNumberItem } from "../../../Add-on/CustomNumber/CustomNumContainer";
 import { CustomNumberStore } from "../../../Add-on/CustomNumber/CustomNumberPanel";
 import { templateTagCommand } from "../../../Add-on/Template/TemplateTagCommand";
 import { KeyBoard } from "../../../Common/KeyEnum";
 import { commandReg } from "../../../Common/Utils";
+import { ECompareType } from "../../Store/BoardFindInterface";
 import { IConfigStore } from "../../Store/BoardStore";
 import { configListMapStore } from "../../Store/ConfigListMapStore";
 import { userConfigStore } from "../../Store/UserConfigStore";
@@ -33,8 +35,8 @@ interface IConfigListProps
     configType: Config_ModalType;
     isNotModify?: boolean;
     updateBoardOption: (k: string) => void;
-    handleSaveConfig: () => void;
+    handleSaveConfig: () => Promise<void>;
-    handleDeleteConfig: () => void;
+    handleDeleteConfig: () => Promise<void>;
 }
 @observer
 export class ConfigList extends React.Component<IConfigListProps>
@@ -43,7 +45,7 @@ export class ConfigList extends React.Component<IConfigListProps>
     @observable private isShow = false;
     @observable private isCNInput: boolean = false;
     isResetName = observable.box(false);
-
+    @observable private searchName = "";
     isShowCoustomNumList = observable.box(false);
     private tagRef = React.createRef<HTMLInputElement>();
     disposeAutorun: Function;
@@ -58,6 +60,7 @@ export class ConfigList extends React.Component<IConfigListProps>
 
     componentWillUnmount()
     {
+        this.searchName = "";
         if (this.disposeAutorun)
             this.disposeAutorun();
         this.disposeAutorun = undefined;
@@ -173,7 +176,6 @@ export class ConfigList extends React.Component<IConfigListProps>
                                                             shouldDismissPopover={!this.isResetName.get()}
                                                             text={
                                                                 <TabContainer
-                                                                    index={index}
                                                                     keyName={card.text}
                                                                     type={type}
                                                                     store={store}
@@ -217,7 +219,7 @@ export class ConfigList extends React.Component<IConfigListProps>
                     intent={Intent.DANGER}
                     disabled={this.isResetName.get()}
                     style={{ marginLeft: 3 }}
-                    onClick={async () => { this.props.handleDeleteConfig(); }}
+                    onClick={async () => { await this.props.handleDeleteConfig(); }}
                 />
             </div>
         );
@@ -245,10 +247,21 @@ export class ConfigList extends React.Component<IConfigListProps>
     ConfigListTag = (errorMsg: string) =>
     {
         const { store, type } = this.props;
+        const configsNames = store.configsNames.filter(name => CompareIsEqual(name, this.searchName, ECompareType.Include));
         return (
             <div className='config-list'>
                 <div className="flex-between">
                     <h4 className="bp3-heading">{`${this.isShowCoustomNumList.get() ? "列表排序" : "配置列表"}`}</h4>
+                    <input
+                        tabIndex={1}
+                        className="bp3-input"
+                        style={{ width: 80, height: 24 }}
+                        placeholder="搜索..."
+                        onChange={(e) =>
+                        {
+                            this.searchName = e.currentTarget.value.trim();
+                        }}
+                    />
                     <Tooltip
                         content={"自定义排序"}
                         position={Position.TOP}
@@ -281,14 +294,13 @@ export class ConfigList extends React.Component<IConfigListProps>
                                     selectedTabId={store.configName}
                                 >
                                     {
-                                        store.configsNames.map((key, i) =>
+                                        configsNames.map((key, i) =>
                                             <Tab
                                                 key={key}
                                                 id={key}
                                                 className="config-tab"
                                                 title={
                                                     <TabContainer
-                                                        index={i}
                                                         keyName={key}
                                                         type={type}
                                                         store={store}

src/UI/Components/Board/ConfigListTabContainer.tsx

@@ -10,14 +10,13 @@ import { BoardModalType } from './BoardModalType';
 
 export interface ITabContainer
 {
-    index: number;
     keyName: string;
     type: BoardModalType;
     store: IConfigStore;
     isResetName: IObservableValue<Boolean>;
     isTip?: boolean;
 }
-export const TabContainer: FC<ITabContainer> = observer(({ index, keyName, type, isResetName, store, isTip }) =>
+export const TabContainer: FC<ITabContainer> = observer(({ keyName, type, isResetName, store, isTip }) =>
 {
     const curIsResetName = useRef(false);
     let [curInputName, setCurInputName] = useState("");
@@ -73,7 +72,7 @@ export const TabContainer: FC<ITabContainer> = observer(({ index, keyName, type,
                                 {
                                     if (curInputName.length && curInputName != keyName)
                                     {
-                                        await userConfigStore.ResetNameConfig(type, store, keyName, curInputName, index);
+                                        await userConfigStore.ResetNameConfig(type, store, keyName, curInputName);
                                     }
                                     handleClose();
                                 }}

src/UI/Store/UserConfigStore.tsx

@@ -516,7 +516,7 @@ export class UserConfigStore extends Singleton
     /**
     * 重命名配置,重命名前需要保证名称正确可用
     */
-    async ResetNameConfig(type: BoardModalType, store: IConfigStore, oldName: string, newName: string, index: number)
+    async ResetNameConfig(type: BoardModalType, store: IConfigStore, oldName: string, newName: string)
     {
         const configList = await configListMapStore.GetConfig(type);
         if (configList.includes(newName))
@@ -565,7 +565,8 @@ export class UserConfigStore extends Singleton
                 await this.UploadUserConfigNames(dbStore);
             }
 
-            configList[index] = newName;
+            const nameIndex = configList.findIndex(n => n === oldName);
+            configList[nameIndex] = newName;
             await configListMapStore.ResetConfig(type, configList, store);
         }
     }