p90524618
/
answer
mirror of https://gitee.com/answerdev/answer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: cannot change current logged user status and role

This commit is contained in:
shuai 2022-11-30 17:17:58 +08:00
parent fa7ade2a24
commit 9884a1d23f
5 changed files with 102 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
i18n/en_US.yaml
View File

@ -678,6 +678,7 @@ ui:
update: update success
update_password: Password changed successfully.
flag_success: Thanks for flagging.
fobidden_operate_self: Forbidden to operate on yourself
related_question:
title: Related Questions
btn: Add question
@ -1022,15 +1023,6 @@ ui:
title: Change user role to...
btn_cancel: Cancel
btn_submit: Submit
user:
name: User
description: Default with no special access.
admin:
name: Admin
description: Have the full power to access the site.
moderator:
name: Moderator
description: Has access to all posts except admin settings.
users:
title: Users
name: Name
@ -1049,6 +1041,9 @@ ui:
suspended: Suspended
deleted: Deleted
normal: Normal
Moderator: Moderator
Admin: Admin
User: User
filter:
placeholder: "Filter by name, user:id"
set_new_password: Set new password

6
ui/src/common/interface.ts
View File

@ -444,3 +444,9 @@ export interface ReviewResp {
count: number;
list: ReviewItem[];
}
export interface UserRoleItem {
id: number;
name: string;
description: string;
}

140
ui/src/hooks/useChangeUserRoleModal/index.tsx
View File

@ -4,8 +4,9 @@ import { useTranslation } from 'react-i18next';
import ReactDOM from 'react-dom/client';
import { Modal as AnswerModal } from '@/components';
import { changeUserStatus } from '@/services';
// import { Modal as AnswerModal } from '@/components';
import { getUserRoles, changeUserRole } from '@/services';
import { UserRoleItem } from '@/common/interface';
const div = document.createElement('div');
const root = ReactDOM.createRoot(div);
@ -19,108 +20,57 @@ const useChangeUserRoleModal = ({ callback }: Props) => {
keyPrefix: 'admin.user_role_modal',
});
const [id, setId] = useState('');
const [defaultType, setDefaultType] = useState('');
const [defaultId, setDefaultId] = useState(-1);
const [isInvalid, setInvalidState] = useState(false);
const [changeType, setChangeType] = useState({
type: '',
haveContent: false,
});
const [content, setContent] = useState({
value: '',
isInvalid: false,
errorMsg: '',
});
const [changedId, setChangeId] = useState(-1);
const [show, setShow] = useState(false);
const [list] = useState<any[]>([
{
type: 'user',
name: t('user.name'),
description: t('user.description'),
},
{
type: 'admin',
name: t('admin.name'),
description: t('admin.description'),
},
{
type: 'moderator',
name: t('moderator.name'),
description: t('moderator.description'),
},
]);
const [list, setList] = useState<UserRoleItem[]>([]);
const getRolesData = async () => {
const res = await getUserRoles();
setList(res);
};
const handleRadio = (val) => {
setInvalidState(false);
setContent({
value: '',
isInvalid: false,
errorMsg: '',
});
setChangeType({
type: val.type,
haveContent: val.have_content,
});
setChangeId(val.id);
};
const onClose = () => {
setChangeType({
type: '',
haveContent: false,
});
setContent({
value: '',
isInvalid: false,
errorMsg: '',
});
setContent({
value: '',
isInvalid: false,
errorMsg: '',
});
setChangeId(-1);
setDefaultId(-1);
setShow(false);
};
const handleSubmit = () => {
if (changeType.type === '') {
setInvalidState(true);
return;
}
if (changeType.haveContent && !content.value) {
setContent({
value: content.value,
isInvalid: true,
errorMsg: t('remark.empty'),
});
return;
}
if (defaultType === changeType.type) {
if (defaultId === changedId) {
onClose();
return;
}
if (changeType.type === 'deleted') {
onClose();
// if (changeType.type === 'deleted') {
// onClose();
AnswerModal.confirm({
title: t('confirm_title'),
content: t('confirm_content'),
confirmText: t('confirm_btn'),
confirmBtnVariant: 'danger',
onConfirm: () => {
changeUserStatus({
user_id: id,
status: changeType.type,
}).then(() => {
callback?.();
onClose();
});
},
});
return;
}
changeUserStatus({
// AnswerModal.confirm({
// title: t('confirm_title'),
// content: t('confirm_content'),
// confirmText: t('confirm_btn'),
// confirmBtnVariant: 'danger',
// onConfirm: () => {
// changeUserStatus({
// user_id: id,
// status: changeType.type,
// }).then(() => {
// callback?.();
// onClose();
// });
// },
// });
// return;
// }
changeUserRole({
user_id: id,
status: changeType.type,
role_id: changedId,
}).then(() => {
callback?.();
onClose();
@ -128,12 +78,10 @@ const useChangeUserRoleModal = ({ callback }: Props) => {
};
const onShow = (params) => {
getRolesData();
setId(params.id);
setChangeType({
...changeType,
type: params.type,
});
setDefaultType(params.type);
setChangeId(params.role_id);
setDefaultId(params.role_id);
setShow(true);
};
useLayoutEffect(() => {
@ -146,17 +94,17 @@ const useChangeUserRoleModal = ({ callback }: Props) => {
<Form>
{list.map((item) => {
return (
<div key={item?.type}>
<Form.Group controlId={item.type} className="mb-3">
<div key={item?.id}>
<Form.Group controlId={item.name} className="mb-3">
<FormCheck>
<FormCheck.Input
id={item.type}
id={item.name}
type="radio"
checked={changeType.type === item.type}
checked={changedId === item.id}
onChange={() => handleRadio(item)}
isInvalid={isInvalid}
/>
<FormCheck.Label htmlFor={item.type}>
<FormCheck.Label htmlFor={item.name}>
<span className="fw-bold">{item.name}</span>
<br />
<span className="text-secondary">

59
ui/src/pages/Admin/Users/index.tsx
View File

@ -14,8 +14,9 @@ import {
Icon,
} from '@/components';
import * as Type from '@/common/interface';
import { useChangeModal, useChangeUserRoleModal } from '@/hooks';
import { useChangeModal, useChangeUserRoleModal, useToast } from '@/hooks';
import { useQueryUsers } from '@/services';
import { loggedUserInfoStore } from '@/stores';
import '../index.scss';
@ -42,6 +43,8 @@ const Users: FC = () => {
const curFilter = urlSearchParams.get('filter') || UserFilterKeys[0];
const curPage = Number(urlSearchParams.get('page') || '1');
const curQuery = urlSearchParams.get('query') || '';
const currentUser = loggedUserInfoStore((state) => state.user);
const Toast = useToast();
const {
data,
isLoading,
@ -50,7 +53,11 @@ const Users: FC = () => {
page: curPage,
page_size: PAGE_SIZE,
query: curQuery,
...(curFilter === 'all' ? {} : { status: curFilter }),
...(curFilter === 'all'
? {}
: curFilter === 'staff'
? { staff: true }
: { status: curFilter }),
});
const changeModal = useChangeModal({
callback: refreshUsers,
@ -60,18 +67,28 @@ const Users: FC = () => {
callback: refreshUsers,
});
const handleClick = ({ user_id, status }) => {
changeModal.onShow({
id: user_id,
type: status,
});
};
const handleAction = (type, user) => {
const { user_id, status, role_id, username } = user;
if (username === currentUser.username) {
Toast.onShow({
msg: t('fobidden_operate_self', { keyPrefix: 'toast' }),
variant: 'warning',
});
return;
}
if (type === 'status') {
changeModal.onShow({
id: user_id,
type: status,
});
}
const handleClickRole = ({ user_id, role }) => {
changeUserRoleModal.onShow({
id: user_id,
role,
});
if (type === 'role') {
changeUserRoleModal.onShow({
id: user_id,
role_id,
});
}
};
const handleFilter = (e) => {
@ -157,7 +174,9 @@ const Users: FC = () => {
</span>
</td>
<td>
<span className="text-bg-light">Admin</span>
<span className="badge text-bg-light">
{t(user.role_name)}
</span>
</td>
{curFilter !== 'deleted' ? (
<td className="text-end">
@ -166,15 +185,17 @@ const Users: FC = () => {
<Icon name="three-dots-vertical" />
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>{t('set_new_password')}</Dropdown.Item>
<Dropdown.Item onClick={() => handleClick(user)}>
{/* <Dropdown.Item>{t('set_new_password')}</Dropdown.Item> */}
<Dropdown.Item
onClick={() => handleAction('status', user)}>
{t('change_status')}
</Dropdown.Item>
<Dropdown.Item onClick={() => handleClickRole(user)}>
<Dropdown.Item
onClick={() => handleAction('role', user)}>
{t('change_role')}
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>{t('show_logs')}</Dropdown.Item>
{/* <Dropdown.Divider />
<Dropdown.Item>{t('show_logs')}</Dropdown.Item> */}
</Dropdown.Menu>
</Dropdown>

8
ui/src/services/admin/users.ts
View File

@ -21,3 +21,11 @@ export const useQueryUsers = (params) => {
mutate,
};
};
export const getUserRoles = () => {
return request.get('/answer/admin/api/roles');
};
export const changeUserRole = (params) => {
return request.put('/answer/admin/api/user/role', params);
};