Add comment section to inventory

modulr · Mar 14, 2018 · a990290 · a990290
1 parent da5861a
commit a990290
Show file tree

Hide file tree

Showing 13 changed files with 197 additions and 49 deletions.
diff --git a/app/Http/Controllers/Autoparts/AutopartController.php b/app/Http/Controllers/Autoparts/AutopartController.php
@@ -73,7 +73,7 @@ public function filter (Request $request)
 
     public function show ($id)
     {
-        return Autopart::with(['make', 'model', 'years', 'origin', 'status', 'creator', 'comments', 'images' => function ($query) {
+        return Autopart::with(['make', 'model', 'years', 'origin', 'status', 'creator', 'comments', 'comments.creator', 'images' => function ($query) {
                         $query->orderBy('order', 'asc');
                     }])->find($id);
     }

diff --git a/app/Http/Controllers/Autoparts/CommentController.php b/app/Http/Controllers/Autoparts/CommentController.php
@@ -8,14 +8,19 @@
 
 class CommentController extends Controller
 {
+    public function __construct()
+    {
+        $this->relationships = ['creator', 'editor'];
+    }
+
     public function index()
     {
-        return Comment::all();
+        return Comment::with($this->relationships)->get();
     }
 
     public function show($id)
     {
-        return Comment::find($id);
+        return Comment::with($this->relationships)->find($id);
     }
 
     public function store(Request $request)
@@ -28,7 +33,7 @@ public function store(Request $request)
         $comment = Comment::create([
             'comment' => $request->comment,
             'autopart_id' => $request->autopart_id
-        ]);
+        ])->load($this->relationships);
 
         return $comment;
     }

diff --git a/app/Models/Autoparts/Comment.php b/app/Models/Autoparts/Comment.php
@@ -16,7 +16,7 @@ class Comment extends Model
     public $table = 'comments_autoparts';
 
     protected $fillable = [
-        'name', 'autopart_id'
+        'comment', 'autopart_id'
     ];
 
     public function autopart()

diff --git a/config/app.php b/config/app.php
@@ -64,7 +64,7 @@
     |
     */
 
-    'timezone' => 'UTC',
+    'timezone' => 'America/Monterrey',
 
     /*
     |--------------------------------------------------------------------------

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "laravel-echo": "^1.3.0",
     "moment": "^2.18.1",
     "pusher-js": "^4.1.0",
-    "sweetalert": "^1.1.3",
+    "sweetalert": "^2.1.0",
     "v-money": "^0.8.1",
     "vue-awesome-swiper": "^2.6.0",
     "vue-clip": "^1.0.0",

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -64,6 +64,7 @@ Vue.component('autoparts-sales-filters', require('./components/autoparts/sales/F
 Vue.component('autoparts-sales-search-qr', require('./components/autoparts/sales/SearchQr.vue'));
 Vue.component('autoparts-inventory', require('./components/autoparts/Inventory.vue'));
 Vue.component('autoparts-lists', require('./components/autoparts/Lists.vue'));
+Vue.component('comments', require('./components/autoparts/Comments.vue'));
 
 const app = new Vue({
     el: '#app'

diff --git a/resources/assets/js/components/autoparts/Comments.vue b/resources/assets/js/components/autoparts/Comments.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="comments">
+    <div class="card" v-for="(item, index) in filteredComments" :key="item.id">
+      <div class="comment-top">
+          <div class="comment-image">
+            <span class="image">
+              <img class="avatar-xs" :src="item.creator.avatar_url" alt="Generic placeholder image">
+            </span>
+          </div>
+          <div class="comment-author">
+            <h5 class="comment-heading">{{item.creator.name}}</h5>
+            <span class="comment-date"><small>{{item.created_at | moment('from')}}</small></span>
+          </div>
+      </div>
+      <div class="comment-body">
+          <span class="lead">
+              {{item.comment}}
+          </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import EventBus from './event-bus'
+export default {
+  props: ['autopart'],
+  computed: {
+    filteredComments () {
+      var filteredComments = this.autopart.data.comments
+      return _.reverse(filteredComments)
+    }
+  },
+  mounted () {
+    EventBus.$on('add-comment', (comment) => {
+      this.storeComment(comment)
+    })
+  },
+  data () {
+    return {
+      form: {
+        comment: null,
+        autopart_id: null,
+      }
+    }
+  },
+  methods: {
+    storeComment (comment) {
+      this.form.comment = comment
+      this.form.autopart_id = this.autopart.data.id
+      axios.post('/api/autoparts/comments/store', this.form)
+      .then((response) => {
+          this.$parent.autopart.data.comments.push(response.data);
+          this.form = {}
+      })
+      .catch((err) => {
+          console.log(err)
+      })
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/components/autoparts/Inventory.vue b/resources/assets/js/components/autoparts/Inventory.vue
@@ -232,17 +232,10 @@
                                 </div>
                             </div>
                             <div class="col-xs-12">
-                                <fieldset>
+                                <fieldset class="separator">
                                     <legend>Comments</legend>
                                 </fieldset>
-                                <div class="media">
-                                    <pre>{{autopart.comments[0]}}</pre>
-                                    <img class="mr-3" src="" alt="Generic placeholder image">
-                                    <div class="media-body">
-                                        <h5 class="mt-0">Media heading</h5>
-                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-                                    </div>
-                                </div>
+                                <comments :autopart="autopart"></comments>
                             </div>
                             <div class="col-xs-12" v-if="autopart.action == 'edit'">
                                 <hr>
@@ -368,6 +361,7 @@
     import { QrcodeReader } from 'vue-qrcode-reader'
     import money from 'v-money'
     import Vue2Filters from 'vue2-filters'
+    import EventBus from './event-bus'
 
     export default {
         data() {
@@ -437,6 +431,10 @@
                     action: 'new',
                     error: {}
                 },
+                form: {
+                    comment: null,
+                    autopart_id: null
+                },
             }
         },
         components: {
@@ -568,30 +566,29 @@
             },
             updateAutopart (e) {
                 var btn = $(e.target).button('loading')
-                this.autopart.data.make_id = this.autopart.data.make ? this.autopart.data.make.id : null
-                this.autopart.data.model_id = this.autopart.data.model ? this.autopart.data.model.id : null
-
-                axios.put('/api/autoparts/update/'+this.autopart.data.id, this.autopart.data)
-                .then(response => {
-                    this.autoparts.data[this.autopart.data.index] = response.data
-                    this.autopart = {
-                        data: {
-                            make: {},
-                            model: {},
-                            years: [],
-                            images: [],
-                            creator: {}
+                if (this.autopart.data.status_id === 4) {
+                    swal({
+                        title: "Wait!",
+                        text: 'First, you need to leave a comment:',
+                        content: 'input',
+                        buttons: {
+                            cancel: true,
+                            confirm: true,
                         },
-                        action: 'new',
-                        error: {}
-                    };
-                    var btn = $(e.target).button('reset')
-                    $('#modalAutopart').modal('hide')
-                })
-                .catch(error => {
-                    this.autopart.error = error.response.data;
-                    var btn = $(e.target).button('reset')
-                });
+                        closeModal: true
+                    }).then((val) => {
+                        if (!val) {
+                            var btn = $(e.target).button('reset')
+                            return null
+                        }
+                        EventBus.$emit('add-comment', val)
+                        return true
+                    }).then((val) => {
+                        if (val) return this.updateAutopartProcess()
+                    })
+                } else {
+                    this.updateAutopartProcess()
+                }
             },
             destroyAutopart () {
                 var self = this;
@@ -827,6 +824,30 @@
                 this.getAutoparts()
                 var btn = $(e.target).button('reset')
                 $('#modalFilters').modal('hide')
+            },
+            updateAutopartProcess () {
+                this.autopart.data.make_id = this.autopart.data.make ? this.autopart.data.make.id : null
+                this.autopart.data.model_id = this.autopart.data.model ? this.autopart.data.model.id : null
+
+                axios.put('/api/autoparts/update/'+this.autopart.data.id, this.autopart.data)
+                .then(response => {
+                    this.autoparts.data[this.autopart.data.index] = response.data
+                    this.autopart = {
+                        data: {
+                            make: {},
+                            model: {},
+                            years: [],
+                            images: [],
+                            creator: {}
+                        },
+                        action: 'new',
+                        error: {}
+                    };
+                    $('#modalAutopart').modal('hide')
+                })
+                .catch(error => {
+                    this.autopart.error = error.response.data;
+                });
             }
         }
     }

diff --git a/resources/assets/js/components/autoparts/event-bus.js b/resources/assets/js/components/autoparts/event-bus.js
@@ -0,0 +1,3 @@
+import Vue from "vue";
+const EventBus = new Vue();
+export default EventBus;
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -8,9 +8,6 @@
 // Material+Icons
 @import "node_modules/bootstrap-material-design-icons/scss/material-icons";
 
-// sweetalert
-@import "node_modules/sweetalert/dev/sweetalert";
-
 // swiper
 @import "node_modules/swiper/dist/css/swiper";
 
@@ -45,6 +42,7 @@
 // Components
 @import 'components/aside';
 @import 'components/actionbar';
+@import 'components/comments';
 @import 'components/filters';
 @import 'components/header';
 @import 'components/init-message';

diff --git a/resources/assets/sass/components/_comments.scss b/resources/assets/sass/components/_comments.scss
@@ -0,0 +1,44 @@
+.comments {
+  height: 300px;
+  overflow: auto;
+  .card {
+    margin-bottom: 10px;
+    border-bottom: 1px solid rgba(0,0,0,.05);
+    padding: 5px 0px;
+    .comment-top {
+      margin-bottom: 5px;
+      .comment-image {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0px 5px;
+        .image {
+          vertical-align: bottom;
+        }
+      }
+      .image,
+      .comment-author {
+        display: inline-block;
+      }
+      .comment-author {
+        .comment-heading {
+          font-weight: bold;
+          margin: 0 !important;
+        }
+        .comment-date {
+          opacity: .7;
+        }
+      }
+    }
+    .comment-body {
+      margin-left: 44px;
+    }
+    .comment-bottom {
+      .comment-input {
+        width: 80%;
+      }
+      button {
+        width: 20%;
+      }
+    }
+  }
+}
diff --git a/routes/web.php b/routes/web.php
@@ -39,7 +39,7 @@
     Route::group(['namespace' => 'Autoparts'], function() {
         Route::group(['prefix' => 'autoparts'], function() {
             Route::get('/' , function () {
-                return view('autoparts.autoparts');
+                return view('autoparts.inventory');
             })->middleware('permission:read-autoparts');
             Route::get('/config' , function () {
                 return view('autoparts.config');
@@ -82,9 +82,9 @@
             Route::group(['prefix' => 'comments'], function() {
                 Route::get('/all', 'CommentController@index');
                 Route::get('/show/{id}', 'CommentController@show');
-                Route::get('/store', 'CommentController@store');
-                Route::get('/update/{id}', 'CommentController@update');
-                Route::get('/destroy/{id}', 'CommentController@destroy');
+                Route::post('/store', 'CommentController@store');
+                Route::put('/update/{id}', 'CommentController@update');
+                Route::delete('/destroy/{id}', 'CommentController@destroy');
             });
         });
     });