react-icons/ai#AiOutlineEdit JavaScript Examples

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}
			/>
		</>
	);
}

StatusBar = ({ status, modal, data, refresh, setRefresh }) => {
	let color =
		status === "pending"
			? "orange"
			: status === "completed"
			? "green"
			: status === "closed"
			? "blue"
			: status === "overdue"
			? "red"
			: "gold";

	const [edit, setEdit] = useState(false);
	const { Option } = Select;
	const editTaskStatus = async val => {
		try {
			const res = await updateTaskStatus(data._id, { status: val });
			if (!res.error && res.message === "success") {
				setEdit(false);
				setRefresh(!refresh);
			}
		} catch (err) {
			console.log(err);
		}
	};
	return (
		<>
			<Row style={{ alignItems: "center", fontSize: "16px" }}>
				Task Status :
				{!edit ? (
					<Tag
						color={color}
						style={{
							textTransform: "capitalize",
							fontSize: "14px",
							marginLeft: "8px",
							width: "120px",
							textAlign: "center"
						}}
					>
						{status}
					</Tag>
				) : (
					<div style={{ margin: "0px 12px" }}>
						<Select
							defaultValue={status}
							style={{ width: 120 }}
							onChange={editTaskStatus}
						>
							<Option value="ongoing">On going</Option>
							<Option value="pending">Pending</Option>
							<Option value="completed">Completed</Option>
							<Option value="overdue">Overdue</Option>
							<Option value="closed">Closed</Option>
						</Select>
					</div>
				)}
				{!modal &&
					(!edit ? (
						<AiOutlineEdit
							onClick={() => setEdit(true)}
							style={{
								color: `${color}`,
								width: "1.25em",
								height: "1.25em",
								cursor: "pointer"
							}}
						/>
					) : (
						<AiOutlineClose
							onClick={() => setEdit(false)}
							style={{
								width: "1.25em",
								height: "1.25em",
								cursor: "pointer"
							}}
						/>
					))}
			</Row>
		</>
	);
}

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>
		// </>
	);
}