feat: user add or edit

src/components/FolderTree.tsx

@@ -0,0 +1,151 @@
+import {
+  Box,
+  Button,
+  createDisclosure,
+  HStack,
+  Icon,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Spinner,
+  Text,
+  VStack,
+} from "@hope-ui/solid";
+import { BiSolidRightArrow } from "solid-icons/bi";
+import {
+  Accessor,
+  createContext,
+  createSignal,
+  useContext,
+  Show,
+  For,
+} from "solid-js";
+import { useFetch, useT } from "~/hooks";
+import { getIconColor } from "~/store";
+import { Obj, Resp } from "~/types";
+import { baseName, handleRresp, pathJoin, r } from "~/utils";
+
+export interface FolderTreeProps {
+  onChange: (path: string) => void;
+}
+const context = createContext<{
+  value: Accessor<string>;
+  onChange: (val: string) => void;
+}>();
+export const FolderTree = (props: FolderTreeProps) => {
+  const [path, setPath] = createSignal("/");
+  return (
+    <context.Provider
+      value={{
+        value: path,
+        onChange: (val) => {
+          setPath(val);
+          props.onChange(val);
+        },
+      }}
+    >
+      <FolderTreeNode path="/" />
+    </context.Provider>
+  );
+};
+
+const FolderTreeNode = (props: { path: string }) => {
+  const [children, setChildren] = createSignal<Obj[]>([]);
+  const { value, onChange } = useContext(context)!;
+  const [loading, fetchDirs] = useFetch(() =>
+    r.post("/fs/dirs", { path: props.path })
+  );
+  const load = async () => {
+    if (children().length > 0) return;
+    const resp: Resp<Obj[]> = await fetchDirs();
+    handleRresp(resp, setChildren);
+  };
+  const { isOpen, onToggle } = createDisclosure();
+  const active = () => value() === props.path;
+  return (
+    <Box>
+      <HStack spacing="$2">
+        <Show when={!loading()} fallback={<Spinner color={getIconColor()} />}>
+          <Icon
+            color={getIconColor()}
+            as={BiSolidRightArrow}
+            transform={isOpen() ? "rotate(90deg)" : "none"}
+            transition="transform 0.2s"
+            cursor="pointer"
+            onClick={() => {
+              onToggle();
+              if (isOpen()) {
+                load();
+              }
+            }}
+          />
+        </Show>
+        <Text
+          css={{
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+          overflow="hidden"
+          fontSize="$md"
+          cursor="pointer"
+          px="$1"
+          rounded="$sm"
+          bgColor={active() ? "$neutral8" : "transparent"}
+          _hover={{
+            bgColor: active() ? "$neutral8" : "$neutral4",
+          }}
+          onClick={() => {
+            onChange(props.path);
+          }}
+        >
+          {props.path === "/" ? "root" : baseName(props.path)}
+        </Text>
+      </HStack>
+      <Show when={isOpen()}>
+        <VStack pl="$4" alignItems="start" spacing="$1">
+          <For each={children()}>
+            {(item) => (
+              <FolderTreeNode path={pathJoin(props.path, item.name)} />
+            )}
+          </For>
+        </VStack>
+      </Show>
+    </Box>
+  );
+};
+
+export const FolderChooseInput = (props: {
+  value: string;
+  onChange: (path: string) => void;
+}) => {
+  const { isOpen, onOpen, onClose } = createDisclosure();
+  const t = useT();
+  return (
+    <>
+      <Input
+        onClick={onOpen}
+        value={props.value}
+        readOnly
+        placeholder={t("global.choose_folder")}
+      />
+      <Modal size="xl" opened={isOpen()} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalHeader>{t("global.choose_folder")}</ModalHeader>
+          <ModalBody>
+            <FolderTree onChange={props.onChange} />
+          </ModalBody>
+          <ModalFooter>
+            <Button onClick={onClose}>{t("global.confirm")}</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};

src/components/index.ts

@@ -2,3 +2,4 @@ export * from "./FullLoading";
 export * from "./SwitchColorMode";
 export * from "./SwitchLanguage";
 export * from "./Hello";
+export * from "./FolderTree"

src/lang/en/users.json

@@ -1,5 +1,5 @@
 {
-  "permission": {
+  "permissions": {
     "see_hides": "Can see hides",
     "access_without_password": "Access without password",
     "add_aria2": "Add aria2 tasks",
@@ -10,5 +10,10 @@
     "remove": "Delete",
     "webdav_read": "Webdav read",
     "webdav_manage": "Webdav manage"
-  }
+  },
+  "username": "Username",
+  "password": "Pssword",
+  "base_path": "Base path",
+  "role": "Role",
+  "permission": "Permission"
 }

src/pages/manage/Profile.tsx

@@ -10,10 +10,10 @@ import {
   SimpleGrid,
   VStack,
 } from "@hope-ui/solid";
-import { createSignal, JSXElement } from "solid-js";
+import { createSignal, For, JSXElement } from "solid-js";
 import { useFetch, useRouter, useT } from "~/hooks";
 import { setUser, user } from "~/store";
-import { UserMethods } from "~/types";
+import { UserMethods, UserPermissions } from "~/types";
 import { handleRresp, notify, r } from "~/utils";
 
 const PermissionBadge = (props: { can: boolean; children: JSXElement }) => {
@@ -77,36 +77,13 @@ const Profile = () => {
         {t("global.save")}
       </Button>
       <HStack wrap="wrap" gap="$2" mt="$2">
-        <PermissionBadge can={UserMethods.can_see_hides(user())}>
-          {t("users.permission.see_hides")}
-        </PermissionBadge>
-        <PermissionBadge can={UserMethods.can_access_without_password(user())}>
-          {t("users.permission.access_without_password")}
-        </PermissionBadge>
-        <PermissionBadge can={UserMethods.can_add_aria2_tasks(user())}>
-          {t("users.permission.add_aria2")}
-        </PermissionBadge>
-        <PermissionBadge can={UserMethods.can_write(user())}>
-          {t("users.permission.write")}
-        </PermissionBadge>
-        <PermissionBadge can={UserMethods.can_rename(user())}>
-          {t("users.permission.rename")}
-        </PermissionBadge>
-        <PermissionBadge can={UserMethods.can_move(user())}>
-          {t("users.permission.move")}
-        </PermissionBadge>
-        <PermissionBadge can={UserMethods.can_copy(user())}>
-          {t("users.permission.copy")}
-        </PermissionBadge>
-        <PermissionBadge can={UserMethods.can_remove(user())}>
-          {t("users.permission.remove")}
-        </PermissionBadge>
-        <PermissionBadge can={UserMethods.can_webdav_read(user())}>
-          {t("users.permission.webdav_read")}
-        </PermissionBadge>
-        <PermissionBadge can={UserMethods.can_webdav_manage(user())}>
-          {t("users.permission.webdav_manage")}
-        </PermissionBadge>
+        <For each={UserPermissions}>
+          {(item, i) => (
+            <PermissionBadge can={UserMethods.can(user(), i())}>
+              {t(`users.permission.${item}`)}
+            </PermissionBadge>
+          )}
+        </For>
       </HStack>
     </VStack>
   );

src/pages/manage/index.tsx

@@ -12,7 +12,11 @@ const Manage = () => {
   const t = useT();
   useTitle(() => t("manage.title"));
   return (
-    <Box>
+    <Box
+      css={{
+        "--hope-colors-background": "var(--hope-colors-loContrast)",
+      }}
+    >
       <Header />
       <Flex w="$full" h="calc(100vh - 64px)">
         <Box

src/pages/manage/routes.tsx

@@ -15,6 +15,14 @@ const ignore_routes: Route[] = [
     to: "/storages/edit/:id",
     component: lazy(() => import("./storages/AddOrEdit")),
   },
+  {
+    to: "/users/add",
+    component: lazy(() => import("./users/AddOrEdit")),
+  },
+  {
+    to: "/users/edit/:id",
+    component: lazy(() => import("./users/AddOrEdit")),
+  }
 ];
 
 const Placeholder = (props: { title: string; to: string }) => {

src/pages/manage/storages/AddOrEdit.tsx

@@ -39,7 +39,7 @@ const AddOrEdit = () => {
   const t = useT();
   const { params, back } = useRouter();
   const { id } = params;
-  const [loadingDrivers, loadDrivers] = useFetch(
+  const [driversLoading, loadDrivers] = useFetch(
     () => r.get("/admin/driver/list"),
     true
   );
@@ -49,11 +49,11 @@ const AddOrEdit = () => {
     handleRresp(resp, setDrivers);
   };
 
-  const [loadingStorage, loadStorage] = useFetch(
+  const [storageLoading, loadStorage] = useFetch(
     () => r.get(`/admin/storage/get?id=${id}`),
     true
   );
-  const [loadingDriver, loadDriver] = useFetch(
+  const [driverLoading, loadDriver] = useFetch(
     () => r.get(`/admin/driver/items?driver=${storage.driver}`),
     true
   );
@@ -81,7 +81,7 @@ const AddOrEdit = () => {
   });
   return (
     <MaybeLoading
-      loading={id ? loadingStorage() || loadingDriver() : loadingDrivers()}
+      loading={id ? storageLoading() || driverLoading() : driversLoading()}
     >
       <Heading mb="$2">{t(`global.${id ? "edit" : "add"}`)}</Heading>
       <ResponsiveGrid>