react-icons/ai#AiOutlineDelete JavaScript Examples
The following examples show how to use
react-icons/ai#AiOutlineDelete.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Todos.js From react-portal with MIT License | 4 votes |
|
Todos = () => {
const [todo, setTodo] = useState("");
const [refresh, setRefresh] = useState(false);
const [todos, setTodos] = useState(null);
const [edit, setEdit] = useState(null);
const [visible, setVisible] = useState(false);
const [isTodoInputValid, setIsTodoInputValid] = useState(true);
const [isRateLimited, setIsRateLimited] = useState(false);
useEffect(() => {
(async () => {
try {
const res = await getTodo();
if (!res.error && res.message === "success") {
setTodos(res.data);
}
} catch (err) {
console.log(err);
}
})();
if (todos) {
localStorage.setItem("todos", JSON.stringify(todos));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [refresh]);
const handleOnChangeTodo = val => {
if (todo && !val) {
if (!isTodoInputValid) setIsTodoInputValid(true);
setTodo("");
return;
}
if (val.length < 7 && isTodoInputValid) setIsTodoInputValid(false);
if (val.length >= 7 && !isTodoInputValid) setIsTodoInputValid(true);
setTodo(val);
};
const handleAddTodo = async val => {
if (!val || val.trim().length < 7) return;
try {
const res = await addTodo({ title: val.trim() });
if (!res.error && res.message === "success") {
setRefresh(!refresh);
}
} catch (err) {
console.log(err);
if (err.message.includes("Temporarily blocked") && !isRateLimited) {
setTodo("");
setIsTodoInputValid(true);
setIsRateLimited(true);
_notification("error", "Warning", err.message);
setTimeout(() => {
setIsRateLimited(false);
}, 60000);
}
}
setTodo("");
};
const handleTodoCompletion = async todo => {
try {
const res = await updateTodo(todo._id, {
status: todo.status === "pending" ? "complete" : "pending"
});
if (!res.error && res.message === "success") {
setRefresh(!refresh);
}
} catch (err) {
console.log(err);
}
};
const handleDeleteTodo = async todo => {
try {
const res = await deleteTodo(todo._id);
if (!res.error && res.message === "success") {
setRefresh(!refresh);
}
} catch (err) {
console.log(err);
}
};
const handleDeleteAllTodo = async () => {
try {
const res = await deleteAllTodo();
if (!res.error && res.message === "success") {
setRefresh(!refresh);
_notification(
"success",
"ToDo Deleted",
"All ToDo were successfully deleted"
);
}
} catch (err) {
_notification("error", "Error", err.message);
}
};
return (
<>
<Card>
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
<h2 style={{ fontWeight: 700 }}>Todo</h2>
<span>
<Popconfirm
title="Do you want to delete all Todo ?"
onConfirm={handleDeleteAllTodo}
okText="Yes"
cancelText="No"
disabled={
todos && todos.length === 0 ? true : false
}
>
<Tooltip title="Delete All">
<Button
danger
disabled={
todos && todos.length === 0
? true
: false
}
>
<AiOutlineDelete
style={{
paddingTop: "3px",
color: "#ffffff",
fontSize: "20px"
}}
/>
</Button>
</Tooltip>
</Popconfirm>
</span>
</div>
<hr />
<div>
{todos && todos.length > 0
? todos.map(todo => (
<Row
key={todo._id}
style={
todo.status !== "pending"
? {
display: "flex",
flexDirection: "row",
overflowWrap: "anywhere",
alignItems: "center",
margin: "5px 0px",
padding: "2px 5px",
borderRadius: "4px",
border: "1px solid rgb(24,144,255,0.3)",
backgroundColor:
"rgb(24,144,255,0.05)"
}
: {
display: "flex",
flexDirection: "row",
overflowWrap: "anywhere",
alignItems: "center",
margin: "5px 0px",
padding: "2px 5px",
borderRadius: "4px",
border: "1px solid rgb(191,191,191,.3)",
backgroundColor:
"rgb(191,191,191,.05)"
}
}
>
<Col span={20}>
<Checkbox
style={{
display: "flex",
flexDirection: "row",
overflowWrap: "anywhere",
alignItems: "center",
paddingBottom: "3px"
}}
checked={
todo.status === "complete"
? true
: false
}
onChange={() =>
handleTodoCompletion(todo)
}
>
<span
style={
todo.status === "complete"
? {
textDecoration:
"line-through"
}
: {}
}
>
{todo.title}
</span>
</Checkbox>
</Col>
<Col span={2}>
<AiOutlineEdit
type="edit"
onClick={() => {
setVisible(true);
setEdit(todo);
}}
style={{
fontSize: "16px",
color: "#F4B400",
float: "right",
cursor: "pointer"
}}
/>
</Col>
<Col span={2}>
<Popconfirm
title="Do you want to delete this Todo ?"
onConfirm={() =>
handleDeleteTodo(todo)
}
okText="Yes"
cancelText="No"
>
<AiOutlineDelete
style={{
fonTSize: "16px",
color: "#DB4437",
float: "right",
cursor: "pointer"
}}
/>
</Popconfirm>
</Col>
</Row>
))
: "No Todo"}
</div>
<div
style={{
backgroundColor: "#F4B400",
padding: 2,
marginBottom: 8,
marginTop: 16
}}
></div>
<Input
maxLength="72"
width={100}
placeholder="Type your To Do"
allowClear
value={todo}
onChange={e => handleOnChangeTodo(e.target.value)}
onPressEnter={e => handleAddTodo(e.target.value)}
style={!isTodoInputValid ? { borderColor: "red" } : {}}
disabled={isRateLimited}
/>
</Card>
<EditTodoModal
visible={visible}
handleVisible={setVisible}
todo={edit}
refresh={refresh}
setRefresh={setRefresh}
/>
</>
);
}
Example #2
| Source File: TaskInfoCard.js From react-portal with MIT License | 4 votes |
|
TaskInfoCard = ({
data,
refreshTasks,
setRefreshTasks,
onClick,
userData
}) => {
const [showInfo, setShowInfo] = useState(false);
const [show, setShow] = useState(false);
const deleteTask = async (e, id) => {
e.stopPropagation();
try {
const res = await deleteTaskService(id);
if (!res.error && res.message === "success") {
setRefreshTasks(!refreshTasks);
_notification("success", "Success", "Successfully Deleted!");
}
} catch (err) {
_notification("error", "Error", err.message);
}
};
const showTaskInfo = e => {
e.stopPropagation();
setShowInfo(true);
};
const editTask = e => {
e.stopPropagation();
setShow(true);
};
return (
<>
<Card hoverable onClick={onClick}>
<Row
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
textTransform: "capitalize",
paddingBottom: "6px"
}}
>
<Col style={{ overflowWrap: "anywhere" }}>{data.title}</Col>
<Col>
<Row>
<AiOutlineInfoCircle
color="#4285F4"
style={{
marginLeft: "8px",
height: "1.25em",
width: "1.25em"
}}
onClick={e => showTaskInfo(e)}
/>
{(userData.role === "lead" ||
data.headIds.includes(userData.id)) && (
<>
<Popconfirm
onClick={e => e.stopPropagation()}
okText="Yes"
cancelText="No"
title="Are you sure to delete this task?"
onConfirm={e => {
deleteTask(e, data._id);
}}
onCancel={e => e.stopPropagation()}
>
<AiOutlineDelete
color="#DB4437"
style={{
marginLeft: "8px",
height: "1.25em",
width: "1.25em"
}}
/>
</Popconfirm>
<BiEditAlt
color="#F4B400"
style={{
marginLeft: "8px",
height: "1.25em",
width: "1.25em"
}}
onClick={e => editTask(e, data._id)}
/>
</>
)}
</Row>
</Col>
</Row>
<Row
style={{
alignItems: "center",
justifyContent: "space-between",
paddingTop: "12px"
}}
>
<Tag color="green">{data.createdAt.split("T")[0]}</Tag>
<Avatar.Group
size="small"
maxCount={3}
maxStyle={{
color: "#f56a00",
backgroundColor: "#fde3cf"
}}
>
{data.taskAssigneeData.map(data => (
<Tooltip
title={data.userData[0].name}
placement="top"
key={data._id}
>
<Avatar src={data.userData[0].image} />
</Tooltip>
))}
</Avatar.Group>
</Row>
</Card>
<InfoModal
setShowInfo={setShowInfo}
showInfo={showInfo}
data={data}
/>
<Drawer
title="Edit Task"
placement="right"
closable={true}
width={"100%"}
destroyOnClose={true}
onClose={() => setShow(false)}
visible={show}
>
<EditTask data={data} setShow={setShow} />
</Drawer>
</>
);
}
Example #3
| Source File: TeamList.js From react-portal with MIT License | 4 votes |
|
TeamList = props => {
const [users, setUsers] = useState([]);
const [refresh, toggleRefresh] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [uid, setUID] = useState(null);
const [profileModal, setProfileModal] = useState(false);
const [userData] = useState(getRole());
const [editRole, setEditRole] = useState(null);
const [editDesignation, setEditDesignation] = useState(null);
const [newDesignation, setNewDesignation] = useState(null);
const [branchOptions, setBranchOptions] = useState([]);
const [yearOptions, setYearOptions] = useState([]);
const [searchText, setSearchText] = useState("");
const [searchedColumn, setSearchedColumn] = useState("");
const [page, setPage] = useState(1);
const ref = useRef();
const { Option } = Select;
useEffect(() => {
let arrayBranches = [];
let arrayYears = [];
(async () => {
setIsLoading(true);
try {
let params = {
sortBy: "name"
};
const { data } = await getUsersService(params);
setUsers(data);
data.map(item => {
if (
item.branch &&
!arrayBranches.filter(
branch => branch.text === item.branch
).length
) {
arrayBranches.push({
text: item.branch,
value: item.branch
});
}
if (
item.year &&
!arrayYears.filter(
year => year.text === String(item.year)
).length
) {
arrayYears.push({
text: String(item.year),
value: String(item.year)
});
}
return null;
});
setBranchOptions(arrayBranches);
setYearOptions(arrayYears);
setIsLoading(false);
} catch (err) {
_notification("warning", "Error", err.message);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [refresh]);
const getColumnSearchProps = dataIndex => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters
}) => (
<div style={{ padding: 8 }}>
<Input
ref={ref}
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={e =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
onPressEnter={() =>
handleSearch(selectedKeys, confirm, dataIndex)
}
style={{ width: 188, marginBottom: 8, display: "block" }}
/>
<Space>
<Button
type="primary"
size="small"
onClick={() =>
handleSearch(selectedKeys, confirm, dataIndex)
}
icon={
<AiOutlineSearch style={{ marginRight: "8px" }} />
}
style={{
width: 90,
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
Search
</Button>
<Button
onClick={() => handleReset(clearFilters)}
size="small"
style={{ width: 90 }}
>
Reset
</Button>
</Space>
</div>
),
filterIcon: filtered => (
<div
style={{
height: "100%",
justifyContent: "center",
display: "flex",
alignItems: "center"
}}
>
<AiOutlineSearch
style={{
color: filtered ? "#1890ff" : undefined,
fontSize: "16px"
}}
/>
</div>
),
onFilter: (value, record) =>
record[dataIndex]
? record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase())
: "",
render: text =>
searchedColumn === dataIndex ? (
<Highlighter
highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
searchWords={[searchText]}
autoEscape
textToHighlight={text ? text.toString() : ""}
/>
) : (
text
)
});
const handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
};
const handleReset = clearFilters => {
clearFilters();
setSearchText(" ");
};
const handleAddMember = () => {
toggleRefresh(!refresh);
};
const handleEdit = async val => {
if (editRole) {
try {
const res = await editService(editRole, { role: val });
if (!res.error && res.message === "success") {
_notification(
"success",
"Success",
"Role changed successfully !"
);
toggleRefresh(!refresh);
}
} catch (err) {
_notification("error", "Error", err.message);
}
setEditRole(null);
}
if (editDesignation) {
try {
const res = await editService(editDesignation, {
designation: val
});
if (!res.error && res.message === "success") {
_notification(
"success",
"Success",
"Designation changed successfully !"
);
toggleRefresh(!refresh);
}
} catch (err) {
_notification("error", "Error", err.message);
}
setEditDesignation(null);
}
};
const handleChangeWebsiteSeen = async userId => {
try {
const res = await toggleWebsiteSeen(userId);
if (res.message === "success") {
toggleRefresh(!refresh);
_notification("success", "Success", "Show on website changed");
} else {
_notification("warning", "Error", res.message);
}
} catch (err) {
_notification("error", "Error", err.message);
}
};
const handleUserRevoke = async userId => {
try {
const res = await toggleUserRevoke(userId);
if (res.message === "success") {
toggleRefresh(!refresh);
_notification("success", "Success", "Toggle User Revoke");
} else {
_notification("warning", "Error", res.message);
}
} catch (err) {
_notification("error", "Error", err.message);
}
};
const handleUserDelete = async userId => {
try {
const res = await deleteUser(userId);
if (res.message === "success") {
toggleRefresh(!refresh);
_notification("success", "Success", "User deleted");
} else {
_notification("warning", "Error", res.message);
}
} catch (err) {
_notification("error", "Error", err.message);
}
};
const handleHover = (value, uid) => {
setProfileModal(value);
setUID(uid);
};
const columns = [
{
title: "#",
dataIndex: "key",
key: "key",
render: (value, item, index) => (page - 1) * 10 + index + 1
},
{
title: "Name",
dataIndex: "profile",
key: "profile",
...getColumnSearchProps("name"),
render: profile => (
<Link to="#" onClick={() => handleHover(true, profile[1])}>
{profile[0]}
</Link>
)
},
{
title: "Email",
dataIndex: "email",
key: "email",
...getColumnSearchProps(`email`)
},
{
title: "Branch",
dataIndex: "branch",
key: "branch",
filters: branchOptions,
onFilter: (value, record) => record.branch === value
},
{
title: "Year",
dataIndex: "year",
key: "year",
filters: yearOptions,
onFilter: (value, record) =>
String(record.year).indexOf(String(value)) === 0
},
{
title: "Role",
dataIndex: "role",
key: "role",
filters: [
{ text: "Lead", value: "lead" },
{ text: "Core", value: "core" },
{ text: "Member", value: "member" }
],
onFilter: (value, record) => record.role.indexOf(value) === 0,
render: role => (
<>
{role[1] === editRole ? (
<Select
size="small"
defaultValue={role[0]}
label="Role"
name="role"
style={{ marginRight: "10px", width: "75%" }}
onChange={val => handleEdit(val)}
>
<Option value="lead" disabled>
Lead
</Option>
<Option value="core">Core</Option>
<Option value="member">Member</Option>
{role[2] &&
Number(role[2]) === new Date().getFullYear() &&
new Date().getMonth() >= 4 ? (
<Option value="graduate">Graduate</Option>
) : null}
</Select>
) : (
<Tag
color={
role[0] === "lead"
? "red"
: role[0] === "core"
? "geekblue"
: "orange"
}
className={
userData.role === "lead" ? "w-lead" : "w-else"
}
>
{role[0]}
</Tag>
)}
{userData.role === "lead" && role[0] !== "lead" ? (
<>
{editRole && editRole === role[1] ? (
<AiOutlineClose
style={{
cursor: "pointer",
fontSize: "16px"
}}
onClick={() => {
setEditRole(null);
}}
/>
) : (
<Popconfirm
title="Do you want to edit Roles?"
okText="Yes"
cancelText="No"
onConfirm={() => {
if (editDesignation) {
setEditDesignation(null);
}
setEditRole(role[1]);
}}
>
<AiOutlineEdit
type="edit"
style={{
fontSize: "16px",
color: `${
role[0] === "lead"
? "#F5222D"
: role[0] === "core"
? "#5A85EF"
: "#FA8C16"
}`,
cursor: "pointer"
}}
/>
</Popconfirm>
)}
<Divider type="vertical" />
</>
) : null}
</>
)
},
{
title: "Show on website",
dataIndex: "show",
key: "show",
className: "websiteShow",
filters: [
{ text: "Shown", value: true },
{ text: "Not Shown", value: false }
],
onFilter: (value, record) => record.show.indexOf(value) === 0,
render: show => (
<div
style={{
display: "flex",
flexDirection: "row",
alignItems: "center"
}}
>
<>
<Tag
color={show[0] ? "green" : "red"}
style={{
textAlign: "center",
width: "70%",
textTransform: "capitalize"
}}
>
{show[0] ? "Shown" : "Not shown"}
</Tag>
<Popconfirm
title="Do you want to toggle website seen?"
onConfirm={() => handleChangeWebsiteSeen(show[1])}
okText="Yes"
cancelText="No"
>
<AiOutlineRedo
style={{ cursor: "pointer", fontSize: "16px" }}
/>
</Popconfirm>
<Divider type="vertical" />
</>
</div>
)
},
{
title: "Designation",
dataIndex: "designation",
key: "designation",
...getColumnSearchProps("designation"),
render: designation => (
<>
{editDesignation === designation[1] ? (
<Input
size="small"
name="designation"
defaultValue={designation[0]}
onChange={e => setNewDesignation(e.target.value)}
onPressEnter={() => {
if (newDesignation !== "")
handleEdit(newDesignation);
}}
/>
) : (
<span>{designation[0]}</span>
)}
</>
)
},
{
title: "Action",
key: "action",
dataIndex: "action",
className: "userAction",
render: action => (
<div
style={{
display: "flex",
flexDirection: "row",
alignItems: "center"
}}
>
<>
{userData.role === "lead" ? (
<>
{editDesignation &&
editDesignation === action[1] ? (
<AiOutlineClose
style={{
cursor: "pointer",
fontSize: "16px"
}}
onClick={() => {
setEditDesignation(null);
}}
/>
) : (
<Popconfirm
title="Do you want to change Designation ?"
okText="Yes"
cancelText="No"
onConfirm={() => {
if (editRole) {
setEditRole(null);
}
setEditDesignation(action[1]);
}}
>
<AiOutlineEdit
type="edit"
style={{
fontSize: "16px",
cursor: "pointer",
color: "#FA8C16"
}}
/>
</Popconfirm>
)}
<Divider type="vertical" />
</>
) : null}
{action[2] !== "lead" ? (
<>
<Popconfirm
title="Do you want to toggle user revoke?"
onConfirm={() =>
handleUserRevoke(action[1])
}
okText="Yes"
cancelText="No"
>
{action[0] ? (
<AiOutlineClose
type="close"
style={{
fontSize: "16px",
color: "#F4B400",
cursor: "pointer"
}}
/>
) : (
<AiOutlineCheck
type="check"
style={{
fontSize: "16px",
color: "green",
cursor: "pointer"
}}
/>
)}
</Popconfirm>
<Divider type="vertical" />
<Popconfirm
title="Are you sure delete this user?"
onConfirm={() =>
handleUserDelete(action[1])
}
okText="Yes"
cancelText="No"
>
<AiOutlineDelete
style={{
fontSize: "16px",
color: "#DB4437",
cursor: "pointer"
}}
type="delete"
/>
</Popconfirm>
</>
) : null}
</>
</div>
)
}
];
const data = users
? users.map((user, id) => {
const {
_id,
name,
email,
branch,
year,
role,
designation,
showOnWebsite,
isRevoked
} = user;
return {
key: ++id,
_id,
name,
profile: [name, _id],
email,
branch: branch ? branch : "N/A",
year: year ? year : "N/A",
role: [role, _id, year],
designation: [designation, _id],
isRevoked,
show: [showOnWebsite, _id],
action: [isRevoked, _id, role, designation]
};
})
: null;
return (
<>
<PageTitle title="Team" bgColor="#0F9D58" />
<div className="table-wrapper-card">
<UserOptions onAddMember={handleAddMember} />
<Card style={{ padding: 0, width: "100%", overflowX: "auto" }}>
<StyledTable
loading={isLoading}
columns={columns}
dataSource={data}
role={userData.role}
pagination={{
onChange(current) {
setPage(current);
}
}}
/>
</Card>
</div>
<UserProfile
openProfile={handleHover}
visible={profileModal}
uid={uid}
/>
</>
// <>
// <PageTitle title="Team" bgColor="#0F9D58" />
// <Row gutter={(24, 24)}>
// {users.map(user => (
// <Col span={6}>
// <Card>
// <Row style={{ justifyContent: "center" }}>
// <Avatar
// size={80}
// src={
// <Image
// src={user.image}
// alt="Profilepic"
// />
// }
// />
// </Row>
// <Row
// style={{
// justifyContent: "center",
// paddingTop: ".5rem"
// }}
// >
// <h3 style={{ fontSize: "18px" }}>
// {user.name}
// </h3>
// </Row>
// <Row style={{ justifyContent: "center" }}>
// <Col
// span={6}
// style={{
// justifyContent: "center",
// display: "flex"
// }}
// >
// <h3>{user.branch ? user.branch : "N/A"}</h3>
// </Col>
// <Col
// span={8}
// style={{
// justifyContent: "center",
// display: "flex"
// }}
// >
// <h3>{user.year ? user.year : "N/A"}</h3>
// </Col>
// </Row>
// <Row style={{ justifyContent: "center" }}>
// <h3>{user.designation}</h3>
// </Row>
// <Row style={{ justifyContent: "center" }}>
// <h3>
// {user.bio ? user.bio : "no bio available"}
// </h3>
// </Row>
// </Card>
// </Col>
// ))}
// </Row>
// </>
);
}
