Antd is a middle and background component library specially customized for react, which provides a large number of components for developers to use.
Official website address Click to jump
In the middle and background, user management is essential. The management of external users and internal users involves the management of users, roles and permissions.
User management runs through all aspects of the business and is the core part of supporting business operations.
Today, use react combined with antd V5.0 to handle user management.
This user management is divided into the following sections:
- User List – Displays users
- User addition
- User deletion
- User Information Update
- User Query/Filter
This section mainly explains how to configure User Information Update and User Query/Filter.
In this part, the components of antd are mainly used as follows:
- space
- switch,
- Table,
- Modal,
- Tag,
- Button
User status modification (can log in)
Page display
Code Implementation
const columns= [
...,
{
title: "User Status",
dataIndex: "roleState",
render: (roleState, item) => {
// notice here
return (
<div>
<Switch size="small" checked={roleState} disabled={item.default} onChange={()=>handelChange(item)} />
</div>
);
},
}]
// user state modification
const handelChange = async (item) => {
item.roleState = !item.roleState
setdataSource([...dataSource])
// send request to backend
await fetchPatchUser(item.id, { roleState: item.roleState });
}
Update user information
Code Implementation
UpdateUserFormData.current.setFieldsValue(item); Pay special attention here – setFieldsValue(item)
Parent component call
import UpdateUserModal from "./UpdateUserModal";
// change user information
const [openUpdateModal, setopenUpdateModal] = useState(false);
const UpdateUserFormData = useRef(null);
const showUserModal = (item) => {
console. log(item);
console.log(UpdateUserFormData.current);
setopenUpdateModal(true);
// note async here
setTimeout(() => {
UpdateUserFormData.current.setFieldsValue(item);
}, 10);
};
const onUpdataUserConfirm = (values) => {
console.log("Received values of onUpdataUserConfirm form: ", values);
setopenUpdateModal(false);
};
Subcomponent “./UpdateUserModal”
There is overlap between part of the code and adding users. For the convenience of operation, it is temporarily divided into two components for implementation.
import { forwardRef, useState, useEffect } from "react";
import { Form, Input, Modal, Select } from "antd";
const UpdateUserModal = forwardRef(
(
{
open,
onUpdataUserConfirm,
onUpdataUserCancel,
regionList,
rolesList,
isRegionDisable
},
ref
) => {
const [isRegionDisableValue, setisRegionDisableValue] = useState(isRegionDisable)
useEffect(() => {
setisRegionDisableValue(isRegionDisable)
}, [isRegionDisable]);
return (
<div>
<Modal
open={open}
title="Update User"
okText="OK"
cancelText="Cancel"
onCancel={onUpdataUserCancel}
onOk={() => {
ref. current
.validateFields()
.then((values) => {
console.log(values);
onUpdataUserConfirm(values);
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
<Form
ref={ref}
layout="vertical"
name="form_in_modal"
initialValues={<!-- -->{
modifier: "public",
}}
>
<Form.Item
name="username"
label="Username"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
label="Password"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="roleId"
label="Role"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Select
onChange={(value) => {
if (value === 1) {
setisRegionDisableValue(true);
ref.current.setFieldsValue({
region: "",
});
} else {
setisRegionDisableValue(false);
}
}}
>
{rolesList. map((item) => (
<Select.Option value={item.id} key={item.id}>
{item.roleName}
</Select. Option>
))}
</select>
</Form.Item>
<Form.Item
name="region"
label="Department"
rules={
isRegionDisableValue
? []
: [
{
required: true,
message: "Please input the title of collection!",
},
]
}
>
<Select disabled={isRegionDisableValue}>
{regionList. map((item) => (
<Select.Option value={item.value} key={item.id}>
{item. title}
</Select. Option>
))}
</select>
</Form.Item>
</Form>
</Modal>
</div>
);
}
);
export default UpdateUserModal;
Page display
User filtering
The deletion uses the table’s own function
To filter a column of data, use the filters attribute of the column to specify the column that needs to be filtered, onFilter is used to filter the current data, and filterMultiple is used to specify multiple selections and single.
const columns = [
{
title: "Department",
dataIndex: "region",
render: (region) => {
return region === "" ? "Headquarters" : region;
},
filters: [
...regionList. map((item) => ({
text: item. title,
value: item. value,
})),
{ text: "Super Administrator", value: "Super Administrator" },
],
// user delete
onFilter: (value, record) => {
if (value === "super administrator") {
return record.region === "";
} else {
return record. region === value;
}
},
},
];
Page display
So far, the user function module ends.
Summary
This user management is divided into the following sections:
- User List – Displays users
- User addition
- User deletion
- User Information Update
- User Query/Filter
Contains three files
- userlist.js
- AddUserForm.js
- UpdateUserModal.js
Among them, userlist.js is the parent component, and the other two are child components.
The source code of the three files is as follows:
userlist.js
import React, { useEffect, useRef, useState } from "react";
import { Space, Switch, Table, Modal, Tag, Button } from "antd";
import {
Delete Outlined,
EditOutlined,
ExclamationCircleFilled,
} from "@ant-design/icons";
import AddUserModal from "./AddUserForm";
import UpdateUserModal from "./UpdateUserModal";
import {
fetchGetUserList,
fetchGetRegionList,
fetchGetRoles,
fetchAddUser,
fetchDeleteUser,
fetchPatchUser,
} from "../../utils/api";
const { confirm } = Modal;
export default function UserList() {
const [dataSource, setdataSource] = useState([]);
// Get user data processing
useEffect(() => {
const fetchGetUserListHandle = async () => {
const urseListData = await fetchGetUserList();
setdataSource(urseListData);
};
fetchGetUserListHandle();
}, []);
// add user handler
const [open, setOpen] = useState(false);
const [regionList, setregionList] = useState([]);
const [rolesList, serolesList] = useState([]);
const AddUserFormData = useRef(null);
// Get user data processing
useEffect(() => {
// Get user data processing
const fetchGetRegionListHandle = async () => {
const urseListData = await fetchGetRegionList();
setregionList(urseListData);
};
fetchGetRegionListHandle();
// Get user data processing
const fetchGetRolesListHandle = async () => {
const urseListData = await fetchGetRoles();
serolesList(urseListData);
};
fetchGetRolesListHandle();
}, []);
const onCreate = async (values) => {
console.log("Received values of form: ", values);
setOpen(false);
//post to the backend, generate an id, and then set the datasource to facilitate subsequent deletion and update
const data = await fetchAddUser({
...values,
roleState: true,
default: false,
});
setdataSource([
...dataSource,
{
...data,
role: rolesList.filter((item) => item.id === values.roleId)[0],
},
]);
};
// Delete popup event
const confirmHandel = (item) => {
confirm({
title: "Are you sure you want to delete?",
icon: <ExclamationCircleFilled />,
content: "Deleting here will delete the user, please be careful!",
okText: "Confirm",
cancelText: "Cancel",
onOk() {
console.log("OK");
deleteRolesMethod(item);
},
onCancel() {
console.log("Cancel");
},
});
};
// delete event
const deleteRolesMethod = async (item) => {
console. log(item);
setdataSource(dataSource. filter((data) => data. id != item. id));
const data = await fetchDeleteUser(item.id);
};
// user state modification
const handelChange = async (item) => {
item.roleState = !item.roleState;
setdataSource([...dataSource]);
// send request to backend
await fetchPatchUser(item.id, { roleState: item.roleState });
};
// change user information
const [openUpdateModal, setopenUpdateModal] = useState(false);
const UpdateUserFormData = useRef(null);
const [isRegionDisable, setisRegionDisable] = useState(false);
const [curentUserData, setcurentUserData] = useState(null);
const showUserModal = (item) => {
console. log(item);
setopenUpdateModal(true);
setTimeout(() => {
if (item.roleId === 1) {
// disable
setisRegionDisable(true);
} else {
// cancel disable
setisRegionDisable(false);
}
UpdateUserFormData.current.setFieldsValue(item);
setcurentUserData(item);
}, 10);
};
const onUpdataUserConfirm = async (values) => {
setopenUpdateModal(false);
setdataSource(
dataSource. map((item) => {
if (item.id === curentUserData.id) {
return {
...item,
...values,
role: rolesList.filter((item) => item.id === values.roleId)[0],
};
}
return item;
})
);
setisRegionDisable(!isRegionDisable);
// send request to backend
await fetchPatchUser(curentUserData.id, values);
};
const columns = [
{
title: "Department",
dataIndex: "region",
render: (region) => {
return region === "" ? "Headquarters" : region;
},
filters: [
...regionList. map((item) => ({
text: item. title,
value: item. value,
})),
{ text: "Super Administrator", value: "Super Administrator" },
],
// user delete
onFilter: (value, record) => {
if (value === "super administrator") {
return record.region === "";
} else {
return record. region === value;
}
},
},
{
title: "role name",
dataIndex: "role",
render: (role) => {
return <Tag color="magenta">{role?.roleName}</Tag>;
},
},
{
title: "Username",
dataIndex: "username",
},
{
title: "User availability status",
dataIndex: "roleState",
render: (roleState, item) => {
// notice here
return (
<div>
<Switch
size="small"
checked={roleState}
disabled={item.default}
onChange={() => handelChange(item)}
/>
</div>
);
},
},
{
title: "Operation",
render: (item) => {
return (
<Space>
<Button
icon={<EditOutlined style={<!-- -->{ fontSize: "12px" }} />}
shape="circle"
type="primary"
size="small"
onClick={() => showUserModal(item)}
></Button>
<Button
icon={<DeleteOutlined style={<!-- -->{ fontSize: "12px" }} />}
shape="circle"
danger
size="small"
onClick={() => {
confirmHandel(item);
}}
></Button>
</Space>
);
},
},
];
return (
<div>
<div style={<!-- -->{ padding: "0 0 20px 0" }}>
<Button
size="small"
type="primary"
onClick={() => {
setOpen(true);
console. log(AddUserFormData);
}}
>
Add user
</Button>
</div>
<Table
dataSource={dataSource}
columns={columns}
rowKey={(item) => item.id}
pagination={<!-- -->{
pageSize: 5,
}}
></Table>
<AddUserModal
open={open}
onCreate={onCreate}
onCancel={() => {
setOpen(false);
}}
regionList={regionList}
rolesList = {rolesList}
ref={AddUserFormData}
></AddUserModal>
<UpdateUserModal
open={openUpdateModal}
onUpdataUserConfirm={onUpdataUserConfirm}
onUpdataUserCancel={() => {
setopenUpdateModal(false);
}}
regionList={regionList}
rolesList = {rolesList}
ref={UpdateUserFormData}
isRegionDisable={isRegionDisable}
></UpdateUserModal>
</div>
);
}
AddUserForm.js
import { forwardRef, useState } from "react";
import { Form, Input, Modal, Radio, Select } from "antd";
const AddUserModal = forwardRef(
({ open, onCreate, onCancel, regionList, rolesList }, ref) => {
const [regionDisable, setregionDisable] = useState(false)
return (
<div>
<Modal
open={open}
title="Add User"
okText="OK"
cancelText="Cancel"
onCancel={onCancel}
onOk={() => {
ref. current. validateFields()
.then((values) => {
console. log(values)
onCreate(values);
ref. current. resetFields();
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
<Form
ref={ref}
layout="vertical"
name="form_in_modal"
initialValues={<!-- -->{
modifier: "public",
}}
>
<Form.Item
name="username"
label="Username"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
label="Password"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="roleId"
label="Role"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Select onChange={(value)=>{
if(value === 1){
setregionDisable(true)
ref.current.setFieldsValue({
region:""
})
}else{
setregionDisable(false)
}
}}>
{rolesList. map((item) => (
<Select.Option value={item.id} key={item.id}>
{item.roleName}
</Select. Option>
))}
</select>
</Form.Item>
<Form.Item
name="region"
label="Department"
rules={regionDisable? [] :[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Select disabled={regionDisable}>
{regionList. map((item) => (
<Select.Option value={item.value} key={item.id}>
{item. title}
</Select. Option>
))}
</select>
</Form.Item>
</Form>
</Modal>
</div>
);
}
);
export default AddUserModal;
UpdateUserModal.js
import { forwardRef, useState, useEffect } from "react";
import { Form, Input, Modal, Select } from "antd";
const UpdateUserModal = forwardRef(
(
{
open,
onUpdataUserConfirm,
onUpdataUserCancel,
regionList,
rolesList,
isRegionDisable
},
ref
) => {
const [isRegionDisableValue, setisRegionDisableValue] = useState(isRegionDisable)
useEffect(() => {
setisRegionDisableValue(isRegionDisable)
}, [isRegionDisable]);
return (
<div>
<Modal
open={open}
title="Update User"
okText="OK"
cancelText="Cancel"
onCancel={onUpdataUserCancel}
onOk={() => {
ref. current
.validateFields()
.then((values) => {
console.log(values);
onUpdataUserConfirm(values);
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
<Form
ref={ref}
layout="vertical"
name="form_in_modal"
initialValues={<!-- -->{
modifier: "public",
}}
>
<Form.Item
name="username"
label="Username"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
label="Password"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="roleId"
label="Role"
rules={[
{
required: true,
message: "Please input the title of collection!",
},
]}
>
<Select
onChange={(value) => {
if (value === 1) {
setisRegionDisableValue(true);
ref.current.setFieldsValue({
region: "",
});
} else {
setisRegionDisableValue(false);
}
}}
>
{rolesList. map((item) => (
<Select.Option value={item.id} key={item.id}>
{item.roleName}
</Select. Option>
))}
</select>
</Form.Item>
<Form.Item
name="region"
label="Department"
rules={
isRegionDisableValue
? []
: [
{
required: true,
message: "Please input the title of collection!",
},
]
}
>
<Select disabled={isRegionDisableValue}>
{regionList. map((item) => (
<Select.Option value={item.value} key={item.id}>
{item. title}
</Select. Option>
))}
</select>
</Form.Item>
</Form>
</Modal>
</div>
);
}
);
export default UpdateUserModal;