Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

propagation update #44

Merged
merged 2 commits into from
Sep 21, 2024
Merged

propagation update #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cecbf6a
propagation update
TanishqMehrunkarIIPSDAVV Sep 21, 2024
f87bc82
image copy paste
TanishqMehrunkarIIPSDAVV Sep 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/QuestionPaperDashboard/QuestionPaperDashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,15 +213,18 @@ const QuestionPaperDashboard = () => {
>
{hoveredItem === question._id && (
<div className="hovered-buttons">
<button onClick={() => editQuestion(question)}>
<button onClick={(e) =>
{
e.stopPropagation();
editQuestion(question)}}>
<div className="flex-class">
<CiEdit />
<div>Edit</div>
</div>
</button>
<button
id="duplicate"
onClick={() => duplicateQuestion(question)}
onClick={(e) => {e.stopPropagation();duplicateQuestion(question)}}
>
<div className="flex-class">
<HiDocumentDuplicate />
Expand All @@ -230,7 +233,7 @@ const QuestionPaperDashboard = () => {
</button>
<button
id="delete"
onClick={() => deleteQuestion(question)}
onClick={(e) => {e.stopPropagation();deleteQuestion(question)}}
>
<div className="flex-class">
<MdDelete />
Expand Down
2 changes: 1 addition & 1 deletion src/ReadyQuestionPaperDashboard/ReadyQuestionPaperDashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const ReadyQuestionPaperDashboard = () => {
>
{hoveredItem === question._id && (
<div className="hovered-buttons">
<button onClick={() => editReadyQuestion(question)}>
<button onClick={(e) => {e.stopPropagation();editReadyQuestion(question)}}>
<div className="flex-class">
<CiEdit />
<div>Edit</div>
Expand Down
234 changes: 139 additions & 95 deletions src/edit_ready_question/EditReadyQuestion.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState,useEffect } from 'react';
import React, { useState, useEffect } from 'react';
import '../question/question.css';
import { FaTimes } from 'react-icons/fa';
import { useDropzone } from 'react-dropzone';
Expand All @@ -8,7 +8,6 @@ import axios from 'axios';
import { useParams, useLocation, useNavigate } from 'react-router-dom';
import AlertModal from '../AlertModal/AlertModal'; // Import the AlertModal component


const EditReadyQuestion = () => {
document.title = "Ready Question";
const { paperId } = useParams();
Expand All @@ -21,14 +20,58 @@ const EditReadyQuestion = () => {
const [marks, setMarks] = useState(location.state.marks);
const [image, setImage] = useState(location.state.image);
const [loading, setLoading] = useState(false);
const [loadingSpinner,setLoadingSpinner] = useState(true);
const [loadingSpinner, setLoadingSpinner] = useState(true);
const [modalIsOpen, setModalIsOpen] = useState(false);
const [modalMessage, setModalMessage] = useState('');
const [isError, setIsError] = useState(false);
const navigate = useNavigate();

useEffect(()=>{setTimeout(()=>{setLoadingSpinner(false)},1000);},[]);
console.log(location.state);
useEffect(() => {
setTimeout(() => {
setLoadingSpinner(false);
}, 1000);
}, []);

// Handle pasting images in question description
const handlePaste = async (event) => {
const clipboardData = event.clipboardData;
const items = clipboardData.items;

for (const item of items) {
if (item.type.includes("image")) {
event.preventDefault(); // Prevent default paste behavior
const file = item.getAsFile();
const formData = new FormData();
formData.append("file", file);
formData.append("upload_preset", "question");

setQuestionDescription((prev) => prev + "\nUploading image...");

try {
const uploadResponse = await axios.post(
"http://localhost:5000/paper/upload",
formData,
{
headers: { "Content-Type": "multipart/form-data" },
}
);

const imageUrl = uploadResponse.data.url;

// Replace "Uploading image..." with the actual image markdown link
setQuestionDescription((prev) =>
prev.replace("Uploading image...", `![image](${imageUrl})`)
);
} catch (error) {
console.error("Image upload failed:", error.message);
setQuestionDescription((prev) =>
prev.replace("Uploading image...", "Image upload failed.")
);
}
}
}
};

const handleEditQuestion = async () => {
if (!questionheading || !questionDescription || !compilerReq || !marks) {
setModalMessage('Please fill in all the required fields.');
Expand Down Expand Up @@ -109,104 +152,105 @@ const EditReadyQuestion = () => {
onDrop,
maxSize: 10485760, // 10MB limit
});
console.log(image);

return (
<>
<Navbar />
<div className='add_question_container_main'>
{loadingSpinner ? (<></>) : (<>
<div className="add_question_container">
<h2 className="add_question_heading">Edit Ready Question</h2>

<div>
<label className="add_question_label">Question Heading:</label>
<input
type="text"
value={questionheading}
onChange={(e) => setQuestionHeading(e.target.value)}
placeholder="Enter your question heading"
required
className="add_question_input"
/>
</div>

<div>
<label className="add_question_label">Question Description:</label>
<textarea
value={questionDescription}
onChange={(e) => setQuestionDescription(e.target.value)}
placeholder="Enter question description"
required
rows="3"
className="add_question_textarea"
/>
</div>

<div className="add_question_row">
<div className="add_question_column">
<label className="add_question_label">Compiler Requirement:</label>
<select
value={compilerReq}
onChange={(e) => setCompilerReq(e.target.value)}
required
className="add_question_select"
>
<option value="" disabled>Select Compiler</option>
<option value="cpp">C++</option>
<option value="java">Java</option>
<option value="python">Python</option>
<option value="sql">SQL</option>
</select>
</div>
<div className="add_question_column">
<label className="add_question_label">Marks:</label>
<input
type="number"
value={marks}
onChange={() => setMarks(marks)}
placeholder="Enter marks"
required
className="add_question_input"
disabled
/>
</div>
</div>

<div>
<label className="add_question_label">Upload Image (optional):</label>
<div {...getRootProps({ className: 'add_question_dropbox' })}>
<input {...getInputProps()} />
{image ? (
<div className="add_question_image_preview">
<img src={image ? typeof image === 'string'
? image: URL.createObjectURL(image):
URL.createObjectURL(image)} alt="Question" className="add_question_preview_image" />
<FaTimes className="add_question_remove_image_icon" onClick={(e)=>{e.stopPropagation();handleRemoveImage()}} />
</div>
) : (
<p>
<div className='add_question_cloudicon'>
<IoCloudUploadOutline />
</div>
Drag and drop an image here, or click to select one
</p>
)}
</div>
</div>
{loadingSpinner ? (<></>) : (
<>
<div className="add_question_container">
<h2 className="add_question_heading">Edit Ready Question</h2>

<button onClick={handleEditQuestion} className="add_question_button" disabled={loading}>
{loading ? 'Editing...' : 'Edit Question'}
</button>
</div>
</>)}
<div>
<label className="add_question_label">Question Heading:</label>
<input
type="text"
value={questionheading}
onChange={(e) => setQuestionHeading(e.target.value)}
placeholder="Enter your question heading"
required
className="add_question_input"
/>
</div>

<div>
<label className="add_question_label">Question Description:</label>
<textarea
value={questionDescription}
onChange={(e) => setQuestionDescription(e.target.value)}
onPaste={handlePaste} // Capture paste event
placeholder="Enter question description"
required
rows="3"
className="add_question_textarea"
/>
</div>

<div className="add_question_row">
<div className="add_question_column">
<label className="add_question_label">Compiler Requirement:</label>
<select
value={compilerReq}
onChange={(e) => setCompilerReq(e.target.value)}
required
className="add_question_select"
>
<option value="" disabled>Select Compiler</option>
<option value="cpp">C++</option>
<option value="java">Java</option>
<option value="python">Python</option>
<option value="sql">SQL</option>
</select>
</div>
<div className="add_question_column">
<label className="add_question_label">Marks:</label>
<input
type="number"
value={marks}
onChange={() => setMarks(marks)}
placeholder="Enter marks"
required
className="add_question_input"
disabled
/>
</div>
</div>

<div>
<label className="add_question_label">Upload Image (optional):</label>
<div {...getRootProps({ className: 'add_question_dropbox' })}>
<input {...getInputProps()} />
{image ? (
<div className="add_question_image_preview">
<img src={typeof image === 'string' ? image : URL.createObjectURL(image)} alt="Question" className="add_question_preview_image" />
<FaTimes className="add_question_remove_image_icon" onClick={(e) => { e.stopPropagation(); handleRemoveImage() }} />
</div>
) : (
<p>
<div className='add_question_cloudicon'>
<IoCloudUploadOutline />
</div>
Drag and drop an image here, or click to select one
</p>
)}
</div>
</div>

<button onClick={handleEditQuestion} className="add_question_button" disabled={loading}>
{loading ? 'Editing...' : 'Edit Question'}
</button>
</div>
</>
)}
</div>

{/* Alert Modal */}
<AlertModal
isOpen={modalIsOpen}
onClose={() => setModalIsOpen(false)}
message={modalMessage}
iserror={isError}
<AlertModal
isOpen={modalIsOpen}
onClose={() => setModalIsOpen(false)}
message={modalMessage}
iserror={isError}
/>
</>
);
Expand Down
Loading