react-icons/ai#AiOutlineCheck JavaScript Examples

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

FormWizard = ({ steps, currentStep, onSubmit, onPrev, data, defaultValues, submitting }) => {
	const CurrentFormStep = getForm(steps, currentStep);

	const currentStepSlug = currentStep || steps[0].slug;
	let currentStepIndex = 0;
	steps.forEach((step, i) => {
		if (step.slug === currentStepSlug) {
			currentStepIndex = i;
		}
	});

	const nextStep =
		currentStepIndex === steps.length - 1 ? false : steps[currentStepIndex + 1].slug;
	const prevStep = currentStepIndex === 0 ? false : steps[currentStepIndex - 1].slug;
	const lastStep = currentStepIndex === steps.length - 1;

	/**
	 * Handles submitting the form data for each step of the form wizard.
	 *
	 * @param {object} formData An object containing all the form data.
	 * @param {object} form A instance of the `useForm` hook.
	 */
	const handleSubmit = (formData, form) => {
		const formattedData = { ...formData };
		if (currentStepSlug === 'costs') {
			const { funding_value, price } = formData.technologyCosts;

			formattedData.technologyCosts = {
				...formData.technologyCosts,
				costs: {
					development_costs: parseCostValueToInt(
						formData.technologyCosts?.costs?.development_costs,
					),
					implementation_costs: parseCostValueToInt(
						formData.technologyCosts?.costs?.implementation_costs,
					),
					maintenance_costs: parseCostValueToInt(
						formData.technologyCosts?.costs?.maintenance_costs,
					),
				},
				funding_value: funding_value ? formatCurrencyToInt(funding_value) : 0,
				price: price ? formatCurrencyToInt(price) : 0,
			};
		}

		if (currentStepSlug === 'about') {
			const filteredAreas = formattedData.knowledge_area_id.filter(Boolean);
			formattedData.knowledge_area_id = filteredAreas[filteredAreas.length - 1].value;
			formattedData.type = formattedData.type.value;
		}

		if (currentStepSlug === 'map-and-attachments') {
			const whoDevelop = formattedData.locations?.[technologyLocationsEnum.WHO_DEVELOP]?.map(
				(location) => ({
					location_id: location,
					location_type: technologyLocationsEnum.WHO_DEVELOP,
				}),
			);
			const whereIsImplemented = formattedData.locations?.[
				technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED
			]?.map((location) => ({
				location_id: location,
				location_type: technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED,
			}));

			formattedData.locations = [...(whoDevelop || []), ...(whereIsImplemented || [])];
		}

		if (Array.isArray(formattedData.knowledge_area_id)) {
			const filteredAreas = formattedData.knowledge_area_id.filter(Boolean);
			formattedData.knowledge_area_id =
				formattedData.knowledge_area_id[filteredAreas[filteredAreas.length - 1]];
		}

		onSubmit({ data: formattedData, step: currentStepSlug, nextStep }, form);
	};

	/**
	 * Handles going back in the form wizard.
	 */
	const handlePrev = () => {
		window.scrollTo({ top: 0 });
		onPrev({ step: currentStepSlug, prevStep });
	};

	const { technology: { revisions = [], status } = {} } = data;
	const lastCuratorRevision = revisions.length ? revisions[revisions.length - 1] : null;
	const renderStep = (step, index) => {
		const showIcon = index < currentStepIndex || typeof step.icon !== 'undefined';
		const Icon = index < currentStepIndex ? AiOutlineCheck : step.icon || null;
		const showLink = index < currentStepIndex;
		const isPublished = data.technology.status === statusEnum.PUBLISHED;
		if (isPublished || showLink) {
			return (
				<StepItem completed={index <= currentStepIndex} key={step.slug}>
					<Link
						href={`${internalPages.editTechnology.replace(
							':id',
							data?.technology?.id,
						)}/${step.slug}`}
					>
						<div>
							<StepNumber>{showIcon ? <Icon /> : index + 1}</StepNumber>
							<StepLabel>{step.label}</StepLabel>
						</div>
					</Link>
				</StepItem>
			);
		}

		return (
			<StepItem completed={index <= currentStepIndex} key={step.slug}>
				<div>
					<StepNumber>{showIcon ? <Icon /> : index + 1}</StepNumber>
					<StepLabel>{step.label}</StepLabel>
				</div>
			</StepItem>
		);
	};

	return (
		<FormWizardContainer>
			<StepsContainer>
				<WebSteps>{steps.map((step, index) => renderStep(step, index))}</WebSteps>
				<MobileSteps>
					<div>
						<StepItem completed>
							<div>
								<StepNumber>{currentStepIndex + 1}</StepNumber>
							</div>
						</StepItem>
						<li>/</li>
						<StepItem>
							<div>
								<StepNumber>{steps.length}</StepNumber>
							</div>
						</StepItem>
					</div>
					<StepLabel>{steps[currentStepIndex].label}</StepLabel>
				</MobileSteps>
			</StepsContainer>
			{steps[currentStepIndex].description && (
				<StepDescription>{steps[currentStepIndex].description}</StepDescription>
			)}

			<Form onSubmit={handleSubmit} defaultValues={defaultValues}>
				{CurrentFormStep && <CurrentFormStep data={data} />}

				{!!lastCuratorRevision && status === statusEnum.REQUESTED_CHANGES && (
					<CurationComment>
						<CommentTitle>
							<p>Comentários do curador</p>
						</CommentTitle>
						<CommentContent>
							<span>
								{stringToLocaleDate(lastCuratorRevision.created_at, {
									day: 'numeric',
									month: 'long',
									year: 'numeric',
								})}
							</span>
							<CommentText>
								<SafeHtml html={lastCuratorRevision.description} />
							</CommentText>
						</CommentContent>
					</CurationComment>
				)}

				<Actions center>
					{prevStep && (
						<Button variant="secondary" disabed={submitting} onClick={handlePrev}>
							Voltar
						</Button>
					)}
					{nextStep && (
						<Button disabled={submitting} type="submit">
							{submitting ? 'Salvando...' : 'Salvar e Continuar'}
						</Button>
					)}
					{lastStep && (
						<Button variant="success" disabled={submitting} type="submit">
							Concluir
						</Button>
					)}
				</Actions>
			</Form>
		</FormWizardContainer>
	);
}