Homework 4

Due: Tuesday November 20, 2018, 11pm

Submission URL: https://www.crowdgrader.org/crowdgrader/venues/view_venue/4087

Starting Code

This homework builds on homework 3. You can either use the same starting code, or you can use your work done for homework 3; the latter is preferable and will give you some extra credit.

The Assignment

In this homework, you will implement the means for editing blog posts, and for adding and editing replies to posts.

Editing blog posts

If you are the author of a blog post, you should see a button with a fa fa-pencil-square-o icon that enables you to edit the blog post. The editing has to happen in place, that is, the (read-only) text of the blog post shall be replaced by a textarea where you can edit it. When you click on "submit" (or "done"), the changes should be sent to the server, which will update the database, and the textarea is replaced with read-only text.

You can achieve the above by having something like:

<div v-if="!post.editing">

<div>${post.post.content}</div>

</div>

<div v-if="post.editing">

<textarea v-model="post.post_content"></textarea>

</div>

The above is just a sketch, but you can build on it.

Visualizing replies

To save space (and database bandwidth), we do not load nor display all replies to a post. Every post should have a button below it that says something like:

[Reply / Show Replies]

If the user clicks on that button, then below the post you show a div where there are any current replies. You can use the v-if mechanism above to control the visibility of the div, but the replies must be fetched dynamically via AJAX when the user clicks on the button, rather than loaded alongside the post list.

At the top of the list of replies is a button [Hide Replies] that can be used to hide the replies.

Once the list of replies is shown:

At the top of the list of replies there should be a button [Add Reply], which works much in the same way as the [Add Post] button of Homework 3. When you click it, there should be a textarea, where you can write your reply, and a [Submit] button to submit it; once you submit, the reply is sent to the server via AJAX and added to the replies, and the textarea disappears, and the [Add Reply] button re-appears.

In the list of replies, people should be able to edit their own replies in-place, using a mechanism that is essentially the analogous, for replies, of what you built for blog posts.

Submission Procedure

Submit your solution to this CrowdGrader assignment: https://www.crowdgrader.org/crowdgrader/venues/view_venue/4087