fix(web): function data cannot be stored in local storage (#769)

labring · Feb 11, 2023 · bd983a0 · bd983a0
1 parent 5102a97
commit bd983a0
Show file tree

Hide file tree

Showing 19 changed files with 155 additions and 174 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -93,7 +93,7 @@
     "FunctionNameTip": "The unique identifier of the function, such as get-user",
     "InterfaceDebug": "Interface Debugging",
     "Methods": "Request Method",
-    "Name": "Parameter Name",
+    "Name": "KEY",
     "Tags": "Tags",
     "SearchPlaceholder": "Please enter the function name query",
     "Select": "chosen",
@@ -202,5 +202,6 @@
   "Refresh": "Refresh",
   "RefreshData": "Refresh",
   "EditTip": "modified, unpublished",
-  "NoInfo": "No information"
-}
+  "NoInfo": "No information",
+  "RefreshDataSuccess": "data refreshed"
+}
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -202,5 +202,6 @@
   "EditTip": "已修改,未发布",
   "Refresh": "刷新",
   "RefreshData": "刷新数据",
-  "NoInfo": "暂无信息"
-}
+  "NoInfo": "暂无信息",
+  "RefreshDataSuccess": "数据刷新成功"
+}
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -202,5 +202,6 @@
   "Refresh": "刷新",
   "RefreshData": "刷新数据",
   "EditTip": "已修改,未发布",
-  "NoInfo": "暂无信息"
-}
+  "NoInfo": "暂无信息",
+  "RefreshDataSuccess": "数据刷新成功"
+}
diff --git a/web/src/chakraTheme.ts b/web/src/chakraTheme.ts
@@ -91,6 +91,11 @@ const Button = defineStyleConfig({
       _hover: {
         bg: "primary.700",
       },
+      _disabled: {
+        _hover: {
+          bg: "primary.500 !important",
+        },
+      },
     },
 
     secondary: {

diff --git a/web/src/components/Editor/FunctionEditor.tsx b/web/src/components/Editor/FunctionEditor.tsx
@@ -57,23 +57,6 @@ function FunctionEditor(props: {
   const subscriptionRef = useRef<monaco.IDisposable | undefined>(undefined);
   const monacoEl = useRef(null);
 
-  // onChange
-  useEffect(() => {
-    subscriptionRef.current?.dispose();
-    if (onChange) {
-      subscriptionRef.current = editorRef.current?.onDidChangeModelContent((event) => {
-        onChange(editorRef.current?.getValue());
-        parseImports(editorRef.current?.getValue() || "");
-      });
-    }
-  }, [onChange]);
-
-  useEffect(() => {
-    if (monacoEl && editorRef.current) {
-      updateModel(path, value, editorRef);
-    }
-  }, [path, value]);
-
   useEffect(() => {
     if (monacoEl && !editorRef.current) {
       editorRef.current = monaco.editor.create(monacoEl.current!, {
@@ -102,6 +85,23 @@ function FunctionEditor(props: {
     return () => {};
   }, [path, value]);
 
+  useEffect(() => {
+    if (monacoEl && editorRef.current) {
+      updateModel(path, value, editorRef);
+    }
+  }, [path, value]);
+
+  // onChange
+  useEffect(() => {
+    subscriptionRef.current?.dispose();
+    if (onChange) {
+      subscriptionRef.current = editorRef.current?.onDidChangeModelContent((event) => {
+        onChange(editorRef.current?.getValue());
+        parseImports(editorRef.current?.getValue() || "");
+      });
+    }
+  }, [onChange]);
+
   return <div style={{ height: height }} className={className} ref={monacoEl}></div>;
 }
 

diff --git a/web/src/components/MoreButton/index.tsx b/web/src/components/MoreButton/index.tsx
@@ -1,9 +1,14 @@
-import { Popover, PopoverContent, PopoverTrigger, useDisclosure } from "@chakra-ui/react";
+import {
+  Box,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Tooltip,
+  useDisclosure,
+} from "@chakra-ui/react";
 import clsx from "clsx";
-import { t } from "i18next";
 
 import { MoreIcon } from "@/components/CommonIcon/index";
-import IconWrap from "@/components/IconWrap";
 
 export default function MoreButton(props: {
   children: React.ReactElement;
@@ -21,21 +26,15 @@ export default function MoreButton(props: {
         closeOnBlur={true}
         placement="bottom"
       >
-        <IconWrap
-          size={25}
-          className="text-grayIron-600 hover:bg-[#f0f9f9] -mr-2"
-          tooltip={t("moreOperations").toString()}
-        >
-          <PopoverTrigger>
-            <MoreIcon
-              className="align-middle "
-              fontSize={12}
-              onClick={(event) => {
-                event?.stopPropagation();
-              }}
-            />
-          </PopoverTrigger>
-        </IconWrap>
+        <Tooltip aria-label="tooltip" placement="bottom" label="Click here to open a popover">
+          <Box display="inline-block">
+            <PopoverTrigger>
+              <div className="px-1">
+                <MoreIcon className="align-middle" fontSize={12} />
+              </div>
+            </PopoverTrigger>
+          </Box>
+        </Tooltip>
         <PopoverContent p="2" maxWidth={maxWidth ? maxWidth : "100px"}>
           <div className="flex justify-around">{children}</div>
         </PopoverContent>

diff --git a/web/src/pages/app/database/CollectionDataList/index.tsx b/web/src/pages/app/database/CollectionDataList/index.tsx
@@ -1,31 +1,5 @@
-import { useTranslation } from "react-i18next";
-
-import EmptyBox from "@/components/EmptyBox";
-
-import CreateCollectionModal from "../mods/CreateCollectionModal";
-import useDBMStore from "../store";
-
 import DataPanel from "./mods/DataPanel";
 
 export default function CollectionDataList() {
-  const { t } = useTranslation();
-  const store = useDBMStore((state) => state);
-  return (
-    <>
-      {store.currentDB === undefined ? (
-        <EmptyBox>
-          <div>
-            {t("CollectionPanel.EmptyCollectionText")}
-            <CreateCollectionModal>
-              <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
-                {t("CreateNow")}
-              </span>
-            </CreateCollectionModal>
-          </div>
-        </EmptyBox>
-      ) : (
-        <DataPanel />
-      )}
-    </>
-  );
+  return <DataPanel />;
 }
diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
@@ -2,15 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { BiRefresh } from "react-icons/bi";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { AddIcon, CopyIcon, Search2Icon } from "@chakra-ui/icons";
-import {
-  Button,
-  Center,
-  HStack,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  Spinner,
-} from "@chakra-ui/react";
+import { Button, HStack, Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
 import { t } from "i18next";
 import { throttle } from "lodash";
 
@@ -121,8 +113,9 @@ export default function DataPanel() {
           };
         });
         entryDataQuery.refetch();
+        globalStore.showSuccess(t("RefreshDataSuccess"));
       }, 1000),
-    [setQueryData, entryDataQuery],
+    [setQueryData, entryDataQuery, globalStore],
   );
 
   const handleData = async () => {
@@ -174,6 +167,7 @@ export default function DataPanel() {
             colorScheme="primary"
             className="mr-2"
             style={{ width: "114px" }}
+            isLoading={entryDataQuery.isFetching}
             leftIcon={<BiRefresh fontSize={20} />}
             onClick={() => refresh(search)}
           >
@@ -222,74 +216,7 @@ export default function DataPanel() {
         />
       </Panel.Header>
       <div className="w-full flex flex-grow overflow-hidden">
-        {entryDataQuery.isFetching ? (
-          <Center className="h-full w-full opacity-60 bg-white-200">
-            <Spinner size="lg" />
-          </Center>
-        ) : entryDataQuery?.data?.list?.length ? (
-          <>
-            <RightPanelList
-              ListQuery={entryDataQuery?.data?.list}
-              setKey="_id"
-              isActive={(item: any) => currentData.data?._id === item._id}
-              onClick={(data: any) => {
-                setCurrentData({
-                  data: data,
-                  record: JSON.stringify(data),
-                });
-              }}
-              deleteRuleMutation={deleteDataMutation}
-              component={(item: any) => {
-                return (
-                  <SyntaxHighlighter language="json" customStyle={{ background: "#fdfdfe" }}>
-                    {JSON.stringify(item, null, 2)}
-                  </SyntaxHighlighter>
-                );
-              }}
-              toolComponent={(item: any) => {
-                const newData = { ...item };
-                delete newData._id;
-                return (
-                  <IconWrap
-                    showBg
-                    tooltip={t("Copy").toString()}
-                    size={32}
-                    className="ml-2 hover:bg-rose-100 group/icon"
-                  >
-                    <CopyText
-                      hideToolTip
-                      text={JSON.stringify(newData, null, 2)}
-                      tip={String(t("Copied"))}
-                      className="group-hover/icon:text-error-500"
-                    >
-                      <CopyIcon />
-                    </CopyText>
-                  </IconWrap>
-                );
-              }}
-            />
-            <RightPanelEditBox
-              show={currentData.data?._id}
-              title={t("Edit")}
-              isLoading={updateDataMutation.isLoading}
-              onSave={handleData}
-            >
-              <div className=" flex-1 mb-4 bg-lafWhite-400 rounded">
-                <JsonEditor
-                  value={JSON.stringify(currentData.data || {}, null, 2)}
-                  onChange={(values) => {
-                    setCurrentData((pre: any) => {
-                      return {
-                        ...pre,
-                        record: values!,
-                      };
-                    });
-                  }}
-                />
-              </div>
-            </RightPanelEditBox>
-          </>
-        ) : (
+        {entryDataQuery.status !== "loading" && entryDataQuery?.data?.list?.length! === 0 && (
           <EmptyBox>
             <div>
               <span>{t("CollectionPanel.EmptyDataText")}</span>
@@ -301,6 +228,69 @@ export default function DataPanel() {
             </div>
           </EmptyBox>
         )}
+
+        <>
+          <RightPanelList
+            ListQuery={entryDataQuery?.data?.list}
+            setKey="_id"
+            isActive={(item: any) => currentData.data?._id === item._id}
+            onClick={(data: any) => {
+              setCurrentData({
+                data: data,
+                record: JSON.stringify(data),
+              });
+            }}
+            deleteRuleMutation={deleteDataMutation}
+            component={(item: any) => {
+              return (
+                <SyntaxHighlighter language="json" customStyle={{ background: "#fdfdfe" }}>
+                  {JSON.stringify(item, null, 2)}
+                </SyntaxHighlighter>
+              );
+            }}
+            toolComponent={(item: any) => {
+              const newData = { ...item };
+              delete newData._id;
+              return (
+                <IconWrap
+                  showBg
+                  tooltip={t("Copy").toString()}
+                  size={32}
+                  className="ml-2 hover:bg-rose-100 group/icon"
+                >
+                  <CopyText
+                    hideToolTip
+                    text={JSON.stringify(newData, null, 2)}
+                    tip={String(t("Copied"))}
+                    className="group-hover/icon:text-error-500"
+                  >
+                    <CopyIcon />
+                  </CopyText>
+                </IconWrap>
+              );
+            }}
+          />
+          <RightPanelEditBox
+            show={currentData.data?._id}
+            title={t("Edit")}
+            isLoading={updateDataMutation.isLoading}
+            onSave={handleData}
+          >
+            <div className=" flex-1 mb-4 bg-lafWhite-400 rounded">
+              <JsonEditor
+                value={JSON.stringify(currentData.data || {}, null, 2)}
+                onChange={(values) => {
+                  setCurrentData((pre: any) => {
+                    return {
+                      ...pre,
+                      record: values!,
+                    };
+                  });
+                }}
+              />
+            </div>
+          </RightPanelEditBox>
+        </>
       </div>
     </>
   );

diff --git a/web/src/pages/app/functions/mods/DebugPanel/HeaderParamsTab/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/HeaderParamsTab/index.tsx
@@ -15,7 +15,7 @@ type FormValues = {
 
 function HeaderParamsTab(props: { onChange(values: Params[]): void }) {
   const { onChange } = props;
-  const { register, control, handleSubmit, watch } = useForm<FormValues>({
+  const { register, control, watch } = useForm<FormValues>({
     defaultValues: {
       params: [{ name: "", value: "" }],
     },
@@ -25,7 +25,6 @@ function HeaderParamsTab(props: { onChange(values: Params[]): void }) {
     name: "params",
     control,
   });
-  const onSubmit = (data: FormValues) => console.log(data);
 
   useEffect(() => {
     const subscription = watch((value) => {
@@ -37,7 +36,7 @@ function HeaderParamsTab(props: { onChange(values: Params[]): void }) {
 
   return (
     <div>
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form>
         <TableContainer>
           <Table size="sm" className="border rounded  border-grayModern-600" variant={"unstyled"}>
             <Thead>