feat: web storage page (#418)

web/package.json

@@ -29,6 +29,7 @@
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.39.4",
     "react-icons": "^4.6.0",
     "react-syntax-highlighter": "^15.5.0",
     "sass": "^1.55.0",

web/pages/api/buckets.ts

@@ -29,6 +29,28 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse
         ],
         resp,
       );
+    case "POST":
+      JsonResp(
+        [
+          {
+            name: "data",
+            mode: "public-read",
+            quota: 1073741824,
+          },
+          {
+            name: "public",
+            mode: "public-read-write",
+            quota: 1073741824,
+          },
+          {
+            name: "testbk",
+            mode: "private",
+            quota: 1073741824,
+          },
+        ]
+      )
+    case "delete":
+
       break;
   }
 }

web/pages/api/files.ts

@@ -0,0 +1,40 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+import { JsonResp } from "./response";
+
+export default async function handler(req: NextApiRequest, resp: NextApiResponse) {
+  const {
+    query: { id, name },
+    method,
+  } = req;
+  switch (method) {
+    case "GET":
+      JsonResp(
+        [
+          {
+            name: "inches",
+            path: "h5/static/inches.json",
+            size: 1073741824,
+            updateTime: "2021-08-01 12:00:00",
+            prefix: "h5/static",
+          },
+          {
+            name: "feet",
+            path: "feet.json",
+            size: 1073741824,
+            updateTime: "2021-08-01 12:00:00",
+            prefix: "",
+          },
+          {
+            name: "yards",
+            path: "h5/yards.json",
+            size: 1073741824,
+            updateTime: "2021-08-01 12:00:00",
+            prefix: "h5",
+          },
+        ],
+        resp,
+      );
+      break;
+  }
+}

web/pages/app/[app_id]/storages/index.tsx

@@ -4,8 +4,8 @@
 
 import React, { useEffect } from "react";
 
-import FileList from "./FileList";
-import StorageListPanel from "./StorageListPanel";
+import FileList from "./mods/FileList";
+import StorageListPanel from "./mods/StorageListPanel";
 
 import useStorageStore from "./store";
 

web/pages/app/[app_id]/storages/mods/CreateBucketModal/index.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { AddIcon } from "@chakra-ui/icons";
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+  Switch,
+  Textarea,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
+import { t } from "@lingui/macro";
+import { Field, Formik } from "formik";
+
+import IconWrap from "@/components/IconWrap";
+
+function CreateBucketModal() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const formRef = React.useRef(null);
+
+  const initialRef = React.useRef(null);
+
+  return (
+    <>
+      <IconWrap size={20} onClick={onOpen}>
+        <AddIcon fontSize={10} />
+      </IconWrap>
+
+      <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose} size="lg">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Create Bucket</ModalHeader>
+          <ModalCloseButton />
+          <Formik
+            initialValues={{
+              name: "",
+            }}
+            onSubmit={(values) => {}}
+          >
+            {({ handleSubmit, errors, touched }) => (
+              <form ref={formRef} onSubmit={handleSubmit}>
+                <ModalBody pb={6}>
+                  <VStack spacing={6} align="flex-start">
+                    <FormControl>
+                      <FormLabel htmlFor="name">Bucket名称</FormLabel>
+                      <Field as={Input} id="name" name="name" variant="filled" />
+                    </FormControl>
+
+                    <FormControl>
+                      <FormLabel htmlFor="mode">权限</FormLabel>
+                      <Field as={Select} id="mode" name="mode" variant="filled">
+                        <option value="private">私有</option>
+                        <option value="public-read">公共读</option>
+                        <option value="public-read-write">公共读写</option>
+                      </Field>
+                    </FormControl>
+
+                    <FormControl>
+                      <FormLabel htmlFor="quota">容量</FormLabel>
+                      <Field as={InputGroup}>
+                        <Input id="quota" name="quota" variant="filled" className="w-1" />
+                        <InputRightElement children="GB" />
+                      </Field>
+                    </FormControl>
+                  </VStack>
+                </ModalBody>
+
+                <ModalFooter>
+                  <Button colorScheme="primary" mr={3} type="submit">
+                    {t`Confirm`}
+                  </Button>
+                  <Button onClick={onClose}>{t`Cancel`}</Button>
+                </ModalFooter>
+              </form>
+            )}
+          </Formik>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export default CreateBucketModal;

web/pages/app/[app_id]/storages/mods/CreateFolderModal/index.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { AddIcon } from "@chakra-ui/icons";
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+  Switch,
+  Textarea,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
+import { t } from "@lingui/macro";
+import { Field, Formik } from "formik";
+
+import IconWrap from "@/components/IconWrap";
+
+function CreateModal() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const formRef = React.useRef(null);
+
+  const initialRef = React.useRef(null);
+
+  return (
+    <>
+      <Button size="xs" onClick={onOpen}>新建文件夹</Button>
+
+      <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose} size="lg">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Create Folder</ModalHeader>
+          <ModalCloseButton />
+          <Formik
+            initialValues={{
+              name: "",
+            }}
+            onSubmit={(values) => {}}
+          >
+            {({ 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>
+                  </VStack>
+                </ModalBody>
+
+                <ModalFooter>
+                  <Button colorScheme="primary" mr={3} type="submit">
+                    {t`Confirm`}
+                  </Button>
+                  <Button onClick={onClose}>{t`Cancel`}</Button>
+                </ModalFooter>
+              </form>
+            )}
+          </Formik>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export default CreateModal;

web/pages/app/[app_id]/storages/mods/DeleteBucketModal/index.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { DeleteIcon } from "@chakra-ui/icons";
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+  Switch,
+  Textarea,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
+import { t } from "@lingui/macro";
+import { Field, Formik } from "formik";
+
+import IconWrap from "@/components/IconWrap";
+
+function AlertDialogExample() {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const cancelRef = React.useRef()
+
+  return (
+    <>
+      <IconWrap onClick={onOpen}>
+        <DeleteIcon fontSize={12} />
+      </IconWrap>
+
+      <AlertDialog
+        isOpen={isOpen}
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+              Delete Customer
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              Are you sure? You can't undo this action afterwards.
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button colorScheme='red' onClick={onClose} ml={3}>
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  )
+}
+
+export default AlertDialogExample