client/package-lock.json

@@ -8572,6 +8572,11 @@
         }
       }
     },
+    "vue-star-rating": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/vue-star-rating/-/vue-star-rating-1.6.1.tgz",
+      "integrity": "sha512-JSmVx16rcxyw4Ma6YQ5DnIExyjF4IFf/ypxh3zfmtFZzE/hjswDT0fLn1vF4ERxDbAp0nHA3u51BYFbA8gyYyQ=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

client/package.json

@@ -16,7 +16,8 @@
     "@nuxtjs/pwa": "^3.0.0-0",
     "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0",
-    "nuxt": "^2.0.0"
+    "nuxt": "^2.0.0",
+    "vue-star-rating": "^1.6.1"
   },
   "devDependencies": {}
 }

client/pages/reviews/_id.vue

@@ -0,0 +1,166 @@
+<template>
+  <!--MAIN-->
+  <main>
+    <!--REVIEW ADDRESS-->
+    <div class="reviewPage mt-3">
+      <div class="container-fluid c-section">
+        <div class="row">
+          <div class="col-sm-2"></div>
+          <div class="col-sm-8">
+            <div class="a-spacing-top-medium">
+              <h1 class="a-spacing-base">
+                <b>Create Review</b>
+              </h1>
+              <div class="row">
+                <!-- Product Photo -->
+                <div class="col-md-2 col-sm-3 col-3">
+                  <img :src="product.photo" style="width: 80px" />
+                </div>
+                <!-- Product Title -->
+                <div class="col-md-10 col-sm-9 col-9 m-auto">
+                  <h4>
+                    <b>{{ product.title }}</b>
+                  </h4>
+                </div>
+              </div>
+              <div class="a-spacing-top-medium"></div>
+              <hr />
+              <h2 class="a-spacing-base">Overall Rating</h2>
+              <div class="a-row">
+                <!-- Rating -->
+                <no-ssr>
+                  <StartRating v-model="rating"></StartRating>
+                </no-ssr>
+              </div>
+              <div class="a-row a-spacing-top-large">
+                <h2>Add photo or video</h2>
+                <p
+                  style="font-size: 14px; font-weight: 700;"
+                >Shoppers find images and videos more helpful than text alone.</p>
+              </div>
+              <div class="a-row a-spacing-top-medium">
+                <!-- Choose a Photo -->
+                <label class="choosefile-button">
+                  <i class="fal fa-plus"></i>
+                  <input @change="onFileSelected" type="file" />
+                </label>
+                <p>{{ fileName }}</p>
+              </div>
+              <div class="a-spacing-top-large"></div>
+              <hr />
+              <!-- Headline -->
+              <div class="headline a-spacing-large">
+                <h2 class="a-spacing-base">Add a headline</h2>
+                <input
+                  v-model="headline"
+                  type="text"
+                  class="a-input-text"
+                  style="width: 70%;"
+                  placeholder="What's most important to know?"
+                />
+              </div>
+              <!-- Body -->
+              <div class="a-spacing-base">
+                <h2 class="a-spacing-base">Write your review</h2>
+                <textarea
+                  v-model="body"
+                  placeholder="What do you like or dislike? What did you see this product for?"
+                  style="height:6em; width: 100%;"
+                ></textarea>
+              </div>
+            </div>
+            <br />
+            <br />
+            <hr />
+            <div class="a-spacing-top-medium">
+              <p
+                style="font-size: 14px; font-weight: 700;"
+              >This is how you'll appear to other customers:</p>
+              <div class="media a-spacing-top-large">
+                <div class="media-left">
+                  <img src="/img/avatar.png" class="img-fluid" style="width: 50px;" />
+                </div>
+                <div class="media-body pl-3 pt-2">
+                  <input
+                    :value="$auth.$state.user.name"
+                    type="text"
+                    class="a-input-text"
+                    style="width: 100%;" />
+                </div>
+              </div>
+            </div>
+            <div class="a-row a-spacing-top-medium">
+              <span class="a-color-tertiary">Don't worry, you can always change this on your profile</span>
+            </div>
+            <div class="a-row text-right a-spacing-top-large">
+              <span class="a-button-register">
+                <span class="a-button-inner">
+                  <span @click="onAddReview" class="a-button-text">Submit</span>
+                </span>
+              </span>
+            </div>
+          </div>
+          <div class="col-sm-2"></div>
+        </div>
+        <div class="a-spacing-large pb-5"></div>
+        <hr />
+      </div>
+    </div>
+    <!--/REVIEW ADDRESS-->
+  </main>
+  <!--/MAIN-->
+</template>
+
+<script>
+import StartRating from 'vue-star-rating'
+
+export default {
+  components: {
+    StartRating
+  },
+  async asyncData ({ $axios, params }) {
+    try {
+      let response =  await $axios.$get(`/api/products/${params.id}`)
+
+      return {
+        product: response.product
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  },
+  data () {
+    return {
+      rating: 0,
+      body: '',
+      headline: '',
+      selectedFile: null,
+      fileName: null
+    }
+  },
+  methods: {
+    onFileSelected () {
+      this.selectedFile = event.target.files[0]
+      this.fileName = event.target.files[0].name
+    },
+    async onAddReview () {
+      try {
+        let data = new FormData()
+        data.append('headline', this.headline)
+        data.append('body', this.body)
+        data.append('rating', this.rating)
+        data.append('photo', this.selectedFile, this.selectedFile.name)
+
+        let response = await this.$axios.$post(`/api/reviews/${this.$route.params.id}`, data)
+
+        if (response.success) {
+          this.$router.push(`/products/${this.$route.params.id}`)
+        }
+
+      } catch (err) {
+
+      }
+    }
+  }
+}
+</script>

server/models/product.js

@@ -9,7 +9,7 @@ const ProductSchema = new Schema({
   photo: String,
   price: Number,
   stockQuantity: Number,
-  rating: [Number]
+  rating: [{ type:Schema.Types.ObjectId, ref: 'Review' }]
 })
 
 module.exports = mongoose.model('Product', ProductSchema)

server/models/review.js

@@ -0,0 +1,13 @@
+const mongoose = require('mongoose')
+const Schema = mongoose.Schema
+
+const ReviewSchema = new Schema({
+  headline: String,
+  body: String,
+  rating: Number,
+  photo: String,
+  productID: { type:Schema.Types.ObjectId, ref: 'Product' },
+  user: { type:Schema.Types.ObjectId, ref: 'User' },
+})
+
+module.exports = mongoose.model('Review', ReviewSchema)

server/routes/review.js

@@ -0,0 +1,56 @@
+const router = require('express').Router()
+const Review = require('../models/review')
+const Product = require('../models/product')
+const virifyToken = require('../middlewares/verify-token')
+const upload = require('../middlewares/upload-photo')
+
+router.post('/reviews/:productID', [virifyToken, upload.single('photo')], async (req, res) => {
+  try {
+    const review = new Review()
+    review.headline =  req.body.headline
+    review.body =  req.body.body
+    review.rating =  req.body.rating
+    review.photo =  req.file.location
+    review.productID =  req.params.productID
+    review.user =  req.decoded._id
+
+    await Product.update({ $push: review._id })
+
+    const saveReviews = await review.save()
+
+    if (saveReviews) {
+      res.json({
+        success: true,
+        message: 'Successfully Added Review'
+      })
+    }
+  } catch (err) {
+    res.status(500).json({
+      success: false,
+      message: err.message
+    })
+  }
+})
+
+router.get('/reviews/:productID', async(req, res) => {
+  try {
+    const productReviews = await Review.find({
+      productID: req.params.productID
+    })
+      .populate('user')
+      .exec()
+    
+    res.json({
+      success: true,
+      message: productReviews
+    })
+  } catch (err) {
+    res.status(500).json({
+      success: false,
+      message: err.message
+    })
+  }
+
+})
+
+module.exports = router

server/server.js

@@ -29,12 +29,15 @@ const productRouters = require('./routes/products')
 const categoryRouters = require('./routes/category')
 const ownerRouters = require('./routes/owner')
 const userRouters = require('./routes/auth')
+const reviewRouters = require('./routes/review')
+
 
 
 app.use('/api', productRouters)
 app.use('/api', categoryRouters)
 app.use('/api', ownerRouters)
 app.use('/api', userRouters)
+app.use('/api', reviewRouters)
 
 app.listen(3000, (err) => {
   if (err) {