[Article Management] Edit Rejected/Draft Articles

[nban22]

Objective

Implement functionality that allows writers to edit articles that are in the rejected or draft status.

---

Requirements

1. Create Edit Routes for Rejected/Draft Articles

   • Route for Editing Draft Articles: Create a route to fetch and render a form where the writer can edit their draft articles.
   • Route for Editing Rejected Articles: Create a similar route for rejected articles, allowing writers to edit the content and resubmit for approval.

   Example route structure in Express:

   // Route to edit draft article
   app.get('/writer/articles/drafts/edit/:id', checkAuthentication, async (req, res) => {
    const article = await Article.findById(req.params.id);
    if (article && article.status === 'draft' && article.author.toString() === req.user.id) {
      res.render('edit-article', { article });
    } else {
      res.status(403).send('Forbidden');
    }
   });
   
   // Route to edit rejected article
   app.get('/writer/articles/rejected/edit/:id', checkAuthentication, async (req, res) => {
    const article = await Article.findById(req.params.id);
    if (article && article.status === 'rejected' && article.author.toString() === req.user.id) {
      res.render('edit-article', { article });
    } else {
      res.status(403).send('Forbidden');
    }
   });

2. Create Article Edit Form

   • Implement a form that pre-populates with the current article details, allowing the writer to make changes.
     • Form Fields:
     • Title
     • Summary/Abstract
     • Content/Body
     • Category
     • Tags
     • Thumbnail Image (optional)
     • YouTube Link (optional)

   Example edit form template (EJS):

   <form action="/writer/articles/edit/<%= article._id %>" method="POST" enctype="multipart/form-data">
    <label for="title">Title</label>
    <input type="text" name="title" value="<%= article.title %>" required />
   
    <label for="summary">Summary</label>
    <textarea name="summary" required><%= article.summary %></textarea>
   
    <label for="content">Content</label>
    <textarea name="content" required><%= article.content %></textarea>
   
    <label for="category">Category</label>
    <select name="category">
      <!-- List of categories -->
    </select>
   
    <label for="tags">Tags</label>
    <input type="text" name="tags" value="<%= article.tags.join(', ') %>" />
   
    <label for="thumbnail">Thumbnail</label>
    <input type="file" name="thumbnail" />
   
    <label for="youtubeLink">YouTube Link</label>
    <input type="url" name="youtubeLink" value="<%= article.youtubeLink %>" />
   
    <button type="submit">Save Changes</button>
   </form>

3. Handle Form Submission for Editing Articles

   • Implement a route to handle form submission for updating the draft or rejected article.
   • Validate the form input and save the changes to the database.
   • Update the article's status (if needed), such as changing a draft to "re-submitted" or updating the rejected article with feedback.

   Example route to handle article updates:

   app.post('/writer/articles/edit/:id', checkAuthentication, async (req, res) => {
    const { title, summary, content, category, tags, youtubeLink } = req.body;
    const article = await Article.findById(req.params.id);
    if (!article || article.author.toString() !== req.user.id) {
      return res.status(403).send('Forbidden');
    }
   
    // Validate input
    if (!title || !summary || !content) {
      return res.status(400).send('All fields are required');
    }
   
    // Update article fields
    article.title = title;
    article.summary = summary;
    article.content = content;
    article.category = category;
    article.tags = tags.split(',').map(tag => tag.trim());
    article.youtubeLink = youtubeLink;
   
    // Handle file upload if new image is provided
    if (req.files && req.files.thumbnail) {
      const thumbnailPath = await uploadImage(req.files.thumbnail);  // Define an uploadImage function to handle file upload
      article.thumbnail = thumbnailPath;
    }
   
    // Update the article status if required (e.g., from draft to re-submitted)
    if (article.status === 'rejected') {
      article.status = 'draft';  // Reset status if the article was rejected
    }
   
    await article.save();
    res.redirect(`/writer/articles/drafts/edit/${article._id}`);
   });

4. File Upload Handling

   • Implement file upload logic to allow writers to upload new images or videos (e.g., YouTube links) during editing. For file uploads, use a library like multer in Express.
   • Implement file validation to ensure the uploaded image is of a valid type and size.

   Example file upload with multer:

   const multer = require('multer');
   const upload = multer({ dest: 'uploads/' });
   
   app.post('/writer/articles/edit/:id', upload.single('thumbnail'), async (req, res) => {
    // Handle file upload and update the article's thumbnail
   });

5. Validate and Save Changes

   • Ensure that all form data is validated before saving, especially the required fields (e.g., title, summary, content).
   • Handle any errors gracefully, such as missing fields or invalid input.

6. Update Article Status (Optional)

   • If an article has been rejected, mark the article as "re-submitted" after the writer makes changes. This step ensures the editor or admin knows that the article has been edited and is ready for re-evaluation.

   Example status change logic:

   if (article.status === 'rejected') {
    article.status = 're-submitted';  // Mark as re-submitted after editing
   }

---

Deliverables

• Edit Routes: Routes for editing draft and rejected articles.
• Edit Form: Functional form for editing articles, pre-populated with existing article data.
• Form Validation: Input validation before saving the article changes to the database.
• File Upload: Handling of image uploads and other media (e.g., YouTube links).
• Article Status Update: Logic to update the article's status after editing (e.g., marking rejected articles as "re-submitted").
• Error Handling: Graceful handling of errors during the editing process.

---

Acceptance Criteria

• Editable Articles: Writers can edit their draft and rejected articles.
• Validation: The system validates the form inputs before saving the article.
• File Upload: Writers can upload new images or video links during editing.
• Status Update: Rejected articles are marked as "re-submitted" after editing.
• No Unauthorized Access: Only the article's author can edit their drafts or rejected articles.
• UI: The UI should allow writers to easily edit and save changes to their articles.