fix(acl): role menu loading status (#3787)

This commit is contained in:
YANG QIA 2024-03-21 21:09:24 +08:00 committed by GitHub
parent 49759c1ebf
commit 9354e25d74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -18,11 +18,12 @@ export const RolesMenu: React.FC & {
Item: React.FC<{ item: any; onEdit: () => void }>; Item: React.FC<{ item: any; onEdit: () => void }>;
} = () => { } = () => {
const { t } = useACLTranslation(); const { t } = useACLTranslation();
const { data, mutate, loading } = useResourceActionContext(); const { data, mutate } = useResourceActionContext();
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [record, setRecord] = useState(null); const [record, setRecord] = useState(null);
const { role, setRole } = useContext(RolesManagerContext); const { role, setRole } = useContext(RolesManagerContext);
const [roles, setRoles] = useState([]); const [roles, setRoles] = useState([]);
const [loading, setLoading] = useState(false);
const api = useAPIClient(); const api = useAPIClient();
const loadMore = useCallback(async () => { const loadMore = useCallback(async () => {
@ -30,7 +31,7 @@ export const RolesMenu: React.FC & {
if (!meta || meta.page >= meta.totalPage) { if (!meta || meta.page >= meta.totalPage) {
return; return;
} }
setLoading(true);
const res = await api.resource('roles').list({ const res = await api.resource('roles').list({
page: meta.page + 1, page: meta.page + 1,
pageSize: meta.pageSize, pageSize: meta.pageSize,
@ -42,6 +43,7 @@ export const RolesMenu: React.FC & {
appends: [], appends: [],
}); });
mutate(res?.data || {}); mutate(res?.data || {});
setLoading(false);
}, [data]); }, [data]);
const { lastItem, setLastItem } = useLoadMoreObserver({ loadMore }); const { lastItem, setLastItem } = useLoadMoreObserver({ loadMore });
@ -102,15 +104,12 @@ export const RolesMenu: React.FC & {
return ( return (
<> <>
{roles.length ? ( {roles.length ? (
<> <Menu
<Menu style={{ border: 'none', maxHeight: '65vh', overflowY: 'auto' }}
style={{ border: 'none', maxHeight: '65vh', overflowY: 'auto' }} items={[...items, ...(loading ? [{ key: 'loading', label: <Spin /> }] : [])]}
items={items} selectedKeys={[role?.name]}
selectedKeys={[role?.name]} onSelect={handleSelect}
onSelect={handleSelect} />
/>
{loading && <Spin />}
</>
) : ( ) : (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
)} )}