新增 新增BLOG功能

app/Http/Controllers/MessageController.php

@@ -51,7 +51,7 @@ class MessageController extends Controller
      * @param  \App\Http\Requests\StoremessageRequest  $request
      * @return \Illuminate\Http\Response
      */
-    public function storeComment(Request $request)
+    public function storeComment(StoremessageRequest $request)
     {
         //
         $message_comment = MessageComment::Create([

app/Http/Requests/StoremessageRequest.php

@@ -13,7 +13,7 @@ class StoremessageRequest extends FormRequest
      */
     public function authorize()
     {
-        return false;
+        return true;
     }
 
     /**
@@ -25,6 +25,7 @@ class StoremessageRequest extends FormRequest
     {
         return [
             //
+            'content' => 'required|max:255',
         ];
     }
 }

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

@@ -96,7 +96,12 @@ export default class JwtService {
         })
     }
 
-    getData(url, ...args) {
+    postData(url, ...args) {
         return this.axiosIns.post(url, ...args)
     }
+
+    getData(url, ...args) {
+        return this.axiosIns.get(url, ...args)
+    }
+    
 }

resources/js/src/@core/components/app-overlay/AddBlog.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="btn-add-post show"
+  >
+    <!-- We have wrapper because ripple effect give position relative to this absolute positioned btn -->
+    <!-- Hence due to that our btn get lost -->
+    <b-button
+      v-ripple.400="'rgba(255, 255, 255, 0.15)'"
+      variant="info"
+      class="btn-icon"
+      
+    >
+      <feather-icon
+        icon="PlusIcon"
+        size="16"
+      />
+    </b-button>
+  </div>
+</template>
+
+<script>
+import { BButton } from 'bootstrap-vue'
+import Ripple from 'vue-ripple-directive'
+
+export default {
+  directives: {
+    Ripple,
+  },
+  components: {
+    BButton,
+  },
+  
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-add-post {
+  position: fixed;
+    bottom: 5%;
+    right: 30px;
+    z-index: 99;
+
+    opacity: 0;
+    // transform: translateY(100px);
+    transition: all .5s ease;
+
+    &.show {
+      opacity: 1;
+      // transform: translateY(0)
+    }
+}
+</style>

resources/js/src/@core/components/scroll-to-top/ScrollToTop.vue

@@ -51,7 +51,7 @@ export default {
 <style lang="scss" scoped>
 .btn-scroll-to-top {
   position: fixed;
-    bottom: 5%;
+    bottom: 10%;
     right: 30px;
     z-index: 99;
 

resources/js/src/@core/layouts/components/AppBreadcrumb.vue

@@ -1,15 +1,13 @@
 <template>
   <b-row
     v-if="$route.meta.breadcrumb || $route.meta.pageTitle"
-    class="content-header"
-  >
+    class="content-header">
 
     <!-- Content Left -->
     <b-col
       class="content-header-left mb-2"
       cols="12"
-      md="9"
-    >
+      md="9">
       <b-row class="breadcrumbs-top">
         <b-col cols="12">
           <h2 class="content-header-title float-left pr-1 mb-0">
@@ -21,15 +19,13 @@
                 <feather-icon
                   icon="HomeIcon"
                   size="16"
-                  class="align-text-top"
-                />
+                  class="align-text-top" />
               </b-breadcrumb-item>
               <b-breadcrumb-item
                 v-for="item in $route.meta.breadcrumb"
                 :key="item.text"
                 :active="item.active"
-                :to="item.to"
-              >
+                :to="item.to">
                 {{ item.text }}
               </b-breadcrumb-item>
             </b-breadcrumb>
@@ -42,21 +38,48 @@
     <b-col
       class="content-header-right text-md-right d-md-block d-none mb-1"
       md="3"
-      cols="12"
-    >
-      <b-dropdown
+      cols="12">
+      <b-dropdown v-if="($can('upload', 'blog') && this.$route.name.includes('blog'))"
+        variant="link"
+        no-caret
+        toggle-class="p-0"
+        right>
+
+        <template #button-content>
+          <b-button
+            v-ripple.400="'rgba(255, 255, 255, 0.15)'"
+            variant="primary"
+            class="btn-icon">
+            <feather-icon icon="PenToolIcon" />
+            <span class="align-middle ml-50">管理貼文</span>
+          </b-button>
+        </template>
+
+        <b-dropdown-item :to="{ name: 'pages-blog-post' }">
+          <feather-icon
+            icon="PlusSquareIcon"
+            size="16" />
+          <span class="align-middle ml-50">新增貼文</span>
+        </b-dropdown-item>
+
+        <b-dropdown-item href="#">
+          <feather-icon
+            icon="Trash2Icon"
+            size="16" />
+          <span class="align-middle ml-50">刪除貼文</span>
+        </b-dropdown-item>
+      </b-dropdown>
+      <b-dropdown v-if="$can('mange', this.$route.name)"
         variant="link"
         no-caret
         toggle-class="p-0"
-        right
-      >
+        right>
 
         <template #button-content>
           <b-button
             v-ripple.400="'rgba(255, 255, 255, 0.15)'"
             variant="primary"
-            class="btn-icon"
-          >
+            class="btn-icon">
             <feather-icon icon="SettingsIcon" />
           </b-button>
         </template>
@@ -64,35 +87,32 @@
         <b-dropdown-item href="#">
           <feather-icon
             icon="CheckSquareIcon"
-            size="16"
-          />
+            size="16" />
           <span class="align-middle ml-50">Todo</span>
         </b-dropdown-item>
 
         <b-dropdown-item href="#">
           <feather-icon
             icon="MessageSquareIcon"
-            size="16"
-          />
+            size="16" />
           <span class="align-middle ml-50">Chat</span>
         </b-dropdown-item>
 
         <b-dropdown-item href="#">
           <feather-icon
             icon="MailIcon"
-            size="16"
-          />
+            size="16" />
           <span class="align-middle ml-50">Email</span>
         </b-dropdown-item>
 
         <b-dropdown-item href="#">
           <feather-icon
             icon="CalendarIcon"
-            size="16"
-          />
+            size="16" />
           <span class="align-middle ml-50">Calendar</span>
         </b-dropdown-item>
       </b-dropdown>
+
     </b-col>
   </b-row>
 </template>

resources/js/src/@core/layouts/components/content-with-sidebar/ContentWithSidebar.vue

@@ -10,12 +10,17 @@
     <div class="cws-sidebar">
       <slot name="sidebar" />
     </div>
+    <add-blog />
   </div>
 </template>
 
 <script>
-export default {
+import AddBlog from '@core/components/app-overlay/AddBlog.vue';
 
+export default {
+  components: {
+		AddBlog,
+	},
 }
 </script>
 

resources/js/src/@core/libs/acl/utils.js

@@ -19,6 +19,8 @@ export const can = (action, subject) => {
  */
 export const canViewVerticalNavMenuLink = item => can('read', item.route)
 
+export const canManageRoute = item => can('manage', item.route)
+
 /**
  * Check if user can view item based on it's ability
  * Based on item's action and resource & Hide group if all of it's children are hidden

resources/js/src/libs/acl/ability.js

@@ -31,6 +31,7 @@ export const defineRulesFor = (user) => {
             break;
         case 'User':
             can('read', 'all');
+            can('upload','blog')
             cannot('read', 'permission');
             cannot('read', '模板');
             cannot('read', '管理功能');

resources/js/src/router/config.js

@@ -105,17 +105,17 @@ export const settings = {
             },
         },
         {
-            path: '/pages/blog/:id',
-            name: 'pages-blog-detail',
-            component: () => import('@/views/pages/blog/BlogDetail.vue'),
+            path: '/pages/blog/post',
+            name: 'pages-blog-post',
+            component: () => import('@/views/pages/blog/BlogPost.vue'),
             meta: {
-                pageTitle: 'Blog內文',
+                pageTitle: 'Blog發布',
                 breadcrumb: [{
                         text: '列表',
                         to: '/pages/blog/list',
                     },
                     {
-                        text: '內文',
+                        text: '發布',
                         active: true,
                     },
                 ],
@@ -139,6 +139,23 @@ export const settings = {
                 requiresAuth: true,
             },
         },
+        {
+            path: '/pages/blog/:id',
+            name: 'pages-blog-detail',
+            component: () => import('@/views/pages/blog/BlogDetail.vue'),
+            meta: {
+                pageTitle: 'Blog內文',
+                breadcrumb: [{
+                        text: '列表',
+                        to: '/pages/blog/list',
+                    },
+                    {
+                        text: '內文',
+                        active: true,
+                    },
+                ],
+            },
+        },
         {
             path: '/login',
             name: 'login',
@@ -169,4 +186,4 @@ export const settings = {
         },
     ],
 }
-export const _ = undefined
+export const _ = undefined

resources/js/src/views/Login.vue

@@ -224,10 +224,10 @@ export default {
 		validationForm() {
 			this.$refs.loginValidation.validate().then((success) => {
 				if (success) {
-					let formData = new FormData(); //建立form表單
-					formData.append("email", this.userEmail); //將email加入
-					formData.append("password", this.password); //將password加入
-					useJwt.login(formData).then(response => {
+					useJwt.login({
+						email: this.userEmail,
+						password: this.password,
+					}).then(response => {
 						useJwt.setToken(response.data.token);
 						localStorage.setItem('userData', response.data.user);
 						this.$ability.update(defineRulesFor(response.data.user));

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

@@ -52,7 +52,7 @@
 						<hr class="my-2">
 
 
-						<div class="d-flex align-items-center justify-content-between">
+						<div id="scroll-Anchor" class="d-flex align-items-center justify-content-between">
 
 
 						</div>
@@ -65,55 +65,59 @@
 					id="blogComment"
 					cols="12"
 					class="mt-2">
-					<h6 class="section-label">
+					<h6 class="section-label" id="comment">
 						留言
 					</h6>
 					<b-card
-						v-for="(comment, index) in blogDetail.comments"
-						:key="index">
-						<b-media no-body>
-							<b-media-aside class="mr-75">
-								<b-avatar
-									:src="require('@/assets/images/avatars/' + comment.author_id + '-small.png')"
-									size="38" />
-							</b-media-aside>
-							<b-media-body>
-								<h6 class="font-weight-bolder mb-25">
-									{{ formatName(comment.author_id) }}
-								</h6>
-								<b-card-text>{{ formatTime(comment.created_at) }}</b-card-text>
-								<b-card-text>
-									{{ comment.content }}
-								</b-card-text>
-								<b-link>
-									<div class="d-inline-flex align-items-center">
-										<feather-icon
-											icon="CornerUpLeftIcon"
-											size="18"
-											class="mr-50" />
-										<span>回復</span>
-									</div>
-								</b-link>
-							</b-media-body>
-						</b-media>
+						v-if="!(blogDetail.comments.length == 0)">
+						<div class="media-list media-bordered">
+							<b-media no-body v-for="(comment, index) in blogDetail.comments"
+								:key="index">
+								<b-media-aside class="mr-75">
+									<b-avatar
+										:src="require('@/assets/images/avatars/' + comment.author_id + '-small.png')"
+										size="38" />
+								</b-media-aside>
+								<b-media-body>
+									<h6 class="font-weight-bolder mb-25">
+										{{ formatName(comment.author_id) }}
+									</h6>
+									<b-card-text>{{ formatTime(comment.created_at) }}</b-card-text>
+									<b-card-text>
+										{{ comment.content }}
+									</b-card-text>
+									<b-link v-if="false">
+										<div class="d-inline-flex align-items-center">
+											<feather-icon
+												icon="CornerUpLeftIcon"
+												size="18"
+												class="mr-50" />
+											<span>回復</span>
+										</div>
+									</b-link>
+								</b-media-body>
+							</b-media>
+						</div>
 					</b-card>
 					<b-card
-						v-if="(blogDetail.comments.length == 0)"> <!--blogDetail.comments-->
-						<b-media no-body>
-							<b-media-aside class="mr-75">
-								<b-avatar
-									size="38" />
-							</b-media-aside>
-							<b-media-body>
-								<h6 class="font-weight-bolder mb-25">
-									暫無留言
-								</h6>
-								<b-card-text>{{ }}</b-card-text>
-								<b-card-text>
-									趕快來留點甚麼吧~
-								</b-card-text>
-							</b-media-body>
-						</b-media>
+						v-else>
+						<div class="media-list media-bordered">
+							<b-media no-body>
+								<b-media-aside class="mr-75">
+									<b-avatar
+										size="38" />
+								</b-media-aside>
+								<b-media-body>
+									<h6 class="font-weight-bolder mb-25">
+										暫無留言
+									</h6>
+									<b-card-text>{{ }}</b-card-text>
+									<b-card-text>
+										趕快來留點甚麼吧~
+									</b-card-text>
+								</b-media-body>
+							</b-media>
+						</div>
 					</b-card>
 				</b-col>
 				<!--/ blog comment -->
@@ -131,6 +135,7 @@
 								<b-col cols="12">
 									<b-form-group class="mb-2">
 										<b-form-textarea
+											v-model="new_comment"
 											name="textarea"
 											rows="4"
 											placeholder="留言..." />
@@ -138,6 +143,7 @@
 								</b-col>
 								<b-col cols="12">
 									<b-button
+										@click="postComment()"
 										v-ripple.400="'rgba(255, 255, 255, 0.15)'"
 										variant="primary">
 										發布留言
@@ -273,6 +279,7 @@ import { kFormatter } from '@core/utils/filter'
 import ContentWithSidebar from '@core/layouts/components/content-with-sidebar/ContentWithSidebar.vue'
 import useJwt from '@/auth/jwt/useJwt'
 import moment from 'moment'
+import ToastificationContent from "@core/components/toastification/ToastificationContent.vue";
 
 export default {
 	components: {
@@ -305,7 +312,7 @@ export default {
 	data() {
 		return {
 			search_query: '',
-			commentCheckmark: '',
+			new_comment: '',
 			blogDetail: [],
 			blogSidebar: {},
 			nameList: [],
@@ -313,21 +320,22 @@ export default {
 		}
 	},
 	created() {
-		useJwt.getData('/api/message/detail', { 'id': this.$route.params.id }).then(response => {
+		useJwt.postData('/api/message/detail', { 'id': this.$route.params.id }).then(response => {
 			this.blogDetail = response.data;
 		}).catch(error => {
 			console.log(error)
 		});
-		useJwt.getData('/api/message/user', null).then(response => {
+		useJwt.postData('/api/message/user', null).then(response => {
 			this.nameList = response.data;
 		}).catch(error => {
 			console.log(error)
 		});
-		useJwt.getData('/api/message/recent', null).then(response => {
+		useJwt.postData('/api/message/recent', null).then(response => {
 			this.blogSidebar = response.data;
 		}).catch(error => {
 			console.log(error)
 		});
+
 	},
 	methods: {
 		kFormatter,
@@ -345,16 +353,66 @@ export default {
 		formatName(id) {
 			return this.nameList[id];
 		},
+		postComment() {
+			useJwt.postData('/api/message/storeComment', { 'message_id': this.$route.params.id, 'content': this.new_comment }).then(response => {
+				this.blogDetail.comments.push(response.data);
+				this.new_comment = '';
+			}).catch(error => {
+				console.log(error)
+				this.$toast({
+					component: ToastificationContent,
+					props: {
+						title: `錯誤`,
+						icon: 'AlertTriangleIcon',
+						variant: 'warning',
+						text: `發布留言不能為空`,
+					},
+				})
+				// let toaster = 'b-toaster-bottom-center';
+				// this.$bvToast.toast(`發布留言不能為空`, {
+				// 	title: `錯誤`,
+				// 	toaster,
+				// 	solid: true,
+				// 	variant: 'warning',
+				// 	appendToast: false,
+				// })
+				this.scrollToComment();
+			});
+		},
+		scrollToComment() {
+			console.log(location.hash);
+			if (location.hash == '#blogComment') {
+				const element = document.getElementById('scroll-Anchor');
+				element.scrollIntoView({
+					block: 'start',
+					behavior: 'smooth',
+				});
+			}
+		},
 	},
 	watch: {
 		'$route': function () {
-			useJwt.getData('/api/message/detail', { 'id': this.$route.params.id }).then(response => {
+			useJwt.postData('/api/message/detail', { 'id': this.$route.params.id }).then(response => {
 				this.blogDetail = response.data;
 			}).catch(error => {
 				console.log(error)
 			});
+		},
+	},
+	mounted() {
+		let scroll = this;
+		ttt(scroll);
+		function ttt(scroll) {
+			setTimeout(() => {
+				if (document.getElementById('scroll-Anchor') != null) {
+					scroll.scrollToComment();
+				} else {
+					ttt(scroll);
+				}
+			}, 100)
 		}
 	}
+
 }
 </script>
 

resources/js/src/views/pages/blog/BlogEdit.vue

@@ -18,7 +18,7 @@
         <h6 class="mb-25">
           {{ blogEdit.userFullName }}
         </h6>
-        <b-card-text>{{ blogEdit.createdTime }}</b-card-text>
+        <b-card-text>{{ blogEdit.createdTime }}{{ this.$route.params.id }}</b-card-text>
       </b-media-body>
     </b-media>
     <!--/ media -->

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

@@ -69,11 +69,35 @@
                   <span class="font-weight-bold">{{ findComments(blog.id) }} 則留言</span>
                 </div>
               </b-link>
-              <b-link
+              <!-- <b-link
                 :to="{ name: 'pages-blog-detail', params: { id: blog.id } }"
                 class="font-weight-bold">
                 閱讀更多
-              </b-link>
+              </b-link> -->
+              <b-dropdown
+                variant="link"
+                no-caret
+                toggle-class="p-0"
+                right>
+
+                <template #button-content>
+                  <feather-icon style="color: white;" icon="MoreVerticalIcon" />
+                </template>
+
+                <b-dropdown-item :to="{ name: 'pages-blog-edit', params: { id: blog.id } }">
+                  <feather-icon
+                    icon="EditIcon"
+                    size="16" />
+                  <span class="align-middle ml-50">編輯貼文</span>
+                </b-dropdown-item>
+
+                <b-dropdown-item href="#">
+                  <feather-icon
+                    icon="Trash2Icon"
+                    size="16" />
+                  <span class="align-middle ml-50">刪除貼文</span>
+                </b-dropdown-item>
+              </b-dropdown>
             </div>
           </b-card-body>
         </b-card>
@@ -218,6 +242,9 @@ import {
   BInputGroup,
   BInputGroupAppend,
   BPagination,
+  BButton,
+  BDropdown,
+  BDropdownItem,
 } from 'bootstrap-vue'
 import { kFormatter } from '@core/utils/filter'
 import ContentWithSidebar from '@core/layouts/components/content-with-sidebar/ContentWithSidebar.vue'
@@ -244,6 +271,9 @@ export default {
     BInputGroupAppend,
     BImg,
     BPagination,
+    BButton,
+    BDropdown,
+    BDropdownItem,
     ContentWithSidebar,
   },
   data() {
@@ -258,22 +288,22 @@ export default {
     }
   },
   created() {
-    useJwt.getData('/api/message/index', null).then(response => {
+    useJwt.postData('/api/message/index', null).then(response => {
       this.blogList = response.data;
     }).catch(error => {
       console.log(error)
     });
-    useJwt.getData('/api/message/user', null).then(response => {
+    useJwt.postData('/api/message/user', null).then(response => {
       this.nameList = response.data;
     }).catch(error => {
       console.log(error)
     });
-    useJwt.getData('/api/message/count', null).then(response => {
+    useJwt.postData('/api/message/count', null).then(response => {
       this.commentList = response.data;
     }).catch(error => {
       console.log(error)
     });
-    useJwt.getData('/api/message/recent', null).then(response => {
+    useJwt.postData('/api/message/recent', null).then(response => {
       this.blogSidebar = response.data;
     }).catch(error => {
       console.log(error)

resources/js/src/views/pages/blog/BlogPost.vue

@@ -0,0 +1,245 @@
+<template>
+  <b-card
+    v-if="Object.keys(blogEdit).length"
+    class="blog-edit-wrapper"
+  >
+    <!-- media -->
+    <b-media
+      no-body
+      vertical-align="center"
+    >
+      <b-media-aside class="mr-75">
+        <b-avatar
+          size="38"
+          :src="blogEdit.avatar"
+        />
+      </b-media-aside>
+      <b-media-body>
+        <h6 class="mb-25">
+          {{ blogEdit.userFullName }}
+        </h6>
+        <b-card-text>{{ blogEdit.createdTime }}</b-card-text>
+      </b-media-body>
+    </b-media>
+    <!--/ media -->
+
+    <!-- form -->
+    <b-form class="mt-2">
+      <b-row>
+        <b-col md="6">
+          <b-form-group
+            label="Title"
+            label-for="blog-edit-title"
+            class="mb-2"
+          >
+            <b-form-input
+              id="blog-edit-title"
+              v-model="blogEdit.blogTitle"
+            />
+          </b-form-group>
+        </b-col>
+        <b-col md="6">
+          <b-form-group
+            label="Category"
+            label-for="blog-edit-category"
+            class="mb-2"
+          >
+            <v-select
+              id="blog-edit-category"
+              v-model="blogEdit.blogCategories"
+              :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'"
+              multiple
+              :options="categoryOption"
+            />
+          </b-form-group>
+        </b-col>
+        <b-col md="6">
+          <b-form-group
+            label="Slug"
+            label-for="blog-edit-slug"
+            class="mb-2"
+          >
+            <b-form-input
+              id="blog-edit-slug"
+              v-model="blogEdit.slug"
+            />
+          </b-form-group>
+        </b-col>
+        <b-col md="6">
+          <b-form-group
+            label="Status"
+            label-for="blog-edit-category"
+            class="mb-2"
+          >
+            <v-select
+              id="blog-edit-category"
+              v-model="blogEdit.status"
+              :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'"
+              :options="statusOption"
+            />
+          </b-form-group>
+        </b-col>
+        <b-col cols="12">
+          <b-form-group
+            label="Content"
+            label-for="blog-content"
+            class="mb-2"
+          >
+            <quill-editor
+              id="blog-content"
+              v-model="blogEdit.excerpt"
+              :options="snowOption"
+            />
+          </b-form-group>
+        </b-col>
+        <b-col
+          cols="12"
+          class="mb-2"
+        >
+          <div class="border rounded p-2">
+            <h4 class="mb-1">
+              Featured Image
+            </h4>
+            <b-media
+              no-body
+              vertical-align="center"
+              class="flex-column flex-md-row"
+            >
+              <b-media-aside>
+                <b-img
+                  ref="refPreviewEl"
+                  :src="blogEdit.featuredImage"
+                  height="110"
+                  width="170"
+                  class="rounded mr-2 mb-1 mb-md-0"
+                />
+              </b-media-aside>
+              <b-media-body>
+                <small class="text-muted">Required image resolution 800x400, image size 10mb.</small>
+                <b-card-text class="my-50">
+                  <b-link id="blog-image-text">
+                    C:\fakepath\{{ blogFile ? blogFile.name : 'banner.jpg' }}
+                  </b-link>
+                </b-card-text>
+                <div class="d-inline-block">
+                  <b-form-file
+                    ref="refInputEl"
+                    v-model="blogFile"
+                    accept=".jpg, .png, .gif"
+                    placeholder="Choose file"
+                    @input="inputImageRenderer"
+                  />
+                </div>
+              </b-media-body>
+            </b-media>
+          </div>
+        </b-col>
+        <b-col
+          cols="12"
+          class="mt-50"
+        >
+          <b-button
+            v-ripple.400="'rgba(255, 255, 255, 0.15)'"
+            variant="primary"
+            class="mr-1"
+          >
+            Save Changes
+          </b-button>
+          <b-button
+            v-ripple.400="'rgba(186, 191, 199, 0.15)'"
+            variant="outline-secondary"
+          >
+            Cancel
+          </b-button>
+        </b-col>
+      </b-row>
+    </b-form>
+    <!--/ form -->
+  </b-card>
+</template>
+
+<script>
+import {
+  BCard,
+  BMedia,
+  BAvatar,
+  BCardText,
+  BMediaAside,
+  BMediaBody,
+  BForm,
+  BRow,
+  BCol,
+  BFormGroup,
+  BFormInput,
+  BImg,
+  BFormFile,
+  BLink,
+  BButton,
+} from 'bootstrap-vue'
+import vSelect from 'vue-select'
+import { quillEditor } from 'vue-quill-editor'
+import Ripple from 'vue-ripple-directive'
+import { useInputImageRenderer } from '@core/comp-functions/forms/form-utils'
+import { ref } from '@vue/composition-api'
+
+export default {
+  components: {
+    BCard,
+    BMedia,
+    BAvatar,
+    BCardText,
+    BMediaAside,
+    BMediaBody,
+    BForm,
+    BLink,
+    BImg,
+    BRow,
+    BCol,
+    BButton,
+    BFormGroup,
+    BFormInput,
+    BFormFile,
+    vSelect,
+    quillEditor,
+  },
+  directives: {
+    Ripple,
+  },
+  data() {
+    return {
+      blogEdit: {},
+      blogFile: null,
+      categoryOption: ['Fashion', 'Food', 'Gaming', 'Quote', 'Video'],
+      statusOption: ['Published', 'Pending', 'Draft'],
+      snowOption: {
+        theme: 'snow',
+      },
+    }
+  },
+  created() {
+    this.$http.get('/blog/list/data/edit').then(res => {
+      this.blogEdit = res.data
+    })
+  },
+  setup() {
+    const refInputEl = ref(null)
+    const refPreviewEl = ref(null)
+
+    const { inputImageRenderer } = useInputImageRenderer(refInputEl, base64 => {
+      refPreviewEl.value.src = base64
+    })
+
+    return {
+      refInputEl,
+      refPreviewEl,
+      inputImageRenderer,
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+@import '~@resources/scss/vue/libs/vue-select.scss';
+@import '~@resources/scss/vue/libs/quill.scss';
+@import '~@resources/scss/vue/pages/page-blog.scss';
+</style>

resources/js/src/views/table/bs-table/TableMessage.vue

@@ -24,7 +24,7 @@ export default {
 		}
 	},
 	mounted() {
-		useJwt.getData('/api/message/index',null).then(response => {
+		useJwt.postData('/api/message/index',null).then(response => {
 			this.items = response.data;
 		}).catch(error =>{
 			console.log(error)

resources/js/src/views/table/bs-table/TablePost.vue

@@ -24,7 +24,7 @@ export default {
 		}
 	},
 	mounted() {
-		useJwt.getData('/api/foo',null).then(response => {
+		useJwt.postData('/api/foo',null).then(response => {
 			this.items = response.data;
 		}).catch(error =>{
 			console.log(error)

resources/js/src/views/table/vue-good-table/GoodTableMessage.vue

@@ -231,12 +231,12 @@ export default {
     },
   },
   created() {
-    useJwt.getData('/api/message/index', null).then(response => {
+    useJwt.postData('/api/message/index', null).then(response => {
       this.rows = response.data;
     }).catch(error => {
       console.log(error)
     });
-    useJwt.getData('/api/message/user', null).then(response => {
+    useJwt.postData('/api/message/user', null).then(response => {
       this.nameList = response.data;
     }).catch(error => {
       console.log(error)

routes/api.php

@@ -92,7 +92,7 @@ Route::post('/message/user', [UserController::class, 'index']);
 Route::middleware('auth:sanctum')->group(function () {
     //
     Route::post('/message/storeComment', [MessageController::class, 'storeComment']);
-
+    Route::post('/message/storeMessage', [MessageController::class, 'store']);
 });