Vue, ajax post comments #20

marky291 · May 22, 2019 · 8b4d024 · 8b4d024
1 parent 346d7bb
commit 8b4d024
Show file tree

Hide file tree

Showing 7 changed files with 295 additions and 267 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/app/ReviewComment.php b/app/ReviewComment.php
@@ -7,6 +7,13 @@
 
 class ReviewComment extends Model
 {
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array
+     */
+    protected $fillable = ['message'];
+
     /**
      * Comment belongs to a review.
      */

diff --git a/public/js/app.js b/public/js/app.js
@@ -15753,19 +15753,28 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! moment */ "./node_modules/moment/moment.js");
 /* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var vform__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vform */ "./node_modules/vform/dist/vform.common.js");
+/* harmony import */ var vform__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(vform__WEBPACK_IMPORTED_MODULE_1__);
+
 
 /* harmony default export */ __webpack_exports__["default"] = ({
   props: ['review'],
+  components: {
+    'has-error': vform__WEBPACK_IMPORTED_MODULE_1__["HasError"],
+    'alert-error': vform__WEBPACK_IMPORTED_MODULE_1__["AlertError"]
+  },
   data: function data() {
     return {
       starCount: 0,
       viewingDetails: false,
       commenting: false,
-      commentMessage: ''
+      comment: new vform__WEBPACK_IMPORTED_MODULE_1__["Form"]({
+        message: ''
+      })
     };
   },
   computed: {
-    reportButtonText: function reportButtonText() {
+    commentButtonText: function commentButtonText() {
       return this.viewingDetails ? 'Close comment' : 'Comment as server owner';
     },
     detailButtonText: function detailButtonText() {
@@ -15789,7 +15798,17 @@ __webpack_require__.r(__webpack_exports__);
       return moment__WEBPACK_IMPORTED_MODULE_0___default()(this.review.created_at).startOf('day').fromNow();
     },
     postComment: function postComment() {
-      this.commenting = true;
+      var _this = this;
+
+      this.comment.post('/review/' + this.review.id + '/comment').then(function (response) {
+        _this.$Message.success('Great! We have notified this user of your comment');
+
+        _this.review.comments.push(response.data.comment);
+
+        _this.commenting = false;
+      })["catch"](function (error) {
+        _this.$Message.error(error.message);
+      });
     },
     reportReview: function reportReview() {}
   }

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=ad69a06e7802cb0d111f",
+    "/js/app.js": "/js/app.js?id=9767b81328e97feae7af",
     "/css/app.css": "/css/app.css?id=2ca1c713699a279f42c3"
 }
diff --git a/resources/js/components/ReviewComponent.vue b/resources/js/components/ReviewComponent.vue
@@ -1,18 +1,26 @@
 <script>
 		import moment from 'moment';
+    import { Form, HasError, AlertError } from 'vform';
 
     export default {
         props: ['review'],
+        components: {
+            'has-error': HasError,
+            'alert-error': AlertError,
+        },
         data() {
             return {
                 starCount: 0,
                 viewingDetails: false,
                 commenting: false,
-								commentMessage: '',
+
+                comment: new Form({
+                    message: '',
+                })
             }
         },
 				computed: {
-            reportButtonText: function() {
+            commentButtonText: function() {
                 return this.viewingDetails ? 'Close comment' : 'Comment as server owner';
 						},
 						detailButtonText: function() {
@@ -36,7 +44,13 @@
 						    return moment(this.review.created_at).startOf('day').fromNow();
 						},
 						postComment() {
-							this.commenting = true;
+							this.comment.post('/review/'+this.review.id+'/comment').then(response => {
+							    this.$Message.success('Great! We have notified this user of your comment');
+							    this.review.comments.push(response.data.comment);
+							    this.commenting = false;
+							}).catch(error => {
+                  this.$Message.error(error.message);
+							})
 						},
 						reportReview() {
 

diff --git a/resources/views/listing/show.blade.php b/resources/views/listing/show.blade.php
@@ -180,7 +180,8 @@
                                                                     </div>
                                                                     <div v-show="commenting" class="tw-mt-3">
                                                                         <p class="tw-text-red tw-font-semibold">Comment on this review as server owner</p>
-                                                                        <at-textarea v-model="commentMessage" min-rows="5" class="tw-mt-2" autosize placeholder="Write your reply towards this review"></at-textarea>
+                                                                        <at-textarea v-model="comment.message" min-rows="5" class="tw-mt-2" autosize placeholder="Write your reply towards this review"></at-textarea>
+                                                                        <has-error :form="comment" field="message"></has-error>
                                                                         <at-button @click="postComment" type="error" class="tw-mt-2">Post Comment</at-button>
                                                                     </div>
                                                                     <div class="tw-flex tw-justify-end">

diff --git a/routes/web.php b/routes/web.php
@@ -17,6 +17,10 @@
 // authentication routes (login & logout)
 Auth::routes(['verify' => true]);
 
+Route::resource('review.comment', 'ReviewCommentController', ['middleware'=>['auth']])->only([
+    'store'
+]);
+
 // default index page.
 Route::get('/')->uses('ListingController@index')->name('index');