add QRCode to EditQuestionPage

This commit is contained in:
Majd_dk 2024-11-19 16:55:19 +03:00
parent 7b966d93ed
commit 2d3613d1e3
2 changed files with 19 additions and 5 deletions

View File

@ -1,12 +1,10 @@
import React from "react";
import QRCode from "react-qr-code";
const QRCodeGenerator = ({ url, serial }: any) => {
const qrValue = `${url}/${serial}`;
console.log(qrValue);
const QRCodeGenerator = ({url}:any) => {
return (
<div style={{ display: "flex", justifyContent: "center" }}>
<QRCode value={qrValue} size={230} type="link" />
<div style={{display:'flex',justifyContent:'center'}} >
<QRCode value={url} size={230} type='link' />
</div>
);
};

View File

@ -8,6 +8,10 @@ import { CheckboxProps } from "antd/lib";
import { LocalStorageEnum } from "../../../../../enums/LocalStorageEnum";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
import ModelForm from "../../Model/ModelForm";
import QrCodeModels from "../../../../../Layout/Dashboard/QrCodeModels";
import { ModalEnum } from "../../../../../enums/Model";
import { BsQrCode } from "react-icons/bs";
import { useModalState } from "../../../../../zustand/Modal";
const FormContainer = ({
objectToEdit,
@ -56,6 +60,12 @@ const FormContainer = ({
e.target.checked ? "true" : "false",
);
};
const { setIsOpen } = useModalState((state) => state);
const handleClickQr = () => {
setObjectToEdit(objectToEdit);
setIsOpen(ModalEnum?.QUESTION_QR);
};
const contentSetting = (
<div>
@ -71,6 +81,7 @@ const FormContainer = ({
return (
<div className="QuestionPractical">
<header>
<MdOutlineArrowForwardIos onClick={handleNavigateToPage} />{" "}
{t("header.edit_question")}
@ -93,8 +104,13 @@ const FormContainer = ({
{t("practical.edit")} {t("models.exercise")}{" "}
</div>
<div className="SettingEdit">
{objectToEdit &&(<>
<QrCodeModels ModelEnum={ModalEnum?.QUESTION_QR} />
<BsQrCode onClick={handleClickQr} size={22} style={{ color: "#A098AE" }} />
</>)}
<Popover trigger="click" content={contentSetting}>
<SettingFilled />
</Popover>
<div>{t("header.exercise")}</div>
</div>