[SOLVED] database The assignment

The assignment
We will create a site where users can view a list of orders, and leave product reviews.
The site will have two pages: /default/index and /default/products .
The products page
The page at /default/products is a page where, with the help of a SQLFORM.grid, logged in users can maintain (add/edit/delete) a list of products.For each product there has to be:

Product name
Product description
Product price

(and other fields if you wish, but they are not strictly necessary).
The main page (/default/index)
This page must be developed via vue.js as a dynamic page, just like the pages we have been seeing recently in class.A template for the page is as follows:

Search bar.At the top is a search bar.If one types Rub, only products starting with Rub should be displayed.Everytime someone adds or removes a character, the list of products must be updated.Its ok to close the review details when this happens.

Product display.Products are displayed in rectangles, along with the average rating they got.You can round to the nearest star.

Reviews.If someone clicks on the Reviews button next to the stars (you can make the stars and the Review, the whole rectangle

behave like a button), then the list of reviews is expanded.When one presses on the Close button at the end of the expanded list, the list of reviews is collapsed again.

If the user is logged in, at the top of the list of reviews is a zone where the user can enter or edit his or her review.

If the user has not reviewed the product yet:

In the expanded list of reviews, the user can click on stars and enter a review.The stars are saved as soon as they are clicked.The review is saved when the user clicks on Save; upon successful save in the database, a green checkmark flashes in the Save button to provide confirmation that the review has been saved. Thus, reviews and star ratings can be saved independently.

If the user has already reviewed the product:

The behavior is similar to above, but the star rating and the input for the product review come pre-filled with the users review.The user can edit it and save it.

After the region for the users own review, is a region where the reviews by other users are displayed.As username, you can just use the users name. Finally, there is a close button that, when pressed, collapses all the reviews for a product.

If the user is not logged in, the special first review where one can enter/edit ones own review is not there.The list of reviews by users, with their star ratings, is still present.

Note that, if a user sets no star value, then all stars need to be displayed gray, and they should not be counted for the average rating (so the number of stars for a product can be None (indicating no vote), or a number from 1 to 5).

At most one product should have its reviews displayed, so that when you check the reviews for another product, the reviews of the first product should collapse.

The reviews for a product should be loaded dynamically, only when someone clicks on the Reviews button for that product.Caching them in the browser is extra credit.

Implementation
Start from the clean vue branch of the code.First define database tables for products, for stars, and for reviews; since you are going to write stars and reviews separately, its easier to use separate tables for stars and reviews, so you dont have to worry about timing of writes.Please ensure that the tables have appropriate names; if you call posts the table for products, points will be taken off.

Once you have that, develop the grid page so you can insert products for testing.

After that, start work on the main page. First get it to display the list of products, with their average star rating (you can compute an arbitrary average for testing; just pick a random number on the server if you dont have reviews yet).

Then, work at making the list of reviews expand/collapse. Create for each product a flag called _details, which is true for only one product at a time, and use it in v-if= to decide which view of a product to show.

Finally, work at populating the list of reviews, and at implementing the behavior for the user to be able to save a review.

At the end come the finishing touches, like making sure the average is the real average, the checkmark for the Save button, etc.

Finally, test the behavior, using two users: one logged in normally, the other logged in via an incognito window.