feat: add new function modal

packages/next-web/components/Icon/index.tsx → packages/next-web/components/IconWrap/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function Icon(props: { children: React.ReactNode; onClick: () => void }) {
+export default function IconWrap(props: { children: React.ReactNode; onClick: () => void }) {
   return (
     <span
       onClick={props.onClick}

packages/next-web/locales/en/message.js

@@ -1,8 +1,12 @@
 /*eslint-disable*/
 module.exports = {
   messages: {
-    搜索: "Search",
-    新建应用: "New Application",
-    函数列表: "Functions",
+    Search: "Search",
+    NewApplication: "New Application",
+    FunctionList: "FunctionList",
+    DependenceName: "Name",
+    DependenceVersion: "Version",
+    Confirm: "Confirm",
+    Cancel: "Cancel",
   },
 };

packages/next-web/locales/zh-CN/message.js

@@ -1,8 +1,13 @@
 /*eslint-disable*/
 module.exports = {
   messages: {
-    搜索: "搜索",
-    新建应用: "新建应用",
-    函数列表: "函数列表",
+    Search: "搜索",
+    NewApplication: "新建应用",
+    FunctionList: "函数列表",
+    DependenceTitle: "添加依赖",
+    DependenceName: "依赖包名",
+    DependenceVersion: "依赖版本",
+    Confirm: "确定",
+    Cancel: "取消",
   },
 };

packages/next-web/package.json

@@ -17,18 +17,19 @@
     "@lingui/core": "^3.14.0",
     "@lingui/macro": "^3.14.0",
     "@lingui/react": "^3.14.0",
-    "react-icons": "^4.6.0",
-    "make-plural": "^7.1.0",
     "@monaco-editor/react": "^4.4.6",
     "@tanstack/react-query": "^4.13.0",
     "axios": "^1.1.3",
     "click-to-react-component": "^1.0.8",
     "clsx": "^1.2.1",
+    "formik": "^2.2.9",
     "framer-motion": "^6.5.1",
     "immer": "^9.0.16",
+    "make-plural": "^7.1.0",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.6.0",
     "sass": "^1.55.0",
     "zustand": "^4.1.4"
   },

packages/next-web/pages/api/packages.ts

@@ -3,26 +3,40 @@ import { NextApiRequest, NextApiResponse } from "next";
 import { JsonResp } from "./response";
 
 export default async function handler(req: NextApiRequest, resp: NextApiResponse) {
-  JsonResp(
-    [
-      {
-        name: "lodash",
-        version: "latest",
-      },
-      {
-        name: "cheerio",
-        version: "latest",
-      },
-      {
-        name: "request",
-        version: "latest",
-      },
-      {
-        name: "aws-sdk",
-        version: "2.1199.0",
-      },
-    ],
+  const {
+    query: { id, name },
+    method,
+  } = req;
+  console.log(123123, method);
 
-    resp,
-  );
+  switch (method) {
+    case "GET":
+      JsonResp(
+        [
+          {
+            name: "lodash",
+            version: "latest",
+          },
+          {
+            name: "cheerio",
+            version: "latest",
+          },
+          {
+            name: "request",
+            version: "latest",
+          },
+          {
+            name: "aws-sdk",
+            version: "2.1199.0",
+          },
+        ],
+
+        resp,
+      );
+      break;
+
+    case "POST":
+      JsonResp("ok", resp);
+      break;
+  }
 }

packages/next-web/pages/app/[app_id]/functions/index.tsx

@@ -3,7 +3,6 @@
  ***************************/
 
 import React, { useEffect } from "react";
-import { AttachmentIcon } from "@chakra-ui/icons";
 import { Button, HStack } from "@chakra-ui/react";
 import Editor from "@monaco-editor/react";
 import clsx from "clsx";
@@ -17,6 +16,8 @@ import FunctionList from "./mods/FunctionPanel";
 import useFunctionStore from "./store";
 
 import commonStyles from "./index.module.scss";
+import FileStatusIcon, { FileStatus } from "@/components/FileStatusIcon";
+import FileTypeIcon, { FileType } from "@/components/FileTypeIcon";
 
 function FunctionPage() {
   const { initFunctionPage, currentFunction } = useFunctionStore((store) => store);
@@ -40,9 +41,11 @@ function FunctionPage() {
             style={{ marginBottom: 0 }}
           >
             <HStack spacing="2">
-              <AttachmentIcon />
+              <FileTypeIcon type={FileType.js} />
               <span>addToto.js</span>
-              <span>M</span>
+              <span>
+                <FileStatusIcon status={FileStatus.deleted} />
+              </span>
             </HStack>
 
             <HStack spacing="4">

packages/next-web/pages/app/[app_id]/functions/mods/DependecePanel/AddDepenceModal/index.tsx

@@ -1,8 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { AddIcon } from "@chakra-ui/icons";
 import {
   Button,
-  Center,
   FormControl,
   FormLabel,
   Input,
@@ -14,43 +13,90 @@ import {
   ModalHeader,
   ModalOverlay,
   useDisclosure,
+  useToast,
 } from "@chakra-ui/react";
 
-import Icon from "@/components/Icon";
+import IconWrap from "@/components/IconWrap";
+import { t } from "@lingui/macro";
+import { useMutation } from "@tanstack/react-query";
+import request from "@/utils/request";
 
 function AddDepenceModal() {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const initialRef = React.useRef(null);
 
+  const [name, setName] = useState("");
+  const [version, setVersion] = useState("latest");
+
+  const toast = useToast();
+
+  const mutation = useMutation(
+    (params: { name: string; version: string }) => request.post("/api/packages", params),
+    {
+      onSuccess: () => {
+        onClose();
+        setName("");
+        setVersion("latest");
+        setTimeout(() => {
+          toast({
+            position: "top",
+            title: "依赖添加成功",
+            status: "success",
+            duration: 2000,
+          });
+        }, 100);
+      },
+    },
+  );
+
   return (
     <>
-      <Icon onClick={onOpen}>
+      <IconWrap onClick={onOpen}>
         <AddIcon />
-      </Icon>
+      </IconWrap>
 
-      <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose}>
+      <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose} size="lg">
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>Create your account</ModalHeader>
+          <ModalHeader>{t`DependenceTitle`}</ModalHeader>
           <ModalCloseButton />
           <ModalBody pb={6}>
-            <FormControl>
-              <FormLabel>First name</FormLabel>
-              <Input ref={initialRef} placeholder="First name" />
+            <FormControl isRequired>
+              <FormLabel>{t`DependenceName`}</FormLabel>
+              <Input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                ref={initialRef}
+                placeholder={t`DependenceName`}
+              />
             </FormControl>
 
             <FormControl mt={4}>
-              <FormLabel>Last name</FormLabel>
-              <Input placeholder="Last name" />
+              <FormLabel>{t`DependenceVersion`}</FormLabel>
+              <Input
+                value={version}
+                onChange={(e) => setVersion(e.target.value)}
+                placeholder={t`DependenceVersion`}
+              />
             </FormControl>
           </ModalBody>
 
           <ModalFooter>
-            <Button colorScheme="blue" mr={3}>
-              Save
+            <Button
+              colorScheme="blue"
+              isLoading={mutation.isLoading}
+              mr={3}
+              onClick={() => {
+                mutation.mutate({
+                  name,
+                  version,
+                });
+              }}
+            >
+              {t`Confirm`}
             </Button>
-            <Button onClick={onClose}>Cancel</Button>
+            <Button onClick={onClose}>{t`Cancel`}</Button>
           </ModalFooter>
         </ModalContent>
       </Modal>

packages/next-web/pages/app/[app_id]/functions/mods/DependecePanel/index.tsx

@@ -45,7 +45,7 @@ export default function DependecyList() {
                   <FileTypeIcon type={FileType.npm} />
                   <span className="ml-2">{packageItem?.name}</span>
                 </div>
-                <div className={styles.status}>{packageItem?.version}</div>
+                <div className="text-slate-500">{packageItem?.version}</div>
               </li>
             );
           })}

packages/next-web/pages/app/[app_id]/functions/mods/FunctionPanel/CreateModal/index.tsx

@@ -2,7 +2,9 @@ import React from "react";
 import { AddIcon } from "@chakra-ui/icons";
 import {
   Button,
+  Checkbox,
   FormControl,
+  FormErrorMessage,
   FormLabel,
   Input,
   Modal,
@@ -12,41 +14,77 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Switch,
+  Textarea,
   useDisclosure,
+  VStack,
 } from "@chakra-ui/react";
+import { Field, Formik } from "formik";
+import { t } from "@lingui/macro";
 
 function CreateModal() {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const formRef = React.useRef(null);
 
   const initialRef = React.useRef(null);
 
   return (
     <>
       <AddIcon onClick={onOpen} />
 
-      <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose}>
+      <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose} size="2xl">
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>Create your account</ModalHeader>
           <ModalCloseButton />
-          <ModalBody pb={6}>
-            <FormControl>
-              <FormLabel>First name</FormLabel>
-              <Input ref={initialRef} placeholder="First name" />
-            </FormControl>
-
-            <FormControl mt={4}>
-              <FormLabel>Last name</FormLabel>
-              <Input placeholder="Last name" />
-            </FormControl>
-          </ModalBody>
-
-          <ModalFooter>
-            <Button colorScheme="blue" mr={3}>
-              Save
-            </Button>
-            <Button onClick={onClose}>Cancel</Button>
-          </ModalFooter>
+          <Formik
+            initialValues={{
+              name: "",
+            }}
+            onSubmit={(values) => {
+              alert(JSON.stringify(values, null, 2));
+            }}
+          >
+            {({ handleSubmit, errors, touched }) => (
+              <form ref={formRef} onSubmit={handleSubmit}>
+                <ModalBody pb={6}>
+                  <VStack spacing={6} align="flex-start">
+                    <FormControl>
+                      <FormLabel htmlFor="name">显示名称</FormLabel>
+                      <Field as={Input} id="name" name="name" variant="filled" />
+                    </FormControl>
+
+                    <FormControl>
+                      <FormLabel htmlFor="id">函数标识</FormLabel>
+                      <Field as={Input} id="id" name="id" variant="filled" />
+                    </FormControl>
+
+                    <FormControl>
+                      <FormLabel htmlFor="tag">标签分类</FormLabel>
+                      <Field as={Input} id="tag" name="tag" variant="filled" />
+                    </FormControl>
+
+                    <FormControl>
+                      <FormLabel htmlFor="enabled">启用</FormLabel>
+                      <Field as={Switch} id="enabled" name="enabled" variant="filled" />
+                    </FormControl>
+
+                    <FormControl>
+                      <FormLabel htmlFor="desc">函数描述</FormLabel>
+                      <Field as={Textarea} id="desc" name="desc" variant="filled" />
+                    </FormControl>
+                  </VStack>
+                </ModalBody>
+
+                <ModalFooter>
+                  <Button colorScheme="brand" mr={3} type="submit">
+                    {t`Confirm`}
+                  </Button>
+                  <Button onClick={onClose}>{t`Cancel`}</Button>
+                </ModalFooter>
+              </form>
+            )}
+          </Formik>
         </ModalContent>
       </Modal>
     </>

packages/next-web/pages/app/[app_id]/functions/mods/FunctionPanel/index.tsx

@@ -31,7 +31,7 @@ export default function FunctionList() {
       <div className={commonStyles.sectionHeader + " flex justify-between"}>
         <h4>
           <ChevronRightIcon fontSize={18} />
-          {t`函数列表`}
+          {t`FunctionList`}
         </h4>
         <HStack spacing="2">
           <SunIcon />