Skip to content

Commit

Permalink
feat: user manage page
Browse files Browse the repository at this point in the history
  • Loading branch information
xhofe committed Jul 26, 2022
1 parent 7b9498c commit 8e33d6e
Show file tree
Hide file tree
Showing 7 changed files with 232 additions and 12 deletions.
File renamed without changes.
7 changes: 7 additions & 0 deletions src/pages/index/Toolbar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { createDisclosure } from "@hope-ui/solid";

const Toolbar = () => {
const { isOpen, onToggle } = createDisclosure();
};

export { Toolbar };
21 changes: 11 additions & 10 deletions src/pages/manage/Profile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ const Profile = () => {
<Input
id="password"
type="password"
placeholder="********"
value={password()}
onInput={(e) => {
setPassword(e.currentTarget.value);
Expand All @@ -77,34 +78,34 @@ const Profile = () => {
</Button>
<HStack wrap="wrap" gap="$2" mt="$2">
<PermissionBadge can={UserMethods.can_see_hides(user())}>
{t("user.permission.see_hides")}
{t("users.permission.see_hides")}
</PermissionBadge>
<PermissionBadge can={UserMethods.can_access_without_password(user())}>
{t("user.permission.access_without_password")}
{t("users.permission.access_without_password")}
</PermissionBadge>
<PermissionBadge can={UserMethods.can_add_aria2_tasks(user())}>
{t("user.permission.add_aria2")}
{t("users.permission.add_aria2")}
</PermissionBadge>
<PermissionBadge can={UserMethods.can_write(user())}>
{t("user.permission.write")}
{t("users.permission.write")}
</PermissionBadge>
<PermissionBadge can={UserMethods.can_rename(user())}>
{t("user.permission.rename")}
{t("users.permission.rename")}
</PermissionBadge>
<PermissionBadge can={UserMethods.can_move(user())}>
{t("user.permission.move")}
{t("users.permission.move")}
</PermissionBadge>
<PermissionBadge can={UserMethods.can_copy(user())}>
{t("user.permission.copy")}
{t("users.permission.copy")}
</PermissionBadge>
<PermissionBadge can={UserMethods.can_remove(user())}>
{t("user.permission.remove")}
{t("users.permission.remove")}
</PermissionBadge>
<PermissionBadge can={UserMethods.can_webdav_read(user())}>
{t("user.permission.webdav_read")}
{t("users.permission.webdav_read")}
</PermissionBadge>
<PermissionBadge can={UserMethods.can_webdav_manage(user())}>
{t("user.permission.webdav_manage")}
{t("users.permission.webdav_manage")}
</PermissionBadge>
</HStack>
</VStack>
Expand Down
3 changes: 2 additions & 1 deletion src/pages/manage/sidemenu_items.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,13 @@ export const side_menu_items: SideMenuItem[] = [
title: "manage.sidemenu.users",
icon: BsPersonCircle,
to: "/@manage/users",
component: lazy(() => import("./users/Users")),
},
{
title: "manage.sidemenu.storages",
icon: CgDatabase,
to: "/@manage/storages",
component: lazy(() => import("./storages")),
component: lazy(() => import("./storages/Storages")),
},
{
title: "manage.sidemenu.metas",
Expand Down
File renamed without changes.
211 changes: 211 additions & 0 deletions src/pages/manage/users/Users.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
import {
Badge,
Box,
Button,
HStack,
Popover,
PopoverArrow,
PopoverBody,
PopoverContent,
PopoverHeader,
PopoverTrigger,
Table,
Tbody,
Td,
Th,
Thead,
Tooltip,
Tr,
VStack,
} from "@hope-ui/solid";
import { createSignal, For } from "solid-js";
import {
useFetch,
useListFetch,
useManageTitle,
useRouter,
useT,
} from "~/hooks";
import { handleRresp, notify, r } from "~/utils";
import { PageResp, User, UserMethods } from "~/types";

const Role = (props: { role: number }) => {
const roles = [
{ name: "general", color: "info" },
{ name: "guest", color: "neutral" },
{ name: "admin", color: "accent" },
];
return (
<Badge colorScheme={roles[props.role].color as any}>
{roles[props.role].name}
</Badge>
);
};

const Permissions = (props: { user: User }) => {
const t = useT();
const color = (can: boolean) => `$${can ? "success" : "danger"}9`;
return (
<HStack spacing="$0_5">
<For
each={[
{ name: "see_hides", can: UserMethods.can_see_hides(props.user) },
{
name: "access_without_password",
can: UserMethods.can_access_without_password(props.user),
},
{
name: "add_aria2",
can: UserMethods.can_add_aria2_tasks(props.user),
},
{
name: "write",
can: UserMethods.can_write(props.user),
},
{ name: "rename", can: UserMethods.can_rename(props.user) },
{ name: "move", can: UserMethods.can_move(props.user) },
{ name: "copy", can: UserMethods.can_copy(props.user) },
{ name: "remove", can: UserMethods.can_remove(props.user) },
{ name: "webdav_read", can: UserMethods.can_webdav_read(props.user) },
{
name: "webdav_manage",
can: UserMethods.can_webdav_manage(props.user),
},
]}
>
{(item) => (
<Tooltip label={t(`users.permissions.${item.name}`)}>
<Box boxSize="$2" rounded="$full" bg={color(item.can)}></Box>
</Tooltip>
)}
</For>
</HStack>
);
};

const Users = () => {
const t = useT();
useManageTitle("manage.sidemenu.users");
const { to } = useRouter();
const [getUsersLoading, getUsers] = useFetch(() => r.get("/admin/user/list"));
const [users, setUsers] = createSignal<User[]>([]);
const refresh = async () => {
const resp: PageResp<User> = await getUsers();
handleRresp(resp, (data) => setUsers(data.content));
};
refresh();

const [deleting, deleteUser] = useListFetch((id: number) =>
r.post(`/admin/user/delete?id=${id}`)
);
return (
<VStack spacing="$2" alignItems="start" w="$full">
<HStack spacing="$2">
<Button
colorScheme="accent"
loading={getUsersLoading()}
onClick={refresh}
>
{t("global.refresh")}
</Button>
<Button
onClick={() => {
to("/@manage/users/add");
}}
>
{t("global.add")}
</Button>
</HStack>
<Box w="$full" overflowX="auto">
<Table highlightOnHover dense>
<Thead>
<Tr>
<For
each={[
"username",
"base_path",
"role",
"permissions",
"operations",
]}
>
{(title) => <Th>{t(`users.${title}`)}</Th>}
</For>
</Tr>
</Thead>
<Tbody>
<For each={users()}>
{(user) => (
<Tr>
<Td>{user.username}</Td>
<Td>{user.base_path}</Td>
<Td>
<Role role={user.role} />
</Td>
<Td>
<Permissions user={user} />
</Td>
<Td>
<HStack spacing="$2">
<Button
onClick={() => {
to(`/@manage/users/edit/${user.id}`);
}}
>
{t("global.edit")}
</Button>
<Popover>
{({ onClose }) => (
<>
<PopoverTrigger as={Button} colorScheme="danger">
{t("global.delete")}
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverHeader>
{t("global.delete_confirm", {
name: user.username,
})}
</PopoverHeader>
<PopoverBody>
<HStack spacing="$2">
<Button
onClick={onClose}
colorScheme="neutral"
>
{t("global.cancel")}
</Button>
<Button
colorScheme="danger"
loading={deleting() === user.id}
onClick={async () => {
const resp = await deleteUser(user.id);
handleRresp(resp, () => {
notify.success(
t("global.delete_success")
);
refresh();
});
}}
>
{t("global.confirm")}
</Button>
</HStack>
</PopoverBody>
</PopoverContent>
</>
)}
</Popover>
</HStack>
</Td>
</Tr>
)}
</For>
</Tbody>
</Table>
</Box>
</VStack>
);
};

export default Users;
2 changes: 1 addition & 1 deletion src/types/user.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export interface User {
id: number;
username: string;
base_path: string;
role: number;
role: UserRole;
permissions: number;
}

Expand Down

0 comments on commit 8e33d6e

Please sign in to comment.