버그 수정 - 몽고 가상 컬럼 추가

client/components/ReviewSection.vue

@@ -6,7 +6,7 @@
         <div class="col-lg-4 col-md-5 col-sm-12">
           <!-- Total Customer reviews -->
           <a href="#" class="a-color-base">
-            <h2>{{ product.rating.length }} customer reviews</h2>
+            <h2>{{ product.reviews.length }} customer reviews</h2>
           </a>
           <div class="cr-widget-ACR">
             <i class="fas fa-star"></i>
@@ -255,7 +255,7 @@
             <div class="card-padding">
               <div class="review-header">
                 <h3>
-                  <span class="a-size-base">Showing 1-8 of {{ product.rating.length }} reviews</span>
+                  <span class="a-size-base">Showing 1-8 of {{ product.reviews.length }} reviews</span>
                 </h3>
               </div>
               <div class="review-sort-type">

client/pages/index.vue

@@ -31,14 +31,14 @@
                       <div class="col-sm-9">
                         <div class="a-row a-spacing-small">
                           <!-- Title and date -->
-                          <a href="" class="a-link-normal">
+                          <nuxt-link :to="`/products/${product._id}`" class="a-link-normal">
                             <h2 class="a-size-medium">
                               {{ product.title }}
                               <span class="a-letter-space"></span>
                               <span class="a-letter-space"></span>
                               <span class="a-size-small a-color-secondary">Sep 3, 2019</span>
                             </h2>
-                          </a>
+                          </nuxt-link>
                         </div>
 
                         <!--Author name -->
@@ -93,7 +93,18 @@
                             <div class="col-sm-5">
                               <div class="a-row a-spacing-mini">
                                 <!-- star rating -->
-
+                                <no-ssr>
+                                  <star-rating
+                                    :rating="product.averageRating"
+                                    :show-rating="false"
+                                    :glow="1"
+                                    :border-width="1"
+                                    :rounded-corners="true"
+                                    :read-only="true"
+                                    :star-size="18"
+                                    :star-points="[23,2,14,17,0,19,10,34,7,50,23,43,38,50,36,34,46,19,31,17]"
+                                  ></star-rating>
+                                </no-ssr>
                               </div>
                             </div>
                           </div>
@@ -114,9 +125,11 @@
 </template>
 
 <script>
+import StarRating from 'vue-star-rating'
 import FeatureProduct from '~/components/FeatureProduct'
 export default {
   components: {
+    StarRating,
     FeatureProduct
   },
 

client/pages/products/_id.vue

@@ -92,7 +92,20 @@
                   ></i>
                 </a> (Author)
               </div>
-              <div class="reviewGroup"></div>
+              <div class="reviewGroup">
+                <no-ssr>
+                  <star-rating
+                    :rating="product.averageRating"
+                    :show-rating="false"
+                    :glow="1"
+                    :border-width="1"
+                    :rounded-corners="true"
+                    :read-only="true"
+                    :star-size="18"
+                    :star-points="[23,2,14,17,0,19,10,34,7,50,23,43,38,50,36,34,46,19,31,17]"
+                  ></star-rating>
+                </no-ssr>
+              </div>
               <hr style="margin-top: 10px;" />
               <!-- A tags Dummy Data -->
               <div class="mediaMatrix">
@@ -352,10 +365,12 @@
 
 
 <script>
+import StarRating from 'vue-star-rating'
 import ReviewSection from '~/components/ReviewSection'
 
 export default {
   components: {
+    StarRating,
     ReviewSection
   },
   async asyncData({ $axios, params }) {

client/pages/reviews/_id.vue

@@ -112,11 +112,11 @@
 </template>
 
 <script>
-import StartRating from 'vue-star-rating'
+import StarRating from 'vue-star-rating'
 
 export default {
   components: {
-    StartRating
+    StarRating
   },
   async asyncData ({ $axios, params }) {
     try {

server/models/product.js

@@ -9,7 +9,23 @@ const ProductSchema = new Schema({
   photo: String,
   price: Number,
   stockQuantity: Number,
-  rating: [{ type:Schema.Types.ObjectId, ref: 'Review' }]
+  reviews: [{ type:Schema.Types.ObjectId, ref: 'Review' }]
+}, {
+  toObject: { virtuals: true },
+  toJSON: { virtuals: true }
+})
+
+ProductSchema.virtual('averageRating').get(function () {
+  if (this.reviews.length > 0) {
+    let sum = this.reviews.reduce((total, review) => {
+      console.log('review', review)
+      return total + review.rating
+    }, 0)
+    
+    return sum / this.reviews.length
+  }
+
+  return 0
 })
 
 module.exports = mongoose.model('Product', ProductSchema)

server/routes/products.js

@@ -29,7 +29,10 @@ router.post('/products', upload.single('photo'), async (req, res)=> {
 
 router.get('/products', async (req, res) => {
   try {
-    let products = await Product.find().populate('owner category').exec()
+    let products = await Product.find()
+      .populate('owner category')
+      .populate('reviews', 'rating')
+      .exec()
     res.json({
       success: true,
       products
@@ -44,7 +47,10 @@ router.get('/products', async (req, res) => {
 
 router.get('/products/:id', async (req, res) => {
   try {
-    let product = await Product.findOne( { _id: req.params.id }).populate('owner category').exec()
+    let product = await Product.findOne( { _id: req.params.id })
+      .populate('owner category')
+      .populate('reviews', 'rating')
+      .exec()
     res.json({
       success: true,
       product

server/routes/review.js

@@ -14,7 +14,7 @@ router.post('/reviews/:productID', [virifyToken, upload.single('photo')], async
     review.productID =  req.params.productID
     review.user =  req.decoded._id
 
-    await Product.update({ $push: { rating: review._id } })
+    await Product.update({ $push: { reviews: review._id } })
 
     const saveReviews = await review.save()