aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-20 22:07:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: split setting pages

Browse Source
This commit is contained in:
Steven 2023-09-23 09:02:10 +08:00
parent f0ffe2e419
commit 528ecf72a3
4 changed files with 49 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/web/src/components/Header.tsx
View File

@ -10,6 +10,7 @@ import Dropdown from "./common/Dropdown";
const Header: React.FC = () => { const Header: React.FC = () => {
const currentUser = useUserStore().getCurrentUser(); const currentUser = useUserStore().getCurrentUser();
const [showAboutDialog, setShowAboutDialog] = useState<boolean>(false); const [showAboutDialog, setShowAboutDialog] = useState<boolean>(false);
const isAdmin = currentUser.role === "ADMIN";
const handleSignOutButtonClick = async () => { const handleSignOutButtonClick = async () => {
await api.signout(); await api.signout();
@ -39,11 +40,19 @@ const Header: React.FC = () => {
actions={ actions={
<> <>
<Link <Link
to="/setting" to="/setting/general"
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
>
<Icon.User className="w-4 h-auto mr-2" /> Profile
</Link>
{isAdmin && (
<Link
to="/setting/workspace"
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60" className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
> >
<Icon.Settings className="w-4 h-auto mr-2" /> Setting <Icon.Settings className="w-4 h-auto mr-2" /> Setting
</Link> </Link>
)}
<button <button
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60" className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => setShowAboutDialog(true)} onClick={() => setShowAboutDialog(true)}

24
frontend/web/src/pages/Setting.tsx
View File

@ -1,7 +1,5 @@
import { Alert, Divider } from "@mui/joy"; import { Alert } from "@mui/joy";
import PreferenceSection from "@/components/setting/PreferenceSection"; import { useEffect } from "react";
import AccessTokenSection from "../components/setting/AccessTokenSection";
import AccountSection from "../components/setting/AccountSection";
import MemberSection from "../components/setting/MemberSection"; import MemberSection from "../components/setting/MemberSection";
import WorkspaceSection from "../components/setting/WorkspaceSection"; import WorkspaceSection from "../components/setting/WorkspaceSection";
import useUserStore from "../stores/v1/user"; import useUserStore from "../stores/v1/user";
@ -10,21 +8,23 @@ const Setting: React.FC = () => {
const currentUser = useUserStore().getCurrentUser(); const currentUser = useUserStore().getCurrentUser();
const isAdmin = currentUser.role === "ADMIN"; const isAdmin = currentUser.role === "ADMIN";
useEffect(() => {
if (!isAdmin) {
window.location.href = "/";
}
}, []);
if (!isAdmin) {
return null;
}
return ( return (
<div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12"> <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
<AccountSection />
<AccessTokenSection />
<PreferenceSection />
{isAdmin && (
<>
<Divider />
<Alert variant="soft" color="warning"> <Alert variant="soft" color="warning">
You can see the settings items below because you are an Admin. You can see the settings items below because you are an Admin.
</Alert> </Alert>
<MemberSection /> <MemberSection />
<WorkspaceSection /> <WorkspaceSection />
</>
)}
</div> </div>
); );
}; };

15
frontend/web/src/pages/UserSetting.tsx Normal file
View File

@ -0,0 +1,15 @@
import PreferenceSection from "@/components/setting/PreferenceSection";
import AccessTokenSection from "../components/setting/AccessTokenSection";
import AccountSection from "../components/setting/AccountSection";
const Setting: React.FC = () => {
return (
<div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
<AccountSection />
<AccessTokenSection />
<PreferenceSection />
</div>
);
};
export default Setting;

7
frontend/web/src/routers/index.tsx
View File

@ -6,6 +6,7 @@ import Setting from "../pages/Setting";
import ShortcutDetail from "../pages/ShortcutDetail"; import ShortcutDetail from "../pages/ShortcutDetail";
import SignIn from "../pages/SignIn"; import SignIn from "../pages/SignIn";
import SignUp from "../pages/SignUp"; import SignUp from "../pages/SignUp";
import UserSetting from "../pages/UserSetting";
import { shortcutService } from "../services"; import { shortcutService } from "../services";
const router = createBrowserRouter([ const router = createBrowserRouter([
@ -38,7 +39,11 @@ const router = createBrowserRouter([
}, },
}, },
{ {
path: "/setting", path: "/setting/general",
element: <UserSetting />,
},
{
path: "/setting/workspace",
element: <Setting />, element: <Setting />,
}, },
], ],