feat(web): fix functionPannel & dataPannel (#586)

Author: kongwy229

web/src/components/CopyText/index.tsx

@@ -8,12 +8,13 @@ import useGlobalStore from "@/pages/globalStore";
 export default function CopyText(props: {
   text: string;
   tip?: string;
+  className?: string;
   children?: React.ReactElement;
 }) {
   const { onCopy, setValue } = useClipboard("");
   const { showSuccess } = useGlobalStore();
 
-  const { children = <CopyIcon />, text, tip } = props;
+  const { children = <CopyIcon />, text, tip, className } = props;
 
   useEffect(() => {
     setValue(text);
@@ -22,7 +23,7 @@ export default function CopyText(props: {
   return (
     <Tooltip label={t("ToolTip.Copy")} placement="top">
       {React.cloneElement(children, {
-        className: "ml-2",
+        className: "ml-2 " + (className || ""),
         onClick: () => {
           onCopy();
           showSuccess(tip || t("ToolTip.Copied"));

web/src/pages/app/database/CollectionDataList/index.tsx

@@ -2,29 +2,29 @@ import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 
 import RightPanel from "../../mods/RightPanel";
 
-import ColPannel from "./mods/ColPannel";
+// import ColPannel from "./mods/ColPannel";
 import DataPannel from "./mods/DataPannel";
-import IndexPannel from "./mods/IndexPannel";
+// import IndexPannel from "./mods/IndexPannel";
 
 export default function CollectionDataList() {
   return (
     <RightPanel>
       <Tabs className="h-full">
         <TabList>
           <Tab>数据管理</Tab>
-          <Tab>索引管理</Tab>
-          <Tab>集合结构</Tab>
+          {/* <Tab>索引管理</Tab>
+          <Tab>集合结构</Tab> */}
         </TabList>
         <TabPanels className="h-full">
           <TabPanel className="overflow-hidden relative" style={{ height: "calc(100% - 55px)" }}>
             <DataPannel />
           </TabPanel>
-          <TabPanel>
+          {/* <TabPanel>
             <IndexPannel />
           </TabPanel>
           <TabPanel className="overflow-hidden relative" style={{ height: "calc(100% - 35px)" }}>
             <ColPannel />
-          </TabPanel>
+          </TabPanel> */}
         </TabPanels>
       </Tabs>
     </RightPanel>

web/src/pages/app/database/CollectionDataList/mods/DataPannel/index.tsx

@@ -10,13 +10,14 @@ import Pagination from "@/components/Pagination";
 import getPageInfo from "@/utils/getPageInfo";
 
 import { useAddDataMutation, useEntryDataQuery, useUpdateDataMutation } from "../../../service";
+import useDBMStore from "../../../store";
 
 import DeleteButton from "./DeleteButton";
 export default function DataPannel() {
   const [currentData, setCurrentData] = useState<any>(undefined);
 
   const [record, setRecord] = useState("");
-
+  const store = useDBMStore((state) => state);
   type FormData = {
     _id: string;
   };
@@ -71,9 +72,16 @@ export default function DataPannel() {
                   pointerEvents="none"
                   children={<Search2Icon color="gray.300" />}
                 />
-                <Input borderRadius="4" placeholder="_id" bg="white" {...register("_id")} />
+                <Input
+                  disabled={store.currentDB === undefined}
+                  borderRadius="4"
+                  placeholder="_id"
+                  bg="white"
+                  {...register("_id")}
+                />
               </InputGroup>
               <Button
+                disabled={store.currentDB === undefined}
                 px={9}
                 type={"submit"}
                 colorScheme={"green"}
@@ -86,6 +94,7 @@ export default function DataPannel() {
           </div>
         </form>
         <Button
+          disabled={store.currentDB === undefined}
           colorScheme={"primary"}
           size="sm"
           onClick={() => {

web/src/pages/app/database/CollectionListPanel/index.tsx

@@ -21,6 +21,8 @@ export default function CollectionListPanel() {
     onSuccess: (data) => {
       if (data.data.length > 0) {
         store.setCurrentDB(data.data[0]);
+      } else {
+        store.setCurrentDB(undefined);
       }
     },
   });

web/src/pages/app/database/store.ts

@@ -5,8 +5,8 @@ import { immer } from "zustand/middleware/immer";
 import { TDB } from "@/apis/typing";
 
 type State = {
-  currentDB?: TDB;
-  setCurrentDB: (currentDB: TDB) => void;
+  currentDB?: TDB | undefined;
+  setCurrentDB: (currentDB: TDB | undefined) => void;
 };
 
 const useDBMStore = create<State>()(

web/src/pages/app/functions/index.tsx

@@ -5,7 +5,6 @@
 import { Badge, Button, Center, HStack } from "@chakra-ui/react";
 import { t } from "i18next";
 
-import CopyText from "@/components/CopyText";
 import FunctionEditor from "@/components/Editor/FunctionEditor";
 import FileTypeIcon, { FileType } from "@/components/FileTypeIcon";
 import PanelHeader from "@/components/Panel/Header";
@@ -75,12 +74,6 @@ function FunctionPage() {
                 </div>
 
                 <HStack spacing="4">
-                  {store.getFunctionUrl() !== "" && (
-                    <span>
-                      <span className=" text-slate-500">调用地址：{store.getFunctionUrl()}</span>
-                      <CopyText text={store.getFunctionUrl()} />
-                    </span>
-                  )}
                   <DeployButton />
                   <Button
                     size="sm"

web/src/pages/app/functions/mods/DebugPannel/index.tsx

@@ -1,9 +1,12 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import {
   Button,
   Center,
   Input,
+  InputGroup,
+  InputRightElement,
+  Select,
   Spinner,
   Tab,
   TabList,
@@ -14,6 +17,7 @@ import {
 import axios from "axios";
 import { t } from "i18next";
 
+import CopyText from "@/components/CopyText";
 import JsonEditor from "@/components/Editor/JsonEditor";
 import PanelHeader from "@/components/Panel/Header";
 import { Pages } from "@/constants";
@@ -34,6 +38,7 @@ export default function DebugPanel() {
 
   const [runningResData, setRunningResData] = useState();
   const [isLoading, setIsLoading] = useState(false);
+  const [runningMethod, setRunningMethod] = useState<string>("");
 
   const compileMutation = useCompileMutation();
 
@@ -58,6 +63,11 @@ export default function DebugPanel() {
       enabled: globalStore.currentPageId === Pages.function,
     },
   );
+  useEffect(() => {
+    if (currentFunction?.methods) {
+      setRunningMethod(currentFunction.methods[0]);
+    }
+  }, [setRunningMethod, currentFunction]);
 
   const runningCode = async () => {
     if (isLoading || !currentFunction?.id) return;
@@ -70,7 +80,7 @@ export default function DebugPanel() {
       if (!compileRes.error) {
         const res = await axios({
           url: getFunctionDebugUrl(),
-          method: "post",
+          method: runningMethod,
           data: {
             func: compileRes.data || "",
             param: JSON.parse(params),
@@ -101,10 +111,29 @@ export default function DebugPanel() {
             <div className="flex flex-col h-full">
               <div className="flex-1 border-r-slate-300 flex flex-col">
                 <div className="flex py-4 px-2 items-center">
-                  <Button size="sm" className="mr-2">
-                    GET
-                  </Button>
-                  <Input size="sm" readOnly rounded={4} value={getFunctionDebugUrl()} />
+                  <Select
+                    width="150px"
+                    size="sm"
+                    value={runningMethod}
+                    disabled={getFunctionDebugUrl() === ""}
+                    onChange={(e) => {
+                      setRunningMethod(e.target.value);
+                    }}
+                  >
+                    {currentFunction.methods?.map((item: string) => {
+                      return (
+                        <option value={item} key={item}>
+                          {item}
+                        </option>
+                      );
+                    })}
+                  </Select>
+                  <InputGroup className="ml-2">
+                    <Input size="sm" readOnly rounded={4} value={getFunctionDebugUrl()} />
+                    <InputRightElement>
+                      <CopyText text={getFunctionDebugUrl()} className="mb-2" />
+                    </InputRightElement>
+                  </InputGroup>
                   <Button
                     style={{ borderRadius: 2 }}
                     size="sm"