新增 增加comment

resources/js/src/@core/auth/jwt/jwtDefaultConfig.js

@@ -5,6 +5,8 @@ export default {
   refreshEndpoint: '/jwt/refresh-token',
   logoutEndpoint: '/api/logout',
   getDatasetEndpoint: '/api/get_dataset',
+  postCommentEndpoint: '/api/post_comment',
+  deleteCommentEndpoint: '/api/delete_comment',
 
   // This will be prefixed in authorization header with token
   // e.g. Authorization: Bearer <token>

resources/js/src/@core/auth/jwt/jwtService.js

@@ -116,4 +116,12 @@ export default class JwtService {
   getDataset(...args) {
     return this.axiosIns.post(this.jwtConfig.getDatasetEndpoint, ...args)
   }
+
+  postComment(...args) {
+    return this.axiosIns.post(this.jwtConfig.postCommentEndpoint, ...args)
+  }
+
+  deleteComment(...args) {
+    return this.axiosIns.post(this.jwtConfig.deleteCommentEndpoint, ...args)
+  }
 }

resources/js/src/views/blog/BlogDetail.vue

@@ -126,24 +126,9 @@
           <b-card>
             <b-form>
               <b-row>
-                <b-col sm="6">
-                  <b-form-group class="mb-2">
-                    <b-form-input name="name" placeholder="Name" />
-                  </b-form-group>
-                </b-col>
-                <b-col sm="6">
-                  <b-form-group class="mb-2">
-                    <b-form-input name="email" type="email" placeholder="Email" />
-                  </b-form-group>
-                </b-col>
-                <b-col sm="6">
-                  <b-form-group class="mb-2">
-                    <b-form-input name="website" placeholder="Website" />
-                  </b-form-group>
-                </b-col>
                 <b-col cols="12">
                   <b-form-group class="mb-2">
-                    <b-form-textarea name="textarea" rows="4" placeholder="Website" />
+                    <b-form-textarea id="comment-text" name="textarea" rows="4" placeholder="請輸入內容" />
                   </b-form-group>
                 </b-col>
                 <b-col cols="12">
@@ -152,7 +137,7 @@
                   </b-form-checkbox>
                 </b-col>
                 <b-col cols="12">
-                  <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary">
+                  <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary" @click="postComment">
                     Post Comment
                   </b-button>
                 </b-col>
@@ -184,7 +169,7 @@
         <h6 class="section-label mb-75">
           Recent Posts
         </h6>
-        <b-media v-for="(recentpost, index) in blogSidebar.recentPosts" :key="recentpost.img" no-body
+        <b-media v-for="(recentpost, index) in blogSidebar.recentPosts" :key="index" no-body
           :class="index ? 'mt-2' : ''">
           <b-media-aside class="mr-2">
             <b-link>
@@ -257,6 +242,10 @@ import {
 import Ripple from 'vue-ripple-directive'
 import { kFormatter } from '@core/utils/filter'
 import ContentWithSidebar from '@core/layouts/components/content-with-sidebar/ContentWithSidebar.vue'
+import useJwt from '@/auth/jwt/useJwt'
+import { format } from 'date-fns'
+import { zhTW } from 'date-fns/locale'
+import { getUserData } from '@/auth/utils'
 
 export default {
   components: {
@@ -288,6 +277,7 @@ export default {
   },
   data() {
     return {
+      blogId: this.$route.params.id,
       search_query: '',
       commentCheckmark: '',
       blogDetail: [],
@@ -296,24 +286,83 @@ export default {
     }
   },
   created() {
+    this.blogDetail.blog = {};
+    this.blogDetail.comments = [];
+    this.blogSidebar.recentPosts = [];
+
+    useJwt.getDataset({
+      sql: `SELECT title, content, tags, users.id AS userId, users.name AS userFullName, blogs.created_at AS createdTime, bookmarked
+      FROM [laravel_kevin].[dbo].[blogs]
+      RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]
+      WHERE blogs.id=` + this.blogId
+    })
+      .then(res => {
+        this.blogDetail.blog = res.data[0]
+        this.blogDetail.blog.createdTime = format(new Date(this.blogDetail.blog.createdTime), 'yyyy-MM-dd hh:mm', { locale: zhTW })
+        this.blogDetail.blog.img = require('@/assets/images/banner/banner-27.jpg')
+        this.blogDetail.blog.tags = JSON.parse(res.data[0].tags)
+        this.blogDetail.blog.avatar = require('@/assets/images/avatars/' + res.data[0].userId + '-small.png')
+        this.blogDetail.blog.comment = 2
+      })
+
+    useJwt.getDataset({
+      sql: `SELECT comment AS commentText, comments.created_at AS commentedAt, users.id AS userId, users.name AS userFullName
+      FROM [laravel_kevin].[dbo].[comments]
+      RIGHT JOIN [dbo].[users] ON [comments].[writer] = [users].[id]
+      WHERE [blogId]=` + this.blogId
+    })
+      .then(res => {
+        var temp;
+        res.data.forEach(element => {
+          temp = element
+          temp.commentedAt = format(new Date(temp.commentedAt), 'yyyy-MM-dd hh:mm', { locale: zhTW })
+          temp.avatar = require('@/assets/images/avatars/' + temp.userId + '-small.png')
+
+          this.blogDetail.comments.push(temp)
+        });
+      })
+
     useJwt.getDataset({
-      sql: `SELECT blogs.id, title, content AS excerpt, tags, users.id AS userId, users.name AS userFullName, blogs.created_at AS blogPosted
+      sql: `SELECT blogs.id, title, blogs.created_at AS blogPosted
       FROM [laravel_kevin].[dbo].[blogs]
       RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]` })
       .then(res => {
         var temp;
         res.data.forEach(element => {
           temp = element
+          temp.blogPosted = format(new Date(temp.blogPosted), 'yyyy-MM-dd hh:mm', { locale: zhTW })
           temp.img = require('@/assets/images/banner/banner-27.jpg')
-          temp.tags = JSON.parse(temp.tags)
-          temp.avatar = require('@/assets/images/avatars/' + temp.userId + '-small.png')
-          temp.comment = 2
 
-          this.blogList.push(temp)
-          this.blogSidebar.recentPosts.push({id: temp.id, img: temp.img, title: temp.title, createdTime: temp.blogPosted})
+          this.blogSidebar.recentPosts.push({ id: temp.id, img: temp.img, title: temp.title, createdTime: temp.blogPosted })
         });
       })
-    
+
+    this.blogSidebar.categories = [
+      { category: 'Fashion', icon: 'WatchIcon' },
+      { category: 'Food', icon: 'ShoppingCartIcon' },
+      { category: 'Gaming', icon: 'CommandIcon' },
+      { category: 'Quote', icon: 'HashIcon' },
+      { category: 'Video', icon: 'VideoIcon' },
+    ]
+
+    // this.blogDetail.blog = {
+    //   "title": "Mouse, sharply and.",
+    //   "content": "Trims his belt and his friends shared their never-ending meal, and the Hatter added as an explanation. 'Oh, you're sure to do with this creature when I find a thing,' said the March Hare. 'Then it.",
+    //   "tags": [
+    //     "Gaming",
+    //     "Video",
+    //     "Fashion",
+    //     "Test"
+    //   ],
+    //   "userId": "2",
+    //   "userFullName": "kevin",
+    //   "createdTime": "2022-12-14 06:38:31.603",
+    //   "bookmarked": "8677",
+    //   "img": "/images/_/_/_/_/MessagePractise/resources/js/src/assets/images/banner/banner-27.jpg",
+    //   "avatar": "/images/_/_/_/_/MessagePractise/resources/js/src/assets/images/avatars/2-small.png",
+    //   "comment": 2
+    // }
+
     // this.$http.get('/blog/list/data/detail').then(res => {
     //   this.blogDetail = res.data
     // })
@@ -331,6 +380,19 @@ export default {
       if (tag === 'Food') return 'light-success'
       return 'light-primary'
     },
+    postComment() {
+      useJwt.postComment({
+        comment: document.getElementById("comment-text").value,
+        blogId: this.$route.params.id,
+      })
+        .then(res => {
+          alert(res.data)
+        })
+
+      document.getElementById("comment-text").value = ''
+      // this.$router.push({ name: 'blog-detail', params: { id: this.blogId } })
+      // return Redirect::refresh()
+    }
   },
 }
 </script>

resources/js/src/views/blog/BlogList.vue

@@ -3,7 +3,7 @@
 
     <!-- blogs -->
     <b-row class="blog-list-wrapper">
-      <b-col v-for="blog in blogList" :key="blog.img" md="6">
+      <b-col v-for="(blog, index) in blogList" :key="index" md="6">
         <b-card tag="article" no-body>
           <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }">
             <b-img :src="blog.img" :alt="blog.img.slice(5)" class="card-img-top" />
@@ -89,7 +89,7 @@
         <h6 class="section-label mb-75">
           Recent Posts
         </h6>
-        <b-media v-for="(recentpost, index) in blogSidebar.recentPosts" :key="recentpost.img" no-body
+        <b-media v-for="(recentpost, index) in blogSidebar.recentPosts" :key="index" no-body
           :class="index ? 'mt-2' : ''">
           <b-media-aside class="mr-2">
             <b-link :to="{ name: 'blog-detail', params: { id: recentpost.id } }">
@@ -160,6 +160,8 @@ import {
 import { kFormatter } from '@core/utils/filter'
 import ContentWithSidebar from '@core/layouts/components/content-with-sidebar/ContentWithSidebar.vue'
 import useJwt from '@/auth/jwt/useJwt'
+import { format } from 'date-fns'
+import { zhTW } from 'date-fns/locale'
 
 export default {
   components: {
@@ -204,13 +206,14 @@ export default {
         var temp;
         res.data.forEach(element => {
           temp = element
+          temp.blogPosted = format(new Date(temp.blogPosted), 'yyyy-MM-dd hh:mm', { locale: zhTW });
           temp.img = require('@/assets/images/banner/banner-27.jpg')
           temp.tags = JSON.parse(temp.tags)
           temp.avatar = require('@/assets/images/avatars/' + temp.userId + '-small.png')
           temp.comment = 2
 
           this.blogList.push(temp)
-          this.blogSidebar.recentPosts.push({id: temp.id, img: temp.img, title: temp.title, createdTime: temp.blogPosted})
+          this.blogSidebar.recentPosts.push({ id: temp.id, img: temp.img, title: temp.title, createdTime: temp.blogPosted })
         });
       })
 
@@ -222,7 +225,6 @@ export default {
       { category: 'Video', icon: 'VideoIcon' },
     ]
 
-
     // this.$http.get('/blog/list/data').then(res => {
     //   this.blogList = res.data
     // })

routes/api.php

@@ -8,6 +8,7 @@ use Illuminate\Support\Facades\DB;
 
 use App\Models\User;
 use App\Models\Message;
+use App\Models\Comment;
 
 /*
 |--------------------------------------------------------------------------
@@ -58,3 +59,30 @@ Route::middleware('auth:sanctum')->post('/get_dataset', function (Request $reque
     $dataset = DB::select($request->sql);
     return $dataset;
 });
+
+Route::middleware('auth:sanctum')->post('/post_comment', function (Request $request) {
+    $request->validate([
+        'comment' => 'required',
+        'blogId' => 'required',
+    ]);
+
+    Comment::insert([
+        'writer' => $request->user()->id,
+        'comment' => $request->comment,
+        'blogId' => $request->blogId,
+        'created_at' => now(),
+        'updated_at' => now(),
+    ]);
+
+    return 'success';
+});
+
+Route::middleware('auth:sanctum')->post('/delete_comment', function (Request $request) {
+    $request->validate([
+        'commentID' => 'required',
+    ]);
+
+    Comment::where('id', '=', $request->commentID)->delete();
+
+    return 'success';
+});