mirror of https://github.com/msgbyte/tailchat
refactor: 拆分身份组管理逻辑
moonrailgun
3 years ago
parent
a4f0c9389e
commit
12431a2c97
@ -0,0 +1,116 @@
|
||||
import { IconBtn } from '@/components/IconBtn';
|
||||
import { closeModal, openModal } from '@/components/Modal';
|
||||
import { SelectGroupMember } from '@/components/modals/SelectGroupMember';
|
||||
import { UserListItem } from '@/components/UserListItem';
|
||||
import { Button, Input } from 'antd';
|
||||
import React, { useCallback } from 'react';
|
||||
import { Icon } from 'tailchat-design';
|
||||
import {
|
||||
model,
|
||||
showErrorToasts,
|
||||
showSuccessToasts,
|
||||
t,
|
||||
useAsyncRequest,
|
||||
useGroupInfo,
|
||||
useSearch,
|
||||
useUserId,
|
||||
useUserInfoList,
|
||||
} from 'tailchat-shared';
|
||||
import _compact from 'lodash/compact';
|
||||
|
||||
interface RoleMemberProps {
|
||||
groupId: string;
|
||||
currentRoleInfo: model.group.GroupRole;
|
||||
}
|
||||
export const RoleMember: React.FC<RoleMemberProps> = React.memo((props) => {
|
||||
const roleId = props.currentRoleInfo._id;
|
||||
const userId = useUserId();
|
||||
const groupInfo = useGroupInfo(props.groupId);
|
||||
const members = (groupInfo?.members ?? []).filter((m) =>
|
||||
m.roles.includes(roleId)
|
||||
);
|
||||
const memberIds = members.map((m) => m.userId);
|
||||
const userInfoList = useUserInfoList(memberIds);
|
||||
const {
|
||||
searchText,
|
||||
setSearchText,
|
||||
isSearching,
|
||||
searchResult: filterMembers,
|
||||
} = useSearch({
|
||||
dataSource: userInfoList,
|
||||
filterFn: (item, searchText) => item.nickname.includes(searchText),
|
||||
});
|
||||
|
||||
const handleAddMember = useCallback(() => {
|
||||
const key = openModal(
|
||||
<SelectGroupMember
|
||||
groupId={props.groupId}
|
||||
withoutMemberIds={_compact([...memberIds, userId])}
|
||||
onConfirm={async (selectedIds) => {
|
||||
try {
|
||||
await model.group.appendGroupMemberRoles(
|
||||
props.groupId,
|
||||
selectedIds,
|
||||
[props.currentRoleInfo._id]
|
||||
);
|
||||
showSuccessToasts();
|
||||
closeModal(key);
|
||||
} catch (err) {
|
||||
showErrorToasts(err);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}, [userId, props.groupId, memberIds, props.currentRoleInfo._id]);
|
||||
|
||||
const [, handleRemoveMember] = useAsyncRequest(
|
||||
async (memberId: string) => {
|
||||
if (!props.currentRoleInfo?._id) {
|
||||
showErrorToasts(t('当前没有选择任何角色组'));
|
||||
return;
|
||||
}
|
||||
|
||||
await model.group.removeGroupMemberRoles(
|
||||
props.groupId,
|
||||
[memberId],
|
||||
[props.currentRoleInfo._id]
|
||||
);
|
||||
showSuccessToasts();
|
||||
},
|
||||
[props.groupId, props.currentRoleInfo?._id]
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 管理成员 */}
|
||||
<div className="text-right mb-2 flex space-x-1">
|
||||
<Input
|
||||
placeholder={t('搜索成员')}
|
||||
size="middle"
|
||||
suffix={<Icon fontSize={20} color="grey" icon="mdi:magnify" />}
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
|
||||
<Button type="primary" onClick={handleAddMember}>
|
||||
{t('添加成员')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{(isSearching ? filterMembers : userInfoList).map((m) => (
|
||||
<UserListItem
|
||||
key={m._id}
|
||||
userId={m._id}
|
||||
actions={[
|
||||
<IconBtn
|
||||
key="remove"
|
||||
icon="mdi:close"
|
||||
onClick={() => handleRemoveMember(m._id)}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
RoleMember.displayName = 'RoleMember';
|
||||
@ -0,0 +1,65 @@
|
||||
import { AllPermission, permissionList } from '@/utils/role-helper';
|
||||
import { Button } from 'antd';
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { model, t } from 'tailchat-shared';
|
||||
import { PermissionItem } from '../PermissionItem';
|
||||
import { useModifyPermission } from '../useModifyPermission';
|
||||
|
||||
interface RolePermissionProps {
|
||||
roleId: typeof AllPermission | string;
|
||||
currentRoleInfo?: model.group.GroupRole;
|
||||
fallbackPermissions: string[];
|
||||
onSavePermission: (permissions: string[]) => Promise<void>;
|
||||
}
|
||||
export const RolePermission: React.FC<RolePermissionProps> = React.memo(
|
||||
(props) => {
|
||||
const currentRolePermissions: string[] = useMemo(() => {
|
||||
if (props.roleId === AllPermission) {
|
||||
return props.fallbackPermissions;
|
||||
}
|
||||
|
||||
return props.currentRoleInfo?.permissions ?? [];
|
||||
}, [props.roleId, props.fallbackPermissions, props.currentRoleInfo]);
|
||||
|
||||
const {
|
||||
isEditing,
|
||||
editingPermission,
|
||||
setEditingPermission,
|
||||
handleSwitchPermission,
|
||||
} = useModifyPermission(currentRolePermissions);
|
||||
|
||||
const handleResetPermission = useCallback(() => {
|
||||
setEditingPermission(
|
||||
permissionList.filter((p) => p.default === true).map((p) => p.key)
|
||||
);
|
||||
}, []);
|
||||
|
||||
// 权限概述
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-2 space-x-2 text-right">
|
||||
<Button onClick={handleResetPermission}>{t('重置为默认值')}</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
disabled={!isEditing}
|
||||
onClick={() => props.onSavePermission(editingPermission)}
|
||||
>
|
||||
{t('保存')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 权限详情 */}
|
||||
{permissionList.map((p) => (
|
||||
<PermissionItem
|
||||
key={p.key}
|
||||
title={p.title}
|
||||
desc={p.desc}
|
||||
checked={editingPermission.includes(p.key)}
|
||||
onChange={(checked) => handleSwitchPermission(p.key, checked)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
RolePermission.displayName = 'RolePermission';
|
||||
@ -0,0 +1,26 @@
|
||||
import {
|
||||
DefaultFullModalInputEditorRender,
|
||||
FullModalField,
|
||||
} from '@/components/FullModal/Field';
|
||||
import React from 'react';
|
||||
import { model, t } from 'tailchat-shared';
|
||||
|
||||
interface RoleSummaryProps {
|
||||
currentRoleInfo: model.group.GroupRole;
|
||||
onChangeRoleName: (roleName: string) => void;
|
||||
}
|
||||
export const RoleSummary: React.FC<RoleSummaryProps> = React.memo((props) => {
|
||||
// 权限概述
|
||||
return (
|
||||
<div className="px-2">
|
||||
<FullModalField
|
||||
title={t('身份组名称')}
|
||||
value={props.currentRoleInfo.name}
|
||||
editable={true}
|
||||
renderEditor={DefaultFullModalInputEditorRender}
|
||||
onSave={props.onChangeRoleName}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
RoleSummary.displayName = 'RoleSummary';
|
||||
Loading…
Reference in New Issue