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

chore: update workspace user pages

Browse Source
This commit is contained in:
Steven 2022-09-25 20:30:40 +08:00
parent c0699f159e
commit a642465f86
14 changed files with 511 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/CreateShortcutDialog.tsx
View File

@ -189,10 +189,10 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
);
};
export default function showCreateShortcutDialog(workspaceId: WorkspaceId, shortcutId?: ShortcutId): void {
export default function showCreateShortcutDialog(workspaceId: WorkspaceId, shortcutId?: ShortcutId, onDestory?: () => void): void {
generateDialog(
{
className: "px-2 sm:px-0",
onDestory,
},
CreateShortcutDialog,
{

10
web/src/components/CreateWorkspaceDialog.tsx
View File

@ -127,13 +127,7 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
};
export default function showCreateWorkspaceDialog(workspaceId?: WorkspaceId): void {
generateDialog(
{
className: "px-2 sm:px-0",
},
CreateWorkspaceDialog,
{
generateDialog({}, CreateWorkspaceDialog, {
workspaceId,
}
);
});
}

7
web/src/components/Dialog/BaseDialog.tsx
View File

@ -8,6 +8,7 @@ import "../../less/base-dialog.less";
interface DialogConfig {
className?: string;
clickSpaceDestroy?: boolean;
onDestory?: () => void;
}
interface Props extends DialogConfig, DialogProps {
@ -38,7 +39,7 @@ const BaseDialog: React.FC<Props> = (props: Props) => {
};
return (
<div className={`dialog-wrapper ${className}`} onClick={handleSpaceClicked}>
<div className={`dialog-wrapper px-2 sm:px-0 ${className}`} onClick={handleSpaceClicked}>
<div className="dialog-container" onClick={(e) => e.stopPropagation()}>
{children}
</div>
@ -67,6 +68,10 @@ export function generateDialog<T extends DialogProps>(
dialog.unmount();
tempDiv.remove();
}, ANIMATION_DURATION);
if (config.onDestory) {
config.onDestory();
}
},
};

146
web/src/components/MemberListView.tsx Normal file
View File

@ -0,0 +1,146 @@
import { useEffect, useState } from "react";
import { deleteWorkspaceUser, upsertWorkspaceUser } from "../helpers/api";
import useLoading from "../hooks/useLoading";
import { workspaceService } from "../services";
import toastHelper from "./Toast";
import Dropdown from "./common/Dropdown";
import { showCommonDialog } from "./Dialog/CommonDialog";
import Icon from "./Icon";
const userRoles = ["Admin", "User"];
interface Props {
workspaceId: WorkspaceId;
workspaceUser: WorkspaceUser;
userList: WorkspaceUser[];
}
interface State {
workspaceUserList: WorkspaceUser[];
}
const MemberListView: React.FC<Props> = (props: Props) => {
const { workspaceId, workspaceUser: currentUser } = props;
const [state, setState] = useState<State>({
workspaceUserList: [],
});
const loadingState = useLoading();
const fetchWorkspaceUserList = () => {
loadingState.setLoading();
return Promise.all([workspaceService.getWorkspaceUserList(workspaceId)])
.then(([workspaceUserList]) => {
setState({
workspaceUserList: workspaceUserList,
});
})
.finally(() => {
loadingState.setFinish();
});
};
useEffect(() => {
fetchWorkspaceUserList();
}, [props]);
const handleWorkspaceUserRoleChange = async (workspaceUser: WorkspaceUser, role: Role) => {
if (workspaceUser.userId === currentUser.userId) {
toastHelper.error("Cannot change yourself.");
return;
}
await upsertWorkspaceUser({
workspaceId: workspaceId,
userId: workspaceUser.userId,
role,
});
await fetchWorkspaceUserList();
};
const handleDeleteWorkspaceUserButtonClick = (workspaceUser: WorkspaceUser) => {
showCommonDialog({
title: "Delete Workspace Member",
content: `Are you sure to delete member \`${workspaceUser.user.name}\` in this workspace?`,
style: "warning",
onConfirm: async () => {
await deleteWorkspaceUser({
workspaceId: workspaceId,
userId: workspaceUser.userId,
});
await fetchWorkspaceUserList();
},
});
};
return (
<div className="w-full flex flex-col justify-start items-start">
{loadingState.isLoading ? (
<></>
) : (
state.workspaceUserList.map((workspaceUser) => {
return (
<div key={workspaceUser.userId} className="w-full flex flex-row justify-between items-start border px-6 py-4 mb-3 rounded-lg">
<div className="flex flex-row justify-start items-center mr-4">
<span>{workspaceUser.user.name}</span>
{currentUser.userId === workspaceUser.userId && <span className="ml-2 text-gray-400">(yourself)</span>}
</div>
<div className="flex flex-row justify-end items-center">
{currentUser.role === "ADMIN" ? (
<>
<Dropdown
className="mr-4"
trigger={
<button className="flex flex-row justify-end items-center cursor-pointer">
<span className="font-mono">{workspaceUser.role}</span>
<Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
</button>
}
actions={
<>
{userRoles.map((role) => {
return (
<button
key={role}
className="w-full px-3 leading-10 flex flex-row justify-between items-center text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
onClick={() => handleWorkspaceUserRoleChange(workspaceUser, role.toUpperCase() as Role)}
>
<span className="truncate">{role}</span>
{workspaceUser.role === role.toLocaleUpperCase() && <Icon.Check className="w-4 h-auto ml-1 shrink-0" />}
</button>
);
})}
</>
}
actionsClassName="!w-28 !-left-4"
></Dropdown>
<Dropdown
actions={
<>
<button
className="w-full px-3 text-left leading-10 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => {
handleDeleteWorkspaceUserButtonClick(workspaceUser);
}}
>
Delete
</button>
</>
}
actionsClassName="!w-24"
></Dropdown>
</>
) : (
<>
<span className="font-mono">{workspaceUser.role}</span>
</>
)}
</div>
</div>
);
})
)}
</div>
);
};
export default MemberListView;

12
web/src/components/ShortcutListView.tsx
View File

@ -1,9 +1,10 @@
import copy from "copy-to-clipboard";
import { shortcutService, workspaceService } from "../services";
import { useAppSelector } from "../store";
import { showCommonDialog } from "./Dialog/CommonDialog";
import Dropdown from "./common/Dropdown";
import showCreateShortcutDialog from "./CreateShortcutDialog";
import Icon from "./Icon";
import showCreateShortcutDialog from "./CreateShortcutDialog";
interface Props {
workspaceId: WorkspaceId;
@ -20,7 +21,14 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
};
const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
shortcutService.deleteShortcutById(shortcut.id);
showCommonDialog({
title: "Delete Shortcut",
content: `Are you sure to delete shortcut \`${shortcut.name}\` in this workspace?`,
style: "warning",
onConfirm: async () => {
await shortcutService.deleteShortcutById(shortcut.id);
},
});
};
return (

138
web/src/components/UpsertWorkspaceUserDialog.tsx Normal file
View File

@ -0,0 +1,138 @@
import { useState } from "react";
import { UNKNOWN_ID } from "../helpers/consts";
import { upsertWorkspaceUser } from "../helpers/api";
import useLoading from "../hooks/useLoading";
import Icon from "./Icon";
import { generateDialog } from "./Dialog";
import toastHelper from "./Toast";
interface Props extends DialogProps {
workspaceId: WorkspaceId;
}
interface State {
workspaceUserUpsert: WorkspaceUserUpsert;
}
const UpsertWorkspaceUserDialog: React.FC<Props> = (props: Props) => {
const { destroy, workspaceId } = props;
const [state, setState] = useState<State>({
workspaceUserUpsert: {
workspaceId: workspaceId,
userId: UNKNOWN_ID,
role: "USER",
},
});
const requestState = useLoading(false);
const handleUserIdInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const text = e.target.value as string;
setState({
workspaceUserUpsert: Object.assign(state.workspaceUserUpsert, {
userId: Number(text),
}),
});
};
const handleUserRoleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const text = e.target.value as string;
setState({
workspaceUserUpsert: Object.assign(state.workspaceUserUpsert, {
role: text,
}),
});
};
const handleSaveBtnClick = async () => {
if (!state.workspaceUserUpsert.userId) {
toastHelper.error("User ID is required");
return;
}
requestState.setLoading();
try {
await upsertWorkspaceUser({
...state.workspaceUserUpsert,
});
destroy();
} catch (error: any) {
console.error(error);
toastHelper.error(error.response.data.error || error.response.data.message);
}
requestState.setFinish();
};
return (
<>
<div className="max-w-full w-80 flex flex-row justify-between items-center mb-4">
<p className="text-base">Create Workspace Member</p>
<button className="rounded p-1 hover:bg-gray-100" onClick={destroy}>
<Icon.X className="w-5 h-auto text-gray-600" />
</button>
</div>
<div className="w-full flex flex-col justify-start items-start">
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">User ID</span>
<input
className="w-full rounded border text-sm shadow-inner px-2 py-2"
type="number"
value={state.workspaceUserUpsert.userId}
onChange={handleUserIdInputChange}
/>
</div>
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">Role</span>
<div>
<input
type="radio"
name="role"
id="role-user"
value="USER"
onChange={handleUserRoleInputChange}
checked={state.workspaceUserUpsert.role === "USER"}
/>
<label htmlFor="role-user" className="ml-1 mr-4">
User
</label>
<input
type="radio"
name="role"
id="role-admin"
value="ADMIN"
onChange={handleUserRoleInputChange}
checked={state.workspaceUserUpsert.role === "ADMIN"}
/>
<label htmlFor="role-admin" className="ml-1">
Admin
</label>
</div>
</div>
<div className="w-full flex flex-row justify-end items-center">
<button
disabled={requestState.isLoading}
className={`rounded px-3 leading-9 shadow bg-green-600 text-white hover:bg-green-700 ${
requestState.isLoading ? "opacity-80" : ""
}`}
onClick={handleSaveBtnClick}
>
Save
</button>
</div>
</div>
</>
);
};
export default function showUpsertWorkspaceUserDialog(workspaceId: WorkspaceId, onDestory?: () => void) {
return generateDialog(
{
onDestory,
},
UpsertWorkspaceUserDialog,
{
workspaceId,
}
);
}

10
web/src/components/WorkspaceListView.tsx
View File

@ -1,5 +1,6 @@
import { Link } from "react-router-dom";
import { workspaceService } from "../services";
import { showCommonDialog } from "./Dialog/CommonDialog";
import Dropdown from "./common/Dropdown";
import showCreateWorkspaceDialog from "./CreateWorkspaceDialog";
@ -11,7 +12,14 @@ const WorkspaceListView: React.FC<Props> = (props: Props) => {
const { workspaceList } = props;
const handleDeleteWorkspaceButtonClick = (workspace: Workspace) => {
workspaceService.deleteWorkspaceById(workspace.id);
showCommonDialog({
title: "Delete Workspace",
content: `Are you sure to delete workspace \`${workspace.name}\`?`,
style: "warning",
onConfirm: async () => {
await workspaceService.deleteWorkspaceById(workspace.id);
},
});
};
return (

18
web/src/helpers/api.ts
View File

@ -76,6 +76,24 @@ export function deleteWorkspaceById(workspaceId: WorkspaceId) {
return axios.delete(`/api/workspace/${workspaceId}`);
}
export function upsertWorkspaceUser(upsert: WorkspaceUserUpsert) {
return axios.post<ResponseObject<WorkspaceUser>>(`/api/workspace/${upsert.workspaceId}/user`, upsert);
}
export function getWorkspaceUserList(workspaceUserFind?: WorkspaceUserFind) {
return axios.get<ResponseObject<WorkspaceUser[]>>(`/api/workspace/${workspaceUserFind?.workspaceId}/user`);
}
export function getWorkspaceUser(workspaceUserFind?: WorkspaceUserFind) {
return axios.get<ResponseObject<WorkspaceUser>>(
`/api/workspace/${workspaceUserFind?.workspaceId}/user/${workspaceUserFind?.userId ?? ""}`
);
}
export function deleteWorkspaceUser(workspaceUserDelete: WorkspaceUserDelete) {
return axios.delete(`/api/workspace/${workspaceUserDelete.workspaceId}/user/${workspaceUserDelete.userId}`);
}
export function getShortcutList(shortcutFind?: ShortcutFind) {
const queryList = [];
if (shortcutFind?.creatorId) {

6
web/src/helpers/utils.ts
View File

@ -1,3 +1,9 @@
import { isNull, isUndefined } from "lodash-es";
export const isNullorUndefined = (value: any) => {
return isNull(value) || isUndefined(value);
};
export function getNowTimeStamp(): number {
return Date.now();
}

109
web/src/pages/WorkspaceDetail.tsx
View File

@ -1,25 +1,34 @@
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { NavLink, useLocation, useNavigate, useParams } from "react-router-dom";
import { shortcutService, userService, workspaceService } from "../services";
import { useAppSelector } from "../store";
import { unknownWorkspace, unknownWorkspaceUser } from "../store/modules/workspace";
import useLoading from "../hooks/useLoading";
import Icon from "../components/Icon";
import toastHelper from "../components/Toast";
import Dropdown from "../components/common/Dropdown";
import Header from "../components/Header";
import ShortcutListView from "../components/ShortcutListView";
import { unknownWorkspace } from "../store/modules/workspace";
import showCreateShortcutDialog from "../components/CreateShortcutDialog";
import MemberListView from "../components/MemberListView";
import showUpsertWorkspaceUserDialog from "../components/UpsertWorkspaceUserDialog";
interface State {
workspace: Workspace;
workspaceUser: WorkspaceUser;
userList: WorkspaceUser[];
}
const WorkspaceDetail: React.FC = () => {
const navigate = useNavigate();
const params = useParams();
const location = useLocation();
const user = useAppSelector((state) => state.user.user) as User;
const { shortcutList } = useAppSelector((state) => state.shortcut);
const [state, setState] = useState<State>({
workspace: unknownWorkspace,
workspaceUser: unknownWorkspaceUser,
userList: [],
});
const loadingState = useLoading();
@ -35,28 +44,91 @@ const WorkspaceDetail: React.FC = () => {
return;
}
setState({
...state,
workspace,
});
loadingState.setLoading();
Promise.all([shortcutService.fetchWorkspaceShortcuts(workspace.id)]).finally(() => {
Promise.all([
shortcutService.fetchWorkspaceShortcuts(workspace.id),
workspaceService.getWorkspaceUser(workspace.id, user.id),
workspaceService.getWorkspaceUserList(workspace.id),
])
.then(([, workspaceUser, workspaceUserList]) => {
setState({
workspace,
workspaceUser,
userList: workspaceUserList,
});
})
.finally(() => {
loadingState.setFinish();
});
}, [params.workspaceName]);
useEffect(() => {
if (location.hash !== "#shortcuts" && location.hash !== "#members") {
navigate("#shortcuts");
}
}, [location.hash]);
const handleCreateShortcutButtonClick = () => {
showCreateShortcutDialog(state.workspace.id, undefined, async () => {
if (location.hash !== "#shortcuts") {
navigate("#shortcuts");
}
});
};
const handleUpsertWorkspaceMemberButtonClick = () => {
showUpsertWorkspaceUserDialog(state.workspace.id, async () => {
const workspaceUserList = await workspaceService.getWorkspaceUserList(state.workspace.id);
setState({
...state,
userList: workspaceUserList,
});
if (location.hash !== "#members") {
navigate("#members");
}
});
};
return (
<div className="w-full h-full flex flex-col justify-start items-start">
<Header />
<div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
<div className="w-full flex flex-row justify-between items-center mb-4">
<span className="font-mono text-gray-400">Shortcut List</span>
<button
className="text-sm flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow"
onClick={() => showCreateShortcutDialog(state.workspace.id)}
>
<Icon.Plus className="w-4 h-auto mr-1" /> Create Shortcut
<div className="mx-auto max-w-4xl w-full px-3 pb-6 flex flex-col justify-start items-start">
<div className="w-full flex flex-row justify-between items-center mt-4 mb-4">
<div className="flex flex-row justify-start items-center space-x-4">
<NavLink to="#shortcuts" className={`${location.hash === "#shortcuts" && "underline"}`}>
Shortcuts
</NavLink>
<NavLink to="#members" className={`${location.hash === "#members" && "underline"}`}>
Members
</NavLink>
</div>
<div>
<Dropdown
trigger={
<button className="w-32 flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow">
<Icon.Plus className="w-4 h-auto mr-1" /> Add new...
</button>
}
actions={
<>
<button
className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
onClick={handleCreateShortcutButtonClick}
>
Shortcut
</button>
<button
className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
onClick={handleUpsertWorkspaceMemberButtonClick}
>
Member
</button>
</>
}
actionsClassName="!w-32"
/>
</div>
</div>
{loadingState.isLoading ? (
<div className="py-4 w-full flex flex-row justify-center items-center">
@ -64,7 +136,12 @@ const WorkspaceDetail: React.FC = () => {
loading
</div>
) : (
<ShortcutListView workspaceId={state.workspace.id} shortcutList={shortcutList} />
<>
{location.hash === "#shortcuts" && <ShortcutListView workspaceId={state.workspace.id} shortcutList={shortcutList} />}
{location.hash === "#members" && (
<MemberListView workspaceId={state.workspace.id} workspaceUser={state.workspaceUser} userList={state.userList} />
)}
</>
)}
</div>
</div>

31
web/src/router/index.tsx
View File

@ -1,4 +1,5 @@
import { createBrowserRouter } from "react-router-dom";
import { createBrowserRouter, redirect } from "react-router-dom";
import { isNullorUndefined } from "../helpers/utils";
import { userService, workspaceService } from "../services";
import Auth from "../pages/Auth";
import Home from "../pages/Home";
@ -7,6 +8,10 @@ import WorkspaceDetail from "../pages/WorkspaceDetail";
import ShortcutRedirector from "../pages/ShortcutRedirector";
const router = createBrowserRouter([
{
path: "/user/auth",
element: <Auth />,
},
{
path: "/",
element: <Home />,
@ -16,12 +21,13 @@ const router = createBrowserRouter([
} catch (error) {
// do nth
}
const { user } = userService.getState();
if (isNullorUndefined(user)) {
return redirect("/user/auth");
}
},
},
{
path: "/user/auth",
element: <Auth />,
},
{
path: "/account",
element: <UserDetail />,
@ -31,6 +37,11 @@ const router = createBrowserRouter([
} catch (error) {
// do nth
}
const { user } = userService.getState();
if (isNullorUndefined(user)) {
return redirect("/user/auth");
}
},
},
{
@ -43,6 +54,11 @@ const router = createBrowserRouter([
} catch (error) {
// do nth
}
const { user } = userService.getState();
if (isNullorUndefined(user)) {
return redirect("/user/auth");
}
},
},
{
@ -55,6 +71,11 @@ const router = createBrowserRouter([
} catch (error) {
// do nth
}
const { user } = userService.getState();
if (isNullorUndefined(user)) {
return redirect("/user/auth");
}
},
},
]);

19
web/src/services/workspaceService.ts
View File

@ -60,6 +60,25 @@ const workspaceService = {
await api.deleteWorkspaceById(id);
store.dispatch(deleteWorkspace(id));
},
getWorkspaceUserList: async (id: WorkspaceId) => {
const { data } = (
await api.getWorkspaceUserList({
workspaceId: id,
})
).data;
return data;
},
getWorkspaceUser: async (workspaceId: WorkspaceId, userId: UserId) => {
const { data } = (
await api.getWorkspaceUser({
workspaceId: workspaceId,
userId: userId,
})
).data;
return data;
},
};
export default workspaceService;

5
web/src/store/modules/workspace.ts
View File

@ -5,6 +5,11 @@ export const unknownWorkspace = {
id: UNKNOWN_ID,
} as Workspace;
export const unknownWorkspaceUser = {
workspaceId: UNKNOWN_ID,
userId: UNKNOWN_ID,
} as WorkspaceUser;
interface State {
workspaceList: Workspace[];
}

27
web/src/types/modules/WorkspaceUser.d.ts vendored Normal file
View File

@ -0,0 +1,27 @@
type Role = "ADMIN" | "USER";
interface WorkspaceUser {
workspaceId: WorkspaceId;
userId: UserId;
user: User;
role: Role;
createdTs: TimeStamp;
updatedTs: TimeStamp;
}
interface WorkspaceUserUpsert {
workspaceId: WorkspaceId;
userId: UserId;
role: Role;
updatedTs?: TimeStamp;
}
interface WorkspaceUserFind {
workspaceId: WorkspaceId;
userId?: UserId;
}
interface WorkspaceUserDelete {
workspaceId: WorkspaceId;
userId: UserId;
}